Windows 8 Tutorial – Animasi Sederhana

Halo semuanya, selamat datang di tutorial berikutnya untuk pembuatan aplikasi Windows 8. Kali ini saya akan membahas tentang bagaimana membuat animasi sederhana di Windows 8 menggunakan C# dan XAML. Yang digunakan disini adalah Visual Studio 2012 dan Blend for Visual Studio 2012. Tetapi lebih fokus di Blend.

Ok, langsung saja, buka Visual Studio-nya, dan ikuti langkah-langkah berikut ini.

  • Pilih New Project
  • Pilih Blank App (XAML)
  • Beri nama aplikasinya Animasi
  • Pada Solution Explorer, klik kanan pada MainPage.xaml, pilih Open in Blend

 

 

  • Tunggu sampai Blend-nya dibuka
  • Pada kotak Toolbox, pilih kontrol TextBlock, dan buatlah suatu TextBlock pada tampilan aplikasi kita.

 

  • Pada kode XAML-nya, ganti PropertyText dari TextBlock yang baru saja kita buat, menjadi “CS IPB”, serta tambahkan PropertyFontSize, dan set nilainya menjadi 80.

 

Note: Apabila ketika Blend sudah dibuka, namun tidak ada tampilan kode XAML-nya, buka di View -> Active Document View -> Split View.

 

  • Geser TextBlock CS IPB ke kiri layar sehingga ada diluar layar. “Lho, buat apa emang?”, sabar aja gan, ntar juga lihat sendiri kok.. :)

  • Pada menu Toolbox, klik kanan pada ikon Rectangle, kemudian pilih Ellipse agar kita dapat membuat lingkaran. Kemudian buat tiga lingkaran seperti pada gambar di bawah ini.

  • Setelah itu, untuk masing-masing lingkaran, ubah warna Fill-nya dengan meng-klik Fill menjadi biru (terserah tingkat terang atau gelapnya bagaimana), Stroke-nya menjadi No Brush. Kemudian ubah Opacity masing-masing lingkaran menjadi 0.

  • Nah, sekarang untuk tahap bikin animasinya… hehehehehe ;)
  • Pada panel Objects and Timeline, klik tanda plus-nya untuk membuat suatu Storyboard baru. Namanya Animasi1. Klik OK.

  • Sekarang lihatlah pada bagian kerja kalian. Ada garis merah dan tulisan “Animasi1 timeline recording is on” kan? Artinya apa? Mulai sekarang, apapun yang kita lakukan pada aplikasi kita, (penambahan control, perubahan warna, pergeseran control, dan masih banyak lagi) akan di-record dalam animasi kita. Kemudain pada panel Objects and Timeline, ada perubahan juga kan? Apabila tampilannya seperti itu, artinya kita dapat menambahkan state-state pada animasi kita (perubahan warna sekian detik, pergerakan sekian detik, dan lain-lain).

  • Masih pada Objects and Timeline, pilih TextBlock “CS IPB” kita, kemudian klik ikon Record Keyframe.  Kemudian geser garis kuning-nya sampail angka 2, klik ikon Record Keyframe lagi. Setelah itu, drag TextBlock-nya masuk ke dalam layar aplikasi Windows 8 kita.

“Apa yang kita lakukan di sini?” Langkah awal yang teah kita ambil adalah kita membuat TextBlock kita bergeser dari kiri ke kanan selama 2 detik. Titik-titik biru yang ada menunjukkan pergerakan TextBlock kita. Ok, itu untuk TextBlock kita, sekarang mari focus pada lingkaran-lingkaran yang tadi kita buat. Di sini kita akan membuat mereka muncul dari kegelapan *lebay, sambil membesar. Langsung saja ke TKP yukk.

  • Pada Objects and Timeline, pilih Ellipse yang paling besar (yang paling dekat dengan TextBlock kita). Beri Keyframe, kemudian geser garis kuning tepat pada posisi 1.2 s, tambahkan satu Keyframe lagi. Pada 1.2 s, perbesar ukuran lingkaran itu, kemudian ubah Opacity-nya menjadi 100%. Untuk menguji coba animasinya, geser garis kuning ke 0 s kembail, kemudian tekan saja tombol Play. Kalau lingkarannya menutupi TextBlock-nya kehalang oleh kingkaran kita, klik kanan pada lingkaran kita -> Order -> Send to Back. Kalau diikuti langkah-langkah yang saya berikan, hasilnya kurang lebih seperti ini.

  • Kemudian untuk dua lingkaran lainnya, lakukan sesuka hati kalian, kalau saya tidak jauh berbeda denga apa yang sudah saya lakukan pada lingkaran pertama.

Note: Jika kalian tidak senang dengan pilihan pertama posisi Keyframe kedua, seperti pada lingkaran pertama saya, kalian tinggal geser Keyframe kalian sesuka kalian. Kalau saya, saya geser posisi Keyframe kedua untuk lingkaran pertama saya menjadi 1.8 s.

  • Nah, sekarang karena sudah selesai dengan apa yang animasi kita lakukan, klik pada tombol merah sebelah “Animasi1 timeline recording is on”.  Dengan begitu Blend sudah selesai me-record animasi.
  • Sekarang coba tekan Ctrl+F5 untuk menjalankan aplikasi kita. Apakah animasi kita berjalan? Kalau kalian jawab tidak, berarti kita harus menginstruksikan aplikasi kita untuk menjalankan animasi kita saat pertama kali aplikasi kita dimulai.
  • Pada tab Projects, expand-lah MainPage.xaml kita dan bukalah MainPage.xaml.cs
  • Di bawah baris this.InitializeComponent();, ketiklah Animasi1.Begin();. Animasi1 itu kan nama animasi saya tadi, .Begin() adalah method untuk menjalankan animasi kita. Akan terlihat seperti ini.

 

Sekarang tekanlah Ctrl+F5, dan lihatlah apa yang terjadi. :)

Mungkin itu saja yang saya bagikan di post kali ini, semoga bermanfaat, makasih dah mau baca.

 

 

 

Leave a Reply

You must be logged in to post a comment.