Berikut ini adalah paparan langkah-langkah membuat animasi Silverlight sederhana.
Langkah pertama adalah membuat objek pada halaman MainPage.xaml, misalnya object Ellipse berwarna merah. Secara Default, nama object yang ada pada bagian Object and Timeline diberikan secara otomatis berdasarkan tipe dari objek tersebut. Pada gambar di bawah terdapat dua object dengan nama [Ellipse], walau dimana nama itu terlihat sama, tetapi objectnya berbeda. object [Ellipse] pertama berupa lingkaran berwarna merah, sedangkan object [Ellipse] kedua berupa lingkaran yang lebih besar dan berwarna biru.
Bagi yang mempunyai dasar pemrograman, pasti sudah bisa menebak penamaan seperti [Ellipse] mengikuti konsep array. Artinya walau ada dua object dengan nama [Ellipse], tetapi pada kenyataannya akan sangat mungkin terjadi identitas object adalah seperti berikut :
- object lingkaran berwarna merah –>[Ellipse][0].
- object lingkaran berwarna biru –> [Ellipse][1].
Setiap object yang ada pada bagian Object and Timeline dapat diubah namanya sesuai keinginan, dengan cara klik kanan pada nama object yang ada pada bagian Object and Timeline, kemudian pilih Rename.
Kalau diperhatikan pada kode MainPage.xaml seperti berikut di bawah. Pada baris ke-8 dan ke-9, dapat dilihat terdapat atribut x:Name pada object Ellipse dengan nilai yang sama dengan nama object yang bisa dilihat pada bagian Object and Timeline.
1: <UserControl
2: xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3: xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4: x:Class="SilverlightApplication1.MainPage"
5: Width="640" Height="480">
6:
7: <Grid x:Name="LayoutRoot" Background="White">
8: <Ellipse x:Name="lingkaranMerah" Fill="Red" Stroke="Black" Height="51" HorizontalAlignment="Left" Margin="35,40,0,0" VerticalAlignment="Top" Width="57"/>
9: <Ellipse x:Name="lingkaranBiru" Fill="#FF0D00FF" Stroke="Black" Height="71" HorizontalAlignment="Left" Margin="92,108,0,0" VerticalAlignment="Top" Width="73"/>
10: </Grid>
11: </UserControl>
Untuk membuat animasi Silverlight sederhana, maka terlebih dahulu ubah workspace ke mode Animation dengan cara memilih Window > Workspaces > Animations.
Setelah itu tambahkan Storyboard dengan cara memilih tanda + (pada lingkaran kuning), kemudian berikan nama untuk Storyboard tersebut, misalnya Gerakan. Setelah itu akan dapat dilihat bagian Object and Timeline berubah seperti berikut ini. Pada lingkaran kuning di atas, dapat diperhatikan statusnya adalah “Gerakan timeline recording is on”, artinya setiap kita menggerakkan object maka akan direkam.
Pertama pilih object yang akan digerakkan, misalnya lingkaranMerah, kemudian klik tanda yang dilingkari kuning, maka akan didapat titik awal dari lingkaran merah. Kemudian coba geser waktu yang ada pada timeline ke detik ke-2 dan gerakkan object lingkaran merah pada lokasi yang diinginkan seperti gambar di bawah ini.
Untuk melihat gerakan, dapat diklik pada tanda Play yang ada pada lingkaran kuning. Efek gerakan animasi ini dapat diubah dengan memilih titik pada timeline pada objek yang diinginkan, seperti pada lingkaran merah di bawah (pada gambar di atas). Setelah memilih titik tersebut, maka pada bagian Properties yang ada di sebelah kanan akan dapat dilihat EasingFunction seperti pada gambar di bawah ini. EasingFunction merupakan efek-efek gerakan animasi yang sudah disediakan oleh Blend.
Saatnya melihat via browser, pilih Project > Build Project kemudian pilih Project > Run pada menu. Dan web browser pun terbuka dengan content Silverlight yang telah dibuat. Tetatapi…..tidak ada gerakan apalagi animasi. Kenapa?
Jawabnya, karena memang tidak ada perintah untuk menjalankan animasi tersebut. Sekarang akan dicoba memberikan perintah atau lebih tepatnya behaviour untuk menjalankan animasi.
Pertama ubah tampilan Blend ke mode Design dengan memilih menu Windows > Workspaces > Design.
Pilih Assets > Behaviours, kemudian drag ControlStoryboarAction pada LayoutRoot seperti pada gambar di atas. Kemudian pada bagian Properties, pilih New dan pilih EventTrigger, setelah itu isi EventName dengan Loaded dan pilih Storyboard dengan nama storyboard yang telah dibuat.
Lakukan proses Build dan Run, maka animasi akan langsung dijalankan pada web browser.
Selamat mencoba.
0 comment(s)