AREA KERJA MACROMEDIA FLASH PRO 8

Pertama kali kita akan melihat secara
sekilas area kerja Macromedia Flash Pro 8
yang akan digunakan dalam pembuatan
animasi. Semakin Anda dapat mengenal dan
menghafal bagian-bagian dalam area kerja
Macromedia Flash Pro 8, maka Anda akan
semakin mudah dalam mempraktikkan tutorial ini.
Jika Anda baru belajar pertama kali,
maka Anda dianjurkan untuk mengetahui
komponen-komponen utama dalam area kerja
Macromedia Flash Pro 8. Beberapa penjelasan
mengenai komponen-komponen dalam area kerja
akan dibahas pada tutorial atau langkah-langkah
pada tutorial yang terkait.
Bagian-bagian penting dalam area kerja di
atas diantaranya: Menu, Toolbox, Timeline,
Stage dan Panel.
1.1. Menu
Menu pada Macromedia Flash Pro 8
terdiri dari: File, Edit, View, Insert, Modify,
Text Commands, Control, Window dan Help. Anda
dapat melihat submenu yang terdapat pada
masing-masing menu dengan mengeklik satu kali
pada menu yang ingin Anda pilih.

Mengenal Area Kerja Macromedia Flash Pro 8

Berikut ini tampilan file atau dokumen baru
dari area kerja Macromedia Flash Pro 8:

1.2. Toolbox
Dalam toolbox terdapat komponen-
komponen penting diantaranya: Tools, View,
Colors dan Options. Toolbox memiliki peran
untuk memanipulasi atau memodifikasi objek
dalam stage.

Berikut komponen-komponen dalam toolbox beserta fungsi atau kegunaannya:

13 14
1 2
15 16
3 4
5 6 17 18
7 8
9 10 19
11 12
20

No Nama Tool Fungsi Shortcut

1 Selection Tool Memilih dan memindah objek V
2 Subselection Tool Mengubah bentuk obyek dengan edit point A
3 Free Transform Tool Mengubah atau memutar obyek sesuai keinginan Q
4 Gradient Transform Tool Merubah warna gradasi F
5 Line Tool Membuat garis N
6 Lasso Tool Menyeleksi bagian obyek yang akan diedit L
Membuat obyek secara bebas melalui titik-titik sebagai
7 Pen Tool P
penghubung
8 Text Tool Membuat teks (huruf, kata atau kalimat) T

yfr_bambang@yahoo.co.id Tutorial Macromedia Flash

 9 Oval Tool Membuat obyek ellips atau lingkaran O
10 Rectangle Tool Membuat obyek segi empat atau segi banyak R
11 Pencil Tool Menggambar obyek secara bebas Y
Membuat obyek secara bebas dengan ukuran ketebalan
12 Brush Tool B
dan bentuk yang sudah disediakan.
13 Ink Bottle Tool Memberi warna garis tepi (outline) S
14 Paint Bucket Tool Memberi warna obyek secara bebas K
15 Eyedropped Tool Mengambil Contoh warna I
16 Eraser Tool Menghapus obyek E
17 Hand Tool Menggeser Stage H
18 Zoom Tool Memperbesar atau memperkecil tampilan M atau Z
19 Stroke Tool Memberi warna pada garis tepi -
20 Fill Tool Memberi warna pada obyek -

1.3. Timeline 1.5.2 Panel Actions

Timeline atau garis waktu merupakan Panel Actions digunakan untuk menuliskan
komponen yang digunakan untuk mengatur script atau bahasa pemrograman flash
atau mengontrol jalannya animasi. Timeline (ActionScript). Anda dapat mengetikkan secara
terdiri dari beberapa layer. Layer digunakan langsung pada layar Actions atau
untuk menempatkan satu atau beberapa objek menggunakan bantuan yang disediakan oleh
dalam stage agar dapat diolah dengan objek Macromedia Flash Pro 8. Untuk memunculkan
lain. Setiap layer terdiri dari frame-frame yang atau menyembunyikan panel ini dapat
digunakan untuk mengatur kecepatan animasi. digunakan shortcut F9.
Semakin panjang frame dalam layer, maka
semakin lama animasi akan berjalan.

1.5.3 Panel Library

Library merupakan panel yang
1.4. Stage digunakan untuk menyimpan objek-objek
Stage disebut juga layar atau berupa graphic atau gambar, button atau
panggung. Stage digunakan untuk memainkan tombol, movie dan suara baik yang dibuat
objek-objek yang akan diberi animasi. Dalam langsung pada stage ataupun hasil proses
stage kita dapat membuat gambar, teks, memberi impor dari luar stage. Untuk memunculkan
warna dan lain-lain. atau menyembunyikan panel ini dapat
digunakan shortcut Ctrl+L.
1.5. Panel
Beberapa panel penting dalam Macromedia

Flash Pro 8 diantaranya panel: properties & Filters

& Parameters, Actions, Library, Color dan Align &
Info & Transform.

1.5.1 Panel Properties & Filters &

Parameters
Panel ini terdapat di bawah stage.
1.5.4 Panel Color
Untuk mengeluarkan atau menyembunyikan
Panel Color merupakan panel yang
panel ini dapat digunakan shortcut Ctrl+F3.
digunakan untuk memilih warna yang
Panel Properties & Filters & Parameters
digunakan dalam pembuatan objek-objek pada
digunakan untuk mengatur ukuran background,
stage. Ada dua jenis subpanel, yaitu: Color Mixer
warna background, kecepatan animasi dan lain-
dan Swatches. Shortcut untuk Color Mixer adalah
lain.
Shift+F9 dan shortcut untuk Color Swatches
adalah Ctrl+F9.

yfr_bambang@yahoo.co.id Tutorial Macromedia Flash

 suatu objek (motion), seperti halnya definisi
animasi yaitu teks/gambar yang bergerak.
Langkah 1:
Buat objek lingkaran menggunakan Oval Tool
(C+O)

1.5.5 Panel Align & Info & Transform
Untuk menampilkan panel ini Anda dapat
menekan Ctrl+K pada keyboard. Panel ini
digunakan untuk mengatur posisi objek, ingin
diletakkan pada tengah stage, sebelah kiri atau
kanan dan lain-lain.
Dengan panel ini Anda juga dapat memutar objek
dengan Transform.
Langkah 2:
Seleksi objek menggunakan Selection Tool (C+V)
atau Ctrl + A, untuk menyeleksi objek lingkaran.
Setelah itu, klik kanan _ Convert to symbol _ pilih
Movie Clip
Langkah 3:
Pilih frame 20 pada Layer 1 di Timeline, setelah itu
klik kanan dan Insert Keyframe. Geser objek ke
arah kanan _ kembalikan objek ke frame 1.

Beberapa hal yang perlu diketahui :

Frame : kotak-kotak dalam time line yang
menentukan lama / tidaknya tampilan
obyek dalam layer Langkah 4:
: bentuk frame yang belum terisi obyek Pada Properties di bawah stage pilih Tween Motion.
: bentuk frame yang di dalamnya telah Jika langkah benar, maka di bagian layer 1 akan
berisi obyek muncul panah dari frame 1 ke frame 20. Untuk
: bentuk frame yang merupakan menjalankan animasi: Enter atau Ctrl + Enter
perpanjangan sebuah obyek tampil untuk
dalam sebuah layer melakukan Test Movie.
Layer : lapisan-lapisan yang dibuat dalam
sebuah stage
F6 : tombol yang digunakan untuk
menyisipkan keyframe
F5 : tombol yang digunakan untuk
menyisipkan frame
F8 : tombol untuk mengkonvert atau
merubah obyek menjadi tombol (button), Untuk menghentikan test movie_Ctrl + W
graphic atau movie clip.
F9 : menampilkan action untuk menulis script CATATAN:
Animasi berhasil jika dalam layer terdapat tanda
panah (
). Jika belum berhasil (garis dalam layer
ANIMASI DASAR: berupa garis putus-putus), ulangi langkah Anda
MOTION TWEEN, SHAPE DAN sampai berhasil !
Apabila ada beberapa obyek yang akan dikenai
GUIDE animasi, buatlah setiap obyek dalam layer yang
berbeda.
Berikut akan dijelaskan teknik-teknik
pembuatan animasi dasar menggunakan Menambah layer dilakukan dengan cara klik
Macromedia Flash 8. kanan layer kemudian klik insert layer.
Atau klik pada time line.
1. Animasi Dasar Motion Tween
Animasi ini merupakan animasi yang paling Merubah nama layer dilakukan dengan cara :
dasar karena animasi ini pada prinsipnya adalah Doble click layer, ketik nama layer baru
pergerakan

yfr_bambang@yahoo.co.id Tutorial Macromedia Flash

Sebagai latihan dengan jenis motion tween Anda
dapat membuat:
Animasi bola pantul
Animasi tersebut berupa bola yang berpantul dari
suatu titik ke titik yang lain, misalnya dari titk A ke
B, dari B ke C dan seterusnya. Untuk
pengembangan Anda juga dapat menambahkan
background/gambar latar belakang, caranya
dengan menambahkan layer baru yang dilengkapi
dengan keyframe sepanjang objek tersebut
berjalan.
A C
B D
Ilustrasi Bola Pantul
2. Animasi Motion Shape
Animasi bentuk/shape dibedakan menjadi 2 bagian
yaitu:
a. Animasi bentuk dengan objek statis/diam di
tempat
b. Animasi bentuk dengan objek dinamis/bergerak
(ada motion-nya)
Yang perlu diperhatikan ketika Anda akan membuat
animasi bentuk baik yang statis ataupun dinamis
adalah bahwa objek tidak perlu di Convert to
Symbol.
a. Animasi Bentuk Statis
Langkah-langkahnya:
Langkah 1:
Buat objek lingkaran dengan Oval Tool.
Langkah 2:
Klik Frame 30, kemudian Insert Keyframe.
Langkah 3:
Ubah bentuk lingkaran menjadi bentuk bukan
lingkaran, menggunakan subselection tool.
Langkah 4:
Klik frame 1, pilih tween-shape di bawah stage.
Langkah 5:
Tekan Enter untuk Play atau Ctrl + Enter untuk
Test Movie.
Perubahan bentuk objek dari Frame 1 ke Frame 30
b. Animasi Bentuk Dinamis
Jenis animasi ini merupakan pengembangan dari
animasi bentuk statis. Pada jenis animasi ini akan
diberikan contoh objek kotak berubah menjadi teks
kotak.
Langkah-langkahnya adalah:
Langkah 1:
Buat bentuk objek bentuk kotak di frame 1
menggunakan rectangle tool.
Langkah 2:
Klik frame 40, insert keyframe.
yfr_bambang@yahoo.co.id
Langkah 3:
Pindahkan objek kotak dari frame 1 ke frame 40
setelah itu hapus objek dengan Delete.
Langkah 4:
Masih di frame 40, buat teks KOTAK, lalu tekan Ctrl
+ B (2x), agar teks terkonversi menjadi objek.
Langkah 5:
Kembali ke frame 1, pilih tween-shape, tekan
Enter.
Perubahan objek kotak menjadi teks “KOTAK”
Untuk pengembangan Anda dapat membuat
animasi berikut:
i. Animasi Tumbukan Fisika
Ilustrasi:
Objek mobil bergerak dari titik A ke titik B. Objek
truk bergerak dari C ke B. Titik B merupakan titik
tengah A dan C. Di titik B kedua objek bertemu dan
terjadi tumbukan. Namun karena objek truk lebih
besar dan kuat maka objek truk hanya bergerak
beberapa meter saja, sedangkan objek mobil
terpelanting jauh.
Bagaimanakan animasinya ? Berkhayalah .....
ii. Animasi Bola Sodok
Ilustrasi:
Buatlah background area billiard dengan satu stick
dan 2 bola, misalnya bola A dan B. Setelah itu stick
akan menyodok bola A dan mengenai bola B, bola
A dan bola B sama-sama terpental hanya karena
menyodoknya tidak terlalu keras, maka bola A
terpental lebih pendek daripada bola B.
Bagaimanakah animasinya ?
Animasi ini dapat dikembangkan dengan jumlah
bola lebih banyak, area billiard ada lubangnya dan
bola
yang dsodok berturutan dan lebih banyak.
3. Animasi Gerak Putar dengan Motion Path
Cara ini merupakan pengembangan dari cara
sebelumnya dimana obyek berubah berada di satu
titik putar.
Contoh : Animasi gerakan sayap sebuah kelelawar
Langkah-langkahnya :
Langkah 1 :
Buat obyek shape dengan menggunakan pen tool
pada frame 1, dengan cara klik setiap titik
sudut obyek yang akan dibuat.
Tutorial Macromedia Flash
Langkah 2 :
Rubah obyek tersebut dengan cara klik selection
tool letakkan kursur pada sisi-sisi obyek sampai
kursor berubah bentuk menjadi panah dengan
garis lengkung dibawahnya Pada saat tersebut
drag mouse dan rubah obyek sesuai keinginan.
Contohnya seperti di bawah ini.
Langkah 3 :
Klik free transform sehingga muncul titik edit.
Pindahkan titik putar ke samping.
Langkah 4 :
Konvert obyek menjadi movie clip dengan cara klik
kanan obyek pilih Convert to Symbol kemudian
pilih Movie Clip berilah nama misalnya sayap.
Atau dengan menekan F8.
Langkah 5 :
Rubah layer menjadi sayap kiri.
Langkah 6 :
Putar obyek ke atas dengan cara drag pada sudut
titik edit saat panah berbentuk panah melingkar.
Langkah 7 :
Klik frame 5 (sesuai keinginan) tekan F6. Rubah
putaran sayap sedikit ke bawah.
Langkah 8 :
Antara frame 1 dan frame 5 klik kanan kemudian
pilih Create Motion Tween.
Lakukan langkah 7 dan 8 pada frame 10, 15, 20
dsb. Atur putaran agar gerakan terlihat seperti
sayap yang naik turun.
Langkah 9 :
Tambahkan layer dengan cara klik kanan layer1
pilih Insert Layer. Rubah nama layer dengan sayap
kanan.
Langkah 10 :
Aktifkan frame 1 layer sayap kiri klik Edit, Copy.
Pada frame 1 layer sayap kanan klik Edit, Paste in
Place (Ctrl+Shift+V).
Langkah 11 :
Cerminkan obyek secara horisontal dengan cara :
Modify, Transform, Flip Horisontal. Atur
letaknya bersebelahan dengan sayap kiri.
Lakukan langkah 4 sampai 8. Usahakan putaran
sayap kanan simetris dengan sayap kiri.
yfr_bambang@yahoo.co.id
Tes animasi dengan Ctrl + Enter.
Tambahkan layer baru untuk badan, kepala atau
obyek yang lain.
4. Animasi Motion Path
Animasi ini merupakan dasar dari animasi
game balapan mobil atau motor, yaitu bahwa
mobil/motor bergerak mengikuti jalur/track yang
sudah ditentukan. Hati-hati dalam membuat
animasi ini, karena langkah tidak sesuai prosedur,
maka animasi tidak akan berhasil.
Langkah-langkah:
Langkah 1:
Buat objek persegi menggunakan rectangle tool
dan convert object to symbol (F8), pilih Movie Clip
Langkah 2:
Klik kanan pada layer 1, pilih Add Motion Guide
Langkah 3:
Buat jalur bebas menggunakan Pencil Tool di layer
guide
Langkah 4:
Gunakan Selection Tool, klik frame 30, dan insert
keyframe di layer guide
Langkah 5:
Pilih kembali layer 1, frame 1, pindahkan objek ke
pangkal jalur, posisikan objek dengan tepat,
sehingga terlihat lingkaran kecil di tengah-tengah
objek persegi
Posisi layer dan Guide Layer
Posisi Objek setelah diletakkan di pangkal jalur
Langkah 6:
Klik frame 30 pada layer 1, lalu Insert Keyframe
Langkah 7:
Pindahkan objek dari pangkal ke ujung sesuai jalur
yang dibuat, hati-hati pada langkah ini !
Langkah 8:
Klik kembali frame 1 pada layer 1 kemudian pilih
Tween Motion
Langkah 9:
Tekan Enter untuk Play animasi yang baru saja
Anda buat, jika belum berhasil ulangi langkah-
langkah tersebut.
Tutorial Macromedia Flash
* Animasi Motion dengan Orient to Path Langkah 9:
Animasi ini merupakan dasar dari animasi Tekan Enter untuk Play animasi yang baru saja
game balapan mobil atau motor, yaitu bahwa Anda buat, jika belum berhasil ulangi langkah-
mobil/motor bergerak mengikuti jalur/track yang langkah tersebut. Test dengan CTRL Enter.
sudah ditentukan dimana gerakan mobil / obyek
bergerak sejajar dengan lintasan. Hati-hati dalam Untuk animasi 2 pesawat yan berjalan beriringan.
membuat animasi ini, karena langkah tidak sesuai Silahkan dicoba sendiri.
prosedur, maka animasi tidak akan berhasil.
* Animasi Mobil yang bergerak pada lintasan
Langkah-langkah: Animasi ini hampir sama dengan animasi
Langkah 1: pesawat hanya saja ada 2 obyek / roda yang
Buat objek pesawat dan convert object to symbol berputar.
(F8), pilih Movie Clip
Langkah-langkah:
Langkah 2: Langkah 1:
Klik kanan pada layer 1, pilih Add Buat objek lingkaran / roda menggunakan oval tool
Motion Guide (usahakan jangan 1 warna) dan convert object to
symbol (F8), pilih Movie Clip
Langkah 3:
Buat jalur bebas menggunakan Pencil Tool di layer Langkah 2:
guide Klik kanan lingkaran, pilih Timeline Effects 
Transform/Transition  Transform.
Langkah 4:
Gunakan Selection Tool, klik frame 30, dan insert Langkah 3:
keyframe di layer guide Pilih arah putaran
pada times, isi
Langkah 5: dengan 360 pada
Pilih kembali layer 1, frame 1, pindahkan pesawat rotate, ubah angka
ke pangkal jalur, posisikan pesawat dengan tepat, effect Duration
sehingga terlihat lingkaran kecil di tengah-tengah untuk mengatur
objek persegi, putar, sejajarkan dengan lintasan. kecepatan putar.
Klik Update Preview
untuk melihat
hasilnya. Klik Ok
untuk
mengakhirinya.
Posisi layer dan Guide Layer
Langkah 4:
Kopi roda dengan cara drag sambil tekan Ctrl.

Posisi Objek setelah diletakkan di pangkal jalur
Langkah 6:
Klik frame 30 pada layer 1, lalu Insert Keyframe
Langkah 5:
Buat bodi mobil dan seleksi semua obyek (2 roda
dan bodi mobil) Convert to Symbol (F8) menjadi
Movie Clip.
Langkah selanjutnya atur seperti langkah pada
membuat pesawat (Langkah ke 2 – akhir). Test
dengan CTRL Enter.

Langkah 7: * Membuat Animasi Masking

Pindahkan objek dari pangkal ke ujung sesuai jalur
yang dibuat, hati-hati pada langkah ini ! Putar
pesawat sejajarkan dengan lintasan.
Langkah 8:
Klik kembali frame 1 pada layer 1
kemudian pilih Tween Motion
pada properties dan aktifkan
Orient to path.
Animasi ini merupakan animasi irisan dari 2
obyek yang saling bersinggungan. Terlihat seperti
sebuah obyek yang terlihat sebagian karena
disinari.
Langkah-langkah:
Langkah 1:
Buat objek lingkaran pada Layer1. Rubah nama
menjadi sinar.

Langkah 2 :
Tambahkan layer dengan klik kanan layer1  pilih
insert layer. Pada layer ini buat sebuah text dengan
text tools. Pada teks tekan Ctrl B 2x. Rubah layer
dengan nama text.

yfr_bambang@yahoo.co.id Tutorial Macromedia Flash

Langkah 3 :
Pada frame 30 (misalnya) tekan F6 pada kedua
layer. Tekan F6 pada frame 15 pada layer sinar.
Geser lingkaran ke sebelah kanan teks. Create
Motion Tween antara Frame 1 - 15 dan frame 15-
30.
Langkah 3 :
Buat obyek gelas pada layer Gelas1, dengan
menggunakan rectangle tool. Rubah bentuk dengan
menggunakan subselective tool. Pisahkan Obyek
Gelas menjadi 2 bagian yaitu warna gelas1 dan
gelas2. Usahakan warna dibedakan dengan warna
air untuk mempermudah.

Gelas2 Gelas1

Langkah 4 : Langkah 4 :
Klik kanan pada layer text pilih Mask. Sehingga Masing-masing gelas Convert to Symbol (F8)
tampilannya seperti berikut. menjadi Movie Clip beri nama Gelas1 dan Gelas2.

Langkah 5 :
Lakukan Edit > Cut pada Gelas2 dan Edit > Paste
to Place pada Frame 1 layer Gelas2.

Langkah 6 :
Pastikan titik putar gelas di pojok kiri atas, letakkan
posisi 2 gelas di atas air. Pastikan kedua gelas pada
posisi yang sama
persis sehingga
kelihatan hanya 1
Test dengan cara tekan CTRL Enter. obyek saja.

* Membuat Animasi Masking dengan obyek

Gambar
Untuk animasi ini prinsip sama seperti Langkah 7 :
masking text di atas. Hanya saja kita perlu 3 layer. Tekan F6 pada frame 30 (misalnya) pada ketiga
layer.
Langkah-langkah :
Langkah 1 : Langkah 8 :
Siapkan 3 layer dengan urutan : Gambar1, Sinar Pada Frame 30 Layer
dan Gambar2. Gelas1 putar gelas ke
atas, seperti gambar
Langkah 2 : di samping. Pastikan
Sisipkan gambar pada Gambar1 dan Gambar2 titik putar tidak
dengan cara File > Import > Import to Stage bergeser. Lakukan
> Pilih Gambar. Atur ukuran kedua gambar cara yang sama untuk
seukuran stage. Gelas2, sehingga 2
gelas ini terlihat
Langkah 3 : tumpang tindih.
Buat Obyek persegi panjang (misalnya) di sebelah
kiri gambar. Langkah 9 :
Lakukan Create Motion Tween pada layer Gelas1
Langkah 4 : dan Gelas2.
Lakukan seperti Langkah ke 3 – akhir animasi
masking text seperti contoh di atas. Langkah 10 :
Klik kanan Layer Gelas1 > Mask. Test dengan
* Animasi Gelas Berisi Air di Tumpahkan CTRL ENTER.
dengan Teknik Masking
Tambahkah layer baru, rubah nama dengan
Langkah-langkah : tumpah. Pada Layer ini animasikan gerakan
Langkah 1 : tumpahan air dari Gelas dan Animasi untuk air yang
Siapkan 2 layer dengan urutan dari bawah : Air, ditampung pada sebuah wadah. Cobalah !
Gelas1 dan Gelas2.

Langkah 2 :
Buat persegi panjang pada layer Air kira-kira
separuh dari stage.

yfr_bambang@yahoo.co.id Tutorial Macromedia Flash