Makale Özeti

Bu makalede, Blend' ın en kuvvetli özelliklerinden birisi olan animasyon tekniklerini incelemeye çalışıyoruz.

Makale

ExpressionBlend

Merhabalar

Bu makalede, bir önceki Blend ile WPF ile öğrendiklerimize ek olarak Blend' ın bence en kuvvetli özelliği olan animasyon özellikleri kullanmayı inceleyeceğiz.

Expession Blend kurulduktan sonra bize sunulan Örnekleri(Samples) incelediğimizde karşımıza çıkan projeler sanki sihirle yapılmış izlenimi vermektedir. Aynı olayı Windows Vista ile de yaşamaktayız.Butonların efektleri, yükleme çubuklarına kadar varan muhteşem efektler mevcut bulunmaktadır.Daha bir çok örnek ile karşılaşmamız mümkündür.

O uygulamaları gördüğümüz zaman aklımıza ilk gelen, genellikle bu adamlar bunları nasıl yapmış oluyor(Türklüğümüzden ve akıl almaz merakımızdan da kaynaklanan bir durum ayrıca). Sonrada çok zordur.Baksana butonun üstüne geliyorsun renk değiştiriyor, yükleme çubukları nasıl sinema efektleri hareket ediyor.Peki bunlar Adobe Flash ile yapılmadıysa ne ile yapıldı.Ufak bir araştırma ve program incelemesinden karşımıza çıkan en somut örnek Expression Blend oluyor.Neden derseniz.Uyguladığımız bir masaüstü projesinde Flash animasyon olursa göze güzel gözükmeyen bir durum ortaya çıkıyor.Fakat bu masaüstü projesinde sanki bir medya dosyası eklenmişcesine oluşmuş güzel efektler herzaman herkesin gözüne güzel gözükür ve kimse bu duruma karşı çıkmaz.

Harcanılan zaman böyle konularda en büyük sorun olarak düşünülmektedir.Eğer profesyonel iseniz saatler sürecek olan bir işi dakikalar içerisinde bitirebiliyorsunuz.Ama değilsek.Saatler içerisinde bitmesi planlanan işler günler belkide haftalar alabilmektedir.İşte bu noktada çalıştığımız programın öğrenim kolaylığı ve pratikliği ön plana çıkıyor.Bu noktada da yardımımıza Expression Blend yetişiyor.

Sağladığı imkanlardan yararlanarak bu düşüncelerimizi uygulamaya geçirebiliriz.

Geometrik Şekiller

Daha önceki makalelerimizde Expression Blend' ın çalışma ortamında bize vektörel çizimler yapabilme olanağını tanıdığını belirtmiştim.Fakat değinmediğim bir nokta bu şekilleri istediğimiz animasyon sistemlerine dönüştürebildiğimizdi.

İlk olarak yapmamız gereken kafamıza göre bir kaç şekil çizmek olacak.Ben üç tane dörtgen çizdim.


Not:Şekil çizrbilememiz için gerekli araç.Çalışam alanımızın sol tarafında ki toolbox' tadır.



Not:Oluşturduğumuz şekillerin ve formumuzun arka plan renklerini değiştirebilmek için Properties--> Brushes içersindeki özelliklerden yararlanabilirsiniz.

Şekillerimizi oluşturduk.Peki bunun animasyonunu nasıl yapacağız.İlk başta çalışma ortamamızı animasyon için uygun duruma getirmemiz gerekmektedir.



Bu seçenek işaretlidiği zaman karşımıza aşağıdaki gibi bir ekran çıkmaktadır.



Ekranımızı elde ettik.Artık şekillerimizi animasyonlu bir şekile dönüştürmek için karşımızda bir engel kalmadı.

Objects and Timeline menüsünden Default yazan bölgenin yanındaki (+)' ya tıklanarak yeni bir animasyon bölgesi kazanılmış olur.


Şekillerimizin hareketlenmesini bu bölge ile gerçekleştireceğiz.

Elimizde şekillerimizin hareketlenmesi için gerekli bir zaman ayarlayıcımızda var.Bu zaman ayarlayıcımızı nasıl kullanabileceğimizi inceleyelim.

Yukarıdaki şekilde gördüğümüz kadarıyla Windows yazan menü altında çizdiğimiz şekilleri görebilmekteyiz.Sağında yer alan ve zaman belirtilmiş olan bölümde ise şekillerimizin zaman içerisinde yapabileceklerini bu bölümde belirtmekteyiz.

Unutulmaması gereken bir durum.Biz çalışma alanımızı animasyon özelliğini aktif ettiğimiz zaman formumuzun bulunduğu alan otomatik olarak kayıt işlemine başlamaktadır.Zaman değişikliği yaptığımızda eğer form üzerinde herhangi bir oynama yaptıysak o bizim belirlediğimiz zaman ile başlangıç zamanı arasında otomatik olarak bölünerek işleme sokulur.

Formumuzun üzerinde bulunan üç tane dörtgeni sırası ile formumuzun alt kısmına hareket etmesini sağlayalım.Ayrıca bu şekillerimizin formun alt kısmına inmelerinin 1 saniye aldığını düşünerek işlemlerimize başlayalım.



Şekillerimizi bu sayede formun en altına indirmeyi başardık.Biraz daha süslemek gerekirse.Dörtgenlerimiz bir de etraflarında dönerek aşağıya insinler.Bunun için ise.Özellikler deki Transform 'dan yararlanacağız.



Şekillerimizin dönebilmesi için en sağdaki seçeneği seçerek istediğimiz sonuca ulaşabilmemiz mümkündür.


Şekillerimizin animasyon anındaki bir görüntüsü.

Bu kadar işlem yaptıktan sonra ben şahsen karşımıza çıkan kodların nasıl bir şey olduğunu merak etmekteyim.Merak dışında arka planda oluşmakta olan kodlara hakim olamamız projemizin tam olarak istediğimiz şekilde çalışması içinde ideal bir konu olacaktır.

<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="Animasyon.Window1"
x:Name="Window"
Title="Donuyorrr!!!"
Width="640" Height="480">

<Window.Resources>
<Storyboard x:Key="Dortgen" AutoReverse="True" RepeatBehavior="Forever"
>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="rectangle" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
<SplineDoubleKeyFrame KeyTime="00:00:01" Value="6"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="rectangle" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
<SplineDoubleKeyFrame KeyTime="00:00:01" Value="304"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="rectangle1" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
<SplineDoubleKeyFrame KeyTime="00:00:01" Value="-159"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="rectangle1" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
<SplineDoubleKeyFrame KeyTime="00:00:01" Value="195"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="rectangle2" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
<SplineDoubleKeyFrame KeyTime="00:00:01" Value="183"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="rectangle2" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
<SplineDoubleKeyFrame KeyTime="00:00:01" Value="302"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="rectangle" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
<SplineDoubleKeyFrame KeyTime="00:00:01" Value="-1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="rectangle" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
<SplineDoubleKeyFrame KeyTime="00:00:01" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<PointAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="rectangle1" Storyboard.TargetProperty="(UIElement.RenderTransformOrigin)">
<SplinePointKeyFrame KeyTime="00:00:01" Value="1,1"/>
...........................................................................................

...........................................................................................

...........................................................................................

...........................................................................................
<LinearGradientBrush EndPoint="0.566,-0.133" StartPoint="0.576,1.913">
<GradientStop Color="#FF000000" Offset="0"/>
<GradientStop Color="#FF5F70B3" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Fill>
<Rectangle.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="1" ScaleY="1"/>
<SkewTransform AngleX="0" AngleY="0"/>
<RotateTransform Angle="0"/>
<TranslateTransform X="0" Y="0"/>
</TransformGroup>
</Rectangle.RenderTransform>
<Rectangle.LayoutTransform>
<TransformGroup>
<ScaleTransform ScaleX="1" ScaleY="1"/>
<SkewTransform AngleX="0" AngleY="0"/>
<RotateTransform Angle="0"/>
<TranslateTransform X="0" Y="0"/>
</TransformGroup>
</Rectangle.LayoutTransform>
</Rectangle>
</Grid>
</Window>


XAML kodlarına neden hakim olamamız gerekiyor sözüne gelirsek.Dikkat ederseniz şekillerimiz 1. saniyenin sonunda sonlanmaktadır. Eğer sayfamıza yenile butonumuzda yoksa bir seferlik bir ekran olacak ve bir kere projemizi açan kişi ikinci defa açma yanlısı olmayacaktır.Bunu engellemek için kod da mavi renkli olarak belirttiğim kodlar sürekli olarak hareketliliği sağlamaktadır.

Animasyon İşlemleri ile 3 Boyutlu Buton Yapımı

Şekilleri nasıl animasyonel bir biçime dönüştürebildiğimizi gördüğümüze göre artık yapabileceğimiz işlemleri biraz daha ileri götürerek etrafımızda gördüğümüz bir uygulamayı yapabiliriz.

Yazımızın başında da bahsettiğim Vista stili buton yapmak istersek uygun bir program olduğunu belirtmiştim.Ayrıca WPF temel olarak vista uygulamalarının yapıldığı program olarakta yazılımcılar tarafından kabul edilmektedir.

Butonumuzu yapmak için yukarıda anlattığım temel işlemleri en başlarda tekrar uyguluyoruz.Yine bir dörtgen çiziyoruz.Bu dörtgenin butona benzemesi için ovalleştiriyoruz.


Çizdiğimiz şekillerde oluşturulan geçişli renklerde ışık oynamaları için Brush seçeniği seçildiğikten sonra çıkan ok ile yapılabilir.


Yuvarlak içindeki noktalar yardımıyla şeklimize istenen oranda ovallik kazandırılabilir.

Şeklimize ovalliğinide kazandırdıktan sonra ışık oyunları ile 3 boyutluymuş gibi gözükmesini sağlıyoruz.


Oluşturduğumuz şekil ışık oyunları ile 3 boyutluymuş gibi gözükmüştür.

Şeklimiz üzerinde istediğimiz işlemleri bitirdikten sonra şeklimizin buton olma zamanı gelmiş gibi gözükyor.Bu işlemin yapılabilmesi için Tools menüsünün altında ki MakeButton seçeneğinden yararlanabilmekteyiz.



Artık şeklimiz bir buton olmuş durumda.Şimdi vista stili buton yapım işlemine geçebiliriz.Bunun için butonumuzun üzerinde faremizin sağ tuşuna tıklıyarak edit control parts seçilerek butonumuzun şekilsel temel yapısına buton halindeyken ulaşabilmekteyiz.



Edit dememizden sonra alt kısımda çıkan Templates yazan menü altındaki Rectangle yazan seçeneğin üzerinde kopyala & yapıştır işlemi uygulanarak butonun üzerine yeni bir şekil daha olşuturulmuş olur.

Not:Kopyala ve yapıştırma işlemleri yapılırken klavye kombinasyonlarının uygulanması gerekmektedir.Fare ile yapılan işlemler istenen sonucu veremeyebiliyorlar.(Kopyala==CTRL+C ,Yapıştır==CTRL+V)

Yaptığımız işlemler sonucunda karşımıza aşağıdaki gibi bir görüntü çıkmaktadır.


Triggers yazan bölge ile mouse hareketi sonucunda oluşacak olan işlemleri kontrol edebilmekteyiz.

Triggers menüsünün altındaki IsMouseOver=True yazan değere çift tıklayarak fare üzerinde iken ve değilken ki işlemleri kontrol edebiliyoruz.

Aktif iken değerlerin kontrolü için (+)' ya tıklanarak;


Yeni bir zaman aralığı oluşturulur.

Oluşan bölgede şeklimizin daha iyi gözükmesi için sonradan ekledeğimiz şeklin şeffaflığını azaltıyoruz.


Şeffalık değerini %50' nin altında tutmanız göze güzel gözükmesi açısından tavsiyemdir.

Biraz önce şekillerin haraketi için yaptığımız değişikliklerin bir benzerini renkler üzerinde uygulayarak buton için yapıyoruz.



Fare üzerinde iken değişiklik ayarlandıktan sonra benzer değişiklikleri Fare üzerinde değil iken yaparsak istediğimiz sonuca ulaşmış olacağız.


Eklendikten sonra bizden zaman aralığı seçmemiz istenecek biz birinci zaman aralığını değilde yeni zaman aralıpı seçeceğiz.

Bütün işlemlerimizin sonucunda karşımıza çıkan sonuç gerçekten göz kamaştırıcı.3 Boyutlu bir buton yaptık.


Fare butonun üzerinde.


Fare butonun üzerinde değil.

Butonumuzuda oluşturduktan sonra başka yerlerde kullanmak istersek ortaya çıkan kod aşağıdadır.

<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="_3DButton.Window1"
x:Name="Window"
Title="Window1"
Width="640" Height="480" Background="#FF155D6F">

<Window.Resources>
<Style x:Key="buton" BasedOn="{x:Null}" TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<ControlTemplate.Resources>
<Storyboard x:Key="Timeline1" x:Name="Timeline1">
<ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="rectangle1" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
<SplineColorKeyFrame KeyTime="00:00:00.5000000" Value="#FF003FFF"/>
</ColorAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="rectangle" Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="0.4"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="Timeline2" x:Name="Timeline2">
<ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="rectangle1">
<SplineColorKeyFrame KeyTime="00:00:00.5000000" Value="#FFFFFFFF"/>
</ColorAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="rectangle" Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0.4"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="0.4"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</ControlTemplate.Resources>
<Grid>
<Rectangle Stroke="#FF000000" RadiusX="6.5" RadiusY="6.5" x:Name="rectangle1">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.493,-0.232" StartPoint="0.493,0.939">
<GradientStop Color="#FF000000" Offset="0"/>
<GradientStop Color="#FFFFFFFF" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Rectangle Stroke="#FF000000" RadiusX="6.5" RadiusY="6.5" x:Name="rectangle">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.493,-0.232" StartPoint="0.493,0.939">
<GradientStop Color="#FF000000" Offset="0"/>
<GradientStop Color="#FFFFFFFF" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" RecognizesAccessKey="True"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsFocused" Value="True"/>
<Trigger Property="IsDefaulted" Value="True"/>
<Trigger Property="IsMouseOver" Value="True">
<Trigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource Timeline1}"/>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard x:Name="Timeline2_BeginStoryboard" Storyboard="{StaticResource Timeline2}"/>
</Trigger.ExitActions>
</Trigger>
<Trigger Property="IsPressed" Value="True"/>
<Trigger Property="IsEnabled" Value="False"/>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>

<Grid x:Name="LayoutRoot">
<Button Margin="185,109,238,0" Style="{DynamicResource buton}" VerticalAlignment="Top" Height="82" Content="Button" Foreground="#FFFFFFFF"/>
</Grid>
</Window>


Oluşturulan kodların window.resources tarafı kesinlikle alınmak durumundadır.Çünkü bütün görüntüsel işlemler bu bölgede oluşmaktadır.

Son olarak neler yaptığımızı incelemek gerekirse.İlk olarak Blend ile şekillerin nereden çizileceğini gördük.Çizdiğimiz şekillerin formun üzerinde haraket etmesini sağladık.Temel olarak hareket işlemlerini öğrenmiş olduk.Öğrendiğimiz haraketsel işlemlerden yararlanılarak Windows Vista stili buton oluşturmak için gerekli işlemleri uyguladık ve rengi farklıda olsa vista stilinde bir butona sahip olduk.Bu işlemlerin sonunda artık Expression Blend ile animasyonel uygulamalar yapabilecek düzeye gelmiş durumdayız.Bundan sonrası tamamiyle sizlerin hayal güçlerinize ve yaratıcılığınıza kalmış bir durum oluyor.

Umarım yararlı olmuştur.

Projelerinizi yaparken eğlenmeniz dileğiyle.

İyi Çalışmalar...

Desteklerinden dolayı arkadaşım Servet KOÇ' a teşekkürlerimi bir borç bilirim.

Turhal TEMİZER

mail1:turhal@gmail.com

mail2:turhal.temizer@yurticikargo.com

 

Makalemizde anlatılan konular ile ilgili projelere ulaşabilirsiniz.

Makalemizde anlatılan konular ile ilgili projelere ulaşabilirsiniz.