daftar isi interface flash macromedia flash merupakan ... · pdf filea. interface flash 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

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

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 :

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

Penulis

PANEL

T

O

O

L

B

O

X

STAGE

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 :

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.

Option Pane

Selection Tool

Line Tool

Default Color Tool

Hand Tool

Eye Dropper Tool

Ink Bottle Tool

Pencil Tool

Oval Tool

Pen Tool

Free Transform Tool

Subselect Tool

Lasso Tool

Teks Tool

Paint Bucket Tool

Eraser Tool

Rectangle Tool

Brush Tool

Gradient Transform Tool

Zoom Tool

Stroke Color Tool

Fill Color Tool

Swap Color Tool

No Color

2| F l a s h 8 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. Insert keyframe di frame 2 lalu geser ke kanan objek lingkaran tersebut 4. Beri keyframe di frame selajutnya sampai frame 5

5. Setiap frame digeser sampai objek pada posisi paling kanan

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

5. Klik diantara frame 1 dan 5 6. Lihat properties dibawah lalu piih Tween ► Shape

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

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

3. Insert keyframe di frame 5 lalu geser ke kanan objek lingkaran tersebut

4. Klik diantara frame 1 dan 5 5. Lihat properties dibawah lalu pilih Tween ► Motion

6. Pada frame akan muncul panah warna biru

7. Klik diantara frame 1 dan 5 8. Lihat propertis dibawah lau pilih rotasi ► CW


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 pada frame 30 lalu geser objek ke kanan

4. Klik kanan di frame 1 dan 30 lalu pilih Create Motion Tween

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

7. Buat jalur kupu-kupu sesuai keinginan dengan menggunakan pencil

tool ≡ 8. Atur posisi akhir kupu-kupu tepat pada garis

9. Centang Orient to Path pada propertis dibawah agar pergerakan kupu-

kupu menyesuaikan jalur. Untuk menampilkan propertis tersebut, terlebih dulu klik diantara frame 1 dan 30


F. Animasi Masking

1. Buat teks dengan menggunakan Teks tool ≡

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

6. Tes Movie (Ctrl + enter)

G. Symbol Grafik

1. Import gambar motor ke stage

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. Insert keyframe pada frame 25 lalu geser objek motor kesebelah kiri

5. Klik kanan diantara frame 1 dan 25 lalu pilih Create Motion Tween

6. Kembalikan ke scene 1 ≡

7. Insert frame di frame 20 (symbol grafik membutuhkan framelebeih dari satu

untuk menjalankan animasi)


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

5. Kemudian diantara keyframe tersebut diberi tween motion (berada pada

propertis dibawah)


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

I. Symbol Button

1. Buat objek lingkaran dengan warna colour radial

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

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

Over : tampilan waktu disentuh

Down : tampilan waktu ditekan atau di klik

Hit : Area sentuh tombol



J. Animasi Orang Jalan

1. Rangkai gambar potongan-potongan tubuh menjadi utuh ke dalam stage dalam

layer 1

2. Di blok semua rangkaian gambar tersebut lalu Convert to Symbol kedalam

Movie Clip

12 | F l a s h 8 13| F l a s h 8

3. Klik double objek orang lalu langsung klik kanan pada objek. Pilih Distribute

to Layers

4. Buat animasi pergerakannya


6. Insert layer rumah. Ambil gambar rumah masukkan kedalam layer rumah

7. Beri keyframe kedua layer pada frame 100

8. Klik kanan diantara frame 1 dan 100, pilih Create Motion Tween


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

2. Bila sudah tersimpan, pada untitled akan berubaha sesuai dengan nama

filenya. Dalam hal ini jalan.fla

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

a. .swf

b. .html

c. .gif

d. .jpg

e. .png

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

2. Objek

a. Buat objek bintang pada stage. Klik tahan Rectangle Tool ≡ . Lalu pilih Polystar Tool

b. Lihat properties dibawah, klik option,

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

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

f. Pilih tombol sesuai yang diinginkan

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

c. Tampilan frame

d. Test Movie (Ctrl + Enter)

Stop pada button

a. Klik kanan pada button lalu beri action stop

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

d. Tampilan script

e. Test Movie (Ctrl + Enter)

Previous Frame




d. Tampilan script


GotoAndPlay




d. Tampilan script

20 | F l a s h 8 21| F l a s h 8


GotoAndStop




d. 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

c. 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


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

daftar isi interface flash macromedia flash merupakan ... · pdf filea. interface flash 1 ......

Documents