Bu tekerlek kendi etrafında dönecek.
Adım adım yapalım.
1. ExB'de yeni bir proje açın. Adına "Tekerlek" diyelim. Önemli bir nokta proje adlarına rakam ile başlamayın. Aksi takdirde ExB kodlama yaparken şaşırıyor ve bu ilk rakamı başka bir karakter ile değiştiriyor. O nedenle "2.Ders" gibi bir proje adı kullanmayın.
2. User Control'ün enini ve boyunu 40x40 yapınız. User Control altındaki Layout'u silip yerine boş bir Canvas ekleyin. Canvas'ı toolbox'dan seçeren eleyebilirsiniz. Canvas'ın da enini ve boyunu 40x40 yapın, marjinleri 0'layın. Arka plan rengini beyaz yapın. Daha sonra toolbox'dan daire ve dikdörtgen araçlarını kullanarak aşağıdaki gibi basit bir tekerlek yapın. Dairenineni ve boyu 40x40, marjinleri de 0 olsun. Daha sonra daire ve dikdörtgeni seçin (Ctrl basılı), sağ tıklayın ve Group Into>Canvas yapın. Bu sayede döndürme hareketini her birine ayrı ayrı vermektense, onları gruplayan Canvas'a vereceğiz.
3. Bu yeni Canvas'a bir isim verin. Ben "TekerlekCanvas" dedim.
4. Şimdi gelsi sıra animasyonu hareketi olan dönme hareketini tanımamaya. Bunun için önce animasyonun oynayacağı bir plan ekliyoruz. ExB'de buna StoryBoard deniyor. Storyboard eklemek için önce F6'ya basarak animasyon moduan geçiyoruz. Bu mod ekrana storyboard paneli açıyor. Tekrar F6'ya basarak bu paneli kapatabilirsiniz. Şimdilik açık kalsın. Animasyon modu aşağıdaki gibi bir görünme sahip.
5. Animasyon modundayken, ilk önce yeni bir storyboard ekliyoruz. "Object and Timeline" penceresindeki "+" işareti ile yani storyboard'umuzu ekliyoruz. Burada isim vermek önemli. Storyboard'umuza isim verirken yine ilk harf rakam olamadan, içerisinde boşluk ve noktalama işaretleri olmayan bir kelime seçiyoruz. Ben "TekerlekDon" dedim.
6. Storyboard eklenince, aynı panele bir zaman çizelgesi ekleniyor. Tüm yapacağımız bu zaman çizelgesinde istediğimi saniyelerde nasıl bir görüntü oluşsun onu ayarlamak. Zaman çizelgesi toplam 42 dakikalık (neden 42 bilmiyorum) biz zamanı gösteriyor. Saniye saniye (hatta mili saniyeler de var) karelerden oluşabilen bir çizelge. İstediğimiz kareye gitmek için sarı çizgiyi üstünden tutup çizelge üzerinde hareket ettirmek yeterli.
7. Sıfırıncı kareye geliyoruz ve bir anahtar kare ekliyoruz. Bunu çizelgenin üst tarafındaki beyaz sıfır ve artı işareti (0+ benzeri) butonuna tıklayarak yapıyoruz. Aynı şekilde 1. saniyeye geliyoruz ve yine bir anahtar kare ekliyoruz. Anahtar kare, çizimlerimizin o andaki durumlarını belirlemek için belirlediğimi kareler. Aralardaki değişimleri kendisi yapıyor.
8. 1 saniyede geliyoruz ve "TekerlekCanvas" grubunun seçiyoruz. Daha sonra Transform penceresinden rotate özelliğini 360 yapıyoruz. Yani 0. saniyede ilk hali olan tekerleğimizi, 1. saniyede 360 derece dönmüş hale getiriyoruz. Bunu yapınca zaman çizelgesinde 0. ile 1. karelerin arası gri oluyor. Bu aradaki değişimin otomatik olarak yapıldığı belirtiyor.
9. Dönme hareketi (yeni yapılan tüm hareketler gibi) sadece 1 kez oynatılır ve sonra durur. Bunu sürekli hale getirmek için "TekerlekDon" storyboard'unu seçip özelliklerden "RepeatBehavior:Forever" yapıyoruz. Bu şekilde bir kez başladıktan sonra, komut ile durdurulmadığı sürece hareket tekrar edecek demektir.
10. Şimdi animasyonumuzu oynamaya başlaması için kod yazmamız gerekiyor. Aslında ExB 4.0 ile artık bu işi kod yazmadan da yapabiliriz. "Assets > Behaviors" sekmesinin altında, hangi nesneye, ne yapınca (event), sonuç olarak ne yapsın mantığı ile davranışlar kazandırmak mümkün. Ancak ben şu anda tüm detayları bilmiyorum. O nedenle size code-behind kodları yazarak aynı işi çözeceğim. Projeye başlarken dil olarak C# seçtiğimizi unutmayın. C# bildiğinizi varsayarak bu adımları atıyorum. (Visual Basic de olur).
11. İstiyorum ki uygulama yüklenince (loaded) animasyon oynamaya başlasın, ve üzerine her tıkladığımda (MouseLeftButtonDown ya da Up) bir durup bir devam etsin (Pause/Resume). Bunun için 2 laya (event'e) kod yazmam gerek: Birinncisi "Canvas_Loaded()", ikincisi "TekerlekCanvas_MouseLeftBottunDown()" eventlerine kod yazmak. Bunun için önce "Objects and TimeLine" kısmından "Canvas"ı seçiyorumi ardından Properties penceresinde Event listesini açıp oradan istediğim event'i çift tıklıyorum. Tıkladığım anda beyaz bir kod penceresi açılıyor.
12. İlk önce Canvas_Loaded() event'ine animasyona başlaması için kod yazıyorum:
private void Canvas_Loaded(object sender, System.Windows.RoutedEventArgs e)
{
// TODO: Add event handler implementation here.
this.TekerlekDon.Begin();
IsPlaying = true;
}
13. Bu kodda IsPlaying diye bir değişken var. Bu değişken global olarak (event'in dışında) tanımlanmış boolean bir değişken. Birazdan animasyonu bir durdurup bir oynakmak için bu değişkeni kullanacağım. this kelimesi User Controlü temsil ediyor. Bu nedenle kontrol etmek istediğimiz nesnelerin sanki onu alt nesneleriymiş gibi araya nokta "." koyarak isimleri ile ulaşabiliyoruz (yaşasın nesne tabanlı programlama :) )
14. İlk kodlarımız yazdıktan sonra dikkat edeceğimiz bir başka nokta kodu nereye yazdığımız farkında olmak. Kodu "MainPage.xaml.cs" dosyasına yazıyoruz. Microsoft NET platformundan sonra arka planda çalışan kodları ayrı bir sayfada tutup kodlayanların işini kolaylaştırma istemiştir. Derleme sırasında bu dosya da XAP dosyasının içine eklenir. Ancak geliştirme aşamasında farklı 2 dosya olarak saklanır. Kod yazma ekranınızın üzerinde hangi dosyada olduğunuzu gösteren sekmeler vardır. Önceki görüntüye dönmek için MainPage.xaml segmesin tıklamanız yeterli.
15. Şimdi "TekerlekCanvas" nesnemizi seçin event listesinde "MouseLeftbuttonDown" kısmına çift tıklayarak yine kod penceremizi açıyoruz. Buraya da "eğer animasyon oynuyorsa duraklat, duraklatılmış ise kaldığı yerden devam ettir" kodunu yazacağız:
private void TekerlekCanvas_MouseLeftButtonDown(object sender, System.Windows.Input.MouseButtonEventArgs e)
{
// TODO: Add event handler implementation here.
if(IsPlaying)
{
this.TekerlekDon.Pause();
IsPlaying=false;
}
else
{
this.TekerlekDon.Resume();
IsPlaying = true;
}
}
16. İşlem tamam. Eğer bir noklama hatası vb. yapmadıysanız çekinmeden F5'e basın. Tarayıcınızda aşağıdaki gibi animasyonunuzu döner halde görmeniz gerekiyor. Ben "Kaynağı görüntüle" dediğim için ekranımda "Testpage.html" sayfasının kodlarını da görüyorsunuz. Aşağıdaki resimde tekerlek dönmüyor ama aslında dönüyor. Bu bloğa silverlight uygulaması ekleyemediğim için gösteremiyorum.
17. Son olarak "Kaynağı göster" dememin nedeni, bu tekerleği başka bir HTML sayfasında göstermek istediğinizde almanız gereken kodları göstermek. Bu kodlar istediğiniz bir HTML sayfasına eklerseniz, veeee "Tekerlek.xap" dosyasını aynı klasöre koyarsanız silverlight uygulamanız o sayfada çalışacaktır.
Bugünlük bu kadar. Görüşmek üzere.
Halil Ersoy
Hiç yorum yok:
Yorum Gönder