Penulis DAFTAR ISI. Daftar Isi. A. Interface Flash 1

Transkripsi

1 DAFTAR ISI Daftar Isi i A. Interface Flash 1 B. Animasi Frame by Frame 4 C. Animasi Shape 5 D. Animasi Motion 6 E. Animasi Motion Guide 7 F. Animasi Masking 8 A. Interface Flash Macromedia Flash merupakan salah satu program animasi 2D vector yang sangat handal. Disini kita bisa membuat animasi kartun, animasi interaktif gambar, presentasi, video clip, movie, web animasi dan aplikasi animasi lainnya sesuai kebutuhan kita. 1. Flash Stage Flash Stage dalam kenyataan seperti layar bioskop. Pada flash stage berupa kotak putih besar. Semua obyek seperti gambar, tulisan, dan foto ditempat pada stage. Di luar area kotak putih, tersebut merupakan daerah berwarna abu-abu. Di area ini penonton tidak dapat melihat objek apapun saat film sedang dimainkan. Perhatikan gambar dibawah. layar Flash dibawah ini : PANEL G. Symbol Grafik 9 H. Symbol Movie Clip 11 I. Symbol Button 12 J. Animasi Orang Jalan 13 K. Save As 15 T O O L B O X L. Publising 15 M. Action Script 17 STAGE Penulis Ukuran default dari stage adalah 550 picxel dan tinggi 400 picxel (picture elment).picxel merupakan titik terkecil pada layar monitor Anda. Untuk mengubah ukuran sesuai kebutuhan : Klik menu Modify > Document, muncul dialog box Document Properties seperti pada gambar di bawah, Anda tinggal mengubah sesuai kebutuhannya. i F l a s h 8 1 F l a s h 8

2 2. Toolbox Toolbox berisi alat kerja berupa berbagai simbol gambar atau icon yang masing-masing mempunyai fungsi tertentu dan paling sering digunakan. Adapun komponen-komponen toolbox adalah sebagai berikut : Selection Tool Free Transform Tool Line Tool Pen Tool Oval Tool Pencil Tool Ink Bottle Tool Eye Dropper Tool Hand Tool Stroke Color Tool Fill Color Tool Default Color Tool Option Pane Subselect Tool Gradient Transform Tool Lasso Tool Teks Tool Rectangle Tool Brush Tool Paint Bucket Tool Eraser Tool Zoom Tool Swap Color Tool No Color 1) Selection Tool, digunakan untuk memilih objek. Dengan 1 kali klik berarti sebuah objek telah dipilih, dengan klik ganda (dua kali) berarti Anda memilih objek dan seluruh komponen yang dimilikinya. Dengan mendrag Arrow tool Anda dapat membuat sebuah area persegi yang akan mengaktifkan pemilihan atas semua yang ada di dalamnya. 2) Line Tool, merupakan alat untuk membuat garis. Bila Anda membuat garis sambiil menekan tombol Shift, maka akan terbentuk garis yang horisontal, vertikal atau miring ) Pen Tool, digunakan untuk membuat objek elips (oval). Untuk membuat lingkaran gunakan tool ini sambil menekan Shift. 4) Pencil Tool, Adalah alat untuk menggambar garis atau titik secara bebas. 5) Free Transform Tool, digunakan untuk memodifikasi bentuk dari suatu objek. 6) Ink Bottle Tool, digunakan untuk mewarnai suatu garis. 7) Eyedropper Tool, digunakan untuk mengambil warna yang berasal dari suatu objek di stagge sehingga Anda bisa menyamakan warna ketika menggambar. 8) Hand Tool, digunakan untuk menggeser stage secara bebas, sanggat berguna bila Anda memperbesar (zoom) stage sehinga tidak seluruh stage terlihat dilayar. 9) Stroke Color Tool, digunakan untuk memiliih warna ketika mengambar garis. 10) Fill Color Tool, digunakan untuk mengisi warna dari bagian dalam objek yang sedang digambar. Disini juga tersedia efek pengisian tergradasi. 11) Default Color Tool, Klik ikon ini untuk mengembalikan stroke color menjadi hitam dan fill coor menjadi putih. 12) No Color Tool, digunakan untuk menghilangkan warna dari garis atau warna dari isi objek tergantung penggunaannya. 13) Option Pane, menampilkan berbagai pilihan untuk memodifikasi efek dari suatu tool yang kita pilih, berbeda untuk setiap tool. 14) Subselect Tool, digunakan untuk memodifikasi suatu ggaris yang dibuat dengan Pen tool. 15) Lasso Tool, digunakan untuk memilih suatu area secara tidak teratur. Semua yang masuk areanya akan terpilih. 16) Text Tool, digunakan untuk membuat text box yang dapat diisi dengan berbagai tulisan. 17) Rectangle Tool, digunakan untuk membuat bentuk persegi. Bila ingin membuat bujur sangkar secara sempurna gunakan tool ini sambil menekan tombol shift. 2 F l a s h 8 3 F l a s h 8

3 18) Brush Tool, digunakan untuk menggambar dengan kuas secara bebas. 19) Fill Transform Tool, digunakan untuk memodifikasi bentuk dan posisi dari Gradient Fill. 20) Paint Bucket Tool, digunakan untuk memodifikasi warna dan gradasi warna di dalam suatu objek. 21) Eraser Tool, digunakan untuk menghapus suatu gambar. 22) Zoom Tool, merupakan kaca pembesar untuk memperbesar gambar, tetapi juga dapat berfungsi sebaliknya, yaitu untuk memperkecil gambar. 23) Swap Color Tool, digunakan untuk membalik warna garis atau isi suatu objek. B. Frame By Frame 1. Buat objek lingkaran dengan menggunakan Oval tool 2. Posisikan objek di pojok kiri 6. Test Movie (Ctrl + enter) C. Animasi Shape 1. Buat objek kotak dengan menggunakan Rectangle tool 2. Posisikan objek di pojok kiri 3. Insert keyframe di frame 5 lalu geser ke kanan objek lingkaran tersebut 4. Pada frame lima, objek kotak dihapus dan diganti objek oval 3. Insert keyframe di frame 2 lalu geser ke kanan objek lingkaran tersebut 4. Beri keyframe di frame selajutnya sampai frame 5 5. Klik diantara frame 1 dan 5 6. Lihat properties dibawah lalu piih Tween Shape 5. Setiap frame digeser sampai objek pada posisi paling kanan 7. Pada frame akan muncul panah hijau 8. Test Movie (Ctrl + enter) 4 F l a s h 8 5 F l a s h 8

4 D. Animasi Motion 1. Buat objek lingkaran dengan menggunakan Oval tool. Lalu hapus ditengah-tengahnya dengan cara diblok terus klik delete. Ingat!! dalam menjalankan motion, objek harus dalam posisi di kunci. Dapat menggunakan group (Ctril+ G) 2. Posisikan objek di pojok kiri 9. Test Movie (Ctrl + enter) E. Animasi Motion Guide 1. Klik file Import gambar kupu-kupu 2. Rotasi dengan posisi agak miring dengan menggunakan Free Tansform Tool 3. Insert keyframe di frame 5 lalu geser ke kanan objek lingkaran tersebut 3. Insert Keyframe pada frame 30 lalu geser objek ke kanan 4. Klik diantara frame 1 dan 5 5. Lihat properties dibawah lalu pilih Tween Motion 4. Klik kanan di frame 1 dan 30 lalu pilih Create Motion Tween 6. Pada frame akan muncul panah warna biru 7. Klik diantara frame 1 dan 5 8. Lihat propertis dibawah lau pilih rotasi CW 5. Klik Add Motion Guide 6. Pada layer guide, klik di frame 1 6 F l a s h 8 7 F l a s h 8

5 7. Buat jalur kupu-kupu sesuai keinginan dengan menggunakan pencil tool 8. Atur posisi akhir kupu-kupu tepat pada garis 2. Insert layer lalu buat objek kotak yang nantinya sebagai tutup (mask). Objek kotak di group untuk menggunakan tween motion 3. Insert keyframe di frame 25 pada layer 2 (kotak). Pindahkan objek kotak ke sebelah kanan 4. Klik kanan diantara frame 1 dan 25. Pilih Create Motion Tween 5. Klik kanan pada layer 2 lalu pulih Mask 9. Centang Orient to Path pada propertis dibawah agar pergerakan kupukupu menyesuaikan jalur. Untuk menampilkan propertis tersebut, terlebih dulu klik diantara frame 1 dan Tes Movie (Ctrl + enter) G. Symbol Grafik 1. Import gambar motor ke stage 10. Test Movie (Ctrl + enter) F. Animasi Masking 1. Buat teks dengan menggunakan Teks tool 8 F l a s h 8 9 F l a s h 8

6 2. Seleksi gambar lalu klik Modify Convert to Symbol Graphic. Beri nama dan tempatkan registration pada posisi tengah lalu klik OK H. Symbol Movie Clip 1. Import gambar kupu-kupu ke dalam stage 3. Klik double pada objek gambar motor. Muncul symbol grapik moge didalam scene 1 2. Seleksi gambar lalu klik Modify Convert to Symbol Movie Clip. Beri nama dan tempatkan registration pada posisi tengah lalu klik OK 4. Insert keyframe pada frame 25 lalu geser objek motor kesebelah kiri 5. Klik kanan diantara frame 1 dan 25 lalu pilih Create Motion Tween 3. Klik double pada objek gambar kupu-kupu. Muncul symbol grapik kupu didalam scene 1 6. Kembalikan ke scene 1 7. Insert frame di frame 20 (symbol grafik membutuhkan framelebeih dari satu untuk menjalankan animasi) 4. Buat animasi pergerakan kupu-kupu mengepakkan sayap. Dari frame 5, 10, 15 diberi keyframe buat menjadi pendek 5. Kemudian diantara keyframe tersebut diberi tween motion (berada pada propertis dibawah) 8. Tes Movie (Ctrl + enter) 6. Kembalikan ke scene 1 7. Tes Movie (Ctrl + enter). Animasi dapat berjalan karena Symbol Movie Clip bisa berfungsi walaupun hanya mempunyai 1 frame 10 F l a s h 8 11 F l a s h 8

7 Over Down Hit : tampilan waktu disentuh : tampilan waktu ditekan atau di klik : Area sentuh tombol I. Symbol Button 1. Buat objek lingkaran dengan warna colour radial 5. Kembalikan ke scene 1 6. Tes Movie (Ctrl + enter) 2. Seleksi gambar lalu klik Modify Convert to Symbol Button. Beri nama dan tempatkan registration pada posisi tengah lalu klik OK J. Animasi Orang Jalan 1. Rangkai gambar potongan-potongan tubuh menjadi utuh ke dalam stage dalam layer 1 3. Klik double pada objek lingkaran. Muncul symbol grapik tombol didalam scene 1 2. Di blok semua rangkaian gambar tersebut lalu Convert to Symbol kedalam Movie Clip 4. Beri keyframe di frame over, down, dan hit. Pada frame over ganti warna lingkaran menjadi merah radial. Di frame down warna biru radial dan di frame hit silver radial. Catatan: Up : tampilan awal 12 F l a s h 8 13 F l a s h 8

8 3. Klik double objek orang lalu langsung klik kanan pada objek. Pilih Distribute to Layers 9. Tes Movie (Ctrl + enter) K. Save As 1. Klik file Save As bila file yang belum disimpan masih berupa untitled dan ada tanda bintang diatasnya (*). Simpan ditempat sesuai dengan keinginan, diusahakan dalam satu folder sendiri 4. Buat animasi pergerakannya 2. Bila sudah tersimpan, pada untitled akan berubaha sesuai dengan nama filenya. Dalam hal ini jalan.fla 5. Kembalikan ke scene 1 6. Insert layer rumah. Ambil gambar rumah masukkan kedalam layer rumah 7. Beri keyframe kedua layer pada frame Klik kanan diantara frame 1 dan 100, pilih Create Motion Tween 3. Untuk selanjutnya bila ada tanda bintang (*) maka file itu belum disimpan. Kalau sudah menggunakan Save As untuk selanjutnya tinggal Save (Ctrl + S) L. Publishing 1. Klik File Publish Setting 14 F l a s h 8 15 F l a s h 8

9 a..swf d..jpg b..html e..png c..gif f..exe g..hqx h..mov 2. OK M. Action Script 1. Tampilan action 16 F l a s h 8 17 F l a s h 8

10 2. Objek a. Buat objek bintang pada stage. Klik tahan Rectangle Tool. Lalu pilih Polystar Tool d. Insert layer untuk tombol, beri nama tombol pada layer yang akan diisi button dan beri nama bintang pada layer yang terdapat objek bintang. e. Ambil objek tombol pada menu Window Common Libraries Button b. Lihat properties dibawah, klik option, f. Pilih tombol sesuai yang diinginkan c. Insert keyframe pada frame 2, lalu buat ganti warna objek bintang. Selanjutnya insert keyframe lagi sampai frame 5.dan tiap keyframe diberi perubahan warna 3. Script Stop pada frame a. Dengan menngunakan objek bintang diatas, Insert layer baru lalu beri keyframe pada frame 5 b. Klik kanan pada frame ke 5. Beri action stop 18 F l a s h 8 19 F l a s h 8

11 d. Tampilan script c. Tampilan frame e. Test Movie (Ctrl + Enter) Previous Frame a. Klik kanan pada button lalu beri action b. Klik dulu Script Assist untuk memudahkan pembuatan script c. Pilih Global Fuction Timeline Control goto d. Test Movie (Ctrl + Enter) Stop pada button a. Klik kanan pada button lalu beri action stop d. Tampilan script b. Test Movie (Ctrl + Enter) Nexframe a. Klik kanan pada button lalu beri action b. Klik dulu Script Assist untuk memudahkan pembuatan script c. Pilih Global Fuction Timeline Control goto e. Test Movie (Ctrl + Enter) GotoAndPlay a. Klik kanan pada button lalu beri action b. Klik dulu Script Assist untuk memudahkan pembuatan script c. Pilih Global Fuction Timeline Control goto d. Tampilan script 20 F l a s h 8 21 F l a s h 8

12 c. Tampilan script e. Test Movie (Ctrl + Enter) GotoAndStop a. Klik kanan pada button lalu beri action b. Klik dulu Script Assist untuk memudahkan pembuatan script c. Pilih Global Fuction Timeline Control goto d. Tampilan script d. Test Movie (Ctrl + Enter) Fscommand quit (tampilan full) a. Insert layer baru, lalu klik kanan pada frame 1. Pilih Action b. Pilih Global Fuction Browser/Network fscommand quit e. Test Movie (Ctrl + Enter) c. Tampilan script Fscommand fullscreeen (tampilan full) a. Insert layer baru, lalu klik kanan pada frame 1. Pilih Action b. Pilih Global Fuction Browser/Network fscommand fullscreen d. Test Movie (Ctrl + Enter) Load Movie Num a. Siapkan 2 file fla, yang satu namanya jalan.fla sedangkan yang satu lagi terbang.fla 22 F l a s h 8 23 F l a s h 8

13 b. Linkkan file jalan ke terbang dengan memberi script pada tombol yang ada pada file jalan.fla. Klik kanan pada tombol, pilih action c. Plih GlobalFuction Browser/Network loadmovie d. Klik dulu Script Assist untuk memudahkan pembuatan script e. Ketik URL terbang.swf dengan level 0 f. Test Movie (Ctrl + Enter) 24 F l a s h 8

14