Anda di halaman 1dari 7

AREA KERJA MACROMEDIA FLASH PRO 8

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

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)

Langkah 2:
Seleksi objek menggunakan Selection Tool (C+V)
atau Ctrl + A, untuk menyeleksi objek lingkaran.
1.5.5 Panel Align & Info & Transform Setelah itu, klik kanan _ Convert to symbol _ pilih
Untuk menampilkan panel ini Anda dapat Movie Clip
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 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 Langkah 3:
dapat membuat: Pindahkan objek kotak dari frame 1 ke frame 40
Animasi bola pantul setelah itu hapus objek dengan Delete.
Animasi tersebut berupa bola yang berpantul dari
suatu titik ke titik yang lain, misalnya dari titk A ke Langkah 4:
B, dari B ke C dan seterusnya. Untuk Masih di frame 40, buat teks KOTAK, lalu tekan Ctrl
pengembangan Anda juga dapat menambahkan + B (2x), agar teks terkonversi menjadi objek.
background/gambar latar belakang, caranya
dengan menambahkan layer baru yang dilengkapi Langkah 5:
dengan keyframe sepanjang objek tersebut Kembali ke frame 1, pilih tween-shape, tekan
berjalan. Enter.

A C

B D Perubahan objek kotak menjadi teks “KOTAK”


Ilustrasi Bola Pantul
Untuk pengembangan Anda dapat membuat
2. Animasi Motion Shape animasi berikut:
Animasi bentuk/shape dibedakan menjadi 2 bagian
yaitu: i. Animasi Tumbukan Fisika
a. Animasi bentuk dengan objek statis/diam di Ilustrasi:
tempat Objek mobil bergerak dari titik A ke titik B. Objek
b. Animasi bentuk dengan objek dinamis/bergerak truk bergerak dari C ke B. Titik B merupakan titik
(ada motion-nya) tengah A dan C. Di titik B kedua objek bertemu dan
Yang perlu diperhatikan ketika Anda akan membuat terjadi tumbukan. Namun karena objek truk lebih
animasi bentuk baik yang statis ataupun dinamis besar dan kuat maka objek truk hanya bergerak
adalah bahwa objek tidak perlu di Convert to beberapa meter saja, sedangkan objek mobil
Symbol. terpelanting jauh.
Bagaimanakan animasinya ? Berkhayalah .....
a. Animasi Bentuk Statis
Langkah-langkahnya: ii. Animasi Bola Sodok
Langkah 1: Ilustrasi:
Buat objek lingkaran dengan Oval Tool. Buatlah background area billiard dengan satu stick
Langkah 2: dan 2 bola, misalnya bola A dan B. Setelah itu stick
Klik Frame 30, kemudian Insert Keyframe. akan menyodok bola A dan mengenai bola B, bola
Langkah 3: A dan bola B sama-sama terpental hanya karena
Ubah bentuk lingkaran menjadi bentuk bukan menyodoknya tidak terlalu keras, maka bola A
lingkaran, menggunakan subselection tool. terpental lebih pendek daripada bola B.
Langkah 4: Bagaimanakah animasinya ?
Klik frame 1, pilih tween-shape di bawah stage. Animasi ini dapat dikembangkan dengan jumlah
Langkah 5: bola lebih banyak, area billiard ada lubangnya dan
Tekan Enter untuk Play atau Ctrl + Enter untuk bola
Test Movie. 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.
Perubahan bentuk objek dari Frame 1 ke Frame 30
Contoh : Animasi gerakan sayap sebuah kelelawar
b. Animasi Bentuk Dinamis Langkah-langkahnya :
Jenis animasi ini merupakan pengembangan dari Langkah 1 :
animasi bentuk statis. Pada jenis animasi ini akan Buat obyek shape dengan menggunakan pen tool
diberikan contoh objek kotak berubah menjadi teks pada frame 1, dengan cara klik setiap titik
kotak. sudut obyek yang akan dibuat.
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 Tutorial Macromedia Flash


Langkah 2 : Tes animasi dengan Ctrl + Enter.
Rubah obyek tersebut dengan cara klik selection Tambahkan layer baru untuk badan, kepala atau
tool letakkan kursur pada sisi-sisi obyek sampai obyek yang lain.
kursor berubah bentuk menjadi panah dengan
garis lengkung dibawahnya Pada saat tersebut 4. Animasi Motion Path
drag mouse dan rubah obyek sesuai keinginan. Animasi ini merupakan dasar dari animasi
Contohnya seperti di bawah ini. 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 3 : Langkah 1:
Klik free transform sehingga muncul titik edit. Buat objek persegi menggunakan rectangle tool
Pindahkan titik putar ke samping. 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
Langkah 4 : guide
Konvert obyek menjadi movie clip dengan cara klik
kanan obyek pilih Convert to Symbol kemudian Langkah 4:
pilih Movie Clip berilah nama misalnya sayap. Gunakan Selection Tool, klik frame 30, dan insert
Atau dengan menekan F8. keyframe di layer guide
Langkah 5 : Langkah 5:
Rubah layer menjadi sayap kiri. Pilih kembali layer 1, frame 1, pindahkan objek ke
pangkal jalur, posisikan objek dengan tepat,
Langkah 6 : sehingga terlihat lingkaran kecil di tengah-tengah
Putar obyek ke atas dengan cara drag pada sudut objek persegi
titik edit saat panah berbentuk panah melingkar.

Posisi layer dan Guide Layer


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.
Posisi Objek setelah diletakkan di pangkal jalur
Langkah 9 :
Tambahkan layer dengan cara klik kanan layer1 Langkah 6:
pilih Insert Layer. Rubah nama layer dengan sayap Klik frame 30 pada layer 1, lalu Insert Keyframe
kanan.
Langkah 7:
Langkah 10 : Pindahkan objek dari pangkal ke ujung sesuai jalur
Aktifkan frame 1 layer sayap kiri klik Edit, Copy. yang dibuat, hati-hati pada langkah ini !
Pada frame 1 layer sayap kanan klik Edit, Paste in
Place (Ctrl+Shift+V). Langkah 8:
Klik kembali frame 1 pada layer 1 kemudian pilih
Langkah 11 : Tween Motion
Cerminkan obyek secara horisontal dengan cara :
Modify, Transform, Flip Horisontal. Atur Langkah 9:
letaknya bersebelahan dengan sayap kiri. Tekan Enter untuk Play animasi yang baru saja
Lakukan langkah 4 sampai 8. Usahakan putaran Anda buat, jika belum berhasil ulangi langkah-
sayap kanan simetris dengan sayap kiri. langkah tersebut.

yfr_bambang@yahoo.co.id 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.

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

Langkah 7: * Membuat Animasi Masking


Pindahkan objek dari pangkal ke ujung sesuai jalur Animasi ini merupakan animasi irisan dari 2
yang dibuat, hati-hati pada langkah ini ! Putar obyek yang saling bersinggungan. Terlihat seperti
pesawat sejajarkan dengan lintasan. sebuah obyek yang terlihat sebagian karena
disinari.
Langkah 8:
Klik kembali frame 1 pada layer 1 Langkah-langkah:
kemudian pilih Tween Motion Langkah 1:
pada properties dan aktifkan Buat objek lingkaran pada Layer1. Rubah nama
Orient to path. 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 : Langkah 3 :
Pada frame 30 (misalnya) tekan F6 pada kedua Buat obyek gelas pada layer Gelas1, dengan
layer. Tekan F6 pada frame 15 pada layer sinar. menggunakan rectangle tool. Rubah bentuk dengan
Geser lingkaran ke sebelah kanan teks. Create menggunakan subselective tool. Pisahkan Obyek
Motion Tween antara Frame 1 - 15 dan frame 15- Gelas menjadi 2 bagian yaitu warna gelas1 dan
30. 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

Anda mungkin juga menyukai