MODUL PEMBELAJARAN

SMK NEGERI 29 JAKARTA

Pengenalan Dasar
Animasi
Menu Interaktif Sederhana

Macromedia Flash

Disajikan oleh:

LAHMUDIN ST
Pengenalan Macromedia Flash

A. Pengenalan Software untuk Animasi

Pada prinsipnya animasi dibuat dengan menggunakan berbagai gambar terpisah. Sementara gerakan
(motion) pada dasarnya adalah kumpulan dari gambar diam yang diurutkan sehingga menyerupai
obyek yang bergerak. Seperti halnya pada TV atau film, sebenarnya layar berkedip dengan kecepatan
tertentu dan menampilkan tiap-tiap gambar. Karena kecepatannya yang sangat tinggi, maka seluruh
gambar tergabung membentuk sebuah aliran adegan yang panjang.

Gambar web pada umumnya (seperti GIF atau JPEG) merupakan ‘bitmap’ yang terdiri atas titik-titik
warna tunggal (pixel) yang menyusun gambar sehingga sering timbul masalah seperti sulit dirubah
ukurannya tanpa mengurangi kualitasnya, kapasitas yang menyita banyak ruang, dan animasinya
merupakan sambungan sejumlah bitmap dalam satu file yang cukup besar, sehingga dalam kaitannya
dengan halaman web, akan memakan waktu yang lama untuk men-download-nya.

Flash merupakan software yang mampu menghasilkan file animasi dengan ukuran kecil. Hal ini terjadi
karena Flash merupakan program animasi vektor, maksudnya dibuat dari sejumlah bentuk yang
tersusun atas gambar dan warna. Selain lebih ekonomis ukuran file-nya, vector mudah dibentuk dan
digerakkan serta dapat ditampilkan bahkan dicetak dalam ukuran apapun.

Selain gambar dengan format vektor, Flash juga mampu menggabungkan teks, gambar bitmap, suara
serta elemen interaktif ke dalam movie.

Flash memiliki kemampuan untuk menyederhanakan proses animasi melalui penggunaan frame kunci
dan tweening. Maksudnya cukup dengan membuat titik awal dan akhir animasi, dan Flash akan
mengerjakan tween di antaranya.

B. Pengenalan Jendela Flash

1. Mengenal Menu Dasar

Berikut merupakan tampilan umum Flash dalam membuat movie.

Toolbar Layer Timeline Stage Properties Library

lahmudin@smkn29jakarta.com
 • Toolbar
Panel yang umumnya muncul pada aplikasi-aplikasi grafis dan layout. Toolbar ini dibagi empat
kelompok: Tools; berisi tombol-tombol untuk membuat dan mengedit gambar, View; untuk
mengatur tampilan lembar kerja, Colors; menentukan warna yang dipakai saat mengedit,
Option; alat bantu lain untuk mengedit gambar.

• Layer
Berbagai layer akan diatur dan diurut di sini, di samping timeline. Tiga kolom di kanan setiap
nama layer menunjukan visibilitas setiap layer > icon , apakah itu dikunci (untuk
mencegah perubahan) > icon , atau untuk mengeset tampilan dalam bentuk outline atau
warna > icon .

• Timeline
Bagian dari jendela aplikasi dimana layer dan frame diatur dalam satu bagian. Setiap layer
diurut ke bawah dalam timeline, sedangkan frame diurut secara melintang. timeline
digunakan untuk mengetahui panjang/durasi animasi.

• Stage
Layar kerja utama untuk melakukan pengeditan setiap frame dari movie Flash. Frame yang
dipilih di timeline akan muncul di layer ini.

• Properties
Berisi informasi suatu obyek dapat berupa karakter fisik gambar/garis (panjang dan lebar),
warna, serta teks editor (untuk jenis, ukuran serta warna font). Suatu obyek/gambar dapat
diedit melalui panel ini setelah terlebih dahulu obyek/gambar tersebut dipilih/diseleksi dengan
Selection Tool [ ].

• Library
Di sinilah terkumpul berbagai simbol yang dipakai dalam animasi yang kita buat. Simbol
merupakan kumpulan gambar baik movie, tombol (button), dan gambar statis (graphic).

2. Fungsi tiap Tool pada Toolbar

Menyeleksi (memilih) gambar Menampilkan seleksi yang lebih detil

(sub-select)
Mengubah bentuk obyek
(memperbesar, memperkecil Mengubah arah gradasi
atau memutar)
Memilih gambar secara tak beraturan
Membuat garis lurus

Menyisipkan teks
Menggambar garis atau
bentuk tertentu
Membuat kotak segi empat atau polygon
(pada opsi pull-down)
Membuat lingkaran/elips

Membuat garis tebal

Membuat gambar tak beraturan

Pewarna badan (fill) gambar

Mengubah warna garis (line)

Menghapus bagian gambar

Mengambil sampel warna

lahmudin@smkn29jakarta.com
3. Document Properties

Document Properties berguna sebagai persiapan pembuatan animasi. Fungsi Document Properties
adalah untuk melakukan pengaturan ukuran movie di layar, warna background dan framerate,
dan dimensi.

Untuk memanggil kotak dialog Document Properties, pilih jendela Properties di bawah layar,
kemudian pilih tombol Size.

Judul dan deskripsi yang akan dimasukkan ke

dalam metadata output. Bukan merupakan
penamaan file jadi tidak perlu diisi.

Dimensi atau ukuran stage

yang ingin ditampilkan

Pilihan Printer memaksimalkan ukuran

movie hingga area cetak penuh. Karena
output yang diinginkan berupa animasi dan
bukan print-out maka pilihan yang
diaktifkan adalah Default.

Klik dan pilihlah warna yang tersedia

untuk mengubah warna stage – area
kerja Flash.

Pastikan satuan yang aktif adalah Framerate yaitu kecepatan Flash dalam
Pixel Karena satuan inilah yang akan memutar animasi secara utuh yang diukur
digunakan. dalam fps (frame per second). Semakin besar
framerate maka semakin halus animasinya.

II. Pemanfaatan…
II. Pemanfaatan/Penggunaan Tool Gambar, Teks dan Warna

lahmudin@smkn29jakarta.com
A. Menggambar Bentuk-bentuk Dasar

1. Membuat Garis

Flash menyediakan pilihan untuk membuat beragam bentuk garis. Pilih ikon Line Tool [ ] pada
toolbar di sisi kiri layar, kemudian lihat pilihannya di panel Properties di sebelah kiri bawah layar,
Masukkan angka ketebalannya. Dan untuk memulai garis klik pada stage dan drag sepanjang
yang anda inginkan.

2. Pensil

Untuk membuat garis bebas, Pilih ikon Pencil Tool [ ] pada toolbar sisi kiri dan pilih warnanya
pada panel Colors di bawahnya. Untuk membuat garis lurus, pada panel Options di bawah
toolbar pilihlah opsi Straighten.

lahmudin@smkn29jakarta.com
3. Lingkaran dan Kotak

Pilih Oval Tool [ ] atau Rectangle Tool [ ] untuk menaruh bentuk lingkaran, elips atau
kotak pada layar. Adapun jenis dan warna garis serta warna isi bentuk itu dapat dipilih pada panel
Colors.

4. Unik

Buatlah bentuk yang unik dengan menggunakan Pen Tool [ ]. Klik, drag dan lepas, maka garis
akan terbentuk. Gerakkan kembali mouse ke arah yang diinginkan dan klik untuk membuat sudut
atau anchor point. Bila bentuknya merupakan kurva tertutup maka dapat diberi warna.

lahmudin@smkn29jakarta.com
5. Menghaluskan

Siku dan bentuk kotak dapat dihaluskan dengan cara pilih Rectangle [ ] dan pilih Set Corner
Radius yang berada di bagian bawah panel. Masukkan nilai 5 dalam kotak dialog Rectangle
Setting dan pilih OK. Mulailah menggambar kotak dan hasilnya akan terlihat.

6. Mengubah Ukuran

Double-click bentuk yang akan diubah ukuran dengan menggunakan Selection Tool [ ]. Pilih
Free Transform Tool [ ], maka pada ujung bentuk akan muncul kotak kecil atau handle. Pada
panel Option pilih opsi Scale [ ]. Drag kotak kecil tersebut ke arah luar, ukuran akan
membesar dan drag ke arah dalam maka ukuran akan mengecil secara simetris.

lahmudin@smkn29jakarta.com
7. Memutar

Untuk memutar bentuk, dengan Free Transform Tool [ ] masih dalam keadaan aktif, Pilih
Rotate and Skew [ ] pada panel Option kemudian arahkan mouse mendekati salah satu
handle yang ada di sudut hingga cursor membentuk panah melingkar. Klik dan drag ke arah
putaran yang diinginkan.

B. Menggunakan Warna

1. Mengganti Warna

Untuk mengganti warna isi atau garis dari bentuk yang telah dibuat dapat dilakukan dengan
menyeleksi/memilih bentuk yang akan diganti dengan menggunakan Selection Tool [ ].
Double-klik gambar yang ingin diganti warnanya, kemudian pada panel Colors pilih opsi Stroke
Color [ ] untuk mengubah warna garis atau pilih Fill Color [ ] untuk mengubah warna
isi bentuk.

lahmudin@smkn29jakarta.com
2. Gradasi

Untuk memberi warna gradasi, pilih menu Window > Color Mixer, jendela Color Mixer akan
muncul di sebelah kanan layar. Pilih bentuk yang akan diberi warna gradasi dengan Selection
Tool [ ], pada pull-down menu di panel Color Mixer, pilih Type Radial. Pilih warna yang lebih
terang untuk bagian sebelah kiri, sedangkan bagian kanan yang lebih gelap.

Untuk mengedit gradasi pilih Gradient Transform Tool [ ]. Klik dan drag handle yang muncul
sesuai dengan arah yang diinginkan.

lahmudin@smkn29jakarta.com
C. Menggunakan Teks

Untuk menambahkan teks kedalam layer pilih Text Tool [ ] pada toolbar kemudian klik pada
layar. Sebuah kotak kosong akan muncul. Untuk mengubah jenis, ukuran serta warna font, gunakan
jendela Properties di bagian bawah layar.

D. Mengimpor Gambar dan Mengolahnya

1. Mengimpor Gambar

Untuk memasukkan gambar dalam format bitmap, seperti misalnya foto, ke dalam movie dapat
dilakukan dengan cara mengimpor gambar/foto tersebut. Pilih menu File > Import> Import to
Stage, lalu cari letaknya di hard disk.

lahmudin@smkn29jakarta.com
2. Memperbesar/memperkecil

Untuk memperbesar atau memperkecil ukuran gambar dapat dilakukan dengan menggunakan
Scale Tool [ ] pada toolbar disebelah kiri. Agar ukuran gambar tidak distorsi, tekan Shift
pada keyboard pada saat memperbesar/memperkecil gambar.

3. Mengubah Bitmap menjadi Vektor (Trace Bitmap)

Dalam Flash terdapat fasilitas untuk mengubah gambar dalam format bitmap menjadi vektor,
yaitu menu Trace Bitmap. Fasilitas ini berguna untuk mengurangi besarnya file karena

lahmudin@smkn29jakarta.com
 penggunaan gambar bitmap dalam animasi. Namun tentunya kualitas gambar bitmap itu sendiri
akan mengalami penurunan.

Untuk mengaplikasi Trace Bitmap pada gambar/foto yang telah kita impor, sebelumnya
pilih/seleksi terlebih dulu gambarnya menggunakan Selection Tool [ ] pada toolbar.
Kemudian pilih menu Modify > Bitmap > Trace Bitmap

Setelah muncul kotak dialog Trace Bitmap, masukkan angka pada kolom Color Threshold dan
Minimum Area. Semakin besar angka yang dimasukkan semakin besar pula file yang dikompres.
Namun sebaiknya tidak memasukkan angka lebih kecil dari 10 (sepuluh) karena pengaruhnya
pada pengurangan besarnya file sebagai tujuan utama Trace Bitmap akan sangat kecil. Bahkan
pada beberapa komputer (dengan spesifikasi rendah) akan mengakibatkan hang, karena
komputer dipaksa bekerja terlalu keras untuk menguraikan gambar tersebut.

Setelah proses Tracing Bitmap selesai, pilih menu Modify > Group, agar gambar yang sudah di-
trace tersebut terkumpul sebagai satu image.

lahmudin@smkn29jakarta.com
4. Pengolahan Gambar lebih lanjut

Untuk mendapatkan gambar dengan hasil olahan lebih lanjut, disarankan untuk menggunakan
software lain yang memang dikhususkan untuk mengolah gambar/foto, seperti; Macromedia
Fireworks, Adobe Photoshop atau Corel Photopaint. Flash digunakan pada saat gambar
tersebut telah siap untuk dianimasikan.

Animasi
dengan
Macromedia Flash
(tingkat dasar)

Animasi flash dapat disimpulkan menjadi beberapa macam. Berikut ini adalah macam-macamnya;

A. Animasi Gerak dengan Pergeseran Tempat

Untuk membuat animasi sebuah objek yang dapat bergerak/ bergeser dari suatu tempat ke tempat
lain (ke samping , ke atas, ke bawah dan sebagainya) langkah-langkahnya sebagai berikut:
1. Setelah membuat file baru, pilih Oval tool [ ] pada toolbar (atau tool yang lain sesuai
bentuk objek yang akan dibuat).
2. Buat sebuah lingkaran pada layar kerja.

3. Pilih Selection tool [ ], kemudian double-klik pada lingkaran untuk mengaktifkan

lingkaran.

4. Pilih Modify > Convert to symbol

5. Pada kotak dialog yang tampil isikan seperti berikut:

lahmudin@smkn29jakarta.com
 6. Pilih OK

7. Klik mouse di frame 30 pada Timeline, kemudian pilih Insert > Timeline > Keyframe atau
Klik kanan mouse pilih Insert Keyframe.

8. Klik mouse pada lingkaran, kemudian geser lingkaran ke sembarang tempat ( sebagai contoh
di sini digeser ke arah kiri )

9. Blok pada Timeline dari frame 1 hingga frame 30.

10. Pilih jendela Properties, pada pilihan Tween pilih Motion.

Atau
Klik kanan mouse pada Timeline pilih Create Motion tween

lahmudin@smkn29jakarta.com
 Sekarang coba jalankan animasinya dengan cara pilih Control > Play atau tekan Enter pada
keyboard

Catatan :
Anda dapat merubah gerakan awal dan akhir dengan cara:
Klik mouse pada frame 1 (untuk awal gerakan) kemudian ubah letak lingkaran pada layar, dan klik
mouse pada frame 30 (untuk akhir gerakan) kemudian ubah letak lingkaran.
Untuk mempercepat gerakan animasi geser keyframe akhir ke kanan (<30) dan untuk memperlambat
geser ke kiri (>30).
B. Animasi Gerak dengan Pembesaran atau Pengecilan Bentuk

Untuk membuat animasi gerak dengan pembesaran atau pengecilan bentuk, lakukan langkah yang
sama dengan pembuatan animasi pergeseran tempat hingga langkah ke 10.

• Kemudian klik frame 30 pada Timeline.

• Pilih Free Transform Tool [ ] , arahkan kursor ke salah satu titik sudut yang muncul di
gambar lingkaran. Sambil menekan tombol Shift pada keyboard, Klik mouse pada titik
tersebut dan geser ke arah luar hingga lingkaran membesar. Kemudian lepaskan mouse.

Jalankan animasi dengan menekan tombol Enter.

Catatan:
Untuk membuat objek mengecil, saat menggeser sebuah titik pada lingkaran arahkan ke dalam
hingga lingkaran mengecil.

lahmudin@smkn29jakarta.com
C. Animasi Gerak dengan berputar

Untuk membuat animasi gerak dengan berputar, lakukan langkah yang sama dengan pembuatan
animasi pergeseran tempat hingga langkah ke 10.

• Pilih Selection tool [ ], kemudian double-klik pada lingkaran atau klik kanan mouse
pada lingkaran, pilih Edit in Place.

• Pilih Paint Bucket Tool [ ]

• Pilih Window > Color Mixer

• Pada jendela Color Mixer pilih Radial pada pilihan Type

• Kemudian arahkan kursor ke lingkaran (jangan ditengah-tengah) dan klik mouse.

Catatan:
Langkah di atas bertujuan agar saat lingkaran diputar terlihat gerakkannya.

• Tutup jendela lingkaran dan kembali ke jendela Scene 1 dengan cara klik pada tab Scene 1.

lahmudin@smkn29jakarta.com
 • Kemudian klik frame 30 pada Timeline.
• Pilih Modify > Transform > Rotate and Scale
• Pada jendela Scale and Rotate isi kolom Rotate dengan 180 (angka ini menunjukkan
berapa derajat objek akan berputar)
• Pilih OK
Jalankan animasi

Catatan:
Untuk membuat animasi yang dapat bergerak berputar sambil membesar atau mengecil, Anda dapat
mengisikan nilai Scale dan Rotate secara bersamaan pada jendela Scale and Rotate.

D. Animasi Gerak dengan Mengikuti Alur (Guideline)

Untuk membuat animasi sebuah objek yang dapat bergerak mengikuti sebuah alur atau guide,
langkah-langkahnya sebagai berikut.

• Buat File baru

• Ubah nama layer 1 menjadi Bumi

• Buat sebuah lingkaran yang cukup besar di tengah-tengah layar. (Apabila mempunyai gambar
globe/bumi dapat digunakan dengan cara Import)

lahmudin@smkn29jakarta.com
 • Tambahkan layer baru pada Timeline, dengan cara mengklik mouse pada ikon Insert layer
beri nama Bulan.

• Buat lingkaran yang lebih kecil dari lingkaran bumi.

lahmudin@smkn29jakarta.com
 • Klik kanan mouse pada lingkaran bulan pilih Convert to Symbol, beri nama Bulan pilih
Graphic, pilih OK

• Pilih ikon Add Motion Guide pada jendela Timeline

• Buat sebuah lingkaran kosong (tanpa Fill) dan atur posisinya seperti di bawah ini.

lahmudin@smkn29jakarta.com
 • Dengan bantuan Eraser Tool [ ] hapus sebagian lingkaran tadi hingga terputus.

• Klik kanan mouse di frame 60 pilih Insert Keyframe (untuk ketiga layer)

lahmudin@smkn29jakarta.com
 • Pilih frame 1 pada layer Bulan, dengan menggunakan Selection tool [ ] atur lingkaran
bulan hingga titik tengahnya pada posisi awal lingkaran guide bulan.

• Pilih frame 60 pada layer Bulan, dengan menggunakan Selection tool [ ] atur lingkaran
bulan hingga titik tengahnya pada posisi akhir lingkaran guide bulan.

• Blok frame 1 hingga 60 pada layer bulan, klik kanan mouse pilih Create Motion Tween.

lahmudin@smkn29jakarta.com
 Jalankan animasi.

• Untuk menghilangkan garis guideline, klik ikon mata pada layer Guideline bulan.

Jalankan animasi

E. Animasi Teks berubah-ubah warna

Untuk sebuah judul program terkadang perlu dibuat menarik dengan cara membuat teks pada judul
tersebut bergerak atau berubah-ubah warnanya.
Dengan Flash 8 membuat animasi tersebut bukanlah hal yang sulit.

• Pertama buat file baru, melalui jendela Properties ubah warna background menjadi hitam.

• Pilih Text Tool [ ]

• Pada jendela Properties, atur : Static Text, Arial, 40 warna Kuning, Anti-alias for animation
(lihat gambar).

• Klik mouse pada layar kerja, ketikkan JUDUL (judul program).

lahmudin@smkn29jakarta.com
 • Atur posisi agar ditengah layar kerja.
• Pilih Modify > Break Apart atau tekan CTRL + B

• Pilih Modify > Break Apart

• Pilih Modify > Convert to Symbol

• Pada jendela Convert to Symbol, beri nama judul, pilih Graphic, pilih OK

• Klik di frame 15 pada Timeline, Klik kanan mouse Insert Keyframe.

• Klik di frame 30 pada Timeline, Klik kanan mouse Insert Keyframe.
• Klik di frame 15 pada Timeline
• Klik mouse pada teks JUDUL
• Pada jendela Properties, pilih Color > Tint, atur warna ke Jingga (atau yang lain),
kepekatan 100%.

lahmudin@smkn29jakarta.com
 • Blok frame 1 hingga 30, Klik kanan mouse pada timeline Pilih Create Motion Tween.
• Jalankan animasi.

F. Animasi Masking

• Buat sebuah file baru.

• Ketikkan teks Pustekkom pada layar kerja. Font: Arial, size: 48, Color: Biru. Atur agar letaknya
di tengah layar.

• Klik di frame 40 pada timeline, klik kanan mouse pilih Insert Frame.
• Insert layer pada jendela Timeline, beri nama lingkaran.

• Buat sebuah lingkaran pada layar, ukuran lebih besar dari tinggi teks, warna bebas.

lahmudin@smkn29jakarta.com
 • Klik mouse di frame 1 pada Timeline.
• Pilih Modify > Convert to Symbol.
• Beri nama lingkaran masking, pilih Graphic, pilih OK.

• Dengan menggunakan Selection tool [ ] atur gambar lingkaran kesamping kanan teks.

• Klik di frame 40 pada layer lingkaran, klik kanan mouse pilih Insert keyframe.

• Dengan menggunakan Selection tool [ ] atur gambar lingkaran kesamping kiri teks.

• Blok dari frame 1 hingga 40 pada layer lingkaran, klik kanan mouse pilih Create Motion
Tween.

lahmudin@smkn29jakarta.com
 • Pilih kotak kecil pada layer lingkaran, Klik kanan mouse pilih Mask.

• Jalankan animasi.

G. Animasi Bentuk

• Buat sebuah file baru.

• Dengan menggunakan Oval Tool [ ] buatlah sebuah bentuk oval.

• Klik di frame 40 pada timeline, klik kanan mouse pilih Insert Blank Keyframe.

• Di posisi frame ke-40, buatlah sebuah persegi.

• Klik mouse pada bagian tengah timeline, pilih jendela Properties, pada opsi Tween pilih
Shape.
• Jalankan animasi.

lahmudin@smkn29jakarta.com
Untuk memperoleh animasi yang gerakannya lebih teratur, dapat digunakan Shape Hints. Sebagai
contoh dapat dipraktekkan pada animasi yang baru saja kita buat.

• Klik mouse pada frame pertama.

• Pilih Modify > Shape > Add Shape Hint, akan muncul bulatan kecil berwarna merah.

• Ulangi sebanyak tiga kali kemudian drag masing- masing titik a, b, c, d sesuai gambar.

• Klik mouse pada frame terakhir.

lahmudin@smkn29jakarta.com
 • Pindahkan masing-masing titik a, b, c dan d, sesuai gambar. Titik akan berubah menjadi
hijau.

• Klik kembali mouse pada frame pertama. Dapat dilihat bahwa titik berubah menjadi kuning,
artinya, Shape Hint telah berhasil.

• Jalankan animasi.

H. Animasi dengan Suara

• Buka file animasi masking (ini hanya untuk mempercepat tutorial)

• Pilih File > Import > Import to Library
• Pilih file suara yang akan digunakan (pada tutorial ini kita akan menggunakan file suara yang
terdapat di direktori C > Windows > Media > Windows XP Startup )
• Buat layer baru pada Timeline, beri nama suara.

• Klik mouse di frame 1 pada layer suara.

• Pilih jendela Properties, pada kolom suara pilih Windows XP Starup

• Jalankan animasi
• Simpan File

lahmudin@smkn29jakarta.com
Catatan:
Apabila suara yang digunakan waktunya lebih pendek dari pada animasinya, Anda dapat mengubah
kolom Repeat ke Loop atau mengubah nilai Repeat lebih besar dari 1.

I. Animasi dengan Kontrol

• Buka file animasi masking (ini hanya untuk mempercepat tutorial)

• Buat layer baru, beri nama Kontrol.

• Pilih Window > Common Libraries > Buttons

• Pada jendela Library – Bottons, pilih Playback rounded > rounded green play

lahmudin@smkn29jakarta.com
 • Klik mouse dan geser gambar tombol yang muncul ke layar. Atur letaknya pada bagian bawah
layar.

• Pada jendela Library – Bottons, pilih Playback rounded > rounded green stop.

• Klik mouse dan geser gambar tombol yang muncul ke layar. Atur letaknya di samping tombol
play.

lahmudin@smkn29jakarta.com
1. Memberi perintah action pada tombol play.

• Klik gambar tombol play pada layar.

• Pilih jendela Actions yang terdapat di bawah layar, atau pilih window > Actions.
• Pada jendela Actions pilih ikon > Global Functions > Movie Clip Control > on

• Pilih release pada menu pilihan yang muncul.

• Klik mouse di tengah tanda kurung kurawal pada jendela actions.

• Double klik pada pilihan play

• Sehingga script pada jendela Actions tampak seperti di bawah ini.

lahmudin@smkn29jakarta.com
2. Memberi perintah action pada tombol stop.

• Klik gambar tombol stop pada layar.

• Pada jendela Actions pilih ikon > Global Functions > Movie Clip Control > on

• Pilih release pada menu pilihan yang muncul.

• Klik mouse di tengah tanda kurung kurawal pada jendela Actions.

• Double-klik mouse pada pilihan stop

lahmudin@smkn29jakarta.com
 • Sehingga script pada jendela Actions tampak seperti di bawah ini.

• Buat layer baru pada Timeline beri nama Script.

• Klik kanan mouse di frame1, layer Script, pilih Insert Blank Keyframe.

• Klik mouse di frame1, layer Script.

• Pada jendela Action ketikkan stop () ;

lahmudin@smkn29jakarta.com
 • Klik mouse di frame1, layer suara, dengan cara klik dan geser pindahkan titik (keyframe) 1 ke
frame 2.

• Jalankan animasi dengan cara, Pilih Control > Test Movie atau tekan tombol ctrl + Enter
• Coba tekan tombol play dan stop bergantian.

Menu Interaktif Sederhana

dengan
Macromedia Flash

A. Opening

Untuk membuat opening, berikut adalah langkah-langkahnya:

I. Animasi Logo

11. Buat file baru kemudian ubah dimensi/ukuran layar menjadi 800 pixel X 600 pixel.

lahmudin@smkn29jakarta.com
 12. Import gambar logo ke dalam stage, pilih File>Import>Import to Stage.

13. Dengan menggunakan Text Tool [ ], ketikkan ”Departemen Pendidikan Nasional”

pada Stage tepat di bawah logo.

lahmudin@smkn29jakarta.com
 14. Klik Selection Tool [ ] kemudian pada panel Properties yang ada di bagian bawah
layar, pilih font Arial ukuran 20 pt warna hitam.

15. Aktifkangambar dan teks dengan Selection Tool [ ] kemudian pilih

Modify>Align>Horizontal Center untuk merata-tengahkan kedua gambar.

16. Pilih Modify>Convert to Symbol

17. Beri nama kemudian pilih type Graphic, Registration/sumbu pilih titik tengah. Klik OK.

lahmudin@smkn29jakarta.com
 18. Atur posisi logo dengan koordinat X= 400 dan Y=300 atau kira-kira tepat di tengah Stage.

Koordinat ini tergantung pada posisi Symbol yang dapat dilihat dengan memilih
Window>Info.

19. Double-klik nama ”Layer 1” yang terdapat pada Timeline dan ganti nama layer menjadi
”Logo”.

20. Save file dan beri nama ”Latihan”.

lahmudin@smkn29jakarta.com
 21. Klik kanan frame ke-50 pada Timeline lalu pilih Insert Keyframe.

22. Klik frame pertama pada Timeline kemudian pilih Modify>Transform>Scale and Rotate.
Pada jendela Scale and Rotate yang muncul, masukkan angka 50 % dan klik OK.

23. Seleksi gambar Logo pada Stage kemudian pada panel Properties ubah pilihan Color
Style menjadi Alpha dan masukkan angka 0 %.

24. Klik kanan frame ke-25, pilih Create Motion Tween.

lahmudin@smkn29jakarta.com
 25. Buat Keyframe baru pada frame ke-60 dan 70 dengan meng-klik kanan frame tersebut satu
persatu dan pilih Insert Keyframe.

26. Dengan frame yang aktif posisi ke-70, klik gambar Logo pada Stage. Ubah Color Style pada
Panel Properties menjadi Alpha 0 %.

27. Klik kanan frame ke-65 kemudian pilih Create Motion Tween.

II. Animasi Judul

1. Buat layer baru dengan meng-klik ikon Insert Layer [ ] pada bagian bawah Timeline.
Beri nama layer menjadi ”Judul”

2. Klik kanan frame ke-70 layer ”Judul” pilih Insert Keyframe.

3. Dengan menggunakan Text Tool [ ], ketikkan ”Pelatihan Flash” pada Stage.

lahmudin@smkn29jakarta.com
 4. Klik Selection Tool [ ] kemudian pada panel Properties yang ada di bagian bawah
layar, pilih font Arial ukuran 25 pt warna hitam bold.

5. Pilih Modify>Convert to Symbol. Pada jendela Convert to Symbol beri nama ”Judul”
kemudian pilih type Graphic, Registration/sumbu pilih titik tengah. Klik OK.

6. Atur posisi teks dengan koordinat X= 400 dan Y=300 atau kira-kira tepat di tengah Stage.

7. Klik kanan dan Insert Keyframe pada frame ke-80, 90 dan 100 layer ”Judul”.

8. Klik frame ke-70.

Klik teks dan ubah Color Style menjadi Alpha 0 %

lahmudin@smkn29jakarta.com
 9. Klik frame ke-100.

Klik teks dan ubah Color Style menjadi Alpha 0 %

10. Klik kanan dan Insert Motion Tween pada frame ke-75 dan frame ke-95

11. Save file.

B. Membuat Tampilan Menu

Masih dalam file yang sama, berikut adalah langkah-langkah untuk membuat tampilan menu;

I. Membuat Background

1. Pilih Window>Other Panels>Scene. Pada jendela Scene yang muncul, double-klik nama
”Scene 1” dan ganti nama menjadi ”Opening”.

lahmudin@smkn29jakarta.com
 2. Klik ikon Add Scene [ ], ganti nama menjadi ”Menu 1”.

Tutup jendela Scene. Perhatikan pada Timeline, nama Scene yang sedang aktif akan
muncul dengan nama ”Menu 1”

3. ganti nama ”Layer 1” menjadi ”BG”.

4. Dengan menggunakan Rectangle Tool [ ] buat dua buah persegi dengan ukuran, kode
warna dan koordinat posisi seperti terlihat pada gambar di bawah. Pastikan masing-masing
kotak di-Group atau Modify>Group.

Dimensi : 200x400 px
Warna : 000066
Koordinat posisi : X=100 Y=350

Dimensi:
200x400 px

Warna:
0099FF

Koordinat posisi:
X: 100
Y: 350

lahmudin@smkn29jakarta.com
 5. Dengan Text Tool [ ], ketikkan ”Judul Materi” pada persegi sebelah atas Stage.

6. Buka panel Library (pilih Window>Library). Pilih ”Logo-diknas”.

7. Tarik gambar Logo diknas yang ada pada panel Library ke arah Stage. Letakkan di pojok
atas sebelah kiri dari Stage.

lahmudin@smkn29jakarta.com
 8. Untuk memperkecil gambar logo tekan Ctrl + T pada Keyboard. Pada panel Transform
yang muncul pilih Constrain lalu masukkan angka 50 %.

9. Atur posisi logo atau masukkan koordinat pada panel Properties. Masukkan koordinat X=20
dan Y=10.

10. Save file.

II. Menambahkan Menu, Sub-Menu dan Navigasi

a. Membuat Button Menu

1. Tambahkan layer baru dengan meng-klik ikon Insert Layer [ ] kemudian ganti nama
menjadi ”Menu”.

2. Double-klik Rectangle Tool [ ]. Pada jendela Rectangle Settings yang muncul

masukkan angka 10 points. Klik OK.

3. Ganti pilihan warna Stroke dan Fill pada bagian bawah panel Tools.
lahmudin@smkn29jakarta.com
 Beri warna kosong untuk Stroke.

4. Pilih warna biru atau kode warna #0066FF untuk Fill.

5. Dengan setting color yang baru dibuat, buat sebuah persegi panjang pada Stage.

6. Dengan menggunakan Text Tool [ ], tuliskan ”Menu 1” di atas gambar persegi.

7. Pilih Font Arial ukuran 16 pt bold warna hitam.

lahmudin@smkn29jakarta.com
 8. Seleksi persegi dan teks dengan Selection Tool [ ].

9. Pilih Modify>Convert to Symbol. Pada jendela Convert to Symbol beri nama ”Button
Menu 1”, Pilih Type Button, Registration pilih titik tengah. Klik OK.

Kini persegi dan teks yang baru dibuat telah menjadi Button.

10. Double-klik button menu 1. Perhatikan perubahan pada Timeline. Kini frame yang ada bukan
berupa angka tapi Up, Over, Down dan Hit.

11. Klik kanan dan pilih Insert Keyframe pada frame Over dan Down.

12. Klik frame Over lalu klik gambar persegi pada Stage. Ganti warna gambar persegi menjadi
warna jingga atau masukkan kode warna #FFCC00.

lahmudin@smkn29jakarta.com
 13. Klik tulisan Menu 1 pada Timeline untuk memindahkan area kerja kembali ke Menu 1.

14. Geser Button Menu 1 ke arah bidang persegi sebelah kanan.

Untuk mencoba button pilih Control>Test Scene.

b. Menduplikasi Button Menu

Untuk membuat button yang sama dengan teks yang berbeda cukup dengan menduplikasi button
yang sudah ada. Berikut langkah-langkahnya;

1. Buka panel Library atau pilih Windows>Library.

2. Klik kanan Button Menu 1 pada Library kemudian pilih Duplicate.

lahmudin@smkn29jakarta.com
 3. Pada jendela Duplicate Symbol yang muncul, tuliskan nama ”Button Menu 2”. Klik OK.

Perhatikan panel Library sekarang sudah bertambah satu buah button baru.

4. Untuk mengedit tulisan pada button, double-klik gambar button pada panel Library.
Tampilan pada Stage sebagai area kerja akan berubah menjadi gambar button yang akan
diedit.

lahmudin@smkn29jakarta.com
 5. Dengan menggunakan Text Tool [ ] ganti tulisan pada tiap-tiap frame menjadi ”Menu 2”.

6. Klik Selection Tool [ ] kemudian klik kembali tulisan Menu 1 pada Timeline untuk
memindahkan area kerja kembali ke Menu 1.

Tampilan Stage akan kembali ke Menu 1.

lahmudin@smkn29jakarta.com
 7. Klik dan drag Button Menu 2 yang ada di Library ke Stage. Letakkan tepat di bawah
Button Menu 1.

Untuk mencoba button pilih Control>Test Scene.

lahmudin@smkn29jakarta.com