Dasar Animasi Silverlight Dengan Expression Blend

Ngga lengkap rasanya Silverlight tanpa animasi. Bagaikan nyetir mobil Ferari di kecepatan 5 km/jam di jalan tol. Silverlihgt memiliki kemampuan untuk memaksimalkan komponen grafis yang dimiliki PC untuk memberikan user experience yang luar biasa. Kita akan coba bikin animasi sederhana dengan menggunakan Storyboard. Storyboard adalah fitur yang tersedia di Expression Blend untuk kita gunakan dalam membuat animasi. Caranya gampang, mari kita coba sama-sama.

Pertama, buka dulu Expression Blend dan buat baru project Silverlight. Ceritanya, kita akan bikin animasi mobil-mobilan. Jadi, mari kita bikin dulu mobilnya. Ga usah ribet-ribet, kita bikin aja rectangle yang ceritanya akan jadi mobil juga ga apa-apa. Tapi silahkan berkarya loh ya, saya ngga mau ngebatesin.. hehe..

Oke, kalo udah jadi mobilnya, sekarang kita siap untuk bikin animasinya. Di bagian kiri, tepat di bawah tulisan "Objects and Timeline" klik tanda tambah (+) untuk membuat storyboard baru. Beri nama "MobilJalan". Nah, coba lihat perubahan tampilan pada Expression Blend. Di sebelah kiri muncul timeline yang akan kita pake untuk bikin animasinya.

Sekarang, klik pada angka 2, artinya kita akan memberikan posisi akhir mobil pada detik ke-2. Pastikan garis oranye yang menandakan posisi aktif timeline berada pada detik ke-2. Sekarang, gerakkanlah mobil pada canvas (posisi mobil sekarang akan menjadi posisi akhir animasi).

Coba tekan tombol Play (segi tiga yang menghadap ke kanan pada timeline), nah gerak kan mobilnya.. Kalau sudah, tekan tombol "x" persis di bawah tulisan "Objects and Timeline" untuk menutup storyboard. Sekarang, kita akan buat button yang akan men-trigger animasi tersebut. Caranya gampang banget, dari toolbar di sebelah kiri, klik button dan gambarlah sebuah button di canvas.

Sekarang kita sudah punya button, pada bagian Properties paling atas, beri button tersebut nama "ButtonAnimasi" dan ubah tulisan di dalamnya menjadi "Jalan" (mengubah tulisan Button dapat dilakukan dengan cara mengklik 2 kali Button tersebut). Nah, kita udah punya button yang akan menjadi trigger. Sekarang, dalam kondisi ButtonAnimasi terpilih, pada Properties, klik gambar petir (Events) untuk menambahkan event pada button.

Sekarang, di bagian property klik dua kali pada textbox dengan label "Click". Dengan mengklik dua kali pada textbox ini, kita akan membuat handler untuk event tombol ButtonAnimasi jika ia diklik. Saat kita klik, akan terbuka file MainPage.xaml.cs. Kemudian silahkan tambahkan kode seperti di bawah ini:

private
void ButtonAnimasi_Click(object sender, System.Windows.RoutedEventArgs e)

{

MobilJalan.Begin();

}

Nah, sekarang coba run Aplikasi dengan menekan F5, lalu klik tombol "Jalan", maka si mobil akan bergerak. Bisa kan? Kalo udah bisa, coba explore Animasi untuk event lain, misalnya animasi kalau tombol di mouse over dan lain-lain.. Selamat mencoba..

-- Koding Sambil Ngopi --
-- Farhad Alaydrus --