Anim Button

Seperti yang telah kita ketahui mengenai symbol tombol di flash yang terdiri dari 4 buah state, maka berikut ini adalah contoh untuk membuat sebuah tombol yang beranimasi. Maksudnya, jika pointer mouse berada di atas tombol atau tulisan, maka akan dijalankan suatu animasi. Berikut ini adalah langkah-langkahnya :

Dengan menggunakan text tool ketiklah PETRA di tengah stage / lembar kerja.

Jadikan symbol button dengan memilih menu Insert - Convert to Symbol (F8), pada bagian Behavior : Button

Blok tombol PETRA dengan menggunakan selection tool lalu pilih menu Edit - Edit Symbols atau klik ganda tombol PETRA untuk memasuki mode edit symbol button.

Klik kanan pada frame over, lalu insert keyframe. Klik kanan juga pada frame down, lalu insert keyframe.

Klik pada frame over, lalu aktifkan PETRA kemudian ubahlah menjadi symbol Movie Clip (Modify - Convert to Symbol - Movie Clip).

Klik ganda movie clip PETRA untuk masuk ke dalam symbol movie clip, perhatikan pada bagian atas stage terdapat tulisan Scene 1 - Tombol1 - movie1 yang artinya kita sekarang berada di dalam movie clip movie1 dimana symbol movie clip movie1 tersebut terletak di dalam symbol tombol1 (Don't be confused okay ^_^). Perhatikan gambar :

Blok tulisan PETRA, lalu pilih menu Modify - Convert to Symbol - Graphic (F8) untuk mengubah tulisan PETRA menjadi symbol graphic.

Sisipkan keyframe di frame 20 (Udah tahu caranya khan :-p).

Tetap di frame 20, blok teks PETRA dan ubahlah pada bagian Properties Color : Alpha dengan nilai 0%.

Ubah ukuran teks dengan memilih menu Modify - Transform - Scale and Rotate. Isi bagian Scale : 200%. Dan berikan tween Motion di frame 1.

Klik Layer1 frame1, pilih menu Edit - Copy atau Ctrl+C.

Sisipkan layer baru (Layer2) di atas layer1. Lalu di layer yang baru ini (layer2), tekan tombol Ctrl + Shift + V (atau pilih menu Edit - Paste in Place)

Pilih menu Edit - Edit Document (Ctrl+E) atau klik Scene1 kemudian jalankan animasi (Ctrl+Enter) !!!

Pada waktu pointer mouse berada di atas tombol PETRA maka animasi akan dijalankan, hasilnya adalah sebagai berikut :

Contoh file tombol animasi dapat dilihat disini.

Referensi :

• Animasi dengan Macromedia Flash 8 ©Lab Komp SMA Kr Petra 2 Surabaya.

Read More......

Introduction to Button Symbol in Flash

Untuk membuat tombol navigasi (pengarah/control) di dalam movie, digunakanlah symbol Button. Dalam symbol button terdapat 4 buah state atau frame, yaitu :

1. Up, untuk mengatur keadaan awal tombol.
   
2. Over, untuk mengatur keadaan tombol ketika pointer mouse melewati atau berada di atas tombol.
   
3. Down, untuk mengatur keadaan tombol ketika ada penekanan tombol dengan pointer mouse.
   
4. Hit, untuk menentukan area tombol yang bisa di-klik dengan pointer mouse.
   

Agar lebih jelas mengenai empat buah state yang terdapat dalam symbol button tersebut, maka lakukan langkah-langkah berikut ini :

Klik Rectangle Tool kemudian pada bagian Option di bawahnya pilih Set Corner Radius (Perhatikan gambar).

Kemudian akan keluar Rectangle Settings, isikan 30 pada bagian Corner Radius karena kita akan mengambar persegi panjang dengan sudut tumpul sebesar 30 derajat. Klik OK kalau sudah selesai.

Gambarlah persegi panjang (persegi panjang telah memiliki sudut tumpul 30 derajat) dengan warna gradasi, kemudian dengan menggunakan Text Tool berikan teks diatasnya (misalnya : START). Tulisan START tersebut berwarna hitam.

Aktifkan atau blok semua gambar yang ada dengan menu Edit - Select All atau Ctrl+A, kemudian ubah menjadi symbol button dengan menekan F8 atau melalui menu Modify - Convert to Symbol dengan type : Button. Beri nama symbol : tombol1.

Double klik pada symbol tombol1 untuk masuk ke dalam jendela pengeditan tombol1. Perhatikan pada timeline terdapat empat buah frame, yaitu up, over, down dan hit.

Pada frame over, berikan keyframe. Aktifkan teks dan ubah warnanya menjadi merah.

Pada frame down, berikan keyframe juga. Aktifkan teks dan ubah warnanya menjadi biru.

Klik menu Edit - Edit Document atau klik Scene 1 untuk kembali ke movie utama.

Jalankan movie, pilih menu Control - Test Movie atau tekan tombol Ctrl+Enter.

Coba arahkan pointer mouse ke atas tombol lalu tekan tombol tersebut. Warna dari tulisan START akan terlihat berganti pada saat pointer mouse berada di atas tombol dan pada saat tombol tersebut ditekan. Untuk contoh lengkapnya dapat diambil disini.

Tombol dari Library Flash

Symbol button di flash selain dapat kita buat sendiri dengan menggunakan pilihan Convert to Symbol - Button, juga disediakan beberapa tombol jadi oleh flash. Letaknya (untuk Macromedia Flash 8) adalah di dalam menu Window - Common Libraries - Buttons.

Pada panel Library Buttons, kita dapat memilih berbagai macam button yang sudah disediakan oleh flash. Untuk membuka dan melihat berbagai macam tombol yang ada, double klik pada tanda folder (lihat pada gambar) maka jenis-jenis tombol yang terdapat di dalamnya akan terlihat.

Untuk memasukkan tombol ke dalam stage, caranya adalah cukup tarik (drag) ke dalam stage jenis tombol yang diinginkan. Perhatikan gambar :

PERHATIAN : Symbol button (tombol) yang ditarik (drag) harus mempunyai button icon sebagai berikut :

Dalam gambar di atas, symbol button yang dimasukkan mempunyai teks Enter di atasnya. Untuk mengubah tulisan Enter tersebut caranya ialah double klik pada symbol button sehingga nampak tampilan timeline dan stage seperti gambar berikut ini :

Dengan menggunakan selection tool, klik pada Layer Text frame Up kemudian ubah (edit) teks Enter menjadi START, setelah itu klik juga pada Layer Text frame Down dan ubahlah teks menjadi START sehingga bentuk tombol sekarang menjadi seperti contoh berikut ini :

Silakan anda coba sendiri untuk jenis-jenis tombol yang selanjutnya...!!!

Referensi :

• Animasi dengan Macromedia Flash 8 ©Lab Komp SMA Kr Petra 2 Surabaya.
  

Read More......

Earth Rotation and Moon Revolution

Setelah kita membuat animasi bumi berputar, selanjutnya kita akan membuat animasi bulan yang berputar (revolusi) mengitari movie clip bumi yang telah kita buat sebelumnya. Untuk membuat animasi ini, digunakan prinsip animasi jalur dengan sedikit modifikasi, agar object bulan dapat beranimasi mengitari object bumi sesuai dengan lintasannya. Langkah-langkah pembuatannya adalah sebagai berikut :

Pada stage sekarang terdapat movie clip movBumi yang telah kita buat pada animasi Earth Rotation sebelumnya. Ubah nama Layer 1 menjadi Bumi.

Buat layer baru diatas layer Bumi, beri nama layer yang baru ini dengan nama Bulan. Pada layer bulan frame 1, gambarlah gambar bulan menggunakan oval tool dengan warna gradasi.

Blok object bulan menggunakan selection tool (saya harap anda semua tahu dimana selection tool itu berada...!!!) kemudian pilih menu Modify - Convert to Symbol atau (F8). Ubah menjadi simbol grafik, beri nama gBulan, biarkan titik Registrasi tetap berada di tengah. Untuk lebih jelasnya, perhatikan gambar berikut ini :

Buat Layer baru, beri nama Layer Bulan2. Letakkan layer Bulan2 ini pada urutan posisi yang paling bawah. Untuk sementara biarkan saja layer Bulan2 ini kosong (tidak ada objectnya) !!! Perhatikan gambar :

Kita akan membuat object bulan tersebut berjalan sesuai dengan jalurnya (animasi jalur), maka klik kanan pada layer Bulan kemudian pilih Add Motion Guide untuk membuat layer Guide : Bulan

Pada layer Bulan2 berikan juga motion guide dengan cara yang sama seperti yang telah kita berikan pada layer bulan. Sehingga urutan dari layer-layer yang ada akan nampak seperti pada gambar berikut :

Kunci/lock semua layer kecuali layer Guide: Bulan, kemudian pada Layer Guide : Bulan kita akan menggambar jalur untuk lintasan bulan dengan menggunakan oval tool. Lihat pada gambar :

Pada gambar lintasan di atas, kita akan menghilangkan fill color (warna dalamnya). Caranya adalah klik pada bagian dalam dari oval (seperti dalam tanda panah) kemudian tekan delete. Sehingga menjadi seperti gambar berikut ini :

Prinsip animasi jalur adalah object yang beranimasi esuai dengan jalurnya, mulai dari awal jalur sampai akhir jalur. Karena itu jalur yang telah kita buat harus mempunyai titik awal (start) dan titik akhir (end). Blok separuh dari jalur (pada bagian atas), perhatikan gambar yang berwarna hijau !!!

Kemudian tekan Ctrl+X untuk meng-cut separuh jalur dan pada Layer Guide : Bulan2, pilih menu edit - Paste in Place (Ctrl+Shift+V). Jadi separuh jalur bulan (yang bagian atas) akan terletak pada Layer Guide : Bulan2. Pada Timeline dan Stage gambarnya nampak sebagai berikut :

Kita akan membuat animasi jalur yang sebelah atas terlebih dahulu. Sembunyikan (hide) semua layer kecuali layer Bulan dan layer Guide : Bulan. Letakkan object bulan yang terdapat di layer Bulan pada awal jalur. Titik tengah (registrasi) harus tepat berada pada bagian awal jalur. Perhatikan pada gambar :

Pada layer Guide, insert frame di frame 20 sedangkan pada layer Bulan, insert keyframe di frame 20. Pada layer Bulan frame 20, tempatkan object bulan di akhir jalur dengan titik tengah (registrasi) yang tepat berada di akhir jalur. Perhatikan pada gambar :

Berikan motion tween pada layer Bulan frame 1 untuk membuat object bulan beranimasi mengikuti jalur.

Copy (Ctrl+C) object bulan yang terdapat dalam layer Bulan frame 20 lalu Paste in Place (Ctrl+Shift+V) di layer Bulan2 frame 1

Sembunyikan (hidden) semua layer kecuali layer Bulan2 dan layer Guide : Bulan2. Selanjutnya buatlah animasi bulan yang berjalan mengikuti jalur dari sebelah kanan ke sebelah kiri (kebalikan dari animasi jalur yang tadi)

Agar animasi bulan terlihat muncul bergantian, blok layer Guide : Bulan2 dan layer Bulan2 mulai dari frame 1 sampai 20. Perhatikan gambar :

Kemudian (masih dalam keadaan terblok), tarik atau drag ke sebelah kanan layer-layer yang terblok tadi sampai ke frame 21. Perhatikan gambar :

Pada layer Bumi frame 40, insert frame. Kemudian jalankan animasi (Ctrl+Enter)

Referensi :

• Animasi dengan Macromedia Flash 8 ©Lab Komp SMA Kr Petra 2 Surabaya.
  
• Contoh Animasi Earth Rotation and Moon Revolution dapat dilihat disini.
  

Read More......

Earth Rotation

Berikut ini adalah contoh membuat animasi bumi berputar (berotasi) kemudian ada object bulan yang juga berputar mengelilingi bumi (revolusi bulan) dengan menggunakan prinsip dan cara kerja dari masking animation dan guide layer animation. Langkah-langkahnya adalah sebagai berikut :

Tahap 1: Membuat Movie Clip Bumi Berputar

Untuk membuat movie clip baru, pilih menu Insert - New Symbol sehingga muncul kotak dialog Create New Symbol. Pada kotak dialog tersebut, isi pada bagian Name dengan nama movBumi dan pilihlah Type Movie Clip.

Selanjutnya kita akan masuk ke dalam jendela pengeditan simbol dari Movie Clip movBumi. Ganti nama Layer 1 dengan nama Bumi, kemudian pada Layer Bumi silakan gambar lingkaran dengan warna gradasi. Perhatikan gambar :

Blok object Bola dengan Selection Tool kemudian ubah menjadi symbol Graphic (F8) dengan nama gBumi

Buat Layer baru, beri nama Peta. Letakkan Layer Peta di bawah Layer Bumi. Kemudian kita akan memasukkan gambar peta, caranya adalah pilih menu File - Import - Import to Library kemudian pilih gambar peta yang ingin dimasukkan. (Gambar peta dapat diunduh disini).

Gambar Peta akan masuk ke dalam library, buka library (Ctrl+L) kemudian drag object Peta (AdventureMap.gif) ke dalam stage. Peta harus diletakkan di Layer Peta frame 1.

Dengan menggunakan free transform tool atur besar dan ukuran peta agar sesuai dengan besar dan ukuran bumi. Perhatikan gambar berikut :

Gandakan atau duplikasi peta (Ctrl+D) kemudian atur object peta sesuai dengan gambar berikut ini :

Blok semua gambar peta dengan menggunakan selection tool kemudian ubah menjadi symbol graphic dengan nama gPeta.

Pada Layer Peta frame 1, pindahkan posisi gPeta sedemikian sehingga awal dari peta berada di sebelah kanan bola, (ingat yang harus dipindah adalah object gPeta). Perhatikan gambar berikut :

Pada Layer Peta, insert Keyframe di frame 20 sedangkan pada Layer Bumi, insert frame di frame 20.

Klik layer Peta frame 20, kemudian pindahkan object Peta ke sebelah kiri dari object Bola. Untuk lebih jelasnya, perhatikanlah gambar berikut :

Berikan tween Motion pada Layer Peta frame 1.

Supaya setelah di-masking object "bumi" masih dapat terlihat maka caranya adalah dengan menduplikasi object bola yang telah kita buat pada Layer Bumi. Buat Layer baru, beri nama Bumi1. Layer Bumi1 harus berada pada urutan yang paling atas. perhatikan pada gambar :

Klik object bumi yang terdapat pada Layer Bumi, kemudian pilih menu Edit - Copy atau (Ctrl+C). Pada layer Bumi1 frame 1 pilih menu Edit - Paste in Place (Ctrl+Shift+V) sehingga sekarang terdapat dua buah object bumi pada posisi yang sama.

Kunci semua layer kecuali Layer Bumi1, kemudian klik object bumi yang terdapat di Layer Bumi 1 frame 1, pada panel properties pilih pilihan color : Alpha dengan nilai 60%

Selanjutnya kita akan memberikan efek masking di Layer Bumi, caranya adalah klik kanan pada Layer Bumi kemudian pilih mask.

Setelah itu kembali ke movie utama dengan cara mengklik Scene 1 yang ada di bagian atas, pada movie utama ini silakan masukkan movie clip bumi yang tadi telah kita buat ke dalamnya dengan cara menyeret / drag movBumi dari dalam library ke stage.

Jalankan Animasi...!!!

Setelah kita membuat animasi bumi berputar, maka berikutnya kita akan membuat animasi bumi berputar dan dilengkapi dengan bulan yang berputar mengelilingi bumi (revolusi). Untuk langkah-langkahnya dapat dilihat disini

Referensi :

• Animasi dengan Macromedia Flash 8 ©Lab Komp SMA Kr Petra 2 Surabaya.
  
• Contoh Animasi Earth Rotation and Moon Revolution dapat dilihat disini.
  

Read More......

Animasi Dengan Movie Clip

Berikut ini adalah contoh membuat animasi menggunakan symbol movie clip. Movie clip merupakan salah satu jenis simbol yang dapat membuat rangkaian animasi di dalamnya, jadi kita bisa membuat animasi yang berdiri sendiri dalam Movie Clip. Langkah-langkahnya adalah sebagai berikut :

Tahap 1: Membuat Movie Clip

Untuk membuat movie clip baru, pilih menu Insert - New Symbol sehingga muncul kotak dialog Create New Symbol. Pada kotak dialog tersebut, isi pada bagian Name dengan nama Bola dan pilihlah Type Movie Clip.

Klik OK, maka akan ditampilkan jendela pengeditan symbol seperti yang nampak pada gambar di bawah ini. Pada bagian yang ditunjukkan oleh tanda panah, adalah nama movie clip yang sedang kita buat (dimana saat ini kita sedang berada di dalam object movie clip bola !!!) Pada tampilan pengeditan simbol ini kita dapat membuat segala animasi yang diperlukan untuk movie clip kita. Tanda + di dalam stage menunjukkan titik tengah (titik berat/pusat symbol) dari object movie clip yang sedang kita edit dan sebaiknya digunakan sebagai titik pusat gambar.

Masih di dalam object movie clip bola, kita akan membuat sebuah animasi sederhana yaitu sebuah bola yang beranimasi berjalan dari kanan ke kiri. Pada Layer 1, buatlah sebuah object bola (menggunakan Oval Tool) dengan warna gradasi.

Klik kanan pada Layer 1 frame 10, pilih Insert Keyframe. Pada Layer 1 frame 10 ini, pindahkan object ke kiri (secara horizontal).

Klik Layer 1 frame 1, berikan tween : Shape.

Object bola telah dapat beranimasi secara sederhana berjalan dari kanan ke kiri dengan menggunakan tween shape. Langkah selanjutnya adalah kita harus kembali ke movie utama, caranya adalah klik tulisan Scene 1 yang terdapat di bagian kiri atas jendela pengeditan simbol Bola.

PERHATIAN : Untuk animasi tween shape, object harus bertipe shape sehingga tidak perlu diubah ke symbol (convert to symbol). Untuk mengubah object ke tipe shape caranya adalah blok object dengan menggunakan selection tool kemudian tekan Ctrl+B.

Tahap 2 : Menyisipkan Movie Clip ke dalam Stage

Tampilkan panel library (Window - Library atau dengan menekan Ctrl+L). Tariklah (drag) symbol Bola yang ada di dalam library ke dalam lembar kerja (Stage).

Tampilkan panel info (Window - Info atau dengan menekan Ctrl+I). Isikan X = 250 dan Y = 175

Tahap 3 : Menggandakan dan Merotasi Instance Movie Clip

Berikutnya kita akan menggandakan dan merotasi instance dari movie clip bola yang lainnya. Tambahkan layer baru (Layer 2).

Drag kembali symbol Bola yang terdapat di dalam library ke dalam stage, dengan menggunakan panel Info atur posisinya sama dengan movie clip bola yang terdapat dalam Layer 1 yaitu X = 250; Y = 175.

Tetap pada Layer 2 frame 1, tampilkan panel Transform (Window - Transform atau dengan menekan Ctrl+T), isikan nilai 90 pada bagian Rotate. Object bola yang terdapat di Layer 2 Frame 1 akan diputar 90 derajat sehingga object bola yang semula berjalan dari kanan ke kiri setelah diputar sebesar 90 derajat akan beranimasi berjalan dari bawah ke atas.

Gandakan object Bola pada Layer 2 dengan memilih menu Edit - Copy.

Tambahkan layer baru (Layer 3). Pilih menu Edit - Paste in Place (Ctrl+Shift+V) untuk meletakkan salinan symbol Bola pada posisi yang sama dengan symbol Bola yang terdapat di Layer 2. Kemudian pada panel Transform isikan pada Rotate = 180 untuk merotasi symbol Bola yang terdapat pada Layer 3 ini sebesar 180 derajat.

Tambahkan kembali layer baru (Layer 4). Pilih menu Edit - Paste in Place (Ctrl+Shift+V) untuk meletakkan salinan symbol Bola pada posisi yang sama dengan symbol Bola yang terdapat di Layer 2. Kemudian pada panel Transform isikan pada Rotate = 270 untuk merotasi symbol Bola yang terdapat pada Layer 4 ini sebesar 270 derajat.

Jalankan animasi dengan menekan tombol Ctrl+Enter (Test Movie)

Referensi :

• Animasi dengan Macromedia Flash 8 ©Lab Komp SMA Kr Petra 2 Surabaya.
  
• Contoh Animasi Dengan Movie Clip dapat dilihat disini.
  

Read More......