Modul 1

AREA KERJA FLASH 8

Pada modul pertama ini kita akan melihat secara sekilas area kerja
Macromedia Flash 8 yang akan digunakan dalam pembuatan animasi pada
bab-bab berikutnya. Semakin Anda dapat mengenal dan menghafal bagianbagian dalam area kerja Macromedia Flash 8, maka Anda akan semakin mudah
dalam mempraktikkan tutorial yang disajikan dalam buku ini. Jika Anda baru
belajar pertama kali, maka Anda dianjurkan untuk mengetahui komponenkomponen utama dalam area kerja Macromedia Flash 8 yang dibahas pada
modul ini. Tidak semua komponen dalam Macromedia Flash 8 dibahas pada
bab ini. Beberapa penjelasan mengenai komponenkomponen dalam area kerja
akan dibahas pada tutorial atau langkah-langkah pada tutorial yang terkait.
Meskipun buku ini menggunakan program Macromedia Flash 8, namun
Anda juga dapat menggunakan versi yang lain. Jika Anda menggunakan versi
yang berbeda dengan yang digunakan buku ini, maka Anda harus dapat
menyesuaikan dengan komponen-komponen yang tersedia.
1.1 Area Kerja Macromedia Flash 8
Gambar 1.1 berikut ini adalah tampilan file atau dokumen baru dari area
kerja Macromedia Flash 8.

Gambar 1.1 Area Kerja Macromedia Flash 8

Bagian-bagian penting dalam area kerja di atas diantaranya: Menu,

Toolbox, Timeline, Stage dan Panel.
1.2 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 mengklik satu kali
pada menu yang ingin Anda pilih.

Gambar 1.2 Contoh menu dan submenu Macromedia Flash 8

1.3 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, seperti pada tabel berikut.

Tabel 1.1 Nama Tool dan Fungsinya
Nama
Tool

Fungsi

Nama
Tool

Fungsi

Selection
Tool
Free
Transform
Tool
Line Tool

Memilih dan memindahkan

Objek
Mengubah atau memutar
bentuk objek sesuai
keinginan
Membuat garis

SubSelectio
n Tool
Grandient
Transform
Tool
Lasso Tool

Mengubah bentuk objek

dengan edit points
Mengubah warna
gradasi

Pen Tool

Membuat bentuk objek

Text Tool

Menyeleksi bagian
objek
Yang akan diedit
Membuat teks (kata

secara bebas berupa

dengan titik-titik sebagai
penghubung
Membuat objek elips
atau lingkaran

Oval Tool

atau
kalimat)
Rectangle
Tool

Pencil Tool

Menggambar objek
secara bebas

Brush Tool

Ink Bottle
Tool
Eyedropper
Tool
Hand Tool

Memberi warna garis tepi

(outline)
Mengambil contoh warna

Paint
Bucket Tool
Eraser Tool

Menggeser stage

Zoom Tool

Stroke Tool

Memberi warna pada

garis tepi
Tanpa warna

Fill Tool

No Color

Membuat objek
berbentuk segi empat
atau segi banyak
Menggambar objek
secara bebas dengan
ukuran ketebalan dan
bentuk yang sudah
disediakan
Memberi warna pada
Objek secara bebas
Menghapus objek
Memperbesar atau
memperkecil objek
Memberi warna pada
Pada objek

Tampilan simbol dari masing-masing tool tersebut dapat dilihat

pada gambar berikut ini.

Sub Selection Tool (V)

Selection Tool (V)

Free Transform Tool (Q)

Gradient Transform Tool (F)

Line Tool (N)

Lasso Tool (L)

Pen Tool (P)

Text Tool (T)

Oval Tool (O)

Rectangle Tool (R)

Pencil Tool (Y)

Brush Tool (B)

Ink Bottle Tool (S)

Paint Bucket Tool (K)

Ereser Tool (E)

Eyedropper Tool (I)

Hand Tool (H)

Zoom Tool (M Z)

Stroke Color
Fill Color
No Color

Gambar 1.3 Tampilan Tools

1.4 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 layer, maka semakin lama animasi akan berjalan.

Gambar 1.4 Timeline

1.5 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.6 Panel
Beberapa panel penting dalam Macromedia Flash diantaranya
panel: Properties & Filters & Parameters, Actions, Library, Color dan
Align & Info & Transform.
1.6.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 mengatur
ukuran background, warna background, kecepatan animasi dan lainlain.

Gambar 1.5 Panel Properties, Filters dan Parameters

1.6.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 8. Untuk memunculkan atau
menyembunyikan panel ini dapat digunakan shortcut F9.

Gambar 1.6 Panel Action Script

1.6.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.7 Panel Library

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

Gambar 1.8 Panel Color

1.6.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.9 Panel Align, Info dan Transform

Modul 2
ANIMASI DASAR
MOTION TWEEN DAN SHAPE
Macromedia Flash merupakan software keluaran Macromedia yang
dapat digunakan untuk pembuatan animasi: web, film kartun dan presentasi
multimedia. Sampai tutorial ini dibuat Macromedia sudah mengeluarkan sampai
dengan versi ke-8. Karena kemudahan dan banyak manfaatnya, maka sofware
ini dipelajari oleh berbagai kalangan. Tutorial berikut sedikit akan membahas
pembuatan animasi-animasi dasar. Meskipun tutorial ini menggunakan Flash 8
sebenarnya Anda pun dapat menggunakan versi-versi sebelumnya.
Berikut

akan

dijelaskan

teknik-teknik

mengunakan Macromedia Flash 8.

2.1 Animasi Motion Tween

pembuatan

animasi

dasar

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 (O)
Langkah 2:
Seleksi objek menggunakan Selection Tool (V) atau Ctrl + A, untuk menyeleksi
objek lingkaran. Setelah itu, klik kanan Convert to symbol pilih Movie Clip
Ok

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

Gambar 2.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. Dan
untuk menghentikan test movie: Ctrl + W.

Gambar 2.3 Jendela dialog pemilihan jenis animasi

Sebagai catatan, animasi berhasil jika dalam layer terdapat tanda panah
(). Jika belum berhasil (garis dalam layer berupa garis putus-putus), ulangi
langkah Anda sampai berhasil !
Berikut ini adalah latihan membuat animasi bola berwarna merah.

Gambar 2.4 Insert Keyframe di frame 30

Klik gambar bola, pada panel properties, pilih tween motion, untuk
membuat bola bergerak dengan kecepatan sesuai dengan kecepatan tempuh
frame per-sekonnya. Kecepatan ini bisa diubah sesuai dengan kehendak.

Namun, pada latihan ini tidak dilakukan perubahan. Jadi kecepatan sesuai
default sebesar 12,0 fps. Hasilnya seperti gambar berikut.

Gambar 2.5 Properties Tween Motion

Pada proses ini akan tampak bagian timeline terbentuk tanda panah dari
frame 1 hingga frame 30. Selanjutnya klik frame 30, dan pindahkan atau geser
posisi bola dari posisi awal ke kanan sejauh yang anda kehendaki, dengan
jalan mendrag gambar bola tersebut.

Gambar 2.6 Bola setelah digeser ke kanan

Selanjutnya untuk mengetahui apakah animasi berhasil, lakukan test

movie dengan jalan menekan tobol Ctrl+ Enter secara bersamaan.

10

2.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. Langkah-langkahnya adalah sebagai berikut:
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, seperti gambar berikut.
Langkah 4:
Klik frame 1, pilih tween-shape di bawah stage.
Langkah 5:
Tekan Enter untuk Play atau Ctrl + Enter untuk Test Movie.

Gambar 2.7 Bentuk pada frame 1

11

Gambar 2.8 Perubahan bentuk pada frame 30

2.3 Animasi Mask

Mask yang artinya adalah penutup mempunyai fungsi sesuai dengan
namanya yaitu untuk menutupi suatu layer. Mask dapat diterapkan kepada
suatu layer dan layer yang sudah dikenai mask bisa berfungsi untuk menutupi
layer dibawahnya. Langkah-langkahnya adalah sebagai berikut:

Buka New document flash

Pada stage di layer 1, buat tulisan misalnya: FISIKA UNDIKSHA

Gambar 2.9 Layer 1 Tulisan yang di mask

12

Insert Keyframe pada frame 35

Buat layer baru yaitu layer 2, pada layer ini buat gambar elips yang tinggi
kira-kira 2 kali tinggi huruf.

Ubah gambar elips tersebut menjadi simbol, dengan jalan Modify

Convert to Symbol Graphic

Klik frame 1 pada layer 2, Pilih Tween: Motion pada panel Properties.

Masih di layer 2, Insert keyframe pada frame 35, sehingga akan tampak
seperti gambar berikut. Tanda panah harus terbentuk dari frame 1
sampai frame 35. Jika tidak ulangi lagi.

Gambar 2.10 Layer 2 Buat Animasi Tween Elips

Geser gambar elips dari kiri ke kanan sampai di sebelah kanan huruf A
pada kata UNDIKSHA.

13

Gambar 2.11 Layer 2 di jadikan Mask

Layer 2 dijadikan Mask, dengan jalan menekan klik kanan pada layer 2,
dan pilih Mask.

Lakukan Test Movie, dengan menekan tombol Ctrl+Enter

Modul 3
MENGATUR STAGE DAN PANEL
14

Memahami stage dan panel dari aplikasi flash sangat penting. Di awal
modul 1 sudah dibahas secara garis besar tentang stage dan panel secara
singkat dan lebih bersifat umum. Pada modul ini, akan dibahas lebih detail
karena stage dan panel ini adalah salah satu faktor yang sangat penting untuk
diketahui dan dikuasai oleh pengguna dari aplikasi flash.
Kompetensi

yang

diharapkan

adalah

pengguna

mengenal

dan

memahami cara menampilkan tool-tool dari flash untuk mempermudah dan

mempercepat kerja.
3.1 Mengatur Ukuran Stage
Stage atau lembar kerja dari flash adalah ruang dimana objek-objek
yang dibuat diletakkan disana. Ukuran stage dapat diatur sesuai dengan
kebutuhan, sehingga tidak akan merasa sesulitan dalam proses pemrograman
yang akan dilakukan oleh pengguna.
Untuk itu ukuran stage hendaklah diatur sesuai dengan kebutuhan.
Secara default ukuran stage mempunyai lebar (width) = 550 pixels dan tinggi
(height) = 400 pixels. Ukuran ini setara dengan 19,3 cm x 14,04 cm

Gambar 3.1 Window pengatur ukuran stage

Langkah untuk menampilkan gambar tersebut adalah sebagai berikut:

(1) Arahkan kursor dan klik ikon Selection Tools
(2) Klik panel Properties
(3) Klik tombol Size, di layar akan tampil gambar tersebut di atas.
15

(4) Selanjutnya lakukan pengubahan, antara lain: ukuran stage, satuannya,

warna latar (background), dll. Warna latar secara default adalah putih.
Jika dikehendaki anda bisa mengubah sesuai dengan selera anda.
3.2 Menampilkan Ruler
Untuk mengatasi kesulitan dalam mengatur posisi objek di dalam stage
diperlukan alat bantu yang dikenal sebagai Ruler. Namun, secara default ruler
tidak tampil di layar kerja. Untuk menampilkannya dapat dilakukan langkahlangkah sebagai berikut:
(1) Klik Stage.
(2) Pilih menu View, kemudian pilih Rulers. Di layar akan tampil seperti
gambar berikut.

Gambar 3.2 Ruler pada stage

3.3 Menampilkan Grid

Di samping Ruler, grid merupakan alat bantu untuk mempermudah
menempatkan objek secara tepat bagian yang dikehendaki pada stage. Grid
bentuknya berupa garis kotak-kotak vertikal dan horizontal pada stage.
Langkah-langkah untuk menampilkan grid adalah sebagai berikut:
(1) Klik Stage.
(2) Pilih menu View, kemudian pilih Grid, lalu pilih Show Grid
16

Gambar 3.3 Menu menampilkan Grid

(3) Setelah dipiih, di layar akan tampil stage yang dilengkapi dengan grid.

Gambar 3.4 Stage dengan Grid

3.4 Menampilkan Guide

Di samping Ruler, dan Grid, ada satu panel yang harus ditampilkan
adalah Guide. Guide akan sangat membantu dalam meletakkan objek yang
akan dianimasikan. Guide dapat diatur posisinya ke kiri atau ke kanan,
17

demikian juga warnanya bisa ditur. Langkah=langkah menampilkan adalah

sebagai berikut:
(1) Pilih menu View, lalu pilih Guides, dan selanjutnya Show Guides
(2) Klik untuk membuat garis vertikal maupun horizontal.
(3) Pilih menu View, lalu pilih Guides, dan selanjutnya Edit Guides.
Misalnya warna diganti menjadi kuning.

Gambar 3.5 Edit Guides

(4) Pilih Selection Tool, lalu klik pada garis yang dibuat, maka warna akan
berubah sesuai warna yang dipilih. Lihat gambar berikut.

Gambar 3.6 Tampilan Guides

3.5 Membuat Custum Tool Panel

Pembuatan animasi tidak bisa terlepas dari tool. Kadang-kadang tool
yang sering dipakai tidak bisa diakses dengan cepat. Sebaliknya tool-tool yang
jarang dipakai justru bertengger di toolbox. Untuk itu, perlu diatur bahwa tool18

tool yang jarang dipakai sebaiknya disembunyikan, sedangkan tool yang sering
dipakai ditampilkan di toolbox. Langkah-langkah adalah sebagai berikut:
(1) Klik menu Edit, lalu Custumize Tool Panel, selanjutnya pilih Pen Tool.

Gambar 3.7 Custumize Pen Tool

(2) Pilih tool yang ingin ditambahkan dan klik Add, selanjutnya klik Ok.
(3) Atau Klik Restore Default untuk mengembalikan ke tool defaultnya.
3.6 Menampilkan Panel History
Panel history merupakan panel yang mencatat semua langkah atau aksi
yang dilakukan oleh pengguna ketika menciptakan objek atau membuat
animasi. Langkah-langkah menampilkan panel history adalah sebagai berikut:
(1) Klik menu window, lalu pilih Other Panel
(2) Pilih History, maka panel history akan muncul seperti gambar berikut.

Gambar 3.8 Panel History

3.7 Membuat Group Panel Sendiri

Untuk menghindari rasa bosan melihat tampilan panel yang tempatnya
monoton, maka dapat dilakukan pengaturan tempat sesuai dengan keinginan
kita. Cara pengaturannya adalah sebagai berikut:
19

(1) Klik panel History

(2) Drah panel History ke kanan, letakkan di bawah panel Color Swathes.

Gambar 3.9 Panel History setelah didrag

3.8 Hidden dan Display Semua Panel

Sebagai upaya mempercepat proses kerja pemrograman, keberadaan
panel sering dibutuhkan. Namun dalam hal tertentu, keberadaan panel kadangkadang mengganggu. Atau mungkin tanpa sepengetahuan anda, panel yang
biasanya ada di samping stage, tiba-tiba tersembunyi. Hal ini sudah tentu
membuat anda kebingungan jika tidak mengetahui cara menampilkannya.
Adapun langkah menyembunyikan atau menampilkan kembali adalah sebagai
berikut:
(1) Pilih menu Window, lalu pilih Hide Panels, maka semua panel akan
tersembunyi atau tidak tampak di sekitar stage. Perhatikan gambar
berikut ini.

20

Gambar 3.10 Panels tersembunyi

(2) Untuk mengembalikannya, pilih menu Window, lalu pilih Show Panels.
3.9 Mengatur Setting Undo
Langkah pembatalan perintah (undo) dapat diperbanyak lebih dari 20
langkah. Langkah-langkahnya adalah sebagai berikut:
(1) Pilih ikon Edit, lalu pilih Preferences
(2) Pada kotak dialog Preferences, klik menu drop down Undo

Gambar 3.11 Memperbanyak Level Undo

21

(3) Kemudian pilihlah Documents=Level Undo

(4) Selanjutnya klik Ok
3.10 Memindah Panel
Program flash 8, posisi panel biasanya ada di sisi sebelah kanan dari
stage. Panel dapat dipindahkan sesuai dengan kehendak anda. Hal ini sangat
diperlukan, karena pada saat-saat tertentu desain animasi yang dibuat mungkin
membutuhkan ruang yang cukup lebar agar mudah teramati dengan jelas.
Misalnya, pada saat melakukan gedung yang besar, peta, dll. Misalkan anda
ingin memindahkan panel Movie Explorer. Langkah-langkahnya adalah sebagai
berikut:
(1) Pilih menu Windows, lalu pilih Movie Explorer

Gambar 3.12 Memindahkan posisi panel

(2) Setelah muncul panel tersebut, anda dapat memindahkan tampilan

tersebut dengan mengklik pada title bar-nya.
(3) Untuk membuka panel tersebut, kliklah kembali pada title bar tersebut.
(4) Untuk memindahkannya, anda hanya cukup mengklik dan mendrag ke
posisi yang anda inginkan.

22

Modul 4
ACTION SCRIPT
Anda telah mempelajari animasi-animasi dasar yang terdapat di Flash,
seperti: Tween-Motion, Tween-Shape dan Animasi Mask. Animasi-animasi yang
sudah Anda pelajari dapat di kontrol dengan Action Script. Action Script adalah
kode-kode program dalam Flash digunakan untuk mengontrol jalannya suatu
animasi agar animasi yang dibuat menjadi lebih atraktif dan menarik.
4.1 Action Script goto
Langkah 1:
Buat layer-layer dengan susunan sebagai berikut dan objek bola yang diconvert to symbol (graphic) dengan tween-motion:

Gambar 4.1 Susunan layer dan objek bola

Langkah 2:
Klik layer Tombol dan buatlah objek persegi panjang F8 Button. Setelah
itu, klik kanan frame 40 dan F5 (insert frame)
Langkah 3:
Klik layer Action dan klik frame 40-insert frame, setelah itu aktifkan Action di
bawah script, atau ikon Script Assist di pojok kanan atas Action dan pilih Script
Assist. Klik Global Functions Timeline Control Klik stop 2x

23

Gambar 4.2 Action stop di layer Action

Gambar 4.3 Layer Action setelah diberi script stop

Langkah 4:
Pilih objek persegi, klik Global Functions Timeline Control Klik goto 2x
sehingga akan tampil script seperti berikut:

Gambar 4.4 Scipt goto yang benar

Langkah 5:
Klik line (baris) 1, maka akan muncul seperti berikut:

Gambar 4.5 Gambar Mouse event

Jika Anda memilih goto and Stop, maka animasi akan menuju frame 1 dan
berhenti. Itu berarti animasi tidak akan berjalan.

24

Langkah 6:
Tekan Ctrl + Enter untuk test movie dan klik objek persegi panjang maka
animasi akan dijalankan
Catatan:
Kejadian-kejadian pada Mouse event:
1. Press: animasi akan berjalan saat mouse ditekan dalam area tombol
2. Release: animasi berlanjut saat mouse telah lepas dari klik dalam area
tombol
3. Release Outside: animasi berlanjut saat mouse telah lepas dari klik di
luar area tombol
4. Key Press: animasi berlanjut saat keyboard tertentu ditekan. Untuk
menentukan keyboard tersebut, tekan salah satu tuts saat Anda memberi
tanda centang pada menu ini
5. Roll over: animasi berlanjut saat pointer mouse berada dalam area
tombol
6. Roll out: animasi berlanjut saat pointer mouse berada di luar tombol
setelah berada di dalam area tombol
7. Drag over: animasi berlanjut saat pointer mouse setelah mengklik di
dalam area tombol digeser dalam area tombol
8. Drag out: animasi berlanjut saat pointer mouse setelah mengklik di
dalam area tombol dan digeser keluar area tombol
4.2 Action Script Play
Langkah 1:
Kerjakan Langkah 1 sampai dengan Langkah 3 di Belajar Script 1:
Langkah 4:
Pilih objek persegi, klik Global Functions Timeline Control Klik play 2x,
sehingga akan tampil script seperti berikut:

Gambar 4.6 Scipt play yang benar

25

Langkah 5:
Beri tanda check di Roll Over dan Roll Out, tekan Ctrl + Enter untuk melihat
hasil animasinya. Anda hanya cukup meletakkan pointer Anda di objek persegi
(tombol), maka objek otomatis jalan tanpa harus di klik.
4.3 ActionScript Bersama
Langkah 1:
Kerjakan Langkah 1 sampai dengan Langkah 3 di Belajar Script 2:
Langkah 2:
Pilih objek persegi, klik Global Functions Timeline Control Buatlah
sedemikian rupa sehingga akan tampil script seperti berikut:

Gambar 4.7 Penggunaan bersama Action script

Untuk Key Press: pada kotak dialog anda tingga tekan Enter di keyboard

Gambar 4.8 Penggunaan keypress pada event

Tekan Ctrl+Enter untuk menjalankan animasinya. Apakah perbedaannya

dengan animasi-animasi sebelumnya? Untuk menjalankan animasi dapat
meng-klik dengan mouse/Enter, dan menghentikannya maka Anda dapat
menekan Enter pada keyboard Anda.
26

4.4 Movie Clip

Movie Clip digunakan untuk mengatur jalannya animasi dalam stage.
Dengan movie clip animasi dalam Flash dapat diatur sehingga animasi yang
dibuat tidak menimbulkan keanehan. Misalnya ketika mouse ditekan, movie clip
A bergerak dan ketika movie clip B ditekan dengan keyboard maka terus
bergerak dan seterusnya.
Kini Anda yang menjadi sutradara dalam pembuatan animasi ini. Anda
dapat menentukan movie clip mana yang bergerak, mana yang diam atau
beberapa movie clip dijalankan bersama-sama.
Langkah 1:
Buat layer Bola dan Action sehingga susunannya seperti berikut:

Gambar 4.10 Persiapan movie clip

Langkah 2:
Buat objek lingkaran dan F8 Movie clip di layer Bola. Buat animasi tween
motion.
Langkah 3:
Buat frame di layer Action-frame 40. Di layer Action, klik kanan objek lingkaran
Action, tambahkan script stop, caranya seperti langkah-langkah sebelumnya.
Langkah 4:
Klik Global Functions Movie Clip Control klik On Clip Event 2x

Gambar 4.11 Movie Clip Control

27

Setelah itu pilih mouseDown dan klik 2x play, sehingga akan tampil script
seperti berikut:

Gambar 4.12 On Clip Event

Langkah 5:
Tekan Ctrl + Enter untuk menjalankan animasinya.
Catatan:
Fungsi event pada Movie Clip:
1. Load: saat movie clip pertama kali tampil pada timeline
2. Unload: saat movie clip hilang dari timeline
3. Mouse down: animasi berjalan ketika tombol mouse ditekan
4. Mouse up: animasi berjalan ketika tombol mouse dilepas setelah diklik
5. Mouse move: animasi berjalan setiap ada gerakan mouse
6. Key down: animasi berjalan ketika tombol keyboard ditekan
7. Key up: animasi berjalan ketika tombol keyboard dilepas setelah ditekan
8. Data: saat data diterima dari action load variable atau load movie

28

Modul 5
ACTION SCRIPT PADA MOVIE CLIP
Action Script pada Movie Clip berperan untuk untuk mengatur jalannya
animasi dalam stage. Dengan movie clip animasi dalam Flash dapat diatur
sehingga animasi yang dibuat tidak menimbulkan keanehan. Misalnya ketika
mouse ditekan, movie clip A bergerak dan ketika movie clip B ditekan dengan
keyboard maka terus bergerak dan seterusnya.
Pembuatan animasi ini, penrogram seolah-olah berperan sebagai
sutradara dalam pempuatan movie clip. Anda dapat menentukan movie clip
mana yang bergerak, mana yang diam atau beberapa movie clip dijalankan
bersama-sama, sesuai dengan kehendak.
5.1 Animasi Movie Clip
Langkah 1:
Buat layer Bola. Di layer bola, buat objek bola Movie Clip

Gambar 5.1 Layer Movie Clip Bola

29

Langkah 2:
Klik kanan bola edit buat animasi Tween-Motion insert layer klik
layer yang baru anda buat di frame terakhir insert Frame
Langkah 3:
Klik frame 1 klik kanan Actions aktifkan Script Assist Global
Functions Timeline Control Dobel klik Stop

Gambar 5.2 Dua layer di bagin Edit-Layer 2 diberi Actions Stop

Langkah 4:
Klik kembali Scene 1 ( ) klik kanan objek Bola Actions Global Functions
Movie Clip Control OnClipEvent klik baris pertama pilih mouse down
Global Functions Timeline Control Dobel klik Play

Gambar 5.3 Action Scipt objek bola

Langkah 5:
Tekan Ctrl + Enter untuk Test Movie _ Klik objek Bola _ Animasi berhasil ... ?
5.2 Tell Target
Tell target akan menjadi sutradara yang mengatur jalannya Movie Clip
Langkah 1:
Kerjakan Langkah 1 sampai dengan Langkah 3 pada tutorial Movie Clip.
Langkah 2:
Klik Scene 1 Tambah layer Tombol buat Tombol (Buttons)

30

Gambar 5.4 Tambah layer Tombol di Scene 1

Langkah 3:
Klik objek Bola Properties (di bawah stage) beri nama Bola

Gambar 5.5 Movie Clip Bola

Langkah 4:
Klik kanan tombol Actions Depreciated Actions tellTarget Isikan di
kotak dialog target, yaitu: Bola Global Functions Timeline Control
Dobel klik Play. Sehingga diperoleh Script seperti berikut.

31

Gambar 5.6 TellTarget Bola

Langkah 5:
Tekan Ctrl + Enter untuk Test Movie.
5.3 Latihan Soal
Buatlah animasi tellTarget dengan 2 Movie Clip dan 2 buah tombol, tombol di
sebelah kiri menggerakkan Bola di sebelah kanan yang bergerak ke kiri dan
tombol di sebelah kanan menggerakkan Bola di sebelah kiri yang bergerak ke
kanan! Sebagai ilustrasi, perhatikan gambar berikut.

Gambar 5.7 Ilustrasi soal latihan

32

Modul 6
ANIMASI FOTO
Pada bagian modul ini, akan dibahas cara membuat animasi efek foto,
yang sering kita lihat di website. Kita akan menciptakan efek foto pada sebuah
foto. Foto itu sendiri merupakan foto statis (graphic) alih-alih sebuah film.
Kemudian, dengan menggunakan durasi waktu tertentu, kita ganti foto itu
dengan foto-foto lainnya. Sembari foto itu berganti satu dengan lainnya, kita
ciptakan efek-efek guratan yang dikendalikan menggunakan ActionScript. Di
sini, Anda berkesempatan untuk mencoba sendiri bagaimana teknik pembuatan
animasi photo ini.

Gambar 6.1 Konsep Animasi Foto

6.1 Kelengkapan yang dibutuhkan

Agar Anda dapat mengerjakan proyek animasi photo ini dengan benar,
Anda membutuhkan kelengkapan-kelengkapan file, antara lain sebagai berikut:

File *.fla yang ada di dalam folder tertentu yang merupakan file utama
latihan Flash. Di sini terdapat script ActionScript yang dapat Anda
pelajari.

File *.swf yang merupakan file Animasi Flash 8 animasi photo ini.

33

File af01.jpg, af02.jpg, af03.jpg, af04.jpg, dan af05.jpg yang ada di

dalam folder tertentu yang sudah anda buat, misalkan folder Animasi
Foto.

Sekedar catatan, Anda bisa membuat animasi ini dengan menggunakan

foto-foto Anda sendiri. Supaya mendapatkan kesan yang maksimal, ubah foto
tersebut menjadi hitam putih atau sephia. Anda bisa menggunakan Photoshop
untuk mengubah foto warna menjadi hitam putih.
6.2 Merancang Animasi Photo
Di bawah ini tersaji langkah-langkah lengkap pembuatan animasi old photo.
Ikutilah dengan baik dari awal sampai akhir.
1. Buatlah dokumen baru dan klik tombol Size yang ada di dalam panel
Properties.
2. Masukkan angka 1024 px di bagian (width) dan 768 di kotak (height)
pada Dimensions.

Gambar 6.2 Panel Document Properties

3. Klik menu File > Import > Import to Library.

4. Pilih file foto misalnya: af01.jpg, af02.jpg, af03.jpg, af04.jpg, dan
af05.jpg. Anda silahkan menyesuaikan dengan file foto yang anda
miliki.
34

5. Tekan tombol Open.

Gambar 6.3 File-file foto yang akan dianimasi

6. Ganti nama Layer 1 menjadi Layer foto1.

Gambar 6.4 Membuat Layer Foto1

7. Klik file foto af01.jpeg yang ada di dalam panel Library.

35

Gambar 6.5 Ambil file af01

8. Kemudian, drag ke dalam stage seperti berikut ini.

Gambar 6.6 Drag file af01.jpg ke stage

9. Masuklah ke dalam panel Properties dan masukkan angka 512 ke kotak

X dan 384 di kotak Y.

36

Gambar 6.7 Mengatur Properties

10. Klik frame 24 yang ada di dalam Layer foto1.

Gambar 6.8 Klik frame 24

11. Klik kanan dan pilih Insert Frame.

12. Buat layer baru dengan nama foto2.

Gambar 6.9 Membuat layer baru Foto2

13. Kunci layer foto1 dan klik layer foto2.

14. Klik foto af02.jpg yang ada di dalam panel Library.

Gambar 6.10 Mengklik Foto af02 yang Ada di dalam Panel Libray

37

15. Drag ke dalam stage sehingga di dalam stage akan tampak gambar
seperti ini.

Gambar 6.11 Memindah Foto af02 ke dalam Stage

16. Klik foto jgj2 dan masukkan angka 521 serta 384 ke kotak X dan Y.

Gambar 6.12 Posisi Koordinat X dan Y di dalam Panel Properties

17. Klik dan drag keyframe foto2 dari frame 1 ke frame 26.

Gambar 6.13 Mengklik dan Men-drag Frame 1 ke Frame 26

18. Klik frame 50 pada layer foto2.

38

Gambar 6.14 Klik Frame 50 pada Layer foto2

19. Lanjutkan dengan klik kanan pada frame 50 layer foto2 itu.
20. Pilihlah Insert Frame.

Gambar 6.15 Pilih Insert Frame di Frame 50

21. Buat layer baru dengan nama foto3.

22. Kunci layer foto1, foto2, dan klik layer foto3.

Gambar 6.16 Tampilan Layer-Layer di dalam Timeline

23. Klik foto af03 yang ada di dalam panel Library.

Gambar 6.17 Klik af03 yang Ada di dalam Panel Library

24. Drag foto af03 ke dalam stage seperti tampilan di bawah ini.
39

Gambar 6.18 Mengklik dan Men-Drag Foto af03 ke dalam Stage

25. Pastikan foto af03 itu yang ada di dalam stage menggunakan Selection
Tool.
26. Posisikan di koordinat X: 512 dan Y: 384.

Gambar 6.19 Posisikan Koordinat X dan Y

27. Klik dan drag keyframe foto3 pada frame 1 ke frame 52.

Gambar 6.20 Mengklik dan Men-Drag Frame 1 ke Frame 52

28. Klik frame 76 yang ada di dalam layer foto3.

40

Gambar 6.21 Klik Frame 76 yang Ada di dalam Layer foto3

29. Klik kanan frame 76 yang ada di layer foto3 dan pilih Insert Frame.

Gambar 6.22 Insert Frame untuk Frame 76

30. Buat layer baru dengan nama foto4.

Gambar 6.23 Tampilan Layer foto4

31. Klik foto af04 yang ada di dalam panel Library dan drag ke dalam stage.

Gambar 6.24 Mengklik Foto af04

41

Gambar.6.25 Drag foto af04.jpg ke stage

32. Posisikan di koordinat yang sama dengan foto-foto sebelumnya, yaitu 512
dan 384 di kotak X serta Y.
33. Klik dan drag keyframe foto4 pada frame 1 ke frame 78.

Gambar 6.26 Klik dan Drag Keyframe foto4 dari Frame 1 ke Frame 78

34. Tes movie dengan menekan tombol Ctrl dan Enter.

42

Modul 7
BEBERAPA ANIMASI ACTION SCRIPT
Membuat animasi menggunakan program Macromedia Flash 8, tidaklah
terlalu sukar. Untuk dapat membuat suatu animasi yang menarik, haruslah
diperhatikan beberapa langkah dan ide yang cemerlang. Berikut adalah
beberapa contoh pembuatan animasi menggunakan program Macromedia
Flash 8.
1) Bukalah program Macromedia Flash 8 (clik 2 kali pada icon flash di
desktop atau di start menu).

43

Gambar 7.1 Stage atau Lembar Kerja

2) Selanjutnya buatlah model animasi yang anda inginkan pada lembar

kerja macromedia flash 8. Berikut akan diberikan beberapa contoh
animasi menggunakan bahasa program action script yang terdapat pada
program Macromedia Flash 8.
7.1 Animasi mobil bergerak
Langkah-langkahnya sebaai berikut:

Buatlah suatu objek mobil pada lembar kerja macromedia flash 8, rangka
mobil dan rodanya, seperti gambar berikut ini.

44

Gambar 7.2 Gambar rangka dan roda mobil

Blok bagian roda, selanjutnya click kanan pada bagian roda yang terblok
dan pilih convert to simbol.

Gambar 7.3 Convert roda to simbol

Selanjutnya akan muncul pilihan berikut, dan pilih movie clip

Gambar 7.4 Jendela pilihan jenis simbol

Kemudian akan muncul instance name di kiri bawah lembar kerja. Click
pada instance name tersebut kata roda_mc (kita menamai movie clip
roda yang kita buat dengan nama roda_mc).

Selanjutnya copy movie clip roda dengan cara click kanan pada bagian
movie clip tersebut dan pilih copy kemudian paste pada lembar kerja.

Setelah itu, hasil copyan dari movie clip roda tersebut kita beri instance
name dengan nama roda1_mc).

45

Gambar 7.5 Pemberian Nama Simbol

Susunlah roda beserta rangka mobil tersebut sehingga menjadi suatu

bentuk mobil. Selanjutnya blok keseluruhan dari mobil tersebut dan
lakukan click kanan pada bagian terblok, lalu pilih convert to symbol.

Selanjutnya pilihlah movie clip, dan pada bagian instance name yang
ada di kiri bawah ketik nama mobil_mc( artinya kita membuat movie
clip mobil dengan nama mobil_mc.

Gambar 7.6 Membuka frame untuk memberi Action Script

Setelah proses tersebut, carilah frame 1 dan click kanan satu kali pada
frame tersebut, pilih action
46

Ketikkan sintax berikut pada lembar action-frame

Gambar 7.7 Sintak Action Script

Untuk melihat hasilnya, click control di bagian atas, dan pilih test movie

Gambar 7.8 Test Movie

Sintax tersebut masih memiliki kekurangan, di mana pada suatu saat

tertentu saat test movie, mobil akan menghilang dan tidak akan muncul
lagi,

sehingga

harus

diulangi

test

movie

berikutnya.

Untuk

menanggulangi hal ini, agar gerakan mobil dapat dilihat terus menerus
(berulang), maka tambahkan script/syntax berikut pada action-frame tadi.
if(mobil_mc._x>440.9){
mobil_mc._x=1}
sehingga syntax tadi akan menjadi
onEnterFrame=function(){
mobil_mc._x+=6;
_root.mobil_mc.roda_mc._rotation+=25;
_root.mobil_mc.roda1_mc._rotation+=25;
if(mobil_mc._x>440.9){

47

mobil_mc._x=1}
}

Untuk melihat hasilnya, lakukanlah test movie.

7.2 Animasi objek bergerak melingkar

Untuk membuat animasi objek yang bergerak melingkar, langkah
langkahnya sama dengan langkah dalam membuat animasi mobil bergerak,
yaitu pertama-tama haruslah dibuat objek yang ingin digerakkan melingkar,
misal objek tersebut adalah adalah sebuah lingkaran berwarna merah.

Gambar 7.9 Bola merah yang akan dianimasi

Jadikanlah objek tersebut menjadi sebuah movie clip dengan instance

name bola_mc.

Selanjutnya pada frame 1 tambahkan sintax dengan cara click kanan

pada frame 1 dan pilih action.

Tambahkan sintax berikut pada lembar action-frame

this.createEmptyMovieClip("canvas_mc",
this.getNextHighestDepth())
var t=0;
onEnterFrame=function(){
t+=2;
bola_mc._x=200+90*Math.cos(50*t);
bola_mc._y=200+90*Math.sin(50*t);
canvas_mc.lineTo(bola_mc._x,bola_mc._y);
canvas_mc.lineStyle(1, 0x0000FF,600);
}

Selanjutnya untuk melihat hasilnya, lakukanlah test movie

48

7.3 Animasi dua roda dikopel

Untuk membuat animasi roda berputar, langkah-langkahnya juga sama
seperti yang sudah dipaparkan di atas.

Pertama-tama buatlah objek (gambar roda) sebanyak 2 buah dengan

ukuran yang berbeda dan dikopel dengan dua buah garis.

Gambar 7.10 Dua roda dikopel

Jadikan kedua roda tersebut menjadi movie clip dengan instance name
roda1_mc untuk roda besar dan roda2_mc untuk roda yang lebih kecil.

Selanjutnya pada frame 1, lakukan click kanan satu kali dan pilih action,
kemudian pada lembar action-frame, ketikkan sintax berikut
onEnterFrame=function(){
roda1_mc._rotation+=10;
roda2_mc._rotation+=20;
}

Selanjutnya untuk melihat hasilnya, lakukanlah test movie

7.4 Animasi dua benda bertumbukan

Untuk membuat animasi dua buah benda yang bertumbukan, ikutilah
langkah-langkah berikut:

Pertama-tama, buatlah dua buah objek, dan keduanya jadikan movie clip
dengan instance name masing-masing adalah benda1_mc untuk
movieclip yang lebih besar dan benda2_mc untuk movie clip yang lebih
kecil.
49

Gambar 7.11 Dua benda bertumbukan

Selanjutnya click kanan pada framedan pilih action, kemudian pada

action- frame, ketikkan sintax berikut:
onEnterFrame=function(){
benda1_mc._x+=10;
benda2_mc._x-=10;
if(benda1_mc.hitTest(benda2_mc)){
benda1_mc._x-=200;
benda2_mc._x+=200;
}
}

7.5 Animasi grafik suatu fungsi

Untuk membuat grafik, haruslah diketahui terlebih dahulu fungsi yang
akan akan dibuatkan grafik tersebut. Misalnya, jika ingin membuat grafik sinus,
maka harus diketahui fungsi yang grafiknya berbentuk sinus. Fungsi tersebut,
Contohnya fungsi tersebut adalah y sin x

Dengan mengetahui fungsi grafik ini, selanjutnya, pada frame 1 lakukan

click kanan satu kali dan pilih action.

Kemudian pada action frame tersebut ketikkan sintax berikut

this.createEmptyMovieClip("canvas_mc",
this.getNextHighestDepth());
this.createEmptyMovieClip("bola1_mc",
this.getNextHighestDepth());
onEnterFrame=function(){
//bola_mc._x+=10;
//bola_mc._y=100+50*Math.cos(bola_mc._x*10);

50

bola1_mc._x+=5;
bola1_mc._y=100+50*Math.sin(bola1_mc._x*10);
canvas_mc.lineTo(bola1_mc._x,bola1_mc._y);
canvas_mc.lineStyle(1, 0xFF0000, 600);
}

Selanjutnya untuk membuat sumbu x dan y, tambahkan sintax berikut

pada sintax sebelumnya
this.createEmptyMovieClip("line1_mc",
this.getNextHighestDepth());
this.createEmptyMovieClip("line2_mc",
this.getNextHighestDepth());
this.createEmptyMovieClip("line3_mc",
this.getNextHighestDepth());
line1_mc._x+=50;
line1_mc._y=100;
line2_mc.lineTo(line1_mc._x-100,line1_mc._y);
line2_mc.lineStyle(1, 0xFF0000, 600);
line3_mc.lineTo(line1_mc._y-11,line1_mc._x);
line3_mc.lineStyle(1, 0xFF0000, 600);

Hasilnya dapat dilihat dengan melakukan test movie

7.6 Animasi Jam Analog

Dalam membuat animasi membuat jam, ketikkanlah sintax berikut pada frame 1
this.createEmptyMovieClip("clock", 3);
clock.onPress = function
startDrag(this);
};
clock.onRelease = function() {
stopDrag();
};
//positioning base movie clip
clock._x = 150;
clock._y = 150;
//creating the circle
clock.createEmptyMovieClip("circle", 1);
//drawing the circle
// setting the line style for the circle

51

clock.circle.lineStyle(4, 0x000066, 100);

clock.circle.moveTo(100, 0);
// coordinate calculations
circleRadius = 100;
for (a=0; a<360; a++) {
radAngle = a*Math.PI/180;
xCoord = Math.cos(radAngle)*circleRadius;
yCoord = Math.sin(radAngle)*circleRadius;
clock.circle.lineTo(xCoord, yCoord);
}
// big blue frame
clock.circle.lineStyle(20, 0x94C9FE, 100);
clock.circle.moveTo(114, 0);
bigCircleRadius = 114;
for (a=0; a<360; a++) {
radAngle = a*Math.PI/180;
xCoordBig = Math.cos(radAngle)*bigCircleRadius;
yCoordBig = Math.sin(radAngle)*bigCircleRadius;
clock.circle.lineTo(xCoordBig, yCoordBig);
}
// shining effect on the frame - this must be placed
AFTER the big blue frame so that it shows on top of
it
shineAlpha = 10;
clock.circle.lineStyle(14, 0xFFFFFF, shineAlpha);
clock.circle.moveTo(-114, 0);
shineRadius = 114;
for (a=180; a<=270; a++) {
radAngle = a*Math.PI/180;
if (a>=180 && a<=210) {
shineAlpha = shineAlpha+1;
} else {
shineAlpha = shineAlpha-1;
}
xCoordBig = Math.cos(radAngle)*bigCircleRadius;
yCoordBig = Math.sin(radAngle)*bigCircleRadius;

52

clock.circle.lineStyle(14,

0xFFFFFF,

shineAlpha);
clock.circle.lineTo(xCoordBig, yCoordBig);
}
// little outline
outlineAlpha = 40;
clock.circle.lineStyle(1, 0x000033, outlineAlpha);
clock.circle.moveTo(104, 0);
outlineRadius = 104;
for (ola=0; ola<=360; ola++) {
radOutAngle = ola*Math.PI/180;
if (ola>=180 && ola<=225) {
outlineAlpha = outlineAlpha-1.6;
} else if (ola>225 && ola<=270) {
outlineAlpha = outlineAlpha+1.6;
} else {
outlineAlpha = 40;
}
xOutCoord = Math.cos(radOutAngle)*outlineRadius;
yOutCoord = Math.sin(radOutAngle)*outlineRadius;
clock.circle.lineStyle(1, 0x000033,
outlineAlpha);
clock.circle.lineTo(xOutCoord, yOutCoord);
}
//drawing the hours' markings
// setting the line style for the hours' markings
clock.circle.lineStyle(3, 0x000000, 100);
clock.circle.moveTo(100, 0);
// coordinate calculations
circleRadius = 100;
smallerCircleRadius = 90;
for (h=0; h<12; h++) {
hourAngle = h*30;
radHourAngle = hourAngle*Math.PI/180;
xCoord1 = Math.cos(radHourAngle)*circleRadius;
yCoord1 = Math.sin(radHourAngle)*circleRadius;

53

xCoord2

Math.cos(radHourAngle)*smallerCircleRadius;
yCoord2

Math.sin(radHourAngle)*smallerCircleRadius;
clock.circle.moveTo(xCoord1, yCoord1);
clock.circle.lineTo(xCoord2, yCoord2);
}
//drawing the minutes' markings
// setting the line style for the minutes' markings
clock.circle.lineStyle(1, 0x000000, 100);
clock.circle.moveTo(100, 0);
// coordinate calculations
circleRadius = 99;
smallerCircleRadius = 91;
for (m=0; m<60; m++) {
minuteAngle = m*6;
radMinuteAngle = minuteAngle*Math.PI/180;
xCoord1 = Math.cos(radMinuteAngle)*circleRadius;
yCoord1 = Math.sin(radMinuteAngle)*circleRadius;
xCoord2

Math.cos(radMinuteAngle)*smallerCircleRadius;
yCoord2

Math.sin(radMinuteAngle)*smallerCircleRadius;
clock.circle.moveTo(xCoord1, yCoord1);
clock.circle.lineTo(xCoord2, yCoord2);
}
//creating the seconds hand
clock.createEmptyMovieClip("secondsHand", 40);
clock.secondsHand.lineStyle(0, 0xFF0000, 100);
clock.secondsHand.moveTo(0, 0);
clock.secondsHand.lineTo(0, -90);
//creating the minutes hand
clock.createEmptyMovieClip("minutesHand", 30);
clock.minutesHand.lineStyle(5, 0x000000, 100);
clock.minutesHand.moveTo(0, 0);
clock.minutesHand.lineTo(0, -69);
//creating the hours hand

54

clock.createEmptyMovieClip("hoursHand", 20);
clock.hoursHand.lineStyle(6, 0x000000, 100);
clock.hoursHand.moveTo(0, 0);
clock.hoursHand.lineTo(0, -50);
clock.hoursHand.lineStyle(4, 0xFFFFFF, 100);
clock.hoursHand.lineTo(0, 0);
// starting the movement
clock.onEnterFrame = function() {
clockDate = new Date();
seconds = clockDate.getSeconds();
this.secondsHand._rotation = seconds*6;
minutes = clockDate.getMinutes();
this.minutesHand._rotation = minutes*6;
hours = clockDate.getHours();
this.hoursHand._rotation

(hours*30)+

(minutes/2);
};

7.7 Latihan Soal-soal

(1) Buatlah program animasi yang menampilkan rangkaian sederhana
rangkaian listrik arus searah, yang terdiri dari: lampu, bateri, kabel
penghubung, dan saklar. Pada saat saklar On, lampu menyala, dan
saklar Of lampu mati.
(2) Kembangkan soal (1), agar menampilkan Kuat arus ditampilkan pada
alat ukur Ampere meter, sebagai fungsi dari Tegangan pada Volt meter,
jika hambatan lampu dibuat tertentu. Nyala lampu juga mengikuti
perubahan variabel-variabel tersebut.
(3) Buatlah animasi lintasan peluru dengan variabel sudut elevasi dan
kecepatan awal.
(4) Buat Animasi yang menjelaskan konsep Efek Foto Listrik.
(5) Buat Animasi Model Atom Rutherford.
(6) Buat Animasi Sistem Tata Surya.

55

DAFTAR PUSTAKA
Alamin, M. 2003. Belajar Animasi dengan Macromedia Flash. Jakarta: --Istiyanto, HH. 2007. Tutorial Animasi Flash 8. http://istiyanto.com Diakses tgl. 10
Oktober 2008
Jubilee Enterprice. 2007, 63 Trik Rahasia Flash CS3. Jakarta: Elex Media
Komputindo
Pramono, Andi. 2002.Berkreasi dengan Macromedia Flash MX. Yogyakarta:
Penerbit Andi

56