Animasi Button (Bagian 2)

Tutorial kali ini saya akan membagikan bagaimana cara membuat animasi button dengan efek rotation. Video tutorial berikut saya buat pada saat memberikan materi tentang membuat animasi dasar. Mudah-mudahan apa yang saya bagikan bisa bermanfaat bagi temen-temen semua, khususnya bagi saya sendiri. Video tutorial animasi ini saya buat menggunakan Adobe Flash, semoga bermanfaat.... :D

Efek Masking (bagian 1)

Kali ini saya membagikan video tutorial tentang efek masking (bagian 1) dengan menggunakan Adobe Flash CS6. Tutorial ini bisa dibuat juga menggunakan versi sebelumnya dari Adobe Flash CS2, Adobe Flash CS3, Adobe Flash CS4 dan Adobe Flash CS5, serta bisa juga menggunkan versi Macromedia.

Mudah-mudahan video tutorial ini bisa bermanfaat, khususnya bagi diri saya dan teman-teman blogger pada umumnya...

Video Tutorial Adobe Flash "Membuat Button Animasi"

Assalammualaikum sahabat blogger, kali ini saya akan mencoba berbagi video tutorial Adobe Flash. Video tutorial Adobe Flash ini berkaitan dengan pembuatan tombol atau button saat disentuh mouse, maka tombol atau button tersebut terdapat animasi berupa munculnya teks.
Langsung saja lihat video tutorianya..

Pengenalan sistem kordinat layar

Pada mata pelajaran matematika, kita mengenal sistem kordinat kartesian. Pengetahuan yang kuat akan matematika, akan sangat mendukung kita nantinya dalam memahami sistem korninat layar. Pada sistem kordinat kartesian sumbu utama dibagi menjadi sumbu x (horisontal) dan sumbu y (vertikal). Persimpangan antara sumbu tersebut merupakan kordinat (0,0). Pada sumbu x semakin ke kiri maka nilai x semakin kecil dan sebaliknya semakin ke kanan nilai x semakin besar. Pada sumbu y semakin ke bawah maka nilai y semakin kecil dan sebaliknya semakin ke atas nilai y semakin besar.

Pada sistem kordinat layar komputer, hampir sama dengan kordinat kartesian, sumbu utama dibagi menjadi sumbu x (horisontal) dan sumbu y (vertikal). Akan tetapi kordinat (0,0) adalah pojok kiri atas layar. Perbedaan selanjutnya adalah pada sumbu y. Pada sumbu y semakin ke bawah maka nilai y semakin besar dan sebaliknya semakin ke atas nilai y semakin kecil. Perhatikan gambar berikut:

Kordinat kartesian dan kordinat layar pada flash

Contoh penerapan dari sistem kordinat layar dalam flash adalah sebagai berikut :


untuk menyelesaikan soal tersebut, kita gambarkan dahulu secara visual sebagai
berikut :

Jadi untuk menggerakan bola secara diagonal, maka pada saat yang bersamaan sumbu x digerakkan ke kanan (ditambah) dan sumbu y digerakan ke bawah (ditambah).




Proses pembuatan aplikasinya adalah sebagai berikut :
1. Buatlah sebuah obyek lingkaran dengan menggunakan oval tool.

2. Seleksi obyek lingkaran tersebut kemudian convert menjadi symbol dengan menekan tombol F8 (pilih menu insert>convert to symbol). Pilih movieclip pada option behaviour dan ketikan bola pada name. Perhatikan bagian regristration, bagian tersebut menentukan posisi suatu movieclip.

Sebagai contoh, ketika kita memilih  regristration  pada  bagian  tengah,  maka  posisi  penghitungan  kordinat movieclip nantinya dihitung di  bagian tengah tidak seperti  yang terlihat  pada properties (karena pada properties hitungan posisi dimulai dari pojok kiri atas).

3. Klik movieclip  bola   ubah posisinya tau letakan di pojok kanan atas stage,  dan } dalam  kondisi  terseleksi  buka  panel  action  (  tekan  f9  atau  klik  menu windows>action apabila panel action belum terbuka dan pastikan mode penulisan adalah mode expert jika menggunakan flash MX atau Flash 8). Kemudian ketikan script sebagai berikut :

 

4. Jalankan movie dengan menekan tombol Ctrl+Enter.  Maka bola akan bergerak diagonal  dari kiri atas ke kanan bawah sampai  hilang dari layar.  Tekan tombol Ctrl+W untuk kembali ke stage

Penjelasan program
1. Baris  onClipEvent (enterFrame) { berarti bahwa perintah dalam blok  { } akan dijalankan sepanjang frame aktif artinya pada default seting frame rate : 12 fps (frame  per  secon),  maka  perintah  dalam  blok  {  }  akan  dijalankan  setiap seperduabelas detik sepanjang movie tersebut dijalankan.

2. Baris  // menggerakan bola diagonal merupakan baris komentar, baris ini tidak dijalankan oleh flash.

3. Baris _x += 10; berarti setiap seperduabelas detik kordinat x dari bola ditambah 10  pixel, sehingga  bola  bergerak  kekanan.  Tanda  += merupakan  bentuk penyedehanaan dari action _x = _x+10;

4. Baris _y += 10; berarti setiap seperduabelas detik kordinat y dari bola ditambah 10 pixel, sehingga bola bergerak kebawah.

5. Karena komputer mengitung dengan sangat cepat, perhitungan dalam satu blok { } dapat dikerjakan dengan sekaligus sehingga bola tampak bergerak diagonal.

Referensi: Wandah W "Dasar Pemograman Flash Game"

Cara Penulisan Action Script pada Frame

Selamat datang kembali teman-teman blogger pecinta desain grafis. Pada tutorial desain grafis ini khususnya pada kategori tutorial adobe flash, tutorial ini bisa juga dijalankan semua versi adobe flash, dari Adobe Flash Cs3, Cs4, Cs5, Cs6 maupun yang masih menggunakan macromedia flash.

Pada tutorial sebelumnya yaitu penulisan script di dalam button dan di dalam movieclip, dapat ditulis dalam bentuk lain yang mana penulisan scriptnya diletakan didalam sebuah frame. Hal utama yang harus diingat dalam penulisan action pada frame adalah instance name. Instance name merupakan salah satu identitas yang terpenting dalam flash yang membedakan antara obyek satu dengan obyek yang lain.

 

 Aturan pemberian nama instance name antara lain adalah :

1. Nama intansi boleh sama dengan nama symbol.
2. Tidak boleh menggunakan spasi, titik, dan tanda baca yang lain.
3. Tidak boleh menggunakan nama yang sama dengan suatu perintah dalam flash misalnya : obyek, level, break dan sebagainya.
4. Tidak boleh menggunakan angka saja untuk nama akan tetapi sebuah nama instansi boleh diikuti dengan angka. Contoh yang salah :12, 13, dan sebagainya, contoh yang benar : bola1, bola_2 dan sebagainya.
5. Tidak boleh ada nama instansi yang sama.
6. Untuk mempermudah proses penulisan script, dapat ditambahkan “_mc” untuk symbol bertipe movieclip dan “_btn” untuk symbol bertipe button. Contoh : “bola1_mc”, “tombol1_btn” dan sebagainya.
7. Dua atau lebih symbol yang sama boleh dipakai, tetapi harus memiliki nama instansi yang berbeda.

Berikut cara penulisan action pada movieclip:
1. Pilih oval  tool pada tool box, buatlah sebuah obyek lingkaran.  Seleksi  obyek lingkaran tersebut kemudian convert menjadi symbol dengan menekan tombol F8 (pilih menu insert>convert to symbol). Pilih movieclip pada option behaviour dan ketikan bola pada name.

 

2. Klik symbol pada objek bola tersebut, kemudian buka panel instance dan ketikan nama “bola”
pada instance name.

 

3. Buatlah sebuah layer baru dan ubah namanya menjadi layer action. Penambahan layer action akan mempermudah kita dalam penulisan action pada frame, sehingga tidak akan mengganggu obyek yang lain.

 

4. Klik frame 1 layer action, dan dalam kondisi frame 1 terseleksi buka panel action (tekan f9 atau klik menu windows>action apabila panel action belum terbuka dan pastikan mode penulisan adalah mode expert jika menggunakan flash MX atau Flash 8).

5. Jalankan Movie dengan menekan tombol Ctrl+Enter, maka kita akan melihat hasil yang sama dengan dengan cara penulisan action pada movieclip.

Penjelasan pola penulisan action script pada frame adalah sebagai berikut :
1. Sebuah penulisan script di frame memiliki 3 tipe penulisan yaitu penulisan di dalam suatu blok movie event atau mouse event, contoh onEnterframe = function(){} dan penulisan tanpa movie event atau mouse event, tipe penulisan yang ke tiga adalah kombinasi dari keduanya.

2. Pada dasarnya penulisan action pada frame sama dengan penulisan pada movieclip maupun pada button. Hanya saja pada frame terdapat script function() dan penggunaan nama instansi.

3. Perhatikan perbedaan antara penulisan pada frame dan penulisan pada moviclip berikut:

 

4. Apabila ingin menuliskan action button pada frame, maka yang harus di ubah adalah movie event diubah menjadi mouse event. contoh : tombol.onRelease =function(){}

Keuntungan penulisan script pada frame :
1. Dibandingkan  dengan  menulis  action  di  movieclip,  penulisan  script  di  dalam movieclip  cenderung  lebih  rumit,  akan  tetapi  bagi  programmer  yang  familiar dengan bahasa pemrograman seperti C++,  Java,  Delphi atau V basic,  penulisan pada frame akan menjadi lebih mudah.
2. Lebih mudah dalam menuliskan function tertentu atau perintah berulang yang sering dipakai.
3. Karena  seluruh  script  biasanya dituliskan pada  frame,  maka  mengecek  action
seluruh obyek yang ada akan lebih mudah, tanpa harus ke masing-masing obyek.

Penggunaan Action Script pada Movieclip

Pada tutorial Adobe Flash kali ini, saya akan mencoba membagikan bagimana cara penggunaan Action Script pada Movieclip. Semoga bisa menjadi referensi teman-teman blogger, mahasiswa, mahasiswi yang sedang belajar tentang desain grafis....

Berikut cara penulisan action pada movieclip:
1. Buatlah  sebuah  obyek  lingkaran  dengan  menggunakan oval tool. Perhatikan bahwa sebuah obyek dalam flash memiliki 2 bagian yaitu stoke (garis tepi) dan fill (isi).

2. Seleksi  obyek  lingkaran  tersebut  kemudian  convert  menjadi  symbol  dengan menekan tombol F8 (pilih menu insert>convert to symbol). Pilih movieclip pada option behaviour dan ketikan bola pada name.

 

3. Klik movieclip  bola, kemudian tekan F9 pada keyboard atau klik menu windows>action apabila panel action belum terbuka dan pastikan mode penulisan adalah mode expert jika menggunakan flash MX atau Flash 8). Kemudian ketikan script sebagai berikut: 

4. Jalankan movie dengan menekan tombol Ctrl+Enter. Maka bola akan bergerak ke kanan sampai hilang dari layar. Tekan tombol Ctrl+W untuk kembali ke stage