2008

Arus kuat abadi

azkiyah azzahra

[ANIMASI 2D DENGA FLASH 8]

Sebagai bahan kuliah dan praktikum untuk mahasiswa amik program studi teknik computer semester III

Pengantar
Pada semester iii ini kita kembali bertemu pada sesi kuliah computer design dan animasi.
Insya allah akan disajikan sebuah materi yang berkaitan dunia animasi, khususnya animasi dua
dimensi dengan menggunakan salah satu software animasi yakni macromedia flash (masih
pakai istilah lama).
Sebagai bahan yang akan diceritakan dalam animasi dua dimensi adalah :
1.
2.
3.
4.
5.

Animasi frame by frame

Animasi motion tween
Animasi shape tween
Animasi benda putar
Animasi

Istilah animasi sendiri berasal dari kata anime yang berarti binatang. Penggunaan kata ini
didasarkan oleh pembuat animasi pertama yang menggunakan karakter binatang sebagai objek
animsinya.
Jadi dapat dibahasakan bahwa animasi adalah upaya yang dilakukan untuk mengubah karakter
(objek ataupun gambar) yang diam menjadi bergerak dinamis dan bertingkah laku layaknya
mahluk hidup.
Sebgai penutup adalah belajarlah untuk melihat kemudian cobalah untuk membuat dan
lanjutkan dengan menuangkan ide anda dalam bentuk bahasa animasi. Insya allah akan lahir
karya-karya yang menakjubkan. Bukankan mimpi kemarin adalah kenyataan hari ini.

Pertemuan I
Bahan Teori:
Mengenal flash 8
Wanted!!!
Yang sudah pernah menggunakan flash versi apa pun tidak usah baca bagian ini.
Sebelum kita berbicara lebih jauh tentang animsi dua dimensi, maka ada beberapa istilah yang
perlu diperkenalkan yaitu:
1. Animasi adalah sebuah proses yang dilakukan untuk mengubah objek atau text yang
diam (statis) menjadi bergerak yang bertingkah laku layaknya benda hidup.
Penggunakan kata animasi merujuk pada kata ANIME (animal), yang disebabkan karena
pembuat animasi pertama menggunakan karakter binatang pada karya animasinya.
Orang yang menggeluti dunia animasi dinamakan animator
2. Movie adalah hasil dari proses animasi. Dengan kata lain objek yang semula statis dan
telah bertingkahlaku layaknya benda hidup dinamakan movie
3. Rendering adalah proses akhir dari pembuatan movie setelah beberapa animasi
digabungkan terhadap sebuah karakter tartentu yang dibuat oleh para animator, istilah
ini juga dipakai dalam dunia design grafis dengan makna yang berbeda.
Ok sekarang kita bersiap untuk mengenal lingkungan kerja pada macromedia flash (oh ya
sekarang bukan lagi punya macromedia, tetapi sudah dibeli oleh adobe, jadi sebutannya Adobe
Flash)
LINGKUNGAN KERJA FLASH
Terdapat 7 bagian utama pada flash yaitu :
1. Caption window adalah bagian paling atas yang tampil pada jendela flash, yakni
informasi tentang program yang sedang berjalan saat ini, disampingnya terdapat nama
file yang sedang anda buka dan pada pojok paling kanan atas terdapat window
nafigation yang berfungsi untuk me-maksimize, me-minimize dan untuk menutup
jendela kerja.
Perhatikan gambar dibawah ini :
2. Menu bar adalah daerah yang menampilkan menu yang ada pada flash

3. Tool box adalah fasiltas yang dipakai untuk membuat dan memodifikasi objek dan text.
Pada setiap icon yang disediakan terdapat pop up menu yang berfungsi untuk member
informasi tentang icon yang bersangkutan.

4. Time line adalah fasilitas yang dipakai untuk mengatur isi dari sebuah movie, pada menu
time line ini terdapt frame.
Fungsi frame adalah untuk mengatur kapan objek muncul pada stage dan kapan objek
tidak muncul dalam stage, dengan ketentuan bahwa setiap objek yang akan dianimsikan
diatas sebuah stage harus ditempatkan pada sebuah frame.

5. Stage adalah area pembuatan animasi baik animasi objek ataupun animasi text. Semua
objek yang akan dianimasikan harus berada diatas stage, objek yang berada diluar stage
otomatis tidak ditampilkan dalam proses animasi.

6. Action adalah fasilitas yang dipakai untuk member aksi baik objek action atau pun frame
action pada saat kita membuat animasi terkontrol dengan menggunakan action script
(bahasa pemrograman pada flash)

7. Property inspector, adalah fasilitas yang dipakai untuk menampilkan semua informasi
mengenai atribut dari icon dari tool box yang sedang aktif maupun informasi dari
struktur stage

8. Panel tambahan adalah panel panel bantu yang dipakai untuk membuat animasi. Panel
ini terdiri atas:
a. Colour
b. Library
c. Behaviours
d. Component inspector
Panel ini dapat disembunyinkan dengan mengklik kanan pada panel yang
bersangkutan kemudian pilih close panel
Untuk menampilkan tampilan standar maka :
Windowworkspace layoutdefault

Bahan praktikum pertemuan I

Prosedur percobaan :
1.
2.
3.
4.

Buka computer anda

Buat folder pada D:\animasi_tk_4.?\lat1
Masuk ke program macromedia flash 8 atau mx 2004 (tergantung mana yang terinstall)
Buat objek dibawah ini :
Petunjuk :
a. Gunakan line tool
b. Gunakan pewarnaan :
i. Solid
ii. Linear
iii. Radial
iv. Bitmap (kalau memungkinkan)
c. Setelah selesai simpan gambar e dan f dalam bentuk file gambar (.gif)

d.

e.

f.

g.

Pertemuan II
Bahan teori :
Animasi Frame By frame
Tujuan :
Setelah mengikuti kuliah ini diharapkan mahasiswa mampu :
1.
2.
3.
4.

Memahami fungsi frame

Mengenal text dalam animasi
Memahami cara penempatan objek animasi pada frame dan pada layer
Membuat beberapa animasi frame by frame sederhana namun menarik

Coba baca teori ini..

Telah disampaikan sebelumnya bahwa penemempatan objek pada stage harus dilakukan pada
sebuah frame yang ada di time line. Penempatan lebih dari satu objek pada satu frame
menyebkan objek tersebut akan saling menumpuk dalam satu layer dan jika time marker
digerakkan ke frame berikutnya maka otomatis semua objek tersebut akan hilang.
Perhatkan gbr :

Gbr 2.a objek pada frame 1

gbr. 2.b tidak ada objek pada frame 2

Perhatikan gambar diatas pada gambar 2.a terdapat objek pada frame 1 jika time marker
dipinahkan ke frame 2, maka semua objek akan hilang ini disebakan karena objek hanya
diletakkan pada frame 1 saja.

LAYER
Layer adalah fasilitas yang dipakai untuk membuat beberapa lapisan stage pada satu file yang
sama.
Fungsi layer :
1. Menentukan posisi objek pada stage
2. Menghindari terjadinya perpotongan dua buah objek yang beririsan pada stage (ingat!!!,
jika dua buah objek yang saling berisisan ditempatkan pada satu layer, maka objek
terakhir akan memotong objek dibawahnya, jika objek tersebut dipindahkan)
Cara pembuatan layer :
1. Klik icon
pada time line
2. Ganti nama layer dengan menklik ganda layer1 lalu tulis nama layernya, hal yang sama
untuk layer ke 2 dst.
3. Untuk menghapus layer cukup lakukan klik and drag layer yang bersangkutan ke bak
sampah yang ada pada time line
4. Untuk mengunci layer klik icon

pada time line

5. Untuk menyembunyikan layer klik icon

pada time line

Text Pada Flash

Selain animasi objek, dalam animasi 2 dimensi juga dikenal animasi text. Pada flash text dapat
dituangkan pada stage dengan menggunakan icon
yang terdapat pada tool box. Text dapat
diedit dengan melihat property inspector yang terdapat pad tab property.
Animasi text dapat berupa frame by frame, motion tween, atau menggunakan animasi default
yang terdapat pada menu insert time line effect effect ada 4 pilihan :
a.
b.
c.
d.

Blur
Drop shadow
Expad
Explode

ANIMASI FRAME BY FRAME

KONSEP DASAR
Awalnya animasi frame by frame dibuat oleh para kartunis, dalam pembuatan film kartun.
Namaun dalam perkembangan selanjutnya hal itu sudah ditinggalkan dengan semakin
berkembangnya software pembuat animasi.
Animasi frame by frame adalah animsi dasar yang dibuat dengan memanfaatkan beberapa
frame yang berbeda untuk menciptakan sebuah gerakan atau karakter baik dengan
menggunakan objek ataupun menggunakan text. Animasi ini dapat dibuat padasatu layer
maupun pada lebih dari satu layer dengan syarat penempatan objek dalm framenya tepat.
Cara pembuatan :
1. Insert key frame pada frame 1 (dari menu Insert time line key frame) atau klik
kanan pada frame 1 (atau frame yang lain) lalu pilih insert key frame
2. Buat objek atau text pada frame pertama
3. Insert key frame pada frame 2
4. Buat kelanjutan objek yang telah dibuat sebelumya (langkah no 2)
5. Lajutkan untuk frame berikutnya hingga animasi yang diinginkan tercapai.

10

Bahan praktikum II
Prosedur percobaan :
1. Buka kembali file anda yang lau lalu save as dengan nama lat.2
2. Buka file baru dengan spesifikasi :
a. Ukuran stage = 1000 x 600 pixels
b. Background = balck
c. Frame rate = 12 fps
3. Buatlah objek seperti ini gunakan corel draw:

4. Lakukan langkah-langkah yang disampaikan pada kelas teori:

5. Selamat mencoba!

Kegiatan 1:
1. Buatlah animasi frame by frame dengan membuat objek kotak pada frame 1, lihat
gambar :

11

2. Buat key frame pada frame ke 3, lalu buat objek kotak yang sama tetapi ukurannya
diperkecil, lihat gbr :

3. Lanjutkan desain anda dengan membuat key frame pada frame ke-5 dan buat kembali
objek kotak yang sama dengan ukuran yang lebih kecil, lihat gbr.

4. Lakukan lagi proses yang sama pada frame 7 dan 9. Buat kembali objek yang sama
dengan ukuran yang semakin kecil.
5. Lakukan hal yang sebaliknya dengan melakukan copy frame.
a. Cara copy frame adalah blok frame yang akan dicopy pada time line

12

b. Klik kanan pada frame 11 lalu pilih paste frame, hasilnya:

c. Hasilnya tampak pada gambar diatas

6. Lakukan control enter untuk melihat hasilnya.
Kegiatan II :
Buatlah animasi frame by frame dibawah ini :
1. Buat file baru
2. Buat key frame pada frame 1, lalu buat objek seperti pada gambar

3. Lanjutkan projek anda dengan mencopy frame 1, lalu paste di frame ke-5, kemudian
pada frame ke-5 buat objek seperti pada gambar

4. Copy kembali frame 5 dan paste pada frame 10 dan lanjutkan dengan membuat objek
seperti gambar

13

5. Dengan cara yang sama anda dapat melanjutkan animsi frame-by-frame ini dengan
membentuk objek objek lainnya seperti gambar berikut :

6. Lanjutkanlah dengan membuat kreasi seperti diatas

Kegiatan III :
1. Gabungkan animsi pada kegiatan I dan III
2. Buatlah 3 layer yang berbeda masing-masing layer diberi nama
a. Layer 1 diganti dengan anmasi kotak
b. Layer 2 diganti dengan animasi garis
c. Layer 3 diganti dengan text
3. Jika masih ada waktu buatlah animasi frame-by-frame yang lain (buatlah sesuai dengan
kreativitas masing-masing)

14

Pertemuan III
Animasi motion tween
Tujuan kuliah :
1. Mahasiswa mampu membedakan prinsip animasi motion
2. Mahasiswa mampu membuat kreasi animasi gerak pada beberapa layer secara seri dan
parallel

Teori dasar
Animasi motiaon adalah bentuk animasi gerak yang memanfaatkan kemampuan dari software
dalam hal ini flash.
Perbedaan mendasar antara animasi motion dengan fram by frame adalah pada naimsi motion
seorang animator hanya membuat bentuk awal dan bentuk akhir dari animasi gerak yang akan
dibuat, sedangkan gerakan antara akan dibuatkan oleh flash. Berbeda dengan animasi frame
by frame dimana seorang animator harus membuat semua bentuk gerakan dari tiap frame yang
ada.
Kelebihan animasi motion adalah bentuk gerakannya lebih hidup atau lebih halus dibanding
animasi frame by frame selain itu fariasi geraknnya bisa lebih banyak.
Prinsip dasar animasi motion tween:
Ikuti langkah-langkah berikut :
1. Siapkan objek yang akan dianimsikan. Objek dapat berupa file .tif, .gif (jika objeknya
dibuat di luar flash, maka lakukan inport file.
Caranya dari menu FILE INPORT INPORT TO STAGE (ctrl + R)
2. Tempatkan objek tersebut pada frame 1 (atau frame yang anda inginkan), lihat gambar

gbr 3.1 objek diletakkan pada frame 1

15

3. Klik kanan pada objek lalu pilih tab CONVERT TO SYMBOL, dan pada kotak dialog pilih
MOVIE CLIP.
4. Pada tab nama objek beri nama sesuai dengan nama yang anda inginkan misal JET

Gbr. 3.2 mengubah objek menjadi movie clip

5. Setelah itu buat key frame pada frame ke-20 atau frame yang anda inginkan. Setelah itu
pindahkan posisi objek dari posisi awal dan lakukan editing pada objek.
Editing dapat berupa mengubah ukuran objek, mengubah posisi objek, atau memutar
objek

Gbr 3.3 memindahkan posisi objek dan memperkecil objek

6. Langkab berkutnya adalah memberikan jenis gerakan pada objek dalam hal ini Motion.
Caranya blok frame 30 ke frame 1 lalu pada tab propertis pilih jenis tween = MOTION

16

Gbr. 3.4 memberi efek motion pada objek

7. Tekan enter Untuk melihat hasilnya .
Ada juga cara yang lebih praktis untuk membuat animsi motion tween. Akan saya bahas di
dalam kelas.! Natikan jam tayangnya. Hahaha.

17

Bahan praktikum
KEGIATAN I
1. Buka kembali file anda pada praktikum sebelumnya
2. Lakukan setting stage dengan spesifikasi sebagai berikut :
a. Ukuran stage 550 x 400 pixel
b. Warna stage = FFFFFF
3. Buatlah background pada stage dengan cara menginport file .jpg yang telah disediakan
letakkan pada frame 1 (beri nama langit) di time line 1

4. Inport gambar pesawat jet yang pernah anda design sebelumnya (dipertemuan I) dan
letakkan pada layer 2(beri nama pesawat jet) di frame 1

Posisi pesawat di frame 1 layer 2

18

5. Klik kanan pesawat tersebut dan ubah mejadi objek movie clip, selanjutnya buat key
frame pada frame 30.
Dari frame 1 ke 30 buat motion tween

Animasi motion dari frame 1 ke frame 30 ditandai dengan adanya tanda panah dengan
latar abu-abu (kalo dicopy warnanya nda kelihatan.)
6. Selanjutnya letakkan objek pesawat jet pada frame ke 60 kemudian lakukan editing
lanjutkan dengan membuat motion tween dari frame 30 ke 60

Posisi dan bentuk objek pada frame 30

Posisi objek pada frame 60

19

7. Dengan cara yang sama lanjutkan animasi anda dari frame 60 ke frame 90 posisi dan
ukuran objek seperti pada gambar :

Posisi objek di frame 90

8. Akhiri animasi anda di frame 120 seperti pada gambar

9. Selamat mencoba

20

PERTEMUAN IV
ANIMASI SHAPE TWEEN
TEORI DASAR
ANIMASI SHAPE adalah animasi perubahan bentuk pada sebuuah objek. Animasi ini banyak
dipakai untuk objek objek yang dijadikan latar dari animasi lain, misalnya animasi frame-byframe ataupun animasi motion.
Seperti halnya pada animasi motion, pada animasi shape anda tidak perlu menggambar semua
rangkaian perubahan bentuk dari objek yang akan anda animasikan tetapi cukup membuat
bentuk animasi pada frame pertama dan bentuk objek pada frame terakhir selebihnya biarlah
flash yang buatkan anda perubahan bentuknya, hebat kan!!! (ah nda ton ji)
Meskipun tidak menitikberatkan pada berpindahan objek tetapi dalam beberapa kondisi
terkadang animasi shape ini juga diberlakukan seperti halnya animasi motion tween.
Ada tiga sifat dasar (behavior) dari setiap objek yang akan dianimasikan, yaitu
1. Movie clip
Movie clip merupakan sifat dari objek yang dapat menyebabkan objek diam mejadi
seolah-olah hidup sehingga dapat berpindah tempat, berubah ukuran maupun sifat sifat
lain yang dimiliki mahluk hidup pada umumnya (kecuali bernafas dan berkembang biak)
2. Button
Botton merupakan prilaku objek yang dapat menyebabkan objek tersebut berfungsi
sebagai pengontrol bagi objek yang lainnya. Dengan sifat botton ini objek movie clip
maupun objek grafik dapat gerakkan atau dihentikan dengan perintah tertentu.
3. Grafik
Merupakan sifat awal objek (gambar diam)
PRINSIP DASAR DALAM PEMBUATAN ANIMASI SHAPE TWEEN
1. Buat key frame pada frame tertentu (misal frame 1)pada time line di layar tertentu
(misal layer 1)
2. Buatlah bentuk dasar objek di fame pertama
3. Buat key frame pada frame selanjutnya misalnya frame 30
4. Lakukan perubahan bentuk pada frame ke 30
5. Buat shape tween dengan memblok frame awal ke frame 29 (sebagai contoh 30 frame)

21

Sebagai contoh, kita akan membuat animasi hati, langkah-langkahnya adalah sebagai berikut :
1. Buat key frame pada frame 1 dan buatlah lingkaran pada frame tersebut

Gbr 4.1 gambar lingakaran di frame 1

2. Klik kanan pada frame 30 lalu pilih tab insert key frame, secara otomatis objek lingkaran
pada frame 1 akan terduplikasi pada frame ke 30

Gbr 4.2 memindahkan objek pada frame 30

22

3. Lakukan modifikasi bentuk objek tanpa memindahkan posisi objek, dengan cara :
a. Pilih selection tool
b. Klik pada daerah stage yang kosong
c. Tekan tombol ALT lalu klik pada stroke lingkaran bagian atas, dengan tetap
menekan tombol ALT tarik kursor anda ke arah titik pusat lingkaran, lalu
lepaskan
d. Tekan kembali tombol ALT lakukan hal yang sama pada bagian c, tetapi kali ini
pilih stroke lingkaran pada titik paling bawah dan tarik kursor anda sejauh kirakira setengah dari jari-jari lingkaran, lalu lepaskan.
Hasilnya seperi pada gambar :

Gbr 4.3 bentuk akhir objek di frame ke 30

4. Buatlah shape tween dengan memblok frame 1 hingga frame 29 (ingat objek dalam
keadaan tidak terpilih) kemudian pada tab propertis pilih tween pada kotak dialog
motion

Gbr 4.4 bentuk time line pada animasi shape

23

Materi praktikum IV
Kegiatan I
1. Buat kembali file baru dengan nama latihan 4
2. Spesifiksi stage seperti pada latihan terdahulu
3. Buat dua buah layer baru layer pertama dengan nama bunga dan layer 2 dengan nama
shape
4. Inport file bunga yang disediakan file ini anda letakkan pada frame 1 hingga frame 90

5. Tambahkan layer 2 dan beri nama shape, pastikan anda aktifkan frame 1 pada layer 2
lakukan trace-ing (ingat kuliahta di PPA 2) pada salah satu kembang yang ada pada
gambar. Gunakan pencil tool

(tekan tombol tool Y di keyboard) dan pastikan

anda memilih jenis goresan smooth (

)
6. Setelah trace-ing nya selesai sembunyikan layer 1 dengan mengklik icon mata, lihat gbr

Dengan demikian hasil traceing akan terlihat, perhatikan gambar :

24

Bunga yang di trace

hasil trace
7. Selanjutnya buat keyframe pada frame 30, dengan menggunakan icon free transform
tool perkecillah hasil tace anda (ukurannya menurut anda saja). Setelah itu klik pointer
anda pada area yang kosong pada stage, kemudian blok frame 29 ke frame 1 dan pada
property inspector tepatnya pada tab motion pilih shape

8. Lanjutkan dengan membuat key frame pada frame ke 60. Kali ini dengan menggunakan
free transform tool perbesar hasil trace anda yang ada pada frame 30 tadi dengan
ukuran kira-kira 3 kalinya. Kemudian buatlah shape tween dari frame 30 ke frame 59

Objek diletakkan pada frame 60 dan ukurannya diperbesar

9. Tekan enter untuk melihat hasilnya

25

Kegiatan II
cobalah buat animasi shape seperti terlihat pada urutan gambar dibawah ini :
1. Objek di layer 1 frame 1

2. Objek di layer1 frame 2 buatkan shape tween spt gambar

26

3. Objek pada frame 1 sampai 30 di layer 3

4. Objek air pada frame 1 layer 4 buatkan shape tween dari frame 1 ke frame 30

5. Objek akhir pada frame 30 layer 4

6. Selamat mencoba

27

PERTEMUAN V
5.1 ANIMASI MOTION GUIDE
LANDASAN TEORI
ANIMASI MOTION GUIDE adalah bnetuk lain dari animasi motion tween yaitu menganimasikan
objek yang mengikuti sebuah garis sebagai lintasan (guide) dari sebuah objek animsi.
Garis yang dijadikan sebagai lintasan dapat berupa garis lurus atau pun kurva. Jika
menggunakan kurfa yang melengkung sebagai lintasan, maka syarat yang harus dipenuhi agar
dapat menghasilkan animsi guide motion adalah pada daerah lintasan TIDAK BOLEH
BERBENTUK SUDUT LANCIP (catatan sudut lancip adalah sudut dengan kemiringan lebih kecil
dari 90o)
PRINSIP DASAR PADA ANIMSI MOTION GUIDE
1. Buat atau inport objek yang akan dianimasikan
2. Buatlah animasi motion tween
3. Buatlah guide line dengan menekan icon
pada kotak time line
4. Dengan menggunakan pencil tool buatlah garis atau kurva sebagai lintasan objek
animasi
5. PASTIKAN OBJEK CENTER POINT OBJEK ANIMASI ANDA TERSAMBUNG DENGAN UJUNG
AWAL DAN UJUNG AKHIR GUIDE LINE

Center point

gbr 5.1 posisi center point

6. Tekan enter untuk melihat hasilnya. Jika animasi tidak menhikuti jalur guide berarti
ujung awan dan akhir line guide tidak pas berada pada center point objek animasi.

28

Contoh :
Kita akan membuat animsi bola yang bergerak secara spiral
1. Buatlah objek bola pada frame 1 di time line 1, lanjtkan dengan membuat animasi
motion sampai frame 30

Gbr 5.2 posisi objek bola pada frame 1 dan frame 30

2. Klik di time line 1 frame 1 lalu klik icon motion guide (
membuat line guide seperti gambar

). Gunakan pencil tool untuk

Gbr 5.3 posisi objek dan line guidenya pada frame 1 dan frame 30 layer 2
3. Tekan enter untuk melihat hasilnya.
4. Untuk menyembunyikan line guide klik icon mata pada time line

Gbr. 5.4 menyembunyikan line guide

29

5.2 ANIMASI BENDA PUTAR

LANDASAN TEORI
SEBAGAI kelanjutan dari animasi motion, kita bisa memberi efek berputar pada objek animasi.
Arah berputarnya dapat searah jarum jam (CW) ataupun berlawanan jarum jam (CCW).
Untuk membuat animasi ini langkah yang ditempuh adalah :
1.
2.
3.
4.

Aktifkan frame 1 pada layer dimana anda akan meletakkan objek animasi
Buat atau inport objek animasi di frame tersebut
Buatlah animasi motion tween
Pada property inspector di tab rotation pilih CW atau CCW

Gbr 5.1.1 tab rotate CW untuk animasi berputar searah jarum jam

5. Tekan enter untuk melihat hasilnya

Animas benda putar banyak dipakai untuk objek animasi seperti ban mobil, baling-baling
helicopter dan biasanya animasi ini digabungkan dengan animsi lainnya baik motion ataupun
shape tween
Membuat animasi benda putar
1. Buatlah key frame di frame pada layer 1

2. Di frame 1 buatlah objek animasi seperti gambar

Gbr 5.1.2 contoh objek animasi benda putar

30

3. Klik kanan pada frame 30 lalu pilih tab INSERT KEY FRAME. Lanjutkan dengan
memindahkan objek animsi anda di ujung kanan stage

Gbr 5.2.3 posisi objek animasi di frame 30 layer 2

4. Blok frame 29 ke frame 1, lalu klik kanan pada derah yang telah anda blok, selanjutnya
pilih CREATE MOTION TWEEN (cara lain membuat animasi motion tween)

Gbr 5.2.4 memblok frame 1 29 untuk animasi motion

Gbr 5.2.5 animasi motion di frame 1 hingga 30

5. Karena kita akan membuat animasi benda putar maka pada property inspector pilih tab
rotae dan pilih CW boleh juga CCW
6. Enter untuk melihat hasilnya. Ok frend.!

31

BAHAN PRAKTIKUM V
KEGIATAN I
1. Buka file baru, beri nama lat5.fla
2. Buatlah 3 layer masing-masing layer 1 latar, layer 2 jalan, layer 3 mobil

3. Klik frame 1 pada layer latar, lalu inport gambar latar.jpg seperti pada gambar

4. Pada layer jalan buatlah kelanjutan jalan seperti gambar diatas

5. Pada layer mobil di frame 1 inport mobil.gif yang pernah anda buat sebelumnya
(pertemuan pertama)

32

6. Buatlah motion tween dari frame 1 hingga frame 60, lanjutkan dengan memberikan line
guide yang mengukuti jalan sehingga gerakan mobil akan mengikuti alur jalan

Posisi akhir mobil pada frame 60 dan bentuk motion tween dari frame 1 hingga
7. Lakukan sedikit modifikasi pada motion twennya agar posisi mobil lebih real
8. Tekan enter untuk melihat hasilnya

Kegiatan II
Lanjutkan kegiatan I
1. Kali ini akan digabungkan animsi motion guide dengan animasi benda putar
2. Dari langkah (7) pada kegiatan I cobalah untuk membuat objek spt gambar (boleh juga
buat objek yang lain)

3. Letakkan objek tersebut di frame ke 10 layer ke 4 (jadi sebelumnya tambhkan layer

baru)

33

4. Selanjutnya buat animsi benda putar dengan pola seperti pada gambar

5. Tekan Ctrl + Enter untuk melihat hasilnya

Kegiatan III
Buatlah objek dibawah ini (pakai corel kalau perlu)

buatlah animsi dibawah ini. Sebagai catatan benda tersebut beputar melalui lintasan papan

Posisi objek di frame 1

34

posisi objek di frame 25

Posisi objek di frame 50

posisi objek di frame 75

Posisi objek di frame 100

Posisi akhir objek setelah melewati guide line pada frame 275

35

Pertemuan VI
BAB II
SYMBOL, INSTANCE, DAN SOUND
PADA BAB II INI AKAN DICERITAKAN:
a.
b.
c.
d.
e.
f.
g.
h.

Symbol, Instance dan library

Perilaku dan pembuatan symbol
Animsi Alpha
Animasi tint
Animasi masking
Mengimport suara
Membuat tombol
Animsi movie Clip

Dibagian pertama tulisan ini telah diceritakan dasar-dasar pembuatan animasi dua dimensi,
jutaan animsi akan anda lahirkan dengan mengkombinasikan animsi dasar yang ada (tergantung
kreatifitas dan art sense anda).
Selajutnya kita akan mencoba berbicara tentang animasi yang diatur dengan sebuah alat
bantu yang dikenal dengan istilan Button (tombol), namun sebelum aka nada konsep-konsep
dasar yang akan saya sajikan buat anda (jangan dibaca jika anda tidak enak badan, apalagi
kalo lagi nda punya diut.kasiaaaaan. deh lho.)
1. SYMBOL, INSTANCE, DAN LYBRARY
DEFINISI
Symbol dalam flash adalah semua objek yang dibuat dan diimport ke dalam stage yang
memiliki tiga perilaku (behafiours) yaitu :
a. Movie clip
b. Button
c. Grafik
Jika kita menggunakan tool box untuk membuat objek dalam stage maka objek tersebut
dinamakan shape. Objek yang berupa shape tidak memiliki perilaku sehingga tidak dapat
dianimasikan
Jika kita melakukan duplikasi dan editing pada symbol maka akan dihasilkan INSTANCE,
jadi Instace adalah cloning dari symbol yang memiliki perilaku yang sama dengan symbol
meskipun bentuk, ukuran dan warnanya tidak sama dengan induknya dalam hal ini
symbol.
Media penyimpanan Symbol disebut LIBRARY

36

KEGUNAAN
Kegunaan symbol dalam flash adalah :
a. Untuk efisiensi dalam desain karena symbol dapat digunakan berkali-kali dengan
perilaku yang sama
b. Untuk memperkecil ukuran file pada flash
c. Dipakai dalam action objek (akan dibahas tersendiri pada bab berikutnya)
Cara untuk mengubah shape menjadi symbol:
1. Buatlah objek denga menggunakan rectangle tool atau semacamnya yang ada di tool
box atau inport file ke library dengan tipe .gif atau .jpg, .bmp juga boleh
2. Klik kanan pada shape tersebut lalu pilih CONVERT TO SYMBOL

Gbr. 2.1 mengubah shape menjadi simbol

3. Pilih behafiours dari symbol dengan memilih movie clip, button atau grafik

Gbr 2.2 perilaku pada sebuah symbol

4. Beri nama pada symbol lalu OK, secara otomatis symbol akan ditempatkan pada library.

37

2. PERILAKU DAN PEMBUATAN SYMBOL

TELAH disinggung sebelunya mengenai perilaku dari sebuah symbol, yaitu movie clip, button
dan graphic
Symbol sebagai mofie clip maksudnya adalah symbol berperilaku sebagai animasi atau mivie
flash
Symbol sebagai button masudnya adalah symbol berperilaku sebagai tombol yang dapat
diklik dalam animasi
Symbol sebagai grafik artinya symbol hanya berlaku sebagai gambar biasa.
Anda tidak dapat langsung melakukan editing pada movie clip, button atau pun grafik. Untuk
melkuknnya cukup dengan mendouble clik pada symbol yang bersangkutan sehingga anda
dibawa ke area symbol bukan lagi pada scene.
Oh ia scene adalah tempat dalam stage dimana semua objek berada.

Gbr 2.3 mengubah kotak menjadi grafik

gbr 2.4 editing grafik pada symbol 2

Sebagai catatan, objek yang telah memiliki ketiga perilaku diatas jika di hapus pada area stage
maka, objek tersebut tetap akan tersimpan pada library. Sehingga kita dapat memanfaatkannya
sewaktu-waktu.

38

3. ANIMASI ALPHA
ANIMASI ALPHA adalah animasi perubahan tampilan objek dari samar-samar menjadi
lebih jelas (tampak)
Prinsip pembuatannya sama dengan pembuatan animasi motion. Perbedaannya adalah
pada property inspector dilakukan perubahan pada tab colour dari NONE menjadi
ALPHA. Tingkat kecerahan tergantung dari nilai alpha tang diberikan (0 sampai 100)

Gbr 2.5 objek dengan alpha=11%

gbr 2.6 objek akhir dengan alpha = 100 %
Animasi alpha dapat dipakai pada animasi motion maupun pada animasi shape tween.
Sedangkan pada animasi frame-by-frame animasi alpha kurang cocok dipakai karena perubahan
objek animasi dibuat ditiap frame sehingga alpha tidak dapat dilihat transisinya.

4. ANIMASI TINT
ANIMASI TINT adalah animasi perubahan warna. Pada animasi ini tidak dihasilkan
gerakan seperti pada animasi sebelumnya, tetapi yang terjadi adalah perubahan
karakter warna pada satu objek yang sama (tint)
Cara membuat
a. Sediakan stage baru dengan ukuran stage yang lebih kecil dari biasanya. Misalnya
400 x 150 pixel
b. Ganti background colour dengan warna-warna yang gelap
c. Buat text pada stage, kemudian beri sifat (behafiour) pada text tersebut menjadi
graphic, lanjutkan dengan member instance name tertentu
d. Buat key frame minimal 3 buah pada time line dengan jarak yang seimbang,
lanjutkan dengan membuat motion. Motion disini tidak untuk menggerakkan text
tetapi hanya digunakan untuk membuat perubahan struktur warna pada text

39

Contoh :
1.

Buat stage dengan ukuran 400 x 150 px dengan background #003366

2.
Buat text STMIK PROFESIONAL dengan ukuran font 42 jenis font trebuchet ms
font colour #0033FF, lanjutkan dengan mengubah behafiour text tsb menadi grafik dan
beri instance name text

3.
Buat key frame pada frame 15 dan frame 30 lanjutkan dengan membuat motion
tween dari frame 1 ke 15 dan 16 ke 29

40

4.

Klik pada frame 1 lalu klik text nya pada property inspector lakukan perubahan
pada tab colour menjadi TINT dan pilih warna #00FF33 tingkat kecerahan 100%

5.

Klik pada frame 30, lakukan hal yang sama dengan langkah (no. 4), tetapi tintnya
yang diubah menjadi #FFFF00
Tekan enter untuk melihat hasilnya.

6.

5. ANIMASI MASKING
ANIMASI MASKING adalah animsi sorot, yaitu suau bentuk animasi gerak yang
memanfaat satu objek dasar yang akan disorot oleh objek lain yang bertindak sebagai
mask.
Langkah pembuatannya :
1. Buat objek yang akan dijadikan obejk dasar baik text ataupun objek gambar
2. Buat objek kotak atau oval yang akan dijadikan sebagai mask
3. Buat motion tween dengan 3 key frame (minimal) pada objek mask
4. Klik kanan pada layer ke dua (objek mask), kemudian pilih MASK

Gbr 2.7 bentuk layer masking

41

Contoh :
1. Buatlah stage dengan ukuran 600x150 px, background #0000
2. Klik pada frame 1, buat tulisan professional multimedia dengan font trebuchet
ms, ukuran font sesuaikan dengan ukuran stage (gunakan free transform tool)
warna font #FFCC00, lanjutkan dengan menginsert frame pada frame 30

3.

Tambahkan satu layer dengan nama mask. Di frame 1 layer ini buatlah objek
kotak dengan ukuran 50x100, posisikan tepat diatas huruf P. lanjutkan dengan
membuat key frame pada frame 15 dan frame 30. Pada frame 30 pindahkan objek
kotak pada huruf a pada kata multimedia.

4.

Blok frame 1 ke frame 30 lalu klik kanan pada daerah yang telah anda blok dan pilih
create motion tween

42

5.

Klik pada layer mask, lalu pilih MASK

6. Klik enter untuk melihat hasilnya.

6. MENGIMPORT SUARA
SEBUAH ANIMASI TANPA SUARA terkesan tidak terlalu hidup, sehingga diperlukan
suara yang mengiringi animasi yang kita buat.
Langkah langkah yang dilakukan untuk mengimport suara yaitu
1. Pastikan anda telah memiliki objek animasi (apa saja)
2. Pada menu FILE pilih INPORT INPORT TO LIBRARYcari file sound yang ada pada
PC anda dengan format .wav, dan .mp3
3. Sound yang telah diinport akan terdapat dalam panel library (ctrl + L).
4. Untuk memainkan sound pada animasi,maka buat satu layer baru untuk sound tsb,
klik pada frame 1 lalu klik and drag file sound dari panel library ke stage.
Contoh:
Lanjutkan animasi msking diatas
a. Tambahkan satu layer diatas layer mask beri nama layer sound.

b. Tekan enter untuk melihat hasilnya

43

7. MEMBUAT TOMBOL
UNTUK membuat tombol pada flash, maka caranya sangat mudah. Ikuti langkah langkah
berikut :
a. Pilih rectangle tool beri ukuran 150x50 dan pilih rounded corner beri nilai 20

Gbr. 2.8 bentuk dasar tombol

b. Beri text tombol

c. Selesksi objek kotak dan teks bersamaan lalu convert to symbol pilih BUTTON dan
beri nama (instance) tombol

Gbr. 2.9 objek button

d. Klik kanan pada objek button lalu pilih edit in place. Disini kita akan masuk pada
layer tombol yang terdiri atas UP, OVER,DOWN,HIT
UP adalah posisi awal tombol bentu normal
OVER adalah bentuk tombol saat disorot kursor
DOWN adalah bentuk tombol saat tombol di klik
HIT adalah cara yang dipakai jika tombol akan disembunyikan (tidak dibahas)

Gbr. 2.9 bentuk frame pada Button

44

e. Klik kanan pada frame over lalu insert key frame. Disini kita akan melakukan editing
untuk membuat stile tombol saat disorot

Gbr. 2.10 style tombol di frame over

f. Klik kanan pada frame down dan inser key frame, kembali lakukan editing pada
frame ini unuk style tombol saat di klik

Gbr. 2.11 style tombol di frame down

g. Di frame down akan ditambahkan sound supaya pada saat di klik, akan terdengar
suara. Untuk itu lakukan insert sound pada frame ini

Gbr. 1.12 Frame down setelah diisi suara

h. Lakukan test movie untuk melihat hasilnya. Tombol ini belum memiliki fungsi karena
belum diberikan script (akan dibahas kemudian)

45

8. ANIMASI MOVIE CLIP

ADALAH animasi yang dipakai untuk member efek movie pada sebuah objek animsi
static. Pada kesempatan ini akan diceritakan cara membuat animsi klip pada button.
Berikut langkah langkahnya
1. Lanjutkan objek button yang telah dibuat sebelumnya.pastikan anda berada pada
frame over

Gbr. 2.13 posisi tombol yang akan dijadikan movie clip

2. Klik pada frame over, lalu pada menu MODIFY CONFERT TO SYMBOL pilih
MOVIE CLIP dan beri nama (instance) movie OK

Gbr 2.14 mengubah tombol menjadi movie clip

3. Sekarang objek tombol telah berubah menjadi movie clip. Selanjutnya klik 2 kali
pada objek movie clip tersebut, anda lihat kita dibawa ke layer normal.

Bahan praktek bab ini : buat semua contoh diatas lanjutkan dengan karya anda
sendiri kreatif ko sedikit !!!

46

Gbr 2.14 mengubah layer tombol menjadi layer standar

4. Setelah itu buatlah animasi benda putar yang posisinya tidak berubah (berputar di
tempat). Klik kanan pada frame 10 lalu inser key frame, begitu juga pada frame 20.
Setelah itu blok dari frame 1 ke frame 10 dan klik kanan pada daerah yang di blok
kemudian pilih create motion tween

Gbr. 2.15 membuat animasi benda putar pada tombol

5. Klik pada frame 1 pada property inspector di tab rotation pilih CW sedangkan pada
frame 5 pilih rotation CCW
6. Test movie untuk melihat hasilnya

47

Bab III
Action script
Setelah mempelajari cerita dalam bab ini maka mahsiswa diharapkan mampu :
1. Memahami definisi dan fungsi action script
2. Menggunakan beberapa script dasar dalam animasi yaitu:
a. Stop and play
b. Go to and stop
c. Go to and Play
d. Next frame
e. Next scane
f. Get URL
3. Membuat beberapa karya animasi terkontrol
3.1 DEFINISI
Action scrip adalah kode-koe yang dituliskan baik pada objek atau pada frame yang
bertujuan untuk menciptakan interaksi antara user dengan objek animasi yang linear.
Animasi linear adalah animasi yang berjalan kontinu tanpa dapat dihentikan.
Action frame adalah kode-kode yang dituliskan pada langsung pada frame tertentu yang
sebelumnya telah diberi key frame.
Action objek adalah kode-kode yang dituliskan pada objek baik objek button ataupun pada
objek movie clip.
3.2 STOP AND PLAY
STOP AND PLAY adalah script (kode) yang dituliskan pada frame (action frame) atau pada
objek (action objek/button) dengan tujuan untuk menghentikan atau memainkan objek
animasi secara simultan.
CARA PEMBUATAN :
1. Buat layer animasi dan duabuah layer button (stop dan play)
2. Pada layer animasi buatlah animasi motion tween
3. Berikan action stop pada frame 1 di layer animasi
CARANYA:
KLIK FRMAE 1 kemudian Pada tab ACTION pilih GLOBAL FUNCTION TIME LINE
CONTROL STOP

48

4. Buat tombol stop pada layer tombol stop (bisa dibuat sendiri atau mengambil default
flash (caranya DARI MENU WINDOW COMMON LIBRARY BUTTON) terdapat 277
jenis button. Temukan tombol palyback STOP dan playback PLAY
5. Klik button STOP lalu Beri action button pada tombol stop sebagai berikut :
Pada tab ACTION pilih GLOBAL FUNCTION MOVIE CLIP CONTROL ON
Klik dua kali pada pilihan ON lalu pilih RELEASE ENTER
Setelah itu kembali ke pilihan GLOBAL FUNCTION TIME LINE CONTROL STOP

Gbr. 3.1 cara pembuatan action button

6. Hal yang sama untuk tombol play :
Pada tab ACTION pilih GLOBAL FUNCTION MOVIE CLIP CONTROL ON
Klik dua kali pada pilihan ON lalu pilih RELEASE ENTER
Setelah itu kembali ke pilihan GLOBAL FUNCTION TIME LINE CONTROL PLAY
CONTOH :
1. Buat tiga layer seperti gbr

2. Buat animasi motion pada layer 1

49

3. Agar saat dimainkan animasi berhenti pada frame 1 di layer satu maka klik pada frame 1
dan tuliskan kode dibawah ini :
stop();
4. Buatlah button stop pada layer 2

5. Klik button tersebut lalu tuliskan kode pada tab action :

on (release) {
stop();
}
6. Buatlan button paly pada layer 3

7. Klik button tersebut lalu tuliskan kode pada tab action :

on (release) {
play();
}
8. Tekan ctrl+enter untuk melihat hasilnya.

50

BAHAN PRAKTIKUM :
BUAT ANIMASI PESAWAT TEMPUR YANG SEDANG MENEMBAKKAN ROKET. HENTIKAN DAN
JALANKAN ANIMASI TERSEBUT GUNAKAN PERINTAH STOP AND PLAY DENGAN
MENGGUNAKAN TOMBOL

3.3

GO TO AND STOP
GO TO AND STOP adalah script yang dipakai untuk berpindah antar FRAME, antar SCANE
dan antar MOVIE.
Penggunaan script gotoandstop biasanya dipakai dalam pembuatan slide show, dimana terjadi
interaksi antara user denagan objek animasi dengan tombol sebagai interface nya.
CARA MEMBUAT :
1. Buat layer 1 untuk gambar
2. Buat layer 2 untuk tombol
3. Tambahkan blank key frame pada layer 1 dengan jarak tertentu, jumlah blank key frame
disesuaikan dengan banyaknya gambar yang akan ditampilkan
4. Pada layer1 tambahkan label pada tiap gambar. Label ini merupakan rujukan pada script
dimana animasi akan digerakkan
Cara member label :
Klik pada frame dimana gambar diletakkan, lalu pada property inspector di tab frame
dikotak isian beri nama sesuai keinginan

Gbr 3.2 cara member label

Contoh :

51

1. Buat halaman baru dengan latar abu abu (#66666), buatlah dua layer layer gambr dan
layer tombol
2. Inport gambar ke library
3. Insert frame pada frame 30, lalu insert blank key frame masing-masing pada frame 10
dan 20
4. Klik pada frame 1 layer gambar, lalu buat kotak sebagai bingkai gambar dengan fill hitam
dan stroke kuning emas
5. Lakukan pencopian pada kotak dan paste in place masing-msing pada frame 10 dan 20
6. Klik and drag gambar 1 ke frame 1, gbr 2 ke frame 10 dan gbr 3 di frame 20, lakukan
sedikit editing biar tampak pas.
7. Setelah selesai, beri label pada masing masing gambar. Agar tampilan slide berhenti
maka pada frame 1 layer slide ber action stop()

8. Buat hal yang sama pada layer tombol kecuali membuat kotak dan mengcopy gambar,
karena layer ini akan dipakai sebagai tempat tombol

9. Buat tobol next pada frame 1 layer 2, pada tombol ini beri kode :
on (release) {
gotoAndStop("gbr2");
}

52

10. Buat tombol next dan previous pada frame 10 layer kedua, beri kode :
Untuk tombol next :
on (release) {
gotoAndStop("gbr3");
}

Untuk tombol previous :

on (release) {
gotoAndStop("gbr1");
}
11. Lakukan test movie dan lihat hasilnya.. mudah khan.

53

UTNTUK BAHAN PRAKTIKUM:

BUATLAH SLIDE SHOW TENTANG AMIK PROFESIONAL, MATERINYA BOLEH BRUPA GAMBAR
DAN TULISAN TENTANG AMIK. DESAINNYA BUAT DI COREL. JUMLAH SLIDE SHOW SEBANYAK
30 BUAH. PAKAI LAH TOMBOL NEXT DAN PREV SEBAGAI INTRFACENYA.!!!
HOREE. CAPEKKO TOH. TAPI HARUS KI BUAT KALO TIDAK????
3.4

GO TO AND PLAY
GO TO AND PLAY adalah script yang dipakai untuk mengontrol sebuah animasi dari
keadaan diam kemudian berpindah ke frame tertentu dan beranimasi. Go to and play dipakai
sebagai action button dan juga dapat dipakai pada action frame.
Script ini dipakai jika terdapat banyak animasi dalam satu scene tetapi kita ingin melihat bagian
bagian tertentu saja.
CARA PEMBUATAN :
1. Buat minimal dua layer layer pertama untuk animasi dan layer kedua untuk tombol
2. Pada layer animasi buatlah animasi apa saja (frame by frame, motion atau pun shape)
3. Di layer button berikan kode :
On (release) {
Go to and play (frame tujuan);
}
4. Lakukan test movie untuk melihat hasilnya, CONTOH :
1. Kita akan mengontrol gerakan roda gigi yang berjalan diatas lintasnnya (buka file animasi
benda putar)

54

2. Dilanjutkan dengan membuat button playback, kemudian dituliskan kode (action button )
on (release) {
gotoAndPlay(125);
3. Agar animasi berhenti pada frame 125, maka pada frame tersebut dituliskan kode
stop()
4. Buat button play, lalu tuliskan kode :
on (release) {
play();
5. Buat juga button stop , tuliskan kode:
on (release) {
stop();
6. Lakukan ctrl+enter untuk melihat interaksi anda dengan computer
Sebagai bahan praktikum :
BUATLAH ANIMASI DIBAWAH INI:

KETERANGAN :
1. Klik tombol merah, maka bola merah akan terpantul-pantul
2. Klik tombol biru, maka bola biru yang terpantul
3. Klik tombol hijau, maka bola hijau yang terpantul

55

3.5

NEXT FRAME DAN PREV FRAME

NEXT FRAME merupakan script yang dipakai untuk memindahkan animasi dari satu
frame ke frame berikutnya. Untuk kasus ini perpindahan frame hanya satu langkah. Jadi
animasi berpindah dari frame 1 ke 2 ke 3 dan seerusnya.
Jika terdapat animasi yang menggunakan beberapa frame sebagai suatu rangkaian
animasi, maka dengan menggunakan action frame ini, setiap tahapan perubahannya akan
tetap ditampilkan.
Kode yang dipakai diletakkan dalam button (action button) yaitu :
On (release) {
Next frmae;
}
3.6 NEXT SCENE
NEXT SCANE ADALAH adalah action button, yang dipakai untuk berpindah antar scane.
Scane sendiri adalah satu stage dimana didalmnya terdapat beberapa adegan yang
ditampikan dalam beberapa animasi.
Dengan menggunakan script ini, maka kita dapat berpindah antar scane sehingga animasi
yang panjang dapat disederhanakan dengan membaginya kedalam baberapa scane
Penulian scriptnya adalah :
On (release) {
Next scane;
}
Cara untuk menabha scane dalam flash 8 adalah (tiap versi flash tidak sama) :
Dari menu WINDOW OTHER PANEL SCANE
3.7

GET URL
ADALAH script yang dipakai untuk memanggil URL. Ini adalah crip pada button (action
button)
Cara penulisannya :
On (release) {
getURL (http://www.sitepoint.com, _blank)
}
Dengan cara ini maka dengan menggunakan button yang kita buat, sebuah situs langsung
dapat diakses

56