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.
DAFTAR ISI
i
Daftar Isi A. Interface Flash
1
B. Animasi Frame by Frame
4
C. Animasi Shape
5
D. Animasi Motion
6
E. Animasi Motion Guide
7
F.
8
Animasi Masking
G. Symbol Grafik
9
H. Symbol Movie Clip
11
I.
Symbol Button
12
J.
Animasi Orang Jalan
13
K. Save As
15
L. Publising
15
M. Action Script
17
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
T O O L B O X
STAGE
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.
Penulis
i|F l a s h
8
1| F l a s h
8
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
Subselect Tool Gradient Transform Tool
Line Tool
Lasso Tool
Pen Tool
Teks Tool
Oval Tool Pencil Tool Ink Bottle Tool Eye Dropper Tool Hand Tool
Rectangle Tool Brush Tool Paint Bucket Tool Eraser Tool Zoom Tool
Stroke Color Tool Fill Color Tool Default Color Tool Option Pane
Swap Color Tool No Color
2| F l a s h
8
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 450. 3) 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. 3| F l a s h
8
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
3. 4.
Insert keyframe di frame 2 lalu geser ke kanan objek lingkaran tersebut Beri keyframe di frame selajutnya sampai frame 5
5.
Setiap frame digeser sampai objek pada posisi paling kanan
4|F l a s h
8
6.
Test Movie (Ctrl + enter)
C. Animasi Shape 1. Buat objek kotak dengan menggunakan Rectangle tool ≡ 2. Posisikan objek di pojok kiri
3. 4.
Insert keyframe di frame 5 lalu geser ke kanan objek lingkaran tersebut Pada frame lima, objek kotak dihapus dan diganti objek oval
5. 6.
Klik diantara frame 1 dan 5 Lihat properties dibawah lalu piih Tween ► Shape
7.
Pada frame akan muncul panah hijau
8.
Test Movie (Ctrl + enter) 5| F l a s h
8
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.
4. 5.
6.
7. 8.
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 kanan di frame 1 dan 30 lalu pilih Create Motion Tween
5. 6.
Klik Add Motion Guide ≡ Pada layer guide, klik di frame 1
Klik diantara frame 1 dan 5 Lihat properties dibawah lalu pilih Tween ► Motion
Pada frame akan muncul panah warna biru
Klik diantara frame 1 dan 5 Lihat propertis dibawah lau pilih rotasi ► CW 6|F l a s h
8
7| F l a s h
8
4.
Insert layer ≡ lalu buat objek kotak yang nantinya sebagai tutup (mask). Objek kotak di group untuk menggunakan tween motion Insert keyframe di frame 25 pada layer 2 (kotak). Pindahkan objek kotak ke sebelah kanan Klik kanan diantara frame 1 dan 25. Pilih Create Motion Tween
5.
Klik kanan pada layer 2 lalu pulih Mask
6.
Tes Movie (Ctrl + enter)
2. 7. 8.
9.
Buat jalur kupu-kupu sesuai keinginan dengan menggunakan pencil tool ≡ Atur posisi akhir kupu-kupu tepat pada garis
3.
Centang Orient to Path pada propertis dibawah agar pergerakan kupukupu menyesuaikan jalur. Untuk menampilkan propertis tersebut, terlebih dulu klik diantara frame 1 dan 30
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
2.
Seleksi gambar lalu klik Modify ► Convert to Symbol ► Graphic. Beri nama dan tempatkan registration pada posisi tengah lalu klik OK
3.
Klik double pada objek gambar motor. Muncul symbol grapik moge didalam scene 1
4. 5.
Insert keyframe pada frame 25 lalu geser objek motor kesebelah kiri Klik kanan diantara frame 1 dan 25 lalu pilih Create Motion Tween
6. 7.
Kembalikan ke scene 1 ≡ Insert frame di frame 20 (symbol grafik membutuhkan framelebeih dari satu untuk menjalankan animasi)
8.
Tes Movie (Ctrl + enter)
H. Symbol Movie Clip 1. Import gambar kupu-kupu ke dalam stage
2.
Seleksi gambar lalu klik Modify ► Convert to Symbol ► Movie Clip. Beri nama dan tempatkan registration pada posisi tengah lalu klik OK
3.
Klik double pada objek gambar kupu-kupu. Muncul symbol grapik kupu didalam scene 1
4.
Buat animasi pergerakan kupu-kupu mengepakkan sayap. Dari frame 5, 10, 15 diberi keyframe buat menjadi pendek Kemudian diantara keyframe tersebut diberi tween motion (berada pada propertis dibawah)
5.
6. 7.
10| F l a s h
8
Kembalikan ke scene 1 ≡ Tes Movie (Ctrl + enter). Animasi dapat berjalan karena Symbol Movie Clip bisa berfungsi walaupun hanya mempunyai 1 frame 11| F l a s h
8
Over Down Hit
I.
: tampilan waktu disentuh : tampilan waktu ditekan atau di klik : Area sentuh tombol
Symbol Button 1. Buat objek lingkaran dengan warna colour radial
5. 6. 2.
Seleksi gambar lalu klik Modify ► Convert to Symbol ► Button. Beri nama dan tempatkan registration pada posisi tengah lalu klik OK
3.
Klik double pada objek lingkaran. Muncul symbol grapik tombol didalam scene 1
J.
Animasi Orang Jalan 1. Rangkai gambar potongan-potongan tubuh menjadi utuh ke dalam stage dalam layer 1
2.
4.
Kembalikan ke scene 1 ≡ Tes Movie (Ctrl + enter)
Di blok semua rangkaian gambar tersebut lalu Convert to Symbol kedalam Movie Clip
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
9. 3.
Tes Movie (Ctrl + enter)
Klik double objek orang lalu langsung klik kanan pada objek. Pilih Distribute to Layers 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. 6. 7. 8.
Kembalikan ke scene 1 ≡ Insert layer rumah. Ambil gambar rumah masukkan kedalam layer rumah Beri keyframe kedua layer pada frame 100 Klik kanan diantara frame 1 dan 100, pilih Create Motion Tween
14 | F l a s h
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
8
15| F l a s h
8
d. .jpg
a. .swf
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
d. 2.
Objek a. Buat objek bintang pada stage. Klik tahan Rectangle Tool ≡ pilih Polystar Tool
b.
e. . Lalu
Lihat properties dibawah, klik option,
f. 3.
c.
Insert layer untuk tombol, beri nama tombol pada layer yang akan diisi button dan beri nama bintang pada layer yang terdapat objek bintang. Ambil objek tombol pada menu Window ► Common Libraries ► Button
Insert keyframe pada frame 2, lalu buat ganti warna objek bintang. Selanjutnya insert keyframe lagi sampai frame 5.dan tiap keyframe diberi perubahan warna
18 | F l a s h
8
Pilih tombol sesuai yang diinginkan
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
19| F l a s h
8
c.
d.
Tampilan script
e.
Test Movie (Ctrl + Enter)
Tampilan frame
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
b.
d.
Tampilan script
e.
Test Movie (Ctrl + Enter)
Test Movie (Ctrl + Enter)
Nexframe a. Klik kanan pada button lalu beri action untuk memudahkan pembuatan script b. Klik dulu Script Assist c. Pilih Global Fuction ►Timeline Control ► goto
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
c. Tampilan script
e. Test Movie (Ctrl + Enter) d. 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
Fscommand quit (tampilan full) a. Insert layer baru, lalu klik kanan pada frame 1. Pilih Action b. Pilih Global Fuction ► Browser/Network ► fscommand ► quit
c. Tampilan script e. Test Movie (Ctrl + Enter) 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
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
