BAB 1

Mengenal Macromedia Flash

Program komputer Macromedia Flash 8 hadir untuk menambah kemampuan dan keterampilan siswa
dalam animasi seperti animasi gambar, teks, dan aplikasi dengan program lain. Harapannya agar
materi yang disampaikan dalam modul ini dapat dimengerti secara lebih atraktif, menarik dan mudah.
Macromedia Flash merupakan sebuah program yang didesain khusus oleh Macromedia, saat itu
sebagai pengembangnya yang saat ini sudah dibeli oleh Adobe Incorporated sehingga berubah nama
menjadi Adobe Flash, Flash didesain dengan kemapuan untuk membuat animasi 2 dimensi yang
handal dan ringan sehingga flash banyak digunakan untuk membangun dan memberikan efek animasi
pada website, CD Interaktif dan yang lainnya.
Keunggulan yang dimiliki oleh Flash ini adalah ia mampu diberikan sedikit code pemograman baik
yang berjalan sendiri untuk mengatur animasi yang ada didalamnya atau digunakan untuk
berkomunikasi dengan program lain seperti HTML, PHP, dan Database dengan pendekatan XML.
Beberapa jenis macromedia berdasarkan perkembangannya antaranya ada macromedia flash versi 5,
kemudian berkembang kembali menjadi Macromedia 6 atau sering disebut sebagai macromedia MX,
berkembang kembali menjadi Macromedia 7 atau sering disebut sebagai Macromedia MX 2004, dan
berkembang kembali menjadi Macromedia Flash 8 dan saat ini setelah dibeli oleh Adobe berkembang
kembali menjadi Adobe Flash CS3
Dibawah ini adalah beberapa Screenshoot Tampilan Utama Flash :
Macromedia Flash 8

Berikut penjelasan gambar di atas tentang tempat kerjaThe working environment di flash 8:
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.

Gambar 1.2: Contoh menu dan submenu 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:
Gambar
tool

Nama tool

Fungsi

Shortcut

Selection Tool

Memilih dan memindahkan objek

Subselection Tool

Gradient Transform Tool

Mengubah bentuk objek dengan

edit points
Mengubah atau memutar bentuk
objek sesuai keinginan
Mengubah warna gradasi

Line Tool

Membuat g aris

Lasso Tool

Menyeleksi bagian objek

yang akan diedit
Membuat obyek secara bebas
berupa
titik-titik
sebagai
penghubng
Membuat teks (kata atau kalimat)

Membuat objek elips atau

lingkaran
Membuat objek berbentuk segi
empat atau segi banyak
Menggambar objek secara bebas

Menggambar objek secara bebas

dengan ukuran ketebalan dan
bentuk yang sudah disediakan
Memberi warna garis tepi
(outline)

Free Transform Tool

Pen Tool
Text Tool
Oval Tool
Ractangle Tool
Pencil Tool
Brush Tool
Ink Bottle Tool

Q
F

P
T

R
Y

S
2

Paint Bucket Tool

Memberi warna pada objek secara

bebas

Eyedropper Tool

Mengambil contoh warna

Eraser Tool

Menghapus objek

Hand Tool

Menggeser stage

Zoom Tool
Stroke Color

Memperbesar atau memperkecil

objek
Memberi warna pada g aris tepi

Fill Color

Memberi warna pada pada objek

M atau Z
-

1.3. Timeline
Timeline atau garis waktu merupakan komponen yang digunakan untuk mengatur atau mengontrol
jalannya animasi. Timeline terdiri dari beberapa layer. Layer digunakan untuk menempatkan satu atau
beberapa objek dalam stage agar dapat diolah dengan objek lain. Setiap layer terdiri dari frame-frame
yang digunakan untuk mengatur kecepatan animasi. Semakin panjang frame dalam lay er, maka
semakin lama animasi akan berjalan.

Gambar 1.3: Layer dan frame pada Timeline

1.4. Stage
Stage disebut juga layar atau panggung. Stage digunakan untuk memainkan objek-objek yang akan
diberi animasi. Dalam stage kita dapat membuat gambar, teks, memberi warna dan lain-lain.

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. Untuk mengeluarkan atau menyembunyikan panel ini dapat
digunakan shortcut Ctrl+F3. Panel Properties & Filters & Parameters digunakan untuk untuk meng
atur ukuran background, warna background, kecepatan animasi dan lain-lain.

Gambar 1.4: Panel Properties & Filters & Parameters

1.5.2 Panel Actions

Panel Actions digunakan untuk menuliskan script atau bahasa pemrograman flash (ActionScript). Anda
dapat mengetikkan secara langsung pada layar Actions atau menggunakan bantuan yang disediakan
oleh Macromedia Flash Pro 8. Untuk memunculkan atau menyembunyikan panel ini dapat dig unakan
shortcut F9.

Gambar 1.5: Panel Actions untuk membuat ActionScript

1.5.3 Panel Library

Library merupakan panel yang digunakan untuk menyimpan objek-objek berupa graphic atau gambar,
button atau tombol, movie dan suara baik yang dibuat langsung pada stage ataupun hasil proses
impor dari luar stage. Untuk
memunculkan
atau
menyembunyikan panel ini dapat
digunakan shortcut Ctrl+L.

Gambar 1.6: Panel Library

1.5.4 Panel Color

Panel Color merupakan panel yang digunakan untuk memilih warna yang digunakan dalam pembuatan
objek-objek pada stage. Ada dua jenis subpanel, yaitu: Color Mixer dan Swatches. Shortcut untuk Color
Mixer adalah Shift+F9 dan shortcut untuk Color Swatches adalah Ctrl+F9.
4

Gambar 1.7: Bagian dari panel Color

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.

Gambar 1.8: Bagian dari panel Align & Info & Transform

BAB 2
Bekerja Dengan Macromedia Flash Pro 8
A. Menjalankan Macromedia Flash 8
Pilih Start, All Programs, Macromedia, Maromedia Flash 8.

B. Membuat Dokumen Baru

Kegiatan 1
Untukmembuat dokumen baru , ikuti langkah-langkah sebagai berikut :
6

 Pilih File, New

Muncul jendela New DocumentPilih General, Flash Document,Ok

C. Mengatur Dokumen Flash

Digunakan untuk untuk mengatur tayangan, background.

Untuk mengatur tayangan background , ikuti langkah-langkah sbb :

Pilih properties, size: 550 x 400 pixels
Muncul jendelaDocument properties.
Isikan Title: ::: Dasar-dasar Flash
Description: Dasar-dasar animasi menggunakan Macromedia Flash Dimention: 550 ppx (width x 500
px (height) Background color: ganti warna abu-abu.
Pilih Ok untuk mengakhiri.
Lihatlah perubahan background

D. Menyimpan Dokumen Flash

Pilih File, Save As

Simpan di flash disk masing-masing dan beri nama dasar-dasar flash, pilih save untuk mengakhiri.

E. Mengimpor Media
Digunakan untuk mengambil gambar dari tempat/folder lain yang sudah jadi seperti foto atau hasil
scan.
8

 Pilih File, Import, Import to Stage.

Muncul Jendela Import, pilih missal gambar picture1.wmf (atau ekstensi lain seperti jpg, bmp),
Pilih open untuk membuka gambar.

Gunakan View, Zoom Out untuk menampakkan seluruh gambar (memperkecil gambar).
Untuk memperbesar gambar gunakan menu View, Zoom In.
Gunakan Scroll horizontal atau vertikal di sebelah stage untuk memposisikan gambar.

Import dapat dilakukan langsung ke library (disimpan di program Flash) dengan cara
Pilih File, Import, Import library.
9

Agar gambar yang dipilih tersedia/muncul di library, pilih menu Window, Library
.

Gambar muncul di kotak library seperti berikut ini.

F. Mengorganisir Layer
Double klik pada layer1 ganti tulisan dengan mengetikkan kata foto, lakukan double enter untuk
mengakhiri.
10

G. Membuat layer baru

Pilih insert layer (

), double klik layer 2, ketik tulisan teks. Maka terbentuk layer baru.

H. Membuat Teks
Pilih Text tool (T)

, tekan dan geser pointer pada gambar (stage) sampai berbentuk kotak, ketik

Kampus SMA 6 Malang sehingga menjadi bentuk seperti berikut. Klik sebarang lokasi untuk
mengakhiri tulisan.

Kampus SMA 6

I. Menggambar Obyek (Object Drawing )

Kegiatan 2
Diawali dengan membuka file baru, kali ini menggambar obyek kotak dan menulis teks.
Menggambar Obyek ( ikuti langkah-langkah sebagai berikut )
11

 Pilih file, New

Muncul kotak New Document, pada general pilih flash document, akhiri dengan Ok.
Pilih rectangle tool (

x
Lakukan penggambaran dengan tekan mouse, geser ke kanan dan bawah, lepaskan mouse.

J. Merubah Warna
Pilih selection

tool (

Pilih properties pada property panel, pilih fill color (

dan stroke color (

) untuk mengganti warna arsir,

) untuk perubahan warna garis.

12

K. Mengganti nama layer

Double klik pada layer 1, ketik kotak.

L. Membuat Layer baru

Pilih insert layer (
),
double klik pada layer 2, ketik teks akhiri dengan menekan tombol enter pada keyboard.
Pilih text tool (

), buatlah kotak untuk mengisi tulisan, lakukan pengetikan menggambar

akhiri dengan enter sehingga menghasilkan bentuk berikut ini.

M. Mengganti warna huruf

13

Pilih teks, pada properties klik text fill color (

), pilih warna biru. Klik sembarang

tempat untuk mengakhiri.

Tugas 1:
1. Buatlah bentuk lingkaran dengan layer bernama lingkaran, beri warna merah.
2. Buatlah teks menggambar lingkaran dengan warna merah, layer teks 2.
3. Cek hasil anda seperti berikut ini.

Jika belum sama dengan yang tergambar, jangan segan untuk bertanya.
Tugas 2.
1. Lanjutkan membuat layer baru bernama garis, buatlah garis dengan menggunakan line tool (

dengan warna biru.

2. Buatlah layer baru dengan nama teks 3, buatlah teks menggambar garis, warna biru.

14

3. Rubahlah ketebalan garis dengan memilih garis, klik stroke height pada properties (
Rubah juga bentuk garis sesuai keinginan dengan klik stroke style (

),
).

4. Cek dengan hasil berikut ini.

Simpanlah hasil kerja dengan nama drawing 2.

15

BAB 3
Model Animasi
ANIMASI SEDERHANA
Gambaran Animasi pada Timeline
Anda akan menemui gambaran pada area timeline sewaktu membuat frame by frame
animation atau motion tweened animation.
Gambaran keyframe pada area timeline dapat dilihat dalam bentuk titik hitam. Anda
akan melihat berbagai gambaran berikut ini pada area timeline sewaktu membuat
animasi:

Gambaran ini merupakan motion-tweened animation. Frame-frame tween diwakili

oleh panah hitam dengan warna latar biru terang.

Gambaran ini merupakan shape-tweened animation. Frame-frame yang di tween

diwakili oleh panah hitam dengan warna latar hijau terang.

Gambaran ini bisa terjadi pada motion atau shape tweened animation. Garis titiktitik tersebut menandakan bahwa keyframe terakhir tidak ada. Untuk melihat
perubahan dalam suatu animasi, minimal dibutuhkan dua keyfame Kalau hanya
terdapat 1 keyframe, Anda akan seperti melihat gambar-yang diam tidak
bergerak.

Gambaran ini berisi frame-frame yang sama dengan keyframe awal yang diwakili
oleh warna abu-abu terang dan gambar kotak putih menandakan frame terakhir.

Gambar 'a' kecil menandakan bahwa ada perintah atau script agar di frame
tersebut melakukan sesuatu.

Gambar 'bendera merah' menandakan bahwa di frame tersebut berisi atau

komentar.

16

A. Animasi Frame to Frame

Frame By Frame Animation animation ini seperti pekerjaan manual yang dilakukan oleh Manusia bila
membuat film kartun dan penggunaannya sangat cocok untuk animasi yang rumit. Mereka
menggambar satu per satu gambar pada frame dan setelah semuanya baru kemudian dianimasikan.
Cara kerja di Flash pun tidak berbeda seperti yang telah dijelaskan di atas. Kita menggambar frame
per frame di stage, setelah itu baru dijalankan. Animasi jenis ini ukuran file jauh lebih besar
dibanding tweened animation. Oleh karena itu disarankan bila animasi yang kita buat tidak terlalu
rumit, gunakan tweened animation untuk mengurangi ukuran movie kita.

Berbagai model animasi yang ada, animasi frame to frame merupakan model yang paling sederhanan.
Kegiatan 3
Untuk membuat animasi Frame to Frame ikuti langkah-langkah sebagai berikut :
1. Membuat Dokumen baru
Pilih File, New, Flash Document, ok, maka muncul gambar seperti berikut.

2. Mengganti layer 1 menjadi garis

Lakukan double klik pada layer 1, ganti dengan mengetikkan kata garis, akhiri dengan
double klik.
17

Semula layer 1

menjadi garis

3. Membuat Garis
Pilih line tool (

), buat garis vertikal, warna biru, dengan ketebalan 6,75 sehingga

menjadi gambar berikut.

4. Copy, Insert Blank Keyframe, paste in place.

Pilih garis dengan menggunakan selection tool (

), klik garis, copy, insert blank

keyframe pada timeline, klik sembarang lokasi pada stage, klik kanan pilih paste in place,
geser garisnya.

Pilih garis,
18

Klik kanan,
Copy

Pointer di timeline 10, klik kanan, Insert Blank Keyframe

Pada stage, Klik kanan, Paste in Place

1
2 3Ulangi 4 kali hingga timeline ke 40, seperti berikut ini.
19

A. Menyimpan
File, save beri nama frame2frame
Menggeser garis dari titik 1 ke 2
Titik 1 Titik 2
Ulangi 4 kali hingga timeline ke 40, seperti berikut ini.

B. Menjalankan Animasi
Pilih menu Control, Test Movie. Lihatlah gerakan animasinya.
Pilih Close Button untuk mengakhiri
Close
20

1
Pilih Close Button untuk mengakhiri

TUGAS 2

B.Animasi Tweening
Ada dua jenis tweened animation. Pertama adalah motion tweening, Anda menentukan property
seperti posisi, ukuran dan rotasi untuk sebuah instance, group atau text block untuk satu titik
keyframe, dan pada saat bersamaan Anda juga mengubah property yang sama di keyframe
berikutnya.
Kedua adalah shape tweening, Anda menggambar shape pada satu keyframe dan sekaligus juga
mengubah bentuk shape tersebut di keyframe berikutknya. Berdasarkan informasi perubahan nilai
atau shape tersebut, Flash membuat beberapa frame di antara keyframe tersebut (frames,in
between) untuk membuat animasi.

1. Motion Tweening
21

Pada animasi ini, Anda mengubah property dari instance, group, atau text block. Flash dapat
men-tween posisi, ukuran, rotasi, dan memiringkan instance, group, dan tulisan. Flash dapat
men-tween warna dari instance dan tulisan, gradasi warna, fade in atau fade out. Tetapi untuk
men-tween warna dari group atau Tulisan, Anda harus membuat mereka menjadi symbol terlebih
dahulu.
Untuk membuat motion tweening, Anda tinggal menentukan keyframe awal dan akhir. Kemudian
Flash otomatis akan men-tween frame-frame di antaranya sehingga terbentuklah animasi.

Frame 1

Frame 5
Gambar Tweened frames

Berdasarkan ilustrasi di atas, ikan pada frame kedua, ketiga, dan keempat adalah hasil tweening
yang dibuat oleh Flash berdasarkan pada frame pertama dan kelima. Frame ke-1 dan ke-5
merupakan frame kunci atau keyframe dalam proses tweening.
Motion Guide
Motion guide berguna untuk membuat objek bergerak mengikuti jalur atau path yang Anda buat sendiri.
Lihat Gambar. Prinsip animasinya mirip dengan motion tweening, hanya tinggal menambahkan path
sebagai panduan untuk membuat animasinya.

Gambar Objek yang mengikuti path

Perhatikan pada Gambar terlihat bahwa objek ikan di atas akan bergerak mengikut garis atau path.

Animasi selain menggunakan frame toframe, juga dapat menggunakan tweening.

Pembuatan animasi dengan metode tweening atau in betweening yaitu pengguna hanya perlu membuat
adegan awal dan adegan akhir saja, kemudian computer akan menggenerate secara otomatis frameframe antaranya yang disebut in between.

Kegiatan 4
22

Langkah-langkah pembuatan animasi Tweening sebagai berikut :

1. Membuat dokumen baru
Pilih menu File, New, Flash Document, Ok.
2. Membuat Layer
Lakukan double klik pada layer name (layer 1), ganti menjadi kotak, akhiri dengan menekan tombol
keyboard enter.
3. Menggambar kotak
Pilih rectangle tool (

), buatlah gambar kotak di stage.

4. Convert to Symbol
Pilih gambar kotak pada stage menggunakan selected tool (

), klik kanan, pilih convert to symbol.

Muncul jendela convert to symbol, isikan name: kotak 1 dan pilih type graphic,
pilih Ok untuk menutup jendela.
Pilih Frame 25,
Klik kanan mouse, pilih insert keyframe,
Geser kotak ke kanan (panjang sesuai keinginan).

23

24

Geser ke tempat baru

5. Memberi efek Motion
Tujuannya adalah agar gerakan kotak menjadi halus caranya: Klik kanan pada timeline antar frame,
pilih Creat motion tween.

1
2
3
6. Menyimpan
Simpanlah hasil kerja dengan nama
tweening, klik save.

25

7. Melihat Hasil
Pilih menu control, test movie

Lihatlah gerakan kotak ke kanan, akhiri dengan menekan close ( ).

2.

Shape Tweening
Pada animasi ini, Anda mengubah atau men-tween bentuknya atau shape-nya. Dengan tweening
shape ini Anda dapat membuat efek mirip morphing yang membuat perubahan dari bentuk satu
ke yang lain. Selain men-tween shape, Flash juga dapat men-tween lokasi, ukuran dan warna
shape.
26

Untuk hasil yang baik biasanya digunakan satu shape. Jika Anda menggunakan banyak shape,
semuanya harus dalam layer yang sama.

Gambar File latihan

1. Anda lihat pada gambar terdapat hanya satu layer yang memiliki dua keyframe. Keyframe
pertama (frame ke-1) adalah tuhsan "1" dengan warna hitam dan keyframe kedua (frame ke15) adalah tulisan "2" dengan warn merah.
Sesuai dengan namanya, tipe animasi shape tweening hanya dapat men-tween shape saja,
jadi tidak dapat men-tween symbol, gambar bitmap, text block.
Karena tulisan di atas adalah text block, maka Anda harus membuatnya menjadi shape
terlebih dahulu.
2. Klik tulisan "1" pada keyframe ke-1 dan jadikan shape. Pilih menu Break Apart (CTRL+B).
3. Ulangi langkah 2 untuk tulisan "2".

Gambar Text block yang berubah menjadi shape

4. Untuk melakukan shape tweening, klik salah satu frame di antara frame ke-2 sampai frame
ke-14 sehingga akan membuat seluruh frame dari frame ke-1 sampai frame ke-14 menjadi
tersorot.
5. Pada properties di bawah, pada tween pilih shape
6. Jalankan Ctrl + Enter
7. Hasilnya

27

Kegian 5
Animasi Dasar Motion Tween
Animasi ini merupakan animasi yang paling dasar karena animasi ini pada prinsipnya adalah
pergerakan 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.
Setelah itu, klik kanan Convert to symbol pilih Movie Clip

Gambar 1. Jendela dialog Convert to Symbol (F8 )

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

28

Gambar 2. Insert Keyframe (F6)

Langkah 4:
Pada Properties di bawah stage pilih Tween Motion. Jika langkah benar, maka di bagian layer
1 akan muncul panah dari frame 1 ke frame 20. Untuk menjalankan animasi: Enter atau Ctrl +
Enter untuk melakukan Test Movie.

Gambar 3. Jendela Dialog Pemilihan Jenis Animasi

Untuk menghentikan test movie Ctrl + W
CATATAN:
Animasi berhasil jika dalam layer terdapat tanda panah ( ). Jika belum berhasil (garis dalam layer
berupa garis putus-putus), ulangi langkah Anda sampai berhasil !
Kegiatan 6
Sebagai latihan dengan jenis motion tween Anda dapat membuat: Animasi bola pantulAnimasi 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
nlatar belakang, caranya dengan menambahkan layer baru yang dilengkapi dengan keyframe
sepanjang objek tersebut berjalan.

29

Gambar 4. Ilustrasi Bola Pantul

30

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.

Gambar 5. 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.
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.

31

Gambar 6.Perubahan objek kotak menjadi teks KOTAK

Sederhana dan mudah bukan ?
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 titk 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 stcik 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 Motion Path / Guide
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

32

Gambar 7. Posisi layer dan Guide Layer

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

Gambar 8. 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
Masih banyak animasi-animasi yang dapat dibuat dengan Macromedia Flash, namun
langkah-langkah yang diberikan di atas kiranya dapat panduan bagi pemula yang
ingin belajar animasi Flash. Selamat mencoba, semoga berhasil ....

33

C. Animasi Motion Guide

Motion guide artinya obyek akan bergerak sesuai garis panduan yang dibuat.
Langkah-langkah membuat animasi motion Guide sbb :
1. Membuat Dokumen Baru
Pilih menu File, New, Flash Document, Ok.
2. Membuat Motion Guide
1. Pilih ikon motion guide (

2. Membuat garis guide menggunakan pencil tool (

3. Merubah layer name layer 1 menjadi lingkaran, menggambar lingkaran menggunakan

oval tool (

) menjadi bentuk berikut.

34

4. Memilih lingkaran, klik kanan, pilih convert to symbol, memberinya nama

lingkaran, type graphic, akhiri dengan memilik Ok.

5. Pada time line 25, klik kanan, pilih insert keyframe.

Gambar guide menjadi tak tampak seperti berikut ini.

35

6. Klik pada time line 25 di guide, lakukan klik kanan time line 25, pilih insert frame.
Nampak ada perubahan di frame kotak putih kecil di time line, perubahan arsiran, dan
garis guide terpilih.Bandingkan perintah keyframe yang berupa titik di timeline.

7. Memilih keyframe timeline 25,

36

geser lingkaran ke ujung lainnya.

8. Pilih keyframe lingkaran time line 1,

Pilih tween motion agar animasi berlangsung halus/tidak kaku

37

9. Lakukan pengetesan perjalanan lingkaran agar sesuai dengan garis guide (pandu)
dengan menggeser kotak merah di time line.

10. Melihat hasil animasi, pilih menu Control, test Movie,

38

Tutup test movie dengan menekan close ( ).

39

Simple Action Script

Action script merupakan bahasa script yang digunakan dalam pemrograman flash, dengan
script ini animasi lebih menarik dan interaktif.
1. Membuat Dokumen baru, pilih menu File, New, Flash Document, Ok.
2. Merubah layer 1 menjadi bejana (karena cara sama dengan sebelum bab 6 maka
penjelasan tidak diulang).

3. Menggambar kotak menggunakan rectangle tool ( ) rubahlah warnanya sesuai

keinginan.

4. Merubah kotak menjadi symbol dengan klik kanan pada kotak, pilih convert to symbol.

Mengisi name bejana, dan type graphic, akhiri dengan Ok.

40

5. Membuat layer baru zat cair

6. Menggambar kotak, berikan warna berbeda.

7. Memasukkan frame dengan klik pada time line 30 layer bejana, klik kanan pilih
insert frame. Artinya bejana akan bergerak hingga waktu ke-30.

8. Memasukkan keyframe layer zat cair pada timeline 30. Lakukan klik kanan pada
time line 30 layer zat cair, pilih keyframe.

41

9. Free Transform
Pilih kotak zat cair, klik kanan, free transform.

Geser ke atas kotak zat cair

10. Pilih time line 1, layer zat cair

42

Pada properties, pilih tween: Shape, klik sembaran lokasi di stage.

Lihat ada perubahan di time line.

Lihat juga hasil animasi dengan menggeser kota merah di time line. Gambar yang betul
ketika bergeser, warna kuning juga bergerak.

Membuat Script Stop

1. Buat layer baru Stop, klik time line 1.
43

2. Pilih Action untuk memunculkan Action panel.

Klik tanda add a new item to the script (

), pilih global function, timeline control,

stop.

3. Klik tanda minimize (

) untuk menutup Action panel.

Membuat Script Tombol Play

1. Membuat layer baru tombol Play

2. Memunculkan library button, dengan pilih window, commont library, button.

44

3. Geser ke kanan, pilih bentuk buttonnya. Pilih button circle flat, circle flat purple

4.Tekan dan geser ke stage,

5. ubah ukuran agar serasi dengan gambar menggunakan free transform tool (

).

45

Memberi Action pada tombol play

1. Pilih Action (

) untuk mengeluarkan Action panel

2. Pilih tanda add a new item to the script (

), pilih global functions, movie clip

control, on.

Pada jendela mucul script berikut

Pilih tanda show code hint ( ) setelah tanda kurung buka, pilih release dengan cara
double klik muncul tambahan script.

Tekan enter setelah buka kurung kurawal

46

Pilih tanda

, pilih global functions, timeline control, play

Script akhir tombol play bertambah menjadi

Minimize kan action

Lakukan Test Movie, jika enter dipilih maka animasi bergerak

Menutup layer dengan menekan tanda close ( )

Lakukan penyimpanan, pilih menu File, save as, beri nama action script, klik save.

47

Mengatur Lebar layer

1. Pilih Properties,

2. ubah ukuran (size) menjadi 250 x 300 agar tidak banyak halaman yang nampak kosong.

3. Lakukan penyimpanan kembali dengan menu File, save

Presentation Publishing
Melanjutkan praktek sebelumnya, agar mudah dibuka perlu dibuat format file publikasi.
1. Pilih Menu File, Publish Setting.

7Keluar jendela pilih *.exe, pilih publish

48

3. Pilih OK
Hasil publish bisa dibuka dengan double klik.

Hasil seperti berikut ini.

49

PROJECT
MEMBUAT BERBAGAI ANIMASI
1. Cara Cepat membuat animasi
Klik Rectangle tool, lalu gambarlah kotak di sebelah kiri layar

Pada timeline, klik kanan frame 1, akan tampil menu, pilihlah Create
Motion Tween

Kemudian klik kanan pada frame 20, akan tampil menu, pilihlah Insert
Keyframe

Masih di frame 20, klik Selection tool, lalu pindahkan kotak ke sebelah
kanan layar

Untuk melihat hasilnya klik menu control test movie (ctrl + enter)
Simpan filenya klik File Save as beri nama animasi1.

2. Cara Cepat membuat animasi

Buka file animasi1
Klik menu Insert Timeline Motion Guide, akan tampil Guide : Layer 1
di atas Layer 1

50

Pada Guide : Layer 1, klik frame 1, lalu klik Pencil tool dan gambarlah
garis seperti gambar

Setelah kita selesai menggambar garis di layer Guide : Layer 1, secara

otomatis objek kotak di frame 1 akan menempatkan posisinya pada awal
garis dan objek kotak di frame 20 akan menempatkan posisinya pada
akhir garis.

3. Animasi Marquee
Aturlah ukuran dan kecepatan frame movie. Klik menu Modify
Document, lalu isikan pada bagian Dimension : 400 px X 30 px dan
Frame Rate : 6
Klik Text tool, lalu tulislah Selamat Datang di luar layar bagian kanan.

Pada bagian Timeline, klik kanan pada frame 1, pilihlah Create Motion
Tween
Klik kanan pada frame 20, pilihlah insert Keyframe, lalu pindahkan teks
ke luar layar bagian kiri

ANIMASI TRANSPARAN
1. Atur baground berwarna hitam, lalu klik Text tool dan tulislah Welcome to
Flash Heaven dengan warna putih
2. Pada Timeline, klik kanan pada frame 1, pilihlah Create Motion Tween.
Kemudian, klik kanan pada frame 20, pilihlah Insert Keyframe.

51

3. masih di frame 20, pilih teks Welcome to Flash Heaven lalu atur
properties,pilihlah pada color : Alpha dengan nilai 0 %

4. ANIMASI WARNA WARNI

1. Buat tulisan C E R I A
2. Pada Frame 1 tulisan C E R I A berwarna hitam
3. Beri Insert keyframe pada frame 5,10,15,20
4. Pada Frame 5 huruf E berwarna biru
5. Pada Frame 10 huruf R berwarna hijau
6. Pada Frame 15 huruf I berwarna merah
7. Pada Frame 20 huruf A berwarna kuning

5. Break Apart

1. Klik Oval tool, lalu gambarlah bulatan berbentuk oval di layar

2. klik kanan frame 20, pilihlah Insert blank key frame
3. Pada frame 20, klik teks tool lalu tuliskan BERUBAH di layar.
Kemudian, pilih teks BERUBAH klik menu Modify Break Apart
sebanyak 2 kali.
4. klik frame 1 untuk kembali ke frame 1, lalu atur Properties, pilihlah
pada Tween shape.

6. Animasi Masking

1. Klik Text tool, lalu tulislah MASKING di layar. Kemudian klik kanan pada
frame 25, dan pilihlah Insert Frame.

52

2. Klik menu Insert Timeline

Layer untuk membuat layer baru. Klik

rectange tool, lalu gambarlah segi empat berwarna gradiasi orange kuning
disebelah kiri teks.

3. Pada Timeline, klik kanan frame 1, pilihlah Create Motion Tween.

4. Klik kanan pada frame 25, pilihlah Insert Keyframe, lalu pindahkan
segiempat gradiasi ke sebelah teks.

5. Pindahkan layer 1 keatas layer 2, lalu klik kanan Layer 1 dan pilihlah Mask.

7. Animasi Rotasi

1. Klik Rectangle tool, lalu gambarlah segiempat panjang di kiri layar

2. Pada Timeline, klik kanan pada frame 1, piihlah Create Motion Tween
3. Klik kanan pada frame 15, pilihlah Insert Keyframe, lalu pindahkan
segiempat panjang ke kanan layar.

4. Klik pada frame 1 untuk kembali ke frame 1, lalu atur Properties, isikan
pada Rotate : CW dengan nilai 2
53

PROJECT

Project 1
KALEIDOSKOP
Pernahkah anda melihat kaleidoskop? ( klik disini untuk melihat contoh kaleidoskop)
Sebuah tabung kecil seperti teropong yang ketika kita gerak-gerakkan maka kita akan
melihat bentuk-bentuk yang berwarna-warni.

Pada dasarnya, kaleidoskop itu terdiri dari beberapa potongan lingkaran.

Nah, kita bisa membuat kaleidoskop versi digital dengan menggunakan Flash.
Setting the stage.
1.
2.

Buatlah dokumen baru di Flash. File New.

Default size adalah 550 x 400 px. Kita tidak perlu mengubah ukuran stage.

Membuat potongan lingkaran

1. Buatlah sebuah lingkaran dengan menggunakan oval tool (atau O untuk shortcut).

2. Buatlah sebuah garis vertikal yang membelah lingkaran yang baru kita buat menjadi dua.
Lihat gambar 2.

54

3. Pilih garis tersebut dan copy paste in place (ctrl + shift + v)

Kemudian pilih menu Modify Transform Scale and Rotate (ctrl + alt + s).
Maka akan muncul dialog tab seperti pada gambar dibawah. Isikan kolom Rotate sebesar
22.5

Maka, hasilnya akan terlihat seperti pada gambar 3.

4. Hapuslah fill dan garis luar lingkaran tersebut sehingga membentuk potongan pizza
seperti gambar 4.
5. Pilih bentuk potongan lingkaran tersebut dan convert menjadi symbol movieclip.
Tekan F8 untuk memunculkan dialog convert to symbol.
Namai symbol tersebut dengan nama 'potongan' dan pilih Movieclip diantara 3 pilihan yang
tersedia.
Ubahlah nama layer 1 menjadi 'Pecahan'.
6. Klik tool Free Transform Tool (Q). Geserlah pivot point ke bagian bawah (sudut)
potongan lingkaran tersebut.

7. Copy Paste in Place (ctrl + shift + v) potongan tersebut dan pilih menu Modify
Transform Scale and Rotate (ctrl + alt + s).
Isikan bagian Rotate sebesar 22.5
Hasilnya akan seperti gambar di bawah ini.

55

8. Ulangi langkah 7 sampai semua potongan membentuk formasi lingkaran seperti gambar
di bawah.

9. Klik layer Pecahan dan tekan F8 untuk memunculkan dialog convert to symbol.
Beri nama 'Kaleidoskop' dan pilih Movieclip. Biarkan Registration di tengah.

10. Pada bagian Library (Tekan L atau menu Window Library), pilihlah movieclip
Pecahan. Klik kanan pada movieclip tersebut dan pilih Edit.

56

Dalam stage movieclip Pecahan, buatlah sebuah layer baru bernama 'Warnawarni' dan drag
layer tersebut hingga berada dibawah layer 1.
Buatlah beberapa segi enam yang berwarna warni. Pilih tool Rectangle (Klik beberapa
detik) dan pilih polystar tool (shortcut R).

Copy paste segi enam tersebut sehingga membentuk formasi seperti yang terlihat pada
gambar di bawah ini.

Pilih layer Warnawarni dan tekan F8 untuk convert formasi segi enam tersebut menjadi
movieclip.
Posisikan tepat di sebelah kiri bentuk potongan lingkaran.
Pada layer 1, klik frame 40, dan masukan frame (Klik kanan Insert Frame).
57

Pada layer Warnawarni, klik frame 20.

Tepat di frame 20, masukkanlah keyframe (Klik kanan Insert Keyframe).
Masih di frame 20, geserlah movieclip warnawarni tepat ke sebelah kanan potongan
lingkaran (tips : sambil mendrag movieclip tsb, tekan Shift agar posisi y tidak berubah)
Klik diantara frame 1 sampai 20 dan klik kanan Create Motion Tween

Klik frame 40 pada layer Warnawarni, dan masukkan keyframe.

Pada frame 40, geserlah posisi movieclip Warnawarni tepat seperti pada posisi di frame 1.
Kemudian diantara frame 20 dan 40, klik kanan Create Motion Tween.
Klik tab Properties (Window Properties), dan pada bagian Rotate, pilih CW dan kolom
sebelahnya 1.
Setelah itu, pilih layer 1 dan ubah menjadi Mask dengan cara klik kanan Mask.
Play movie dengan menekan ctrl + Enter.

Anda bisa membuat variasi animasi warna kaleidoskop dengan mengubah bentuk movieclip
Warnawarni dan pergerakannya (tween animation, rotation, dsb).
Selamat menikmati visualisasi kaleidoskop yang ajaib

58

Project 2

Animasi Ombak
Untuk membuat animasi ombak , ikuti tutorial sebagai berikut :
1. Buka program flash 8
2. Ubah ukuran stage menjadi 768 x 576 pixels.
3. Ganti warna bacground menjadi warna hitam
4. Ganti warna fill color menjadi #336699

dan warna stroke

dijadikan none
5. Klik rectangle tool
untuk membuat airnya dengan mendragnya ke
stage seperti gambar dibawah ini.

4. Klik kanan di frame 15 lalu klik insert keyframe, Ubah gambar airnya
dengan cara tarik ke atas menggunakan selection tool yang sebelah kiri

Gambarnya :

7. Klik di frame 1 lalu pilih tween shape

gambarnya

59

Di frame 35 klik kanan insert keyframe, Ubah gambarnya seperti ini>>

8. Klik Di frame 15 pilih tween shape

9. Lalu copy frame 1
caranya : klik kanan pada frame 1 dan pilih Copy Frames
kemudian Pastekan di frame 60
10. Klik Di frame 35 pilih tween shape
Seperti gambar dibawah ini:

Selamat mencoba...(@_@)
Jika semua sudah selesai tinggal kita menekan ctrl + enter dan nikmati
hasilnya
( Jika sudah dianggap sempurna , mintalah untuk dinilai )

60

Project 3
Membuat Digital Clock di Flash
Bagaimana perasaan Anda ketika berhasil membuat sebuah aplikasi sederhana?
Pastilah bangga bukan, Jika Anda ingin berkreasi membuat aplikasi sederhana
tersebut disinilah jawabannya. Tutorial ini akan menuntun Anda membuat aplikasi
sederhana berupa Digital Clock yang dibuat di Flash 8. Dengan dukungan Action
Script yang lebih mudah dipahami, Anda akan dapat membuat aplikasi sederhana
tersebut dalam hitungan detik. Percaya peu hana (percaya atau tidak)
Langkah Pembuatan
1. Buka halaman Flash dan buat 3 buah layer dengan nama layer action, dynamic
text, dan backround.

2. Buat ukuran document

3. Pada layer backround buat desain untuk dijadikan backround.

61

4. Pada layer dynamic text buat text tool dengan pilihan Dynamic Text.

5. Buat nama variable pada dynamic Text dengan nama Clock_text

6. Pada layer action ketikan script pada frame 1

time=new Date(); // time object
var seconds = time.getSeconds()
var minutes = time.getMinutes()
var hours = time.getHours()
if (hours<12) {
ampm = "AM";
}
else{
ampm = "PM";
}
while(hours >12){
hours = hours - 12;
}
if(hours<10)
{
hours = "0" + hours;
62

}
if(minutes<10)
{
minutes = "0" + minutes;
}
if(seconds<10)
{
seconds = "0" + seconds;
}
Clock_text.text = hours + ":" + minutes + ":" + seconds +" "+ ampm;
7. Pada layer acton ketikan script pada frame 2
gotoAndPlay(1);
8. Insert key frame 2 pada layer dynamic text dan backround

9. Ctrl+Enter untuk melihat hasil

Selamat Mencoba dan berkreasi .

Project 4
Membuat Navigasi Sederhana
Pada dasarnya tutorial ini dapat dikembangkan untuk membuat sebuah permainan
atau game yang sederhana. Mungkin Anda pernah melihat atau bahkan Anda sudah
pernah bermain game pesawat tempur, untuk menggerakkan pesawat tempur tersebut
kita dapat menggunakan tombol navigasi anak panah yang ada di dalam keyboard.
Tombol anak panah atas, bawah, kiri dan kanan dipakai untuk mengendalikan gerak
pesawat. Tentu Anda bertanya apa sulit untuk membuat navigasi dengan
menggunakan keyboard? Tentu tidak karena Flash telah menyediakan printah-printah
praktis untuk menggerakkan gambar atau objek apa saja lewat tombol-tombol pada
keyboard.
Berikut langkah-langkah membuat navigasi sederhana dengan menggunakan anak
panah pada keyboard.
1. Buka halaman Flash dan buat 1 buah layer dengan nama layer navigasi

63

2. Pada layer navigasi klik file>inport>import to library pilih objek yang akan
dijadikan navigasi utama.

3. Klik pada objek yang dijadikan objek navigasi kemudian tekan F9 dan ketikan
script di bawah ini :
onClipEvent (enterFrame) {
if(Key.isDown(Key.UP)) {
this._y -=10;
}
if(Key.isDown(Key.DOWN)) {
this._y +=10;
}
if (Key.isDown(Key.RIGHT)) {
this._x +=10;
}
if (Key.isDown(Key.LEFT)) {
this._x -=10;
}
}

4. Tekan Ctrl+enter untuk melihat hasil

64

Macromedia Flash Professional 8: Proteksi SWF dengan Password

Macromedia Flash menghasilkan file bertipe SWF yang bisa digunakan untuk situs Web,
Multimedia Interaktif, atau aplikasi lainnya. Sudah bukan rahasia lagi, SWF sebenarnya bisa
dibongkar kembali menjadi FLA yaitu format file project Flash yang berisi elemen seperti movie
clip, action script serta elemen lainnya.
Tentu bukan hal yang menyenangkan kalau ada orang lain yang dengan seenaknya menyontek hasil
karya kita dengan meniru konsep desain dan mengambil action script dengan cara membongkar
projectnya. Untuk inilah Macromedia menambahkan fitur baru pada Macomedia Flash Professional
8 untuk mengunci file SWF dengan kata sandi. Tanpa banyak omong langsung saja kita coba.
1. Klik menu [File] > [Publish Settings...].
2. Beri tanda pada kotak Flash.
3. Aktifkan tab menu [Flash].
4. Pada grup Option beri tanda kotak Protect from import dan Debugging permitted.
5. Masukkan kata sandi pada kotak Password.
6. Klik [Publish] untuk mengkompilenya menjadi SWF yang terproteksi.
Nah, dengan cara diatas Macomedia Flash akan meminta kata sandi jika file tersebut akan diimport.
Juga ketika akan dikonversi kembali menjadi FLA.

65