Minggu, 01 Mei 2011

SYMBOL DAN ANIMASI MACROMEDIA FLASH

MODUL 2
SYMBOL DAN ANIMASI MACROMEDIA FLASH

LATAR BELAKANG
Flash Movie merupakan suatu gabungan antara graik dan animasi untuk website, walaupun tidak menutup kemungkinan diterapkan juga untuk presentasi, film, dan video pembelajaran.

TUJUAN
Animasi flash diharapkan menjadi sarana yang mudah untuk memberikan informasi kepada para penggunanya, melalui button dan menu yang interakif akan membuat pengguna tidak akan merasa jenuh.

PRINSIP
• Dasar teori
Terdapat tiga komponen symbol dalam animasi Flash yaitu graphic, Button, dan MovieClip
• Animasi
Animasi dengan flash secara umum dapat terbagi menjadi 3:
1. Animasi frame-by-frame
animasi frame-by-frame merupakan teknik animasi yang digunakan untuk memanipulasi objek sehingga terlihat seperti bergerak. Objek dipindahkan sedikit demi sedikit antar frame, sehingga menciptakan ilusi seolah-olah objek tersebut bergerak.
2. Animasi dengan menggunakan scripting animasi ini dibuat dengan mempergunakan actionscript(bahasa pemrograman pada Flash).
3. Animasi dengan menggunakan tweening
Merupakan proses / tipe animasi yang hanya mengidentifikasi frame awal dan frame akhir. Dibagi menjadi shape tweening dan motion tweening. Shape tweening bertujuan untuk merubah bentuk, sedangkan motion tweening digunakan untuk merubah tempat.

SOFT WARE YANG DIGUNAKAN
• Macromedia Flash 8 Proffesional.

MENYUSUN POSEDUR PERCOBAAN
GRAPHIC
Graphic adalah salah satu type symbol yang fungsinya sama dengan movie clip hanya saja graphic tidak bisa dimasuki actionscript. Berikut langkah-langkah membuatnya :
1. Buatlah sebuh flash document.
2. Buatlah sebuah obyek di stage misalnya lingkaran berwarna merah dengan hitam sebagai warna garisnya
3. Seleksi lingkaran tersebut kemudian tekan F8. Pada panel convert to symbol yang muncul masukkan lingkaran sebagai name dan graphic sebagai type lalu tekan ok.
4. Sebuah graphic lingkaran sudah jadi dan siap digunakan.
5. Untuk menggunakannya ulang anda dapat membuka panel library dengan menekan Ctrl+L pada keyboard. Pada panel library yang muncul drag graphic lingkaran ke stage sebanyak yang anda mau

BUTTON
Button adalah salah satu type dari symbol. Button digunakan untuk membuat tombol di flash. Dengan dijadikannya suatu objek menjadi button maka selain objek tersebut menjadi tombol, objek tersebut juga dapat menggunakan beberapa fasilitas dari flash seperti animasi tween, masking, guide dan juga kita dapat memberikan actionscript pada objek tersebut. Di bawah ini kita akan mempelajari cara dasar membuat tombol. Melalui cara dasar ini anda dapat berkreasi untuk membuat tombol yang bagus dan keren.
1. Buatlah sebuah flash document.
2. Buatlah sebuah lingkaran seperti gambar dibawah ini:



Lingkaran berwarna merah
3. Seleksi lingkaran tersebut kemudian tekan F8 pada keyboard atau bisa juga melalui Modify>Convert to Symbol…
4. Pada kotak dialog yang muncul pilih Button sebagai Typenya seperti gambar dibawah ini :



Button sebagai Type
5. Ubah Name pada kotak dialog tersebut jika diperlukan, kalau sudah selesai tekan OK maka lingkaran yang anda buat tadi sudah berubah menjadi sebuah Symbol bertype Button.
6. Klik dua kali Button tadi maka anda akan masuk ke stage button.
7. Anda akan melihat jendela Timeline seperti gambar dibawah ini :



Gambar Timeline
Up : tampilan utama button
Over : tampilan button ketika kursor mouse berada diatas button
Down : tampilan button ketika kursor mouse menekan button
Hit : luas daerah aktif button
8. Pilih bagian Over, kemudian tekan F6 pada keyboard. Ubah warna lingkaran menjadi lebih muda
9. Pilih bagian Down, kemudian tekan F6 pada keyboard. Ubah warna lingkaran menjadi lebih tua
10. Jika anda ingin daerah aktif button menjadi lebih luas, pilih bagian Hit kemudian tekan F6 pada keyboard. Buatlah lingkaran yang ada menjadi lebih besar.
11. Kalau sudah selesai, klik tombol scene pada timeline atau bisa juga tekan CTRL+E pada keyboard.
12. Terakhir test movie dengan menekan CTRL+ENTER.
Tombol yang bagian Hit-nya tidak diberi apa-apa
Tombol yang bagian Hit-nya diisi dengan lingkaran yang lebih besar sehingga daerah aktif tombol menjadi luas

:: MOVIE CLIP ::
Movie clip adalah salah satu type dari symbol. Movie clip digunakan untuk membuat objek agar dapat menggunakan beberapa fasilitas dari flash seperti animasi tween, masking, guide selain itu dengan dijadikannya suatu objek menjadi movie clip maka objek tersebut dapat di beri actionscript. Berikut langkah-langkah membuat movie clip :
1. Buatlah sebuh flash document.
2. Buatlah sebuah objek di stage misalnya lingkaran berwarna merah dengan hitam sebagai warna garisnya.
3. Seleksi lingkaran tersebut kemudian tekan F8. Pada panel convert to symbol yang muncul masukkan lingkaran sebagai name dan movie clip sebagai type lalu tekan ok.
4. Sebuah movie clip lingkaran sudah jadi dan siap digunakan.
5. Untuk menggunakannya ulang anda dapat membuka panel library dengan menekan Ctrl+L pada keyboard. Pada panel library yang muncul drag movie clip lingkaran ke stage sebanyak yang anda mau.
6. Untuk memberikan instance name pada movie clip, pertama yang anda lakukan adalah menyeleksi movie cliptersebut kemudian tekan Ctrl+F3. Masukkan instance name yang anda inginkan ke dalam kotak instance name pada panel properties.
7. Instance name adalah nama khusus yang anda berikan pada movie clip. Nama tersebut akan digunakan untuk menghubungkan antara movie clip dengan actionscript.
Animasi Cara Membuat Shape Tweening
1. Pilih tool lingkaran atau tekan O, lalu buatlah lingkaran kecil di bagian kiri Stage.
2. Pilih tool panah, lalu klik daerah abu-abu di frame 10 di timeline. Klik kanan di daerah itu, lalu pilih: insert blank keyframe atau tekan F7.




3. Klik frame 10, pilih tool kotak atau tekan R, lalu buatlah kotak di bagian kanan Stage.
4. Klik pada timeline di antara frame 1 dan 10, lalu pilih shape pada
pilihan tween di bagian properties yang terletak di bawah Stage.



5. Pilih Control > Test Movie dari menu untuk menjalankan, atau tekan Ctrl + Enter.




Cara Membuat Motion Tweening
1. Pilih tool lingkaran atau tekan O, lalu buatlah lingkaran kecil di bagian kiri Stage.
2. Pilih tool panah (seleksi) atau tekan V. Lalu seleksi lingkaran tersebut, atau double klik pada lingkaran tersebut.
3. Konversi lingkaran tersebut menjadi simbol dengan cara pilih Modify > Convert to Symbol atau klik kanan dan pilih Convert to Symbol, atau tekan F8. Setelah itu, beri nama ‘bola’ dan pilih antara movie clip atau graphic lalu tekan OK. Lebih disarankan memilih movie clip, karena dapat ditambah berbagai macam efek filter ataupun untuk melakukan hal lainnya.




4. Sekarang klik daerah abu-abu di frame 10 di timeline. Klik kanan di daerah itu, lalu pilih: insert keyframe atau tekan F6.
5. Seleksi lingkaran itu dengan double klik, lalu geser ke bagian kanan layar.
Klik pada timeline di antara frame 1 dan 10, lalu pilih motion pada pilihan tween di bagian properties yang terletak di bawah Stage, atau klik kanan dan pilih Create Motion Tween.




7. Pilih Control > Test Movie dari menu untuk menjalankan, atau tekan Ctrl +Enter.




Animasi Motion Guide
Merupakan sebuah model dari tweening di mana objek akan bergerak sesuai dengan alur yang kita tentukan. Langkah-langkah dalam membuat motion guide:
1. Buatlah motion tween seperti sebelumnya, tapi sekarang framenya diperpanjang (bukan di frame 10, tapi di frame 40).
2. Klik layer tempat objek berada, lalu klik tombol add motion guide di bagian layer, atau klik kanan pada layer tempat objek berada, lalu pilih add motion guide.




3. Klik pada frame 1 guide, pilih tool pensil (atau tekan tombol Y), dan gambarlah sembarang garis. Perlu diingat bahwa garis tersebut tidak boleh terputus. Untuk membuat garis tidak harus menggunakan tool pensil, dapat juga menggunakan tool line, pen, dan brush.




4. Pilih tool panah, dan klik pada objek, lalu drag objek sampai lingkaran pusatnya berada di titik awal jalur guide yang telah kita buat.
5. Klik pada frame 40, klik objek lalu drag objek sampai lingkaran pusatnya berada di titik akhir jalur guide yang telah kita buat.





6. Pilih Control > Test Movie dari menu untuk menjalankan, atau tekan Ctrl + Enter.




Animasi Masking
Merupakan cara menyembunyikan sebagian objek atau teks. Dapat digunakan untuk berbagai macam efek. Langkah-langkah dalam membuatnya:
1. Buatlah motion tween lingkaran seperti sebelumnya.
2. Klik tombol insert layer pada panel timeline.



3. Klik pada frame 1 di layer yang baru, pilih tool kotak atau tekan R, lalu gambarlah kotak yang berada di jalur tween dari lingkaran.
4. Klik kanan pada layer baru tersebut, dan pilih Mask.



Pilih Control > Test Movie dari menu untuk menjalankan, atau tekan Ctrl + Enter, dan objek terlihat hanya ketika berada di dalam kotak.



KESIMPULAN
Dari hasil percobaan diatas, dapat diketahui bahwa anmasi tersebut sangat sederhana sekali, tinggal memerlukan ketiga komponen symbol tersebut dan kita proses sedikit.

ADOBE FLASH CS3 PROFESSIONAL



Membuat Animasi Sederhana dengan Permainan Keyframe

kali ini saya akan mencoba membuat tutorial yang sederhana yaitu membuat animasi sederhana dengan permainan keyframe...
ya namanya juga baru belajar jadi maaf bila ada yang kurang jelas disini, hehehe...

Ok, mari kita coba mulai saja...

Langkah 1
Buka Program Flash MX kamu

Lalu pilih new... Flash Document
Langkah 2
Menentukan besarnya STAGE



Caranya:
1. Klik Size pada Properties
2. Akan Muncul Document Properties
Atur dimensions:
disini saya menggunakan 300 x 200 px
3. Tekan OK
Langkah 3



1. Tekan R pada keyboad lalu gambar kotak di Stage
2. Lakukan pewarnaan dengan menekan V pada keyboard dan klik kotak lalu pilih Fill yang ada tanda nomor 2 di gambar
3. Pilih warna disini saya menggunakan warna biru dongker dengan nilai hexadecimal #000066
Langkah 4
Tekan T pada keyboard untuk menggunakan Text Tool lalu ketik terserah namun disini saya mengeti huruf "F"



Langkah 5
Lihat Kotak Timeline
Di situ kita akan bermain... ;P
Baiklah sekarang tekan F5 pada keyboard... hasilnya frame akan bertambah
hal ini untuk mengatur ritme dari animasi

OK tekan sebanyak 5 X
Hasilnya:



lalu Tekan F6 pada keyboard... hasilnya key Frame (untuk animasi) akan muncul
jika sudah tambahkan huruf pada stage



Ulangi Langkah 5 dan 6 (Terus tambahkan huruf sehingga membentuk tulisan FLASH