Yazdır

Windows 8/8.1 StoryBoarding & Development

Fatih Bekdemir tarafından yazıldı. Aktif . Yayınlanma Windows 8

 

Merhaba Herkese,

Bu bölümde Windows 8 / 8.1 üzerinde Visual Studio ve Blend kullanarak nasıl uygulama geliştirebileceğimizi ve StoryBoarding kullanarak basitçe nasıl animasyonlar tasarlayıp kullanabileceğimizi görücez.

 

Uygulama geliştirme aracı olarak Visual Studio 2013 RC ve Blend for Visual Studio 2013 RC kullanacağım. Dilerseniz buradan indirebilirsiniz. Tabi bugün yapacağımız örnekler için Visual Studio 2012’yi kullanabilirsiniz.

Visual Studio üzerinde ki hazır template’leri Windows Store uygulaması geliştirirken kullanabiliriz. Ancak şu an Blank App ile başlayacağız.

Boş bir uygulama açıyoruz. İçerisine örnek olarak sol taraftaki toolbox’dan bir buton atıyoruz. Butonu attığımızda xaml tarafını inceleyecek olursak Gridtaglerinin arasına Button tag’inin gelmiş olduğunu görürüz. Butonun content’ini “Animasyon Başlasın” olarak değiştiriyoruz. Bir arka plan rengi ve buton boyutunu ayarlıyoruz.

<Button Content="Animasyon Başlasın" HorizontalAlignment="Left" Margin="90,569,0,0" 
VerticalAlignment="Top" Height="112" Width="256" Background="#FF1597BD" 
FontSize="24.667" Click="Button_Click"/>

Daha sonra, örnek olması açısında basitçe bir bulut, bir elips ve bir de resim tanımladım. Bu tamamıyla örnektir, siz dilediğiniz resim & şekil çizip tanımlayabilirsiniz. Şimdi bunun için gereken kodları yazalım ve örnek çıktıyı görelim.

 <Ellipse x:Name="ellipse" HorizontalAlignment="Left" Height="290.161" Margin="981,172,0,0" Stroke="White" VerticalAlignment="Top" Width="316.5" StrokeThickness="10" RenderTransformOrigin="0.5,0.5">
            <Ellipse.RenderTransform>
                <CompositeTransform/>
            </Ellipse.RenderTransform>
            <Ellipse.Fill>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="Red"/>
                    <GradientStop Color="#FFFFE800" Offset="1"/>
                </LinearGradientBrush>
            </Ellipse.Fill>
        </Ellipse>
        <Image x:Name="image" HorizontalAlignment="Left" Height="359" Margin="534,199,0,0" VerticalAlignment="Top" Width="283" Source="Assets/nicolascage.jpg" RenderTransformOrigin="0.5,0.5">
            <Image.RenderTransform>
                <CompositeTransform/>
            </Image.RenderTransform>
            <Image.Projection>
                <PlaneProjection/>
            </Image.Projection>
        </Image>

Şu ana kadar basit olarak ekrana çeşitli objeler koyduk ve bunlarla bir animasyon hazırlayacağız. Blend kısmına geçmeden önce projemizi kaydedip çalıştıralım. Bunun için F5 tuşuna basmamız ya da Visual Studio üzerinden Local Machine butonuna basmamız yeterli. Bu şekilde uygulama kendi bilgisayarımızda çalışacaktır. Local Machine yerine Simulator’e basarsanız ekranda bir tablet Bilgisayar açılacak ve uygulama onun içerisine deploy edilecektir. Ekran çıktımız şu şekilde olacak.

Şimdi projemizi biraz daha hareketlendirelim. MainPage.xaml’ın üzerine gidiyorum ve sağ tıklayıp Open in Blend diyorum. Ve karşımıza Visual Studio’nun Photoshop’u olarak tarif ettiğimiz Blend açılıyor. Blend üzerinde tasarım ve animasyon yapabileceğimiz birçok araca sahibiz. Hadi birkaçını kullanalım.

Animasyon yaratmaya başlamak için, Blend’de sol tarafta bulunan Objects and Timeline bölümüne geliyoruz ve + işaretine tıklayıp New diyoruz ve karşımıza Create StoryBoard Resource geliyor. Burada yaratacağımız storyboard’a bir isim veriyoruz.

Bir isim verdim ve bir timeline açıldı. Daha sonra örneğin ellipse’i seçiyoruz ve 0:00:000 yazan yerin yanında ki Record Keyframe butonuna tıklıyoruz. Bu işlem ellipse’in yanına bir pin getirecektir.

Daha sonra 0. Saniyenin altında ki sarı çizgiyi tutarak sağa doğru sürüklüyorum ve ellipse animasyonumun kaç saniye süreceğini belirtiyorum. Daha sonra tekrardan Record Keyframe’e basıyorum ve ellipse’imin hareket süresini başlatmış ve bitirmiş oluyorum.

Bu işlemden sonra bu 5 sn’lik sürede elips’in ne yapacağını belirlememiz lazım. Ben bu sürede elipsimin bir yöne hareket ederek küçülmesini ve renk değiştirmesini istiyorum. Bunun için önce elipsimi köşelerinden tutup küçültüyor ve gitmesini istediğim yöne götürüyorum. Bu sayede hangi yöne doğru küçüleceğini belirledik. Daha sonradan Sağ taraftaki properties sekmesinden 5. Saniyede dönüşeceği rengi seçiyorum. Bu işlemi yaptıktan sonra Timeline’da 5’in üzerinde suran sarı çizgimizi 0’a getirelim ve hemen üstündeki Play tuşuna basalım. Bastığımızda animasyonumuzun çalıştığı an nasıl görüneceğini görebiliyoruz.

Elips’le işimiz tamam. Şimdi biraz Nicolas Cage resmimizin transform’uyla oynayalım, yani 3D hareket etmesini sağlayalım. Bunun için yine elips de olduğu gibi objects and timeline sekmesinden image’i seçiyoruz. Record KeyFrame diyip 0 ve 5. Saniye’lere pinlerimizi koyuyoruz. Daha sonra sağ tarafa geçip Properties ekranından Transform’u seçip dilediğimiz x,y,z koordinatlarından yön veriyoruz. 

Son olarak bu hareketler olurken bulutumuzu da yerinde bırakmak olmaz. Onu da basitçe soldan sağa gidecek şekilde yön veriyoruz ve ekrandan çıkartıyoruz.

Animasyonla işimiz bitti. Şimdi bu animasyonu ekrandaki Animasyon Başlasın butonuna tıklandığında başlaması için programlamamız gerekiyor. Bunun için öncelikle Blend üzerinde yaptığımız animasyonu kapatmamız ve kaydetmemiz gerekiyor. Bunun için Object and Timeline da ki X işaretine basarak Close Storyboard dememiz ve daha sonradan Ctrl + S diyerek yaptığımız projeyi kaydetmemiz gerekiyor. Bu işlemi yapıp Visual Studio’ya geri döndüğümüzde “ This file has been modified outside of the source editör. Do you want  to reload it” uyarısı gelicektir. Yes to All dediğimizde Blend’de yaptığımız işler Visual Studio’ya aktarılmış oluyor.

Animasyon Başlasın butonunun Click Event’ine geliyoruz ve şu kodu yazıyoruz. Ben animasyonuma Storyboard1 ismini vermiştim.

private void Button_Click(object sender, RoutedEventArgs e)
{
Storyboard1.Begin();
}

Projemi kaydedip çalıştıralım. Ekranda şu ana kadar ki yaptığımız tasarımı görüyoruz. Animasyon Başlasın butonuna bastığımızda animasyonumuzun 5 sn boyunca hareketlendiğini hep birlikte görüyoruz.