Menerangi Web dengan Si Hitam : Animasi Sederhana
Walaupun Silverlight dapat dikembangkan dengan bermodal Notepad atau teks editor lainnya, tapi tentu saja akan lebih mudah apabila menggunakan tool visual yang lebih user friendly. Tool development untuk Silverlight terbagi atas dua sesuai dengan fungsi, yaitu :
1. Microsoft Expression Blend 2, tool yang ditujukan untuk para designer.
2. Visual Studio 2008 Orcas, tool yang ditujukan untuk para developer.
Microsoft Expression Blend 2
Tool ini bisa digunakan untuk membuat design objek-objek grafik, animasi dan memasukkan media video atau audio secara WYSIWYG (what you see is what you get). Artinya user dapat melakukan editing secara visual dan melihat hasilnya secara langsung. User dapat dengan mudah melakukan drag dan drop objek-objek yang dibuat. Serta dapat dengan mudah mengubah property objek-objek tersebut seperti ukuran, warna dan lain-lain. Pembuatan animasi juga akan sangat mudah dari pembuatan timeline dan membuat pergerakan posisi suatu objek dari waktu ke waktu.
Microsoft Expression Blend 2, selain digunakan untuk membuat aplikasi web untuk Silverlight juga dapat digunakan untuk mendesign antar muka aplikasi desktop. Jadi aplikasi ini akan lebih berguna untuk membuat design yang outputnya berupa file XAML.
File installer Microsoft Expression Blend 2 hanya berukuran 25MB dan dapat di download versi trialnya di http://www.microsoft.com/expression/. Untuk menginstall Expression Blend dibutuhkan .NET Framework versi 2.0 dan 3.0 (atau 3.5). Terlebih dahulu instal .NET Framework 2.0, setelah itu install .NET Framework 3.0 (atau 3.5). .NET Framework 3.0 (3.5) hanyalah merupakan tambahan feature untuk .NET Framework 2.0.
Bagaimana menggunakan Expression Blend dengan contoh membuat animasi sederhana akan diterangkan di bawah ini.
Membuat Animasi Sederhana dengan Expression Blend 2
Berikut adalah tahapan membuat animasi sederhana dengan Expression Blend 2 :
1. Buat Project baru dengan memilih menu File | New Project. Pada window Create New Project terdapat empat project. Pilih Silverlight Application (Javascript). Ketikkan nama project yang diinginkan pada kolom Name. kemudian tekan tombol OK.
Beda antara Silverlight Application (Javascript) dengan Silverlight Application (.NET) lebih kepada versi Silverlight yang telah diterangkan di atas. Silverlight Application (Javascript) bisa dikatakan sebagai project yang mendukung Silverlight 1.0 sedangkan Silverlight Application (.NET) untuk membuat project yang mendukung Silverlight 1.1.
2. Halaman design baru akan ditampilkan dengan nama Page.xaml. Pada halaman ini dapat ditambahkan objek yang kita inginkan. Misalnya ingin menambahkan objek berbentuk lingkaran. Maka pada toolbar yang ada di sisi kiri pilih Ellipse.
Kemudian arahkan cursor mouse ke halaman design (Page.xaml) dan bentuk lingkaran yang kita inginkan.
3. Untuk mengubah warna dari lingkaran yang telah dibuat. Dapat dilakukan dengan mengklik terlebih dahulu objek lingkaran yang telah dibuat kemudian pilih tab Properties yang ada pada sisi kanan. Kemudian pilih warna yang diinginkan.
4. Karena kita akan membuat animasi maka kita mesti mengubah ke mode Animation Workspace dengan cara menekan tombol F7 atau dengan memilih menu Window | Animation Workspace. Maka tampilan tata letak kontrol pada Expression Blend akan berubah seperti berikut.
5. Pada kolom bawah bisa dilihat bagian Object and Timeline. Pilih tanda panah (lingkaran merah) dengan mengkliknya dengan mouse.
Maka akan muncul window baru seperti pada gambar.
Pilih tombol +, dan akan muncul window baru seperti berikut dan tekan tombol OK
6. Maka tampilan bagian Object and Timeline akan berubah seperti gambar berikut.
7. Langkah selanjutnya cukup gerakkan lingkaran yang ada pada halaman design (Page.xaml) ke tempat yang akan menjadi posisi awalnya. Kemudian gerakan garis kuning yang ada pada bagian Object and Timeline ke waktu yang diinginkan, dan lanjutkan dengan menggerakkan lagi lingkaran tersebut ke posisi yang diinginkan. Maka bisa dilihat perubahan pada bagian Object and Timeline seperti berikut.
8. Untuk melihat hasil animasi ini bisa dengan menekan tombol Play (lingkaran merah). Atau dapat juga dengan memilih menu Project | Test Project atau dengan menekan tombol F5 maka secara otomatis akan muncul Internet Explorer yang menampilkan animasi yang telah dibuat.
Visual Studio 2008 Orcas
Tool ini fungsinya akan lebih banyak untuk membuat kode-kode program untuk mengatur objek-objek yang telah dibuat.
Artikel lengkapnya bisa dibaca pada Majalah CHIP edisi bulan depan dengan judul RIA dengan Microsoft Silverlight (insyallah).
Belum banyak yang bisa ditulis tentang Visual Studio 2008 Orcas, karena belum pernah mencoba. Mungkin beberapa hari lagi bisa mencoba setelah mendapat kiriman dari Microsoft (sambil ngelirik Pak Risman) 