WPF ve Silverlight Animasyonlarına giriş - 1
Microsoft yeni nesil işletim sistemi Windows Vista 'yı çıkardığında en çok dikkat çeken özellikler çoğunlukla görsel odaklıydı. Camsı şeffaf pencereler , havada 3 boyutlu birbiri içerisine geçişen çalışır durumdaki programlar ( Aero özelliği ) ve özellikle Chess oyunu .
Aslında Microsoft bir devrimin peşindeydi. Bütün bir işletim sisteminin kullandığı grafik arayüzü XML tabanlı yeni bir programlama dili XAML ile geliştirilmiş WPF motorunu kullanmaya başlamıştı. .Net Framework 3.0 ; Framework 2.0'ın tüm çekirdek yapısının üstüne 4 adet yeni uygulama ile geliştirilmişti ancak duyurulduğu ilk anda en çok WPF ile öne çıkmıştı.
WPF daha önce hiç tecrübe edilmemiş vektörel , gerçek zamanlı 3D etkileşimler,HD Videolar ile çok daha görsel masaüstü deneyimleri sunuyordu ve ilk kez bu uygulamaları open source(açık kaynaklı) tutuyordu. XAML kodları ile WPF uygulamaları geliştirebilmek için çok geçmeden de Expression tasarım ürünlerini duyurdu. Expression Design XAML kodlu vektörel grafikler tasarlamamıza imkan veriyor,bu arayüzlere interaktivite ve data bağlamamıza imkan vericek program olarak ta Expression Blend 'i duyurmuştu.
Expression Media ile de bu yeni sektör standartlarına sahip dosyalar üzerinde dosya yönetimi daha kolaylaşıyordu. WPF uygulamalarının internete taşınması noktasında ilk başlarda WPF-e (WPF-everywhere) adı kod adı benimsendi ve WPF uygulamalarını internete taşıma hayali başladı. Bu noktada bir diğer Expression aile üyesi Expression Web ile .Net uyumlu HTML tasarımı ve geliştirilimi yapılabilinir hale gelinmişti.Her ne kadar Microsoft'un efsanevi HTML Editörü Frontpage'in yenisi gibi adlandırılsa da Expression Web ; aslında çok farklı bir vizyonda , çok güçlü bir takımın üyesiydi,Frontpage'in yaptıklarını yeni web standartları XHTML;CSS;XML;Javascript;AJAX .. uyumlu yapabiliyordu.
Daha da önemlisi Expression Web .Net projeleriyle uyumlu olması ve WPF uygulamalarının internette de aynı kullanıcı deneyimlerini alabilmesi için ileride Silverlight adını alacak WPF-e çalışmalarını HTML 'in tutması gerektiğinden Silverlight arayüzlü internet siteleri tasarlamamızı sağlayan Expression tasarım programlarının Internet'e çıkış ayağı ve Visual Studio ile ortak dili olacaktı.
Ancak burada unutulan artık internette de gerçek bir multimedya zenginliği,veritabanı ne olursa olsun .Net ile tam uyumlu bir arayüz ve daha önemlisi gerçek ve anlık 3D yani 3 boyutlu bir internet arayüz altyapısından bahsediliyordu.
Bugün Expression Blend September Preview ile size basit bir Windows-Based(WPF) ve internet için Silverlight(WPF-e) animasyonu yapmayı anlatacağım.Bu programlarınız yoksa ve bu tanışmak isterseniz www.microsoft.com/expression adresinden 60 günlük deneme sürümlerini indirebilirsiniz. Blend programı için ayrıca sisteminizde .Net Framework 3.0 yüklü olması gerekiyor,deneme sürümlerini indirdikten sonra verilen yerlerdeki linklerden ücretsiz indirebilirsiniz,eğer sisteminiz Vista ise .Net Framework 3.0 beraberinden geldiğinden bir işlem yapmanız gerek yok.
Microsoft Expression Blend programını çalıştırdığınızda karşınıza siyah bir ekran gelecektir. Expression ürünlerinin Web haricinde hepsi siyah arayüzlü. İlk başlarda zorlansanız da zamanla alışıyorsunuz. Ekranın solunda tasarım programı olduğunu gösteren bir toolbarımız var. Hemen yanında da trigger yani Event yani olaylardan tetikleyicileri seçeceğimiz kısım var.Yani butona tıklanınca hangi animasyon ( buradaki adı stroyboard ) oynasın , veya dışarıdan bir içerik yüklendiğinde hangi yazıyı yazsın gibi. O kısmın altında animasyonlarımızı oluştururken kullanacağımız şuanda girişte kapalı olan Timeline ve Objects kısmı var. Animasyon yapacağımız zaman o kısım açılacak. Onun da altında Window başlığı altında tasarım programlarının vazgeçilmezi Layer kısmı var.Tasarıladığımız elementler adları ile burada yer alıyor.Göz ve kilit Adobe ürünlerindekiler gibi çalışıyor burada da. Sağ üst kısımda da Project & Properties ve Resources kısmı var.Buradan Project kısmı ile çalışmalarınızı bir proje altında görebilir ve çift tıklarak ilgili programlar ile açabilirsiniz. Properties kısmı ise aynı Adobe ürünlerindeki sağ kısım gibi çizdiğiniz tasarımların ek özelliklerini buradan değiştirebileceğiz. Resources ise projenizde kullandığınız kaynakları gösteren Flash'taki Movie Explorer benzeri bir kısayol penceresidir.
Blend arayüzü ile yabancılığınızı atmak için gelin hemen alıştırmalara başlayalım ve bir çalışma açalım.File-New takibinden sonra Blend size alt ekrandaki gibi bir WPF Uygulamasımı , WPF Kütüphanesinden bir çalışmayımı yoksa Javascript tabanlı internet için tasarlanacak bir Silverlight(1.0) projesimi açmak istediğinizi soracak. Bu ilk uygulamamız da basit bir buton ve ona tıklanınca animasyon yapacağız ve bu denemeyi hem WPF hem de Silverlight 1.0 için Javascript kodlarıyla birlikte göstereceğim.Böylelikle Expression Blend'in WPF 'teki şuanki yerleşik toollarını ve Silverlight'a adapte sürecini daha iyi algılayacağınızı düşünüyorum.
Sahnemize bir buton eklemek için sağ panelin en altındaki oka basıyoruz ve açılan Asset Library bizim projemize ekleyebileceğimiz en çok kullanılan elemanları getiriyor.Bu listeyi uzatmak için altta göstermeye çalıştığım gibi ekranın sağındaki Show All 'a tıklayalım. Button örneğini tutalım ve sahneye sürükleyelim. Sahnedeki butonumuzu köşelerinden tutarak istenilen boyutlara getirin. Button 'un özelliklerini mesela Button yazısını Tıkla yazısı ile değiştirmek istersek Buton seçiliyken sağ kısımdaki Common Properties kısmından Content kutucuğuna "Tıkla" yazabiliriz . Hemen onun altında Cursor seçimini Hand yaparsak aynı Flash'ta olduğu gibi butonun üzerine geldiğinde mouse bir el imlecine dönecektir.Altta yer alan text kısmından da yazının fontu,rengi ve büyüklüğünü değiştirebilirsiniz.
Şimdi ise bu butonumuza animasyon kazandırmaya başlayacağız. Blend 'de butonların etkileşimleriyle çalıştıracakları animasyonları öncelikle ayrı ayrı Storyboard'larda oluşturuyoruz ve daha sonrasında bu storyboardları trigger yani tetikleyici unsurları belirterek mesela mouse butonun üzerine gelince veya tıklayınca gibi çağırıyoruz. Şimdi butonun üstüne gelince büyüme efektini kazandıracak bir Stroyboard oluşturalım.bunun için Objects and Timeline kısmından alttaki gibi Open,Create or manage Storyboard diyoruz.
Gelen ekranda da + işaretine tıklayarak yeni bir Storyboard oluşturuyoruz ve adını buton_ust verelim.Timeline adlarında Türkçe karakter ve boşluk vermemeye çalışın.
Çalışma sahnemizin hemen yanına bir Timeline açıldı. Bu zaman çizelgesinde sarı çizgi sahneden gösterilen zamanda durur.Bu sarı çizgiyi tutarak 1.sn kadar çekin.1.sn de iken altta gösterdiğim Record Frame ile Flash'taki insert keyframe mantığı gibi bir keyframe ekleyelim ve butonu 1.sn biraz daha büyütelim. Böylelikle yapmak istediğimiz mouse butonun üzerine geldiğinde buton büyüyecek.
Timeline üzerinde timeline adı yazan yerin sağında çarpı işaretine tıklayın ve timeline kapayalım. Şimdi bir Storyboard oluşturduk ancak ne zaman bu storyboardun oynayacağını göstermedik.Yani triggerını. Sahnemizde butonu seçelim ve Trigger panelinden alttaki gibi default gelen Window.Loaded işaretine tıklayalım.Alt kısımda When ile başlayan trigger seçenekleri geldi,Window seçip bir altta bulunan Buttonumuzu seçelim.
Butonu seçtikten sonra bu butonun üzerine gelindiğinde animasyon1 oynasın mantığıyla MouseEnter seçiyoruz. Buradaki Mouse Down mouse tıklayınca,Mouse Leave tıklamadan ayrılmak ayrıca MouseLeftButtonDown gibi sol tuşla butona tıklanınca veya çok ilginç olan MouseRightButtonDown yani sağ tuşla butona tıklayınca gibi seçeneklerimiz varçEvet Flashtaki sağ tık engeli burada yok WPF ve Silverlight'ta sağ tuş ile de etkileşim deneyimlerimizi zenginleştirebileceğiz.
Aynı mantıkla şimdi de mouse butonun üzerinden ayrılınca ilk haline dönsün istiyoruz. Bu işlem içinde önce storyboard oluşturmamız gerekiyor ve daha sonra yine trigger ile mouseLeave vererek bu animasyonu bu mouse işlemi ile ilişiklendirmeye. Hemen timeline yanındaki + işaretine tıklayın ve daha önceki buton_ust animasyonuna tıklayın.Timeline gelecektir.Tekrar + işaretiyle girdiğinide bu sefer alttaki ekran gelecek ve daha önce tanımladığınız storyboardlar burada gözükecektir.MouseEnter'a verdiğimiz büyüme efektinin aynısını yaparak geri ilk haline kavuşsun istiyorum.Bu aynı işlemi kendi elimle yapmak yerine altta gösterdiğim gibi bir stroryboardu Duplicate ederek çoğaltabiliyoruz.
Ancak oluşan buton_ust_Copy1 storyboardu 1e 1 butonust le aynı özellikte yani buton büyüyor,ben bunu aynı yere erişerek bu sefer alttaki gibi Reverse StoryBoard dersek butonun büyüme efekti küçülmeye dönecektir ve mouse geri çekince yani mouseLeave triggerına bunu atadığımızda işlemimiz tamamlanmış olacak.
Aynı daha önceki adımdaki gibi Buton seçiliyken When Button MouseLeave buton_ust_Copy1 play diyelim. Böylelikle mouse Button'umuza giriş(mouseEnter) ve çıkışta (mouseLeave) yapılacak animasyonları storyboardlar ile tasarlamış ve triggerlar ile atamış olduk.Çalışmanızı her zaman Project - Test Solution ile önizleyebilirsiniz,F5 de kısayoludur. Gelelim mouse Buttonumuza çift tıklayınca ( MouseDoubleClick) yapacağı animasyonu tasarlamaya ve triggerlardan seçmeye.
Ve son olarakta butonla mouse etkileşimlerden en önemlisi mouse'a tıklanınca da basit bir top animasyonu yapalım ve eşlemeyi görelim. Öncelikle animasyonu yapalım. Önceki adımlardaki gibi alttaki kısımdan Storyboard kısmını açalım.Storyboard kısmında daha önce yarattığımız MouseEnter ve MouseLeave için animasyon storyboardlarımız var.+ işaretine tıklayıp animasyon1 adı ile asıl butona çift tıklatıldığında oynayacak animasyonu tasarlayalım. Animasyon1 timeline kısmında 1.keyframe'de bir kırmızı kare çizdim ve Appearance kısmında Opacity'sini %0 düşürdüm. Brushes kısmından Stroke sekmesinin yanındaki küçük noktaya tıklayıp reset diyerek stroke yani çeperini de kaldırdım. Daha sonra 1 sn gelerek keyframe ekledim ve aynı karenin Alpha'sını %100 yaptım. Böylelikle görünmezden bir buton görünür hale gelecek. X çarpıya tıklayarak timeline kapadım.
Aynı şekilde son adım olarak bu yarattığıomız storyboardu MouseDoubleClick triggerına eşlememiz gerekiyor. Hemen butonumuzu sahneden seçip(seçiliyken triggera buton eklenir) sağdaki menuden default gelen Window Loaded yerine Button diyip MouseDoubleClick seçiyoruz. Yandaki + simgesine tıklayarak ta başlayacak storyboardtan animasyon1 seçip - Begin diyoruz.
En son durumda sağdaki Trigger penceresinde 3 adet trigger ve iletili storyboardumuz aşağıdaki gibi olmuş oluyor. Buradan da diğer triggerları vererek , ekleyerek veya kaldırarak deneme-yanılma ile animasyonumuzu geliştirebiliriz.
Buraya kadarki kısımda Expression Blend ile temel bir WPF animasyonunu 1 adet buton ve animasyonla masaüstü uygulamaları olacak şeklide tasarladık. Bundan sonraki noktada yeni proje açarken Silverlight projesi seçerek aynı basit işlemi 1 adet buton ve animasyonla göstereceğim ancak projemizi Silverlight açtığımızda Assets kısmında Button bulamayacağız,Trigger'lar da elle yazmamızı gerektirecek. Silverlight 1.0 'da kare çizerek Javascript kodları ile butonlarımızı tanımlayacağız ve triggerlarını kod ile vereceğiz.
Altta Flash'taki buton etkileşimlerinin Silverlight 1.0 'daki karşılıklarını göstermeye çalıştım. Bu adlandırmalara alışmamız gerekiyor. Sonraki yazımda aynı projeye bu grafik ile başlayaıp Silverlight uygulaması yaparak linkini paylaşacağım.Sorularınız ve takıldığınız noktalar mutlaka olacaktır eposta atmaktan çekinmeyin. 
Faydalı olması dileğiyle ....
