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 --

Aplikasi Windows Tanpa Window

Windows Presentation Foundation memungkinkan kita untuk membuat aplikasi Window tanpa Window. Nah loh.. Jadi istilahnya kita akan bikin jendela tanpa frame. Kita akan coba bikin jendela tanpa frame itu di Expression Blend 3. Jadi, pertama mari kita buka Expression Blend 3, lalu pilih project WPF Application. Nah, sekarang kita mau bikin window yang bentuknya round-rectangle.

Jadi, kita bikin aja rectangle di Expresion Blend seukuran Window kita. Pada bagian Properties, atur Radius X dan Radius Y menjadi 20 untuk membuat sudut rectangle itu “bulet”. Jreng, jadilah calon window kita. Ubahlah warna rectangle itu sesuai selera. Kalo udah, sekarang klik layer “Window”.

Kemudian, dalam kondisi Window terpilih, pada Properties ceklis pilihan Allow Transparency.

Nah, sekarang window kita udah ngga ber-frame, tapi bentuknya masih kotak. Sekarang, dalam kondisi layer Window terpilih, pilihlah No Brush sebagai warna background Window, dan Jreng, hilanglah si Window kotak itu.

Sekarang silahkan jalankan aplikasi kita itu dengan menekan tombol F5 dan lihat keajaiban apa yang terjadi..


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

Photoshop to Expression Blend

Photoshop, tool desain keluaran Adobe yang udah sering banget kita denger. Desainer biasanya pasti jagoan banget make Photoshop. Saya pribadi, dalam membuat desain aplikasi, seneng ngedesain pake Photoshop sebelum saya transformasikan ke dalam form aplikasi. Tapi biasanya apa yang udah saya bikin keren-keren di Photoshop jadinya biasa aja di form aplikasinya (biasanya desain keren ngga bisa diulang dua kali, hehe). Nah, untungnya, Microsoft Expression Blend memungkinkan kita untuk meng-import file psd langsung ke XAML pada aplikasi Silverlight atau WPF kita. Disupportnya file psd ini merupakan bagian dari interoperability Microsoft yang sekarang semakin gencarnya. Oke, mari kita cobain..

Pertama, sediakan dulu file photoshop yang akan kita import. Sebelum diimport ke XAML, sebaiknya susun dulu layer-layer dalam photoshop dengan rapi. Beri nama yang jelas untuk setiap layer. Misalkan, gambar tombol berilah nama “MyButton” atau nama apapun yang sesuai dengan fungsi layer itu nantinya. Pastikan juga kamu udah menggabung (merge) setiap komponen yang akan jadi satu. Misalnya buletan tombol dan teks diatas tombolnya usah disatuin dalam satu layer. Tujuan me-merge komponen itu adalah supaya waktu nanti diimport ke Expression Blend udah dalam kondisi rapi dan siap pakai. Oke, kalo sudah rapi layer-layernya, langsung aja save jadi file psd.

Sekarang kita pindah ke Expression Blend. Buat project baru, bisa Silverlight, bisa WPF, tapi kali ini biar seragam, kita cobain aja WPF Application dulu. Setelah project terbentuk, pastikan MainPage.xaml yang menjadi halaman utama kita dalam keadaan aktif. Supaya nanti import photoshopnya rapi, sesuaikan dulu ukuran MainPage.xaml sesuai dengan ukuran file psd yang udah kita bikin. Sekarang bagian magic-nya..

Klik File->Import Adobe Photoshop File, dan browse file psd yang akan kita import. Setelah dipilih, akan muncul window baru. Nah, keliatan kan di situ, layer-layer yang udah kita bikin di photoshop. Kita bisa pilih semua atau beberapa layer aja yang mau diimport. Kalau udah sesuai, tekan OK dan BOOM jadilah sudah user interface XAML kita. Tapi tunggu dulu, button yang udah kita bikin belom bisa langsung dipake karena bentuknya masih berupa image. Kita harus bikin dia jadi button yang sebenar-benarnya button..

Klik aja ke gambar tombol yang akan kita jadikan button. Klik kanan pada gambar tombol, lalu pilih Make into control. Nah, akan muncul window macem-macem control yang bisa kita assign ke gambar tombol tadi. Pilih “Button” dan klik OK, maka sekarang gambar kita udah bisa dipakai sebagai button. Ulangi proses tersebut ke komponen-komponen lain dalam user interface kita.

Gimana, seru kan, ngedesain di Photoshop dan langsung disulap jadi user interface keren di Expression Blend?

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

Textbox dan Button Silverlight dengan Microsoft Expression Blend 3

Hi, guys.. Pada tutorial kali ini, kita akan belajar tentang dasar-dasar Textbox dan Button Silverlight. Tool yang akan kita gunakan adalah Microsoft Expression Blend 3 (pastikan sudah terinstal di komputer kamu) dan tentunya .Net Framework 3.5 SP1 dan pastikan juga browser default kamu sudah terinstal plug-in Silverlight. Kalau semua bahan sudah tersedia, baru kita mulai memasak. Siap? Ayo buka Expression Blend 3 kamu dan kita mulai ngoprek sama-sama..

1. Setelah Expression Blend terbuka, pilih New Project, lalu pilih Silverlight 3 Application + Website. Silahkan pilih nama file yang kamu suka, pilih Visual C# dalam drop-down-list Language (lihat lingkaran merah di Gambar 1), dan tekan OK.

Gambar 1. New Project.

2. Kemudian muncullah MainPage.xaml dengan sebidang ruang kosong yang bisa kita gunakan untuk berekspresi. Sekarang klik tab Assets di sebelah kiri layar (di sebelah tab Project) lalu cari TextBox (Gambar 2). Ketemu? Nah, sekarang drag-drop saja TextBox itu ke bidang kerja kita dan atur ukurannya sesuka hati.

Gambar 2. Tab Assets, cari TextBox.

3. Pastikan TextBox yang telah kita buat dalam keadaan terseleksi. Kemudian pada tab Properties di sebelah kanan layar, masukkan nama TextBox pada kolom Name. Misalkan kita beri nama TextBoxSatu (Gambar 3).

Gambar 3. Ubah nama TextBox.

4. Sekarang, kita akan membuat button. Cari button di tab Assets (seperti langkah 2), kemudian drag-drop ke bidang kerja. Ubah tulisan pada tombol dengan cara klik kanan pada button dan pilih Edit Text (dapat dilakukan juga pada TextBox).

5. Beri nama button seperti pada langkah 3. Beri nama ButtonGue.

6. Cari TextBlok pada tab Assets (seperti langkah 2), drag-drop ke bidang kerja dan ubah nama TextBlok kita (seperti langkah 3) menjadi BoxHasil.

7. Klik button yang telah kita buat tadi, kemudian pada tab Properties (lihat gambar 3), klik gambar petir di bagian paling kanan. Tombol tersebut akan membuka property event tombol kita.

8. Klik dua kali pada input box Click (Gambar 4), maka akan terbuka MainPage.xaml.cs.

Gambar 4. Double Click di sini.

9. Berikutnya, ketikkan kode ini

private void ButtonGue_Click(object sender, System.Windows.RoutedEventArgs e)
{
String IsiTextBox = TextBoxSatu.Text;
/*
Baris di atas ini fungsinya untuk menyimpan
isi text box yang udah kita bikin ke dalam
sebuah variabel string.
*/
BoxHasil.Text = "Halo "+IsiTextBox+"... \nApa kabar?";
/*
Baris berikutnya fungsinya untuk menampilkan kata-kata (string) tertentu
ke dalam text block yang udah kita bikin tadi. Yang dalem tanda
kutip itu adalah string trus tanda plus (+) itu untuk
ngegabung string satu (misalkan "Halo") dengan string IsiTextBox.
*/
}

10. Setelah diketik, tekan F5 (atau klik Project->Run Project) untuk menjalankan program ini, dan.. Poof, lihat apa yang terjadi...

Nah, udah jago dong sekarang pake textbos sama button? Nanti kita belajar lagi yang lebih seru ya...

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

Galeri Foto Keren Dengan Deep Zoom Composer

Satu lagi teknologi keren dari Microsoft yang bisa kita gunakan untuk berekspresi dengan gambar dan animasi, namanya Deep Zoom Composer. Sesuai namanya, software ini digunakan untuk membuat aplikasi berbasis Silverlight dengan kemampuan zoom (deep zoom) sampai ratusan kali. Pernah liat foto di dalam foto, dan ada foto lagi di dalam foto itu, terus ada foto lagi di dalam foto yang ada di dalam foto itu? Nah, kita bisa buat yang seperti itu dengan Deep Zoom Composer dengan mudah dan cepat. Untuk memulai berkarya, kita perlu mempersenjatai diri dengan .Net Framework 3.5, Silverlight 3.0, dan Deep Zoom Composer-nya sendiri. Kalo mau download Deep Zoom Composer klik aja disini. O ya, jangan lupa beberapa foto yang akan kita utak-utik. Kalau semuanya sudah lengkap, berarti kita siap beraksi dengan beberapa langkah penting:

1. Buka Deep Zoom Composer dan pilih aja New Project di jendela yang muncul pertama kali atau klik File->New Project, beri nama project sesuai keinginan dan tekan OK.

2. Akan ada 3 tombol utama di bagian atas window, yaitu Import, Compose, dan Export (gambar 1). Ketiga tombol ini juga merepresentasikan alur kerja kita di Deep Zoom Composer yaitu pilih foto yang akan diproses, atur penempatan foto, dan export hasil kerja kita.

Gambar 1. tombol utama.

3. Pilih Import, lalu klik Add Image di sebelah kanan window. Nah, selanjutnya tinggal browse aja gambar atau foto-foto yang kita inginkan.

4. Setelah kita punya foto-foto, waktunya kita mengatur posisinya. Klik Compose, dan tampilan window akan berubah. Lebih banyak lagi toolbar yang muncul di sebelah kiri layar (Gambar 2). Untuk mengatur posisi gambar, kita hanya cukup melakukan drag and drop sesuka hati. Coba tempatkan satu foto, kemudian zoom jauh ke dalam foto tersebut dengan tool Zoom (scroll up) dan tempatkan foto lain di sana.

Gambar 2. Tool Compose.

5. Setelah puas dengan komposisi yang kita atur, waktunya meng-export hasilnya. Klik Export, lalu pilih tab Custom di sebelah kanan layar (Gambar 3). Pilih format export (Pilih aja Silverlight Deep Zoom), dan tentukan nama file outputnya. Setelah semua lengkap, tekan tombol Export dan BOOM, jadilah galeri foto keren ala Deep Zoom Composer.

Gambar 3. Panel Export.

Tinggal dicobain deh sekarang. Keren kan?

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