Cara Cepat Belajar Adobe Flash

2012
By. Dedy Izham

http://blog.jasamultimedia.com
TEKNIK CEPAT BELAJAR

ADOBE FLASH
Mempelajari Adobe Flash itu ternyata sangat mudah dan menyenangkan, dalam buku ini dibahas
beberapa teknik bagi anda yang belum mengenal sama sekali mengenai Adobe Flash. Agar anda bisa
mahir menggunakan flash dengan teknik-teknik sederhana yang ditulis disini. Tunggu apa lagi,
sisihkan waktu anda untuk membaca tekniknya. SELAMAT BELAJAR !!!
Take easy With Technology | Belajar Murah dan mudah berbasis Multimedia
Copyright © 2010-2012 JasaMultimedia.Com
KATA PENGANTAR
Puji syukur penulis ucapkan kepada ALLAH .SWT, atas rahmat dan karunia-NYA. Akhirnya
karya tulis tutorial sederhana ini bisa penulis selesaikan dalam waktu kurang dari 1 bulan. Karya tulis
tutorial ini penulis buat dengan penuh perasaan. Hehehe  okey deh..., sekian dulu kata pengantar
dari saya. Lagian anda juga gak bakalan baca kata pengantar ini. Bacanya paling singkat-singkat
doank. Makanya sedikit aja deh kata pengantarnya. 
Yang penting disini, saya selaku penulis mengucapkan. SELAMAT BELAJAR !!!
SELAMAT !!! Anda berhak menyebarkan Ebook sederhana ini sebagai

hadiah kunjungan pada website anda. Dengan syarat, anda tidak diperbolehkan
mengubah atau menulis ulang tanpa seizin pihak JASAMULTIMEDIA.COM
Dapatkan Video Tutorial Pendukung Buku Ini di:

http://belajar.jasamultimedia.com
Keberhasilan tidak datang dengan sendirinya.

Keberhasilan datang dari sebuah pengorbanan.
Pengorbanan yang dibayar dengan mahal,
Akan menuai hasil Maksimal.
Take easy With Technology | Belajar Murah dan mudah berbasis Multimedia ii
DAFTAR ISI
Cover............................................................................................................................. ......................... i
Kata pengantar ....................................................................................................................................... ii
Daftar isi ............................................................................................................... ................................ iii
Sekilas tentang FLASH ....................................................................................................... ................... 1
BAB I Pengenalan Adobe Flash .......................................................................................................... 2
1.1 Halaman Awal .......................................................................................................... .......... 2
1.2 Lingkungan Kerja Adobe Flash CS3 .................................................................................. 2
1.3 Tools Box ................................................................................................................ ........... 3
1.4 Library ................................................................................................................................ 4
1.5 ActionScript ........................................................................................................................ 4
1.5.1 Event ............................................................................................................... 5
1.5.2 Target ............................................................................................................. 5
1.5.3 Action ............................................................................................................ 5
BAB II Membuat Animasi Sederhana ..................................................................................... ......... 6
2.1 Frame dan Keyframe ......................................................................................................... 6
2.2 Motion Tweening .............................................................................................................. 9
2.2.1 Efek Fade in dan Fade out .............................................................................. 9
2.2.2 Membuat Kincir ............................................................................................ 12
2.2.3 Obyek Mengikuti Lintasan (Path) ................................................................ 16
2.3 Motion Shape ................................................................................................................... 18
2.3.1 Mengubah Bentuk Obyek ............................................................................ 18
2.4 Masking ........................................................................................................................... 20
BAB III ActionScript ........................................................................................................................ 21
3.1 Mengenal ActionScript .................................................................................................... 21
3.2 Memutar Kincir dengan ActionScript .............................................................................. 22
3.3 Menu Interaksi ....................................................................................................... .......... 25
Daftar Pustaka ................................................................................................................................... 30
Biografi Penulis .................................................................................................................................. 30
Take easy With Technology | Belajar Murah dan mudah berbasis Multimedia iii
Teknik Cepat Belajar Adobe Flash
Dedy Izham
zona.dedy@yahoo.com
http://blog.jasamultimedia.com
Lisensi Dokumen:
Seluruh dokumen di blog atau website JasaMultimedia.Com dapat digunakan, dimodifikasi dan
disebarkan secara bebas untuk tujuan bukan komersial (nonprofit), dengan syarat tidak menghapus
atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap dokumen.
Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari
JasaMultimedia.Com.
Pada kesempatan kali ini, saya berkesempatan coret-coret lagi disini. Untungnya waktu
saya tidak terlalu padat dengan kesibukan, jadi saya bisa menyempatkan untuk menulis sedikit
mengenai hal yang berbau MULTIMEDIA. 
Kali ini saya akan membahas mengenai Multimedia sebagai media pembelajaran, yakni
membahas mengenai “Cara Cepat Belajar Adobe Flash”. Ini merupakan tulisan pertama saya
mengenai flash. Flash saat ini banyak digunakan dalam dunia pendidikan. Maka dari itu, saya
disini tertarik untuk menulis Tutorial mengenai flash sebagai bahan ajar berbasis Multimedia.
Disini saya akan membahas sedikit demi sedikit, agar anda lebih mudah memahaminya.
Terutama bagi anda yang baru mengenal FLASH, bagi anda yang sudah mengenal. Saya harap
melalui tulisan sederhana saya ini, bisa menambah wawasan anda mengenai FLASH.
SEKILAS TENTANG FLASH

Flash merupakan software yang memiliki kemampuan menggambar sekaligus
menganimasikannya, serta mudah dipelajari. Flash tidak hanya digunakan dalam pembuatan
animasi, tetapi pada zaman sekarang ini flash juga banyak digunakan untuk keperluan lainnya
seperti dalam pembuatan game, presentasi, membangun web, animasi pembelajaran, bahkan
juga dalam pembuatan film.
Animasi yang dihasilkan flash adalah animasi berupa file movie. Movie yang dihasilkan
dapat berupa grafik atau teks. Grafik yang dimaksud disini adalah grafik yang berbasis vektor,
sehingga saat diakses melalui internet, animasi akan ditampilkan lebih cepat dan terlihat halus.
Selain itu flash juga memiliki kemampuan untuk mengimpor file suara, video maupun file
gambar dari aplikasi lain.
Flash adalah program grafis yang diproduksi pertama kali oleh Macromedia corp, yaitu
sebuah vendor software yang bergerak dibidang animasi web. Macromedia Flash pertama kali
diproduksi pada tahun 1996. Macromedia flash telah diproduksi dalam beberapa versi. Versi
terakhir dari Macromedia Flash adalah Macromedia flash 8. Sekarang Flash telah berpindah
vendor ke Adobe. Semua tools pada dasarnya sama, hanya yang membedakan disini adalah
adanya jenis Actionsript 3.0. Actionscript ini merupakan versi terbaru dari penulisan actionscript
di flash. Namun anda jangan khawatir, actionscript 2.0 masih berlaku di Adobe Flash.
Copyright © 2010-2012 JasaMultimedia.Com 1
BAB I
Pengenalan Adobe Flash
Pada bahasan awal ini, akan saya bahas mengenai dasar-dasar pengenalan tools dari
Adobe Flash. Kalau anda dulu sempat mengenal Flash yang masih vendor Macromedia, tools-
tools yang dipakai sebenarnya hampir sama seperti yang masih bervendor Macromedia. Dan
kini, adobe flash juga masih menerapkan standarisasi dari macromedia. Hanya beberapa opsi
saja yang berbeda. Saat ini adobe sudah memunculkan versi terbarunya. Yakni versi CS6, walau
pun versinya tinggi tetapi kalau saya lihat, tools-tools dan default workspace-nya masih tetap
hampir sama seperti versi sebelumnya. Hanya ada beberapa saja yang berbeda, di versi terbaru.
Pada versi terbaru tersebut terdapat tools yang memungkinkan kita membuat efek ruang (3D).
Disini saya memakai Adobe Flash CS3, sebagai media interaktif pembelajaran.
1.1 HALAMAN AWAL

Halaman awal adalah tampilan yang pertama kali muncul ketika kita mengakses Adobe
Flash CS3 Professional. Cara mengakses Adobe Flash CS3 Professional pertama kali yaitu
double klik pada icon yang ada di desktop atau lihat dari daftar program. Tampilan start page
pertama kali membuka Adobe Flash CS3 Professional yaitu:
Gambar 1.1 Tampilan start page Adobe Flash CS3
1.2 LINGKUNGAN KERJA ADOBE FLASH CS3

Secara garis besar, lingkungan kerja (Workspace) adobe flash cs3 terdiri dari beberapa
komponen utama yang bisa anda lihat seperti pada gambar 1.2:
1. Menu Bar adalah kumpulan yang terdiri atas dasar menu-menu yang digolongkan
dalam satu kategori. Misalnya menu file terdiri atas perintah New, Open, Save, Import,
Export, dan lain-lain.
2. Timeline adalah sebuah jendela panel yang digunakan untuk mengelompokkan dan
mengatur isi sebuah movie, pengaturan tersebut meliputi penentuan masa tayang objek,
pengaturan layer, dan lain-lain.
3. Stage adalah area untuk berkreasi dalam membuat animasi yang digunakan untuk
mengkomposisi frame-frame secara individual dalam sebuah movie.
4. Toolbox adalah kumpulan tools yang sering digunakan untuk melakukan seleksi,
menggambar, mewarnai objek, memodifikasi objek, dan mengatur gambar atau objek.
5. Properties adalah informasi objek-objek yang ada di stage. Tampilan panel properties
secara otomatis dapat berganti-ganti dalam menampilkan informasi atribut-atribut
properties dari objek yang terpilih.
6. Panels adalah sebagai pengontrol yang berfungsi untuk mengganti dan memodifikasi
berbagai atribut dari objek dari animasi secara cepat dan mudah.
Gambar 1.2 Komponen Utama
1.3 TOOLBOX
Fasilitas Toolbox seperti telah dijelaskan sekilas diawal adalah sekumpulan tool atau
alat yang mempunyai fungsi-fungsi tersendiri untuk keperluan desain (lihat Gambar 1.3).
Berikut penjelasan setiap tool yang terdapat pada Toolbox .
1. Arrow Tool, Arrow Tool atau sering disebut selection tool berfungsi untuk memilih
atau menyeleksi suatu objek.
2. Subselection Tool, berfungsi menyeleksi bagian objek lebih detail dari pada selection
tool.
3. Free Transform Tool, berfungsi untuk mentransformasi objek yang terseleksi.
4. Lasso Tool, berfungsi untuk memotong gambar secara manual.
5. Pen Tool digunakan untuk menggambar garis dengan bantuan titik-titik bantu seperti
dalam pembuatan garis, kurva atau gambar.
6. Text Tool digunakan untuk membuat objek teks
7. Line Tool digunakan untuk membuat atau menggambar garis.
8. Oval Tool digunakan untuk menggambar bentuk lingkaran atau elips.
9. Pencil Tool digunakan untuk membuat garis.
10. Brush Tool digunakan untuk menggambar bentuk garis-garis dan bentuk-bentuk bebas.
11. Ink Bottle tool digunakan untuk mengisi/mengganti Stroke(garis luar) suatu objek.
12. Paintbucket Tool digunakan untuk mengisi area-area kosong atau digunakan untuk
mengubah warna area sebuah objek yang telah diwarnai.
13. Eye Dropper Tool digunakan untuk mengambil sampel warna.
14. Eraser Tool digunakan untuk menghapus objek.
15. Hand Tool digunakan untuk menggeser tampilan stage tanpa mengubah pembesaran.
16. Zoom Tool digunakan untuk memperbesar atau memperkecil tampilan stage.
17. Stroke Color digunakan untuk memilih atau memberi warna pada suatu garis.
18. Fill Color digunakan untuk memilih atau memberi warna pada suatu objek.
19. Swap Color digunakan untuk menukar warna fill dan stroke atau sebaliknya dari suatu
gambar atau objek.
Gambar 1.3 Tools Box
1.4 LIBRARY
Fungsi dari library adalah sebagai wadah untuk menyimpan program-program terpisah
yang sudah jadi, seperti tombol, objek grafis, audio, video, dan lain-lain. Berikut tampilan panel
library.
Gambar 1.4 Library Panel
1.5 ACTION SCRIPT

Salah satu kelebihan FLASH dibanding dengan perangkat lunak animasi lain yaitu
adanya action script. ActionScript adalah bahasa pemrograman Adobe Flash yang digunakan
untuk membuat animasi atau interaksi, ActionScript mengizinkan untuk membuat intruksi
berorientasi action (lakukan perintah) dan instruksi berorientasi logic (analisis masalah sebelum
melakukan perintah). Kita bisa memunculkan panel actionScript dengan cara menekan tombol
F9 pada keyboard. Atau melalui menubar dengan cara klik Window > Actions
.
Gambar 1.4 Panel ActionScript
Sama dengan bahasa pemrograman yang lain, ActionScript berisi banyak elemen yang
berbeda serta strukturnya sendiri. Kita harus merangkainya dengan benar agar ActionScript
dapat menjalankan dokumen sesuai dengan keinginan. Jika tidak merangkai semuanya dengan
benar, maka hasil yang didapat kan akan berbeda atau file flash tidak akan bekerja sama sekali.
ActionScript juga dapat diterapkan untuk action pada frame, tombol, movie clip, dan lain-lain.
Action frame adalah action yang diterapkan pada frame untuk mengontrol navigasi movie,
frame, atau objek lain-lain.
Salah satu fungsi ActionScript adalah memberikan sebuah konektivitas terhadap sebuah
objek, yaitu dengan menuliskan perintah-perintah didalamnya. Tiga hal yang harus diperhatikan
dalam ActionScript yaitu:
1.5.1 Event
Event merupakan peristiwa atau kejadian untuk mendapatkan aksi sebuah objek. Event
pada Adobe Flash ada empat, yaitu:
a) Mouse event
Event yang berkaitan dngan penggunaan mouse.
b) Keyboard Event
Kejadian pada saat menekan tombol keyboard.
c) Frame Event
Event yang diletakkan pada keyframe.
d) Movie Clip Event
Event yang disertakan pada movie clip.
1.5.2 Target
Target adalah objek yang dikenai aksi atau perintah. Sebelum dikenai aksi atau perintah,
sebuah objek harus dikonversi menjadi sebuah simbol dan memiliki nama instan.
Penulisan nama target pada skrip harus menggunakan tanda petik ganda (” ”)
1.5.3 Action
Pemberian action merupakan lagkah terakhir dalam pembuatan interaksi antarobjek.
Action dibagi menjadi dua antara lain:
a) Action Frame: adalah action yang diberikan pada keyframe. Sebuah keyframe
akan ditandai dengan huruf a bila pada keyframe tersebut terdapat sebuah action.
b) Action Objek: adalah action yang diberikan pada sebuah objek, baik berupa
tombol maupun movie clip.
Okey…, cukup sekian dulu BAB I | Pengenalan Adobe Flash, untuk bab berikutnya. Materi
yang saya berikan akan lebih asyik. Siapkan cemilan anda untuk melangkah ke BAB II. 
BAB II
Membuat Animasi Sederhana
Seorang yang membuat animasi itu biasa kita sebut dengan ANIMATOR. Nah…,
seorang animator yang professional harus bisa memahami sifat-sifat gerak dialam. Terutama
gerak mahluk hidup disekitar animator tersebut. Kita walau pun belum professional, kalau kita
belajar dengan sungguh-sungguh pasti bisa menjadi seperti mereka. Karya kita juga bisa tampak
realistis dan hidup.
Untuk menciptakan karya bak Animator Handal, kita harus memperhatikan beberapa point
penting berikut.
 Mempunyai teknik animasi
 Keahlian dibidang acting dan sinematography, dan tentu saja pemahaman mengenai
proses pembuatan film itu sendiri.
 Mengerti mengenai proses penceritaan yang baik, yang dapat menarik perhatian
penonton.
 Selalu menyampaikan sesuatu kepada penonton dan dapat memamcing reaksi penonton
yang menyaksikan karyanya, baik tertawa, sedih maupun gembira.
 Mampu berimajinasi
Nah…, itulah yang kita perlukan dalam pembuatan suatu animasi. Baik itu animasi dalam
sebuah CD interaktif atau animasi dalam sebuah FILM. Agar semakin ciamik dalam
pemahaman anda mengenai animasi, let’s check this tutorial. Saya akan menyampaikan
tutorialnya dengan sedikit sentuhan bahasa saya yang agak gila. Biar anda merasa makin dekat
dengan saya. 
2.1 FRAME dan KEYFRAME

Bersyukurlah kita mengenal software flash ini, karena keajaiban symbol dan
kemampuan dalam hal beranimasi sudah tidak bisa diragukan lagi dalam software flash ini.
Sebelum anda mengenal lebih jauh mengenai berAnimasi, ada baiknya anda memperhatikan roll
film pada gambar 2.1 berikut.
Gambar 2.1 Frame Sebuah Animasi
Ada 7 buah frame atau gambar animasi gerakan merpati yang sedang terbang. Apabila
frame(gambar) tersebut diproyeksikan satu persatu secara bergantian, maka anda akan melihat 1
buah gambar utuh yang menunjukkan gerak burung merpati sedang terbang. Inilah konsep dasar
sebuah animasi.
Okey…, kita akan lihat konsep tersebut pada Adobe Flash. Perhatikan dan pahamilah
tutorial sederhana berikut untuk mengetahui konsep animasi pada flash. Kalau anda tidak
memahami konsep berikut, saya jamin anda bakal lapar. 
1. Saat anda membuat document baru pada flash, pada bagian timeline. Anda bisa melihat
bulatan kecil berwarna putih (gambar 2.2). Bulatan tersebut disebebut dengan Blank
KeyFrame. Artinya…, blank keyframe tersebut ibarat anda mempersiapkan kertas
kosong yang siap untuk digambar. Kalau tidak ada symbol blank keyframe pada
timeline, anda tidak bisa menggambar apapun pada Stage(kertas).
Gambar 2.2 Blank keyframe
2. Sekarang kita mencoba menggambarkan sebuah bidang pada stage di keyframe

satu. Bisa oval tool, ractangel, atau pun obyek yang lainnya. Pada contoh kali ini
saya membuat obyek dengan menggunakan “Poly star tool”. Untuk
mengaktifkan poly star tool ini, anda bisa menahan klik kiri saat menyeleksi
oval tool pada tool box (seperti yang sudah dijelaskan pada bab I). perhatikan
gambar 2.3 berikut.
Gambar 2.3 Blank keyframe berubah jadi Keyframe
Anda bisa melihat symbol Blank keyframe telah berganti menjadi symbol
keyframe, yang berarti kertas/Stage tersebut sudah terisi dengan obyek gambar.
Symbol keyframe diwakili dengan gambar bulatan kecil berwarna hitam. Lihat
gambar 2.3
3. Setelah kertas/Stage terisi oleh obyek, kita memerlukan kertas baru (blank
keyframe) lagi. Caranya klik kanan pada frame ke-2 dan pilih insert Blank
Keyframe. Lihat gambar 2.4
Gambar 2.4 insert blank keyframe
4. Sekarang anda mendapati stage dalam keadaan kosong kan…?!?! Setelah itu
coba anda isi kan gambar Persegi pada frame ke-2 ini.
5. Kini anda memiliki 2 buah frame yag masing-masing berisi gambar Segi 7 yang
telah kita buat dengan polystar, dan yang kedua adalah persegi.
Gambar 2.5 Ractangel pada frame-2
6. Masi berhubungan dengan keyframe, langkah berikutnya adalah kita klik kanan
pada frame ke-3, dan pilih “Insert keyframe”.(gambar 2.6) mungkin anda
bertanya-tanya didalam benak hati yang terdalam. Apa sih perbedaannya dengan
insert blank keyframe…?!? Okey…, penjelasan singkatnya gini. Ada kalanya
anda tidak mau menggambar dari awal lagi kan…?!?! Anda ingin membuat
duplikasi dalam kertas baru yang mirip dengan gambar pada kertas sebelumnya.
Setelah itu, anda tinggal memperbaiki dan mengeditnya dengan sentuhan-
sentuhan tertentu. Jadi…, “Insert keyframe” ini berguna menduplikasi frame
sebelumnya ke frame yang baru.
Gambar 2.6 insert keyframe
7. Nah.., diframe ketiga ini. Anda memiliki duplikasi obyek sama seperti pada
frame ke-2. Setelah kita duplikasi, kita tinggal memodifikasi sedikit pada obyek
tersebut.
Gambar 2.7 modifikasi obyek
8. Untuk menjalankan (PLAY) animasi tersebut, silahkan anda tekan tombol
“Enter” pada keyboard. Agar animasi dapat berulang, silahkan anda pilih menu
Control > Loop PlayBack. Atau anda tekan CTRL+ Enter pada keyboard.
Nah…, sekarang anda sudah bisa membedakan antara Insert Blank keyFrame dan Insert
Keyframe.
2.2 MOTION TWEENING

“Waduh mas agan Izham…, istilah apa lagi nih gan…?!?! Kok ane jadi puyeng…?!?”
Tenang saja, anda tidak perlu galau gitu dunk…, biar makin jelas mengenai Motion
Tweening, ayo kita praktek dengan membuat karya berikut. Biar anda gak puyeng, dengan
praktek, anda bisa mendiskripsikan tentang motion tweening. 
2.2.1 EFEK FADE IN dan FADE OUT

1. Okey.., kita buat document baru pada flash. Selanjutnya kita isi dengan sebuah obyek
persegi pada frame pertama (lihat gambar 2.8).
Gambar 2.8 Obyek persegi
2. Setelah kita membuat obyek persegi, kita convert obyek tersebut ke symbol agar bisa di
transparasi (diberi efek fade in dan fade out).
3. Seleksi dulu obyek persegi tersebut, kemudian klik kanan dan anda pilih convet to
symbol (gambar 2.9)
Gambar 2.9 convert to symbol
4. Setelah anda pilih “Convert to symbol” maka akan muncul jendela baru seperti pada
gambar 2.10. bagian name, silahkan anda isi dengan nama “Persegi” dan typenya anda
pilih “Graphic” kemudian anda klik tombol OK.
Gambar 2.10 tampilan menu convert to symbol
5. Graphic persegi yang kita buat tadi merupakan obyek persegi yang berada pada dunia
lain. Time line pada graphic sama sekali tidak ada bedanya dengan time line yang
berada pada scene utama. Untuk perbedaannya, perhatikan gambar 2.11.
Gambar 2.11 obyek persegi pada graphic
Untuk masuk kedunia lain (Duniannya obyek persegi), anda bisa melakukan klik double
pada obyek persegi dengan menggunakan selection tools. Tandanya anda memasuki
dunia lain, bisa anda lihat pada gambar 2.11 yang telah saya lingkari merah. Untuk
kembali lagi ke scene utama, silahkan anda pilih “Scene 1”. Maka secara otomatis anda
dibawa ke scene utama anda dimana anda akan membuat animasi.
6. Okey…, saatnya kita lanjutkan. Anda masih tetap semangatkan…?!?! Harus dunk..,
anda harus semangat. Saya aja yang nulis capek-capek gini masih semangat. Apalagi
anda yang ingin bisa Adobe Flash, harus tetep semangat dunkz...  pastikan posisi anda
di Scene 1.
Gambar 2.12 posisi di Scene 1
7. Klik kanan keyframe ke-15 (gambar 2.13) dan anda pilih insert keyframe. Setelah
keyframe muncul diframe 15 (ditandai dengan bulatan hitam), kemudian anda klik
kanan diantara frame 2 dan 14, anda pilih “Create motion tween”. (gambar 2.14) anda
bisa lihat perbedaannya kan antara gambar 2.13 dan gambar 2.14.
Gambar 2.13 Membuat keyframe
Gambar 2.14 motion tween terbentuk
8. Langkah berikutnya, kita balik lagi ke frame 15. Kemudian anda seleksi obyek persegi
yang ada pada frame ke-15 tersebut. Setelah anda seleksi, klik property panel yang ada
pada bawah stage. Ubah colornya menjadi alpha, dan isi nilai alphanya menjadi
Alpha=20%. (gambar 2.15) Dari langkah ke-8 ini, anda bisa melihat perbedaan obyek
yang alphanya sudah kita ubah. Obyek persegi yang kita buat tampak samar dan agak
buram.
Gambar 2.15 mengubah property transparasi obyek
9. Sekarang coba jalankan animasi anda. Tekan enter pada keyboard. Obyek persegi yang
kita buat, lama-lama akan buram kan….?!?! Inilah yang disebut dengan efek Fade Out.
Sedangkan efek Fade in, efek tersebut adalah kebalikan dari efek fade out. Yaitu dari
buram/tidak terlihat ke terang. (transparis NOL ke 100%). Untuk membuat efek fade in,
sangatlah mudah. Cukup membalik proses yang telah kita buat diatas. Caranya. Kita
lanjutkan saja langkah diatas.
10. Klik kanan pada frame ke-30, dan anda pilih insert keyframe.
11. Selanjutnya, diatara frame ke-16 dan 29, anda klik kanan. Kemudian pilih create motion
tween.
12. Balik lagi ke frame 30. Anda seleksi frame 30. Kemudian anda ulangi langkah ke-8.
Pilih property panel. Anda ubah alpha-nya menjadi 100%.
13. Coba anda jalankan animasi anda dengan menekan tombol enter.
Gimana….?!?! Cukup mudah kan…?!?! Kesimpulnya…, proses di timeline pada frame

ke-1 sampai frame 15, adalah efek FADE OUT sedangkan pada frame 16 ke 30 disebut efek
FADE IN. Ternyata animasi itu mudah kan…?!?
Sekarang anda sudah mengetahuikan motion tween itu apa…?!? Kalau anda masih
binggung dengan motion tween, keyframe, insert blank keyframe, symbol dsb. Coba anda
praktikkan lagi beberapa langkah yang ada di BAB II ini. Atau mungkin anda bingung gara-gara
cemilan anda habis. Ehehe  ini cemilan saya juga sudah habis. #curhat
Oke deh…., mungkin ada sebagian dari anda masih binggung dengan hal tersebut. Coba kita
latihan lagi membuat animasi yang agak komplek sedikit. Coba kita buat animasi kincir.
2.2.2 MEMBUAT KINCIR
Biar anda semakin mahir dalam menggunakan obyek animasi di flash, saatnya anda
melakukan eksperiment-eksperiment secara terus-menerus. Dan jangan bosan-bosan untuk
membuat karya yang jauh lebih baik.  tetep cemungudzZ yach…!! (Nah…, lhowW…, kok jadi
aLay Gin1 saya.)
Pada bahasan berikut ini, silahkan anda membuat obyek berbentuk kincir. Buatlah
semenarik mungkin. Biar orang yang melihatnya bisa tertarik dengan kincir angin anda. Hehehe
 kalau anda ahli dalam menggambar, gunakan kreatifitas anda dalam menggambar tersebut
untuk dijadikan animasi. Kalau anda tidak ahli menggambar, sama seperti saya. Bikin kincirnya
yach yang sederhana saja. Jangan terlalu kompleks. (aslinya saya tidak bisa kalau bikin kincir
yang bagus. Hehehe ) langkah pertama dalam pembuatan animasi kincir adalah, kita buat dulu
kincirnya. Kalau kincir saya ini cukup sederhana, apabila anda ingin kincir yang lebih manis.
Silahkan anda buat dengan mencontoh obyek-obyek kincir yang ada di sekitar anda.
1. Buatlah document baru pada Adobe flash yang telah anda buka.
2. Gunakan ractangel tools untuk membuat kincir. Pertama-tama, agar kincir tampak
manis, ractangel tools kita buat anda seleksi salah satu sudutnya dengan menggunakan
Subselection Tool. (lihat tools box hal. 3) disini yang saya seleksi adalah sudut bagian
kiri bawah. (lihat gambar 2.16) ingat…!! Hanya bagian itu saja yach yang terseleksi,
kemudian anda seret kekiri hingga membentuk seperti gambar 2.16.
Gambar 2.16 bentuk awal kincir
3. Setelah membentuk obyek seperti gambar 2.15 diatas, berikan garis diagonal seperti
yang terlihat pada gambar 2.17 (warna orange). dengan menggunakan Line tool. Atau
menekan tombol “N” pada keyboard. Tujuan garis diagonal tersebut untuk batas saat
pemberian warna berbeda.
Gambar 2.17 garis diagonal pembatas
4. Setelah kita membuat garis pembatas tersebut, saatnya kita member warna pada kincir
kita. Gunakan selectioan tool (tekan tombol “V” pada keyboard), kemudian seleksi
bagian segitiga besar. Segitiga yang berbentuk pyramid (segitiga sebelah kiri). Ubah
warnanya pada fill color atau property menjadi #FF9900. (gambar 2.18)
Gambar 2.18 perubahan fill color
5. Lakukan langkah yang sama untuk mengubah warna segitiga berwarna hitam sebelah
kanan. Ubah warnanya menjadi #FFCC00. Maka hasil dari bagian kincir yang telah
kita buat seperti pada gambar 2.19 berikut.
Gambar 2.19 bagian kincir sudah diwarnai
6. Masih tetap menggunakan selection tools, agar kincir terlihat tampak lebih manis.
Silahkan anda bengokkan segitiga bagian kanan. Caranya, dekatkan kursor selection
tool pada salah satu sisi segitiga bagian kanan. Hingga kursor anda berubah menjadi
seperti pada gambar 2.20
Gambar 2.20 cekung ke dalam
7. Okey…, setelah bentuknya kurang lebih seperti gambar 2.20, saatnya kita ubah bentuk
tersebut menjadi sebuah symbol graphic. Caranya, seleksi semua obyek kincir tersebut
(CTRL+A). kemudian klik kanan dan pilih convert to Symbol (mirip pada gambar 2.8).
8. Akan muncul jendela baru seperti gambar 2.21, jangan lupa name = kincir beserta
typenya = Graphic setelah itu tekan OK… 
Gambar 2.21 mengubah menjadi symbol
9. Kita telah membuat symbol baru dengan nama kincir. Buatlah 1 buah kincir utuh dari
symbol bernama kincir tersebut. Caranyanya, kita tinggal CTRL+D (Untuk duplikasi).
Atau seret symbol kincir ke stage yang berada pada panel library. Susunlah kincir
hingga membentuk seperti pada gambar 2.22 untuk memutar bagian kincir hingga
tersusun seperti gambar, anda bisa menggunakan Free Transform tool. Atau anda pilih
menu Modify > transform kemudian anda pilih posisi transformasinya.(lihat gambar
2.23)
Gambar 2.22 bentuk kincir
Gambar 2.23 menu transform
10. Setelah kincir terbentuk seperti pada gambar 2.22, seleksi semua gambar seperti
langkah ke-7. Kemudian anda klik kanan pada obyek kincir yang telah dibuat tadi, dan
anda ubah menjadi symbol. Cara sama seperti pada langkah ke-8. Name anda ubah
menjadi “Kincir utuh”. Okey…, sekarang kita sudah memiliki obyek symbol kincir
utuh, anda bisa mempermanis tampilan kincir anda dengan memberikan lingkaran pada
titik pusat kincir. Ingat…, anda harus klik dobel dulu pada obyek symbol “kincir utuh”
tersebut. Dan anda akan dibawa masuk kedunia lain seperti pada penjelasan
sebelumnya. (gambar 2.10) hasilnya setelah kita memberikan lingkaran di titik pusat
kincir seperti terlihat pada gambar 2.24. apabila anda tidak ingin menambahi lingkaran
di titik pusat, it’s OK kok. Tenang aja.
Gambar 2.24 kincir dengan lingkaran pusat
11. Kalau sudah diberikan lingkaran, kita balik lagi ke SCENE 1. Ingat yach…, ke scene 1.
Itu bagi anda yang menambahi lingkaran di titik pusat kincir. Bagi anda yang tidak
menambahi lingkaran, berarti posisi anda masih didalam SCENE 1.
Gambar 2.25 posisi scene 1
12. Saatnya kita memutar kincir yang telah kita buat tadi. Langkahnya hampir sama seperti
pada langkah-langkah melakukan animation sebelumnya. Klik kanan pada frame ke-50,
kemudian anda pilih Insert Keyframe.
13. Diantara frame ke-2 dan ke-49, silahkan anda buat Motion tweennya. Masih ingat dunk
caranya…, pasti ingat deh…, kalau ndak ingat. Yach tinggal klik kanan, kemudian pilih
“Create motion tween”. Uda jadi kan…..?!?! sama seperti pada gambar 2.13.
14. Langkah berikutnya, adalah mengatur posisi putaran kincir. Pastikan posisi framenya
masih diantara frame ke-2 dan 49. Masuk ke panel property dibawah stage, anda ubah
rotatenya dari NONE menjadi CW(searah jarum jam) atau CCW(kebalikan cw). Jangan
lupa timesnya anda isi nilai 1. (lihat gambar 2.26)
Gambar 2.26 mengubah property putaran
15. Setelah kita ubah propertinya, silahkan anda Play animasi kincir yang telah anda buat.
Caranya CTRL+Enter. Selamat, kincir anda telah berputar. 
Pasti anda mendapati keanehan pada kincir yang anda buat. Kincir anda seolah-olah
berhenti saat akan mengulang putarannya. Ini dikarenakan, gambar antara frame ke-1 dan frame
ke-50 sama persis. Sehingga, seolah-olah kincir kita tersebut berhenti berputar untuk sesaat.
Untuk melakukan solving atas masalah ini, anda bisa menggunakan trik yang saya berikan
berikut.
Untuk menghindari perputaran kincir yang terhenti sejenak, anda bisa mencegah agar
looping yang dilakukan tindak mencapai ke frame-1 atau 50. Karena diframe ini terdapat
kesamaan posisi gambar obyek kincir. Untuk menghindari hal tersebut, silahkan anda insert
keyframe pada frame 49, kemudian Remove frame ke-50. Sekarang anda hanya memiliki 49
frame dengan gambar masing-masing frame berbeda.
Oh iya…, anda bisa menggunakan imajinasi anda untuk membuat seakan-akan kincir
anda ditancapkan pada sebuah taman yang asri dan indah. (gambar 2.27)
Gambar 2.27 tambahan backgraound
Gimana….?!?! Keren kan. Dan yang terpenting, membuat animasi itu mudahkah….?!?
Tak sesulit yang anda bayangkan. Hanya perlu kesabaran, dan juga niat yang tulus dalam
pembuatan sebuah animas. Dan yang gak kalah pentingnya adalah. Harus ada computer, kalau
tidak anda computer. Kita tidak mungkin bisa bikin animasi. Heheheh 
2.2.3 OBYEK MENGIKUTI LINTASAN (path)

Memang kecanggihan software flash sudah tidak bisa diragukan lagi. Kita bisa
membuat sebuah obyek bergerak sesuai dengan lintasannya. Fasilitas yang disediakan tersebut
biasa disebut dengan “Motion Guide”. Okey…, gak perlu banyak basa-basi lagi. Biar anda
semakin memahaminya, silahkan simak tutorialnya. Disini kita masih menggunakan obyek
kincir utuh yang telah kita buat tadi. (Menghemat waktu  hehe)
1. Buat layer baru dengan nama “lintasan”, kemudian anda isi dengan gambar garis
sederhana menggunakan brush tool.
2. Buat layer baru lagi beri nama “obyek”, kemudian anda isi dengan obyek “kincir utuh”,
atau obyek lain. Lingkaran, atau persegi misalnya. Tapi disini saya gunakan kincir. Biar
manis nanti hasilnya. 
Gambar 2.28 beberapa obyek
3. Langkah berkutnya, silahkan insert keyframe sampai ke frame-15. (layer obyek dan
layer Lintasan harap di insert keyframe sampai frame 15)
4. Jadikan layer Lintasan menjadi layer guide. Caranya anda klik kanan pada layer
Lintasan, kemudian anda pilih guide. Sehingga layer Lintasan berubah menjadi gambar
Martil.
Gambar 2.29 berubah icon dilayer lintasan
5. Selanjutnya, klik layer obyek, kemudian sambil menahan klik. Geser layer tersebut
kebawah layer Lintasan. Sehingga terlihat seperti pada gambar 2.30.
Gambar 2.30 perubahan icon lagi
6. Setelah layer terlihat seperti gambar 2.30 maka obyek kincir siap kita jalankan sesuai
dengan lintasannya. Jangan lupa, anda kunci layer lintasan agar tidak bisa diedit.
7. Aktifkan menu View > Snapping > Snap to Objects (CTRL+Shift+/). Menu ini
digunakan untuk mempermudah penempelan object kincir pada garis lintasan.
8. Focus kita sekarang pada obyek kincir. Klik keyframe-1 atau frame-1, kemudian dengan
menggunakan arrow tool. Klik obyek kincir, dan geser titik pusatnya (Registration
point) sehingga menempel ke garis lintasan. Anda akan merasakan seperti ada magnet
yang menempel disana. Ini adalah efek dari langkah ke-7 tadi.
Gambar 2.31 titik pusat menempel
9. Pastikan tetap dilayer obyek, kemudian anda buat motion tween di frame layer Obyek
tersebut. Masih ingatkan caranya bikin motion tween. Kalau tidak ingat, silahkan buka
lagi halaman 12.
10. Ulangi langkah ke-8 dengan menuju ke keyframe ke-2 (frame 15). Dengan posisi
diujung garis lintasan sebelah kanan. Setelah selesai, coba anda jalankan CTRL+Enter.
11. Selamat….!!! Anda telah berhasil membuat obyek kincir terbang mengikuti lintasan. 
Apabila anda masih binggung, coba anda bereksperimen lagi. Saya yakin, anda bisa. Kalau pun
masih gagal, berarti anda dalam keadaan tidak focus. Coba anda focus, dan memahami yang
saya sampaikan diatas. Pasti anda berhasil. I believe it…. 
*)Catatan: oh iya…, path yang anda buat tadi saat di playing (CTRL+Enter). Akan hilang alias
tidak terlihat. Karena obyek tersebut merupakan garis guide untuk gerakan obyek kincir.
2.3 MOTION SHAPE

“Waduh…, mas izham…?!?! Apa lagi nih motion shape…?!?!”
Don’t panic dulu…., ini memang istilah baru lagi didalam flash. Yang saya sarankan,
anda jangan panic dulu.  Karena pengertian motion shape hampir sama seperti motion tween.
Hanya ada beberapa saja yang berbeda. Mari kita pelajari bareng-bareng.
Perbedaannya antara motion shape dan motion tween adalah, motion tween harus
mensyaratkan obyek berupa symbol. Sedangkan di motion shape berupa shape. Jadi apabila
obyek tersebut berupa group, symbol, atau gambar bitmap. Harus anda ubah menjadi shape.
Biar anda tidak binggung, mari kita lihat fungsi motion shape ini dengan beberapa eksperimen
berikut ini.
2.3.1 MENGUBAH BENTUK OBYEK

Teknik ini kita sebut dengan teknik morphing atau perubahan bentuk. Namun teknik
yang akan kita pelajari di Flash ini tidak se-Expert di film-film Hollywood. Yaps…., kalau
difilm itu. Kita bisa lihat kecanggihan saat Dr. Saipul menjadi HULK. (bener ndak yach… )
perubahan bentuk yang kita pelajari disini sebenarnya memiliki konsep sama dengan perubahan
bentuk HULK tersebut. Hanya saja yang kita pelajari disini lebih sederhana.
Okey…, untuk pertama-tama. Siapkan dulu semua keperluan perang kita. Seperti kopi,
cemilan dan juga yang paling penting adalah listrik PLN. Heheh… 
1. Buatlah document baru pada flash
2. Jangan lupa menyimpannya terlebih dahulu, biar sewaktu-waktu misalnya ada crash.
Gak bingung dan panic. Save dengan nama “perubahan”.
3. Gambar sebuah obyek lingkaran pada frame pertama.
4. Kemudian anda klik kanan di frame ke-15, pilih insert blank keyframe.
Gambar 2.32 membuat keyframe baru
5. Setelah itu silahkan anda gambar obyek persegi pada frame ke 15 tersebut.
6. Klik antara frame ke-2 dan 15, kemudan anda lihat dibagian property. (gambar 2.33)
anda ubah tween-nya menjadi shape. Atau opsi lain, anda bisa melakukan klik kanan
diantara frame 2 dan 15. Kemudian anda pilih create shape tween.
Gambar 2.33 mengubah tween menjadi shape
7. Setelah itu, coba anda Play dengan tekan Enter atau test Movie (CTRL+Enter). Anda
akan melihat perubahan bentuk obyek lingkaran ke persegi
Gambar 2.34 perubahan bentuk dengan motion shape
Bagaimana…?!?! Sekarang sudah tahukan perbedaan antara motion tween dengan

motion shape, kalau masih bingung. Silahkan baca lagi mulai dari atas. Dan silahkan coba
bereksperimen dengan menggunakan imajinasi anda. Misalnya membuat obyek yang lain.
Apabila obyek yang anda gambar bukan berupa shape, maka di frame akan berubah menjadi
titik-titik yang menunjukkan ketidak beresan.
Gambar 2.35 ada yang salah dengan obyek di Stage
2.4 MASKING
Masking adalah sebuah fasilitas yang disediakan oleh software flash. Sebenarnya tidak
hanya flash saja yang ada fasilitas masking. Hampir semua software graphic editor memiliki
fasilitas ini. Pengertian masking sendiri berasal dari kata MASK atau dalam bahasa Indonesia
berarti Topeng. Biar lebih jelasnya…., seperti biasa. Mari kita belajar melalui tutorial berikut.
1. Buatlah document baru pada flash.

2. Jangan lupa simpan dan beri nama file dengan nama Masking
3. Disini saya menggunakan obyek Movie Clip kincir yang pernah kita buat pada tutorial
sebelumnya dihalaman 12.
4. Letakkan movie clip kincir di stage.
5. Pada layer yang berisi movie clip kincir, silahkan anda rename. Ubah namanya dari
layer 1 menjadi layer “Kincir”
Gambar 2.36 ubah nama layer
6. Kemudian buat layer baru, klik symbol seperti pada gambar 2.37 untuk membuat layer
baru, kemudian beri nama mask.
Gambar 2.37 membuat layer baru
7. Buatlah sebuah obyek lingkaran pada layer mask. Pastikan posisinya tepat diatas kincir.
Karena kita akan menopengi kincir. Biar menjadi Velg/Ban mobil. 
8. Setelah obyek lingkaran terbentuk. Klik kanan pada layer mask untuk mulai menopengi
obyek kincir tadi. Dan hasilnya seperti gambar berikut.
Gambar 2.38 simbol layer Gambar 2.39 obyek di stage

berubah setelah dimasking
Okey…, cukup sampai disini dulu BAB II. Bagaimana…?!?! Belajar Flash itu asyik kan….?!?
BAB III
ActionScript
Kini, kita dibab III ini. Saatnya mempelajari mengenai pemrogaman diflash.
Keistimewahan dari software flash adalah adanya sebuah pemrogaman yang disebut dengan
actionscript. Pada bahasan awal, anda sudah mengenal adanya actioanScript 3.0 pada flash
(bahasan hal 1) disini. Yang banyak kita bahas masih dalam tahapan actionscript 2.0
ActionScript pada flash dibutuhkan untuk memberi efek gerak dalam animasi.
ActionScript di flash pada awalnya memang sulit dimengerti jika seseorang tidak mempunyai
dasar atau mengenal flash. Tetapi jika sudah mengenalnya, kita tidak bisa lepas dari
ActionScript karena sangat menyenangkan dan dapat membuat pekerjaan jauh lebih cepat dan
mudah. Nah…, untuk itulah tujuan buku sederhana ini saya buat.
3.1 MENGENAL ACTIONSCRIPT

Sebelum kita mengenal lebih jauh mengenai actionscript, ada baiknya kita mengenal
terlebih dahulu mengenai apa itu ActionScript…?!
Sebenarnya sih jawabannya sudah ada saat anda memasuki bab III ini. Biar anda tidak
bingung, disini saya mendefinisikan lagi mengenai actionscript. ActionScript merupakan bahasa
pemrogaman flash yang dibangun sebagai cara untuk mengembangkan pemrograman interaktif
secara efisien menggunakan platform aplikasi adobe Flash ActionScript mulai dari animasi yang
sederhana sampai dengan yang kompleks sekalipun, penggunaan data, dan aplikasi interface
yang interaktif. Dan saat ini sudah muncul actionscript 3.0, generasi actionscript ini hampir
sama seperti pemrograman JAVA.
Walaupun sudah muncul actionscript 3.0, actionscript yang lama tetap tidak bisa
ditingalkan dan masih jadi andalan dalam dunia pemrogaman Flash. Yakni actionscript 2.0, dan
dibuku ini. Yang banyak saya bahas adalah actioanscript 2.0. Anda tentu masih ingat halaman
startup dari software Adobe Flash (gambar 1.1), disana pada pilihan create new document. Anda
disuguhi beberapa opsi. Maka, saat anda membuat document baru flash. Anda harus memilih
document baru dengan actionscript 2.0. kenapa harus actionscript 2.0?
“Karena yang akan kita pelajari adalah actionscript 2.0”________

“Bagaimana dengan ActionScript 3.0…?”___
Jika anda bertanya bagaimana dengan actionscript 3.0, kita akan membahasnya nanti. Soalnya
actionscript versi 3.0 lumayan agak kompleks dan tidak mudah dipahami bagi sebagian
kalangan yang masih dalam tahap belajar. Maka dari itu, saya membahasnya dibuku ini yang
versi 2.0
Gambar 3.1 membuat document baru ActionScript 2.0
3.2 MEMUTAR KINCIR DENGAN ACTIONSCRIPT
Inilah keistimewahan kita membuat animasi dengan menggunakan software flash. Kita
bisa membuat animasi dengan otak-atik obyek, seperti yang dibawah di bab II. Kita
mengAnimasikan obyek dengan memanfaatkan teknik Motion. Dan pada tutorial kali ini kita
menganimasikan Obyek kincir dengan menggunakan pemrogaman. Pemrogaman pada flash
disebut dengan ActionScript. Sudah dijelaskan dihalaman sebelumnya, actionscript ini sangat
membantu kita menghemat waktu dalam pembuatan animasi. Itupun kalau kita tahu….,
heheheh.  biar tahu, ikuti tutorial berikut.
1. Buatlah document baru, Ingat !! Yang dipilih adalah Flash File ActionScript 2.0 (lihat
gambar 3.1)
2. Untuk obyeknya, anda bisa copy-Paste Obyek MovieClip kincir yang telah kita buat
pada praktek dibab II. Kita copy dan kita paste pada Library panel. Okey…!! Saya
anggap sampai sini anda sudah mengerti prosesnya. Atau…, sambil mengasah
kemampuan dan kemahiran lagi. Anda bisa membuat kincir baru dengan style yang
berbeda dari bahasan sebelumnya.
3. Siapkan obyek yang akan kita putar distage. (gambar 3.2)
Gambar 3.2 obyek kincir yang akan digerakkan
4. Rename layer 1 tersebut yang berisi obyek kincir. Ganti namanya dengan kincir.
5. Ubah juga nama “Instance name” pada property. Caranya, seleksi dulu obyek kincirnya,
kemudian klik panel property. Beri nama kincir pada “instance name”-nya. (gambar
3.3)
Gambar 3.3 ubah Instance name
Perlu anda ketahui: instance name ini diperlukan dalam pemanggilan oleh
ActioanScript, sehingga saat memanggil movieclip yang sama. Tidak akan error, karena
sudah dibedakan dengan Instance name tersebut.
6. Buat layer baru, dan beri nama Action. Pada layer baru inilah kita memberikan coding
ActionScript pada keyframe.
7. Klik kanan pada keyFrame di layer Action, kemudian pilih Actions untuk menampilkan
editor Action (gambar 3.5)
Gambar 3.4 memberi action pada keyframe
Gambar 3.5 kotak editor Action
8. Isikan script seperti pada gambar 3.5, setelah itu tutup kotak editor (gambar 3.6). Maka
anda akan melihat symbol actionscript pada keyframe (gambar 3.7)
Gambar 3.6 menutup kotak editor Gambar 3.7 muncul symbol
Pada gambar 3.7 yang saya lingkari merah itu, menunjukkan kalau pada layer action di
keyframe pertama terdapat ActionScript. Symbol tersebut mewakili tanda adanya
actionScript.
9. Selanjutnya, sambil menekan tombol SHIFT. Kita klik di frame ke-5 seleksi diframe 5
tersebut, baik layer action atau pun layer kincir. Kemudian anda klik kanan, dan pilih
“insert Keyframe” (gambar 3.8). Kemudian klik kanan pada keyframe 5 dilayer action
dan pilih Actions.
Gambar 3.8 membuat keyframe baru pada kedua buah layer
10. Isikan script berikut pada editor Actions. (gambar 3.9)
Gambar 3.9 script untuk menggerakkan kincir
Perlu anda ingat !!! penulisan actionscript pada Flash adalah sensitiveCase. Artinya,
besar kecil (capital/tidak) menjadi perhitungan tersendiri. Biasanya kalau script yang
kita ketikkan benar, maka tulisan script kita akan berwarna seperti gambar 3.9
11. Tutup kotak editor, dan coba anda test movie. Masih ingat kan caranya. 
(CTRL+Enter) Apabila anda berhasil, maka kincir akan berputar dengan manis.
Penjelasan ActionScript:
ActionScript pada gambar 3.5 menunjukkan bahwa proses awal untuk mengisi variable
yang nanti akan kita gunakan pada actionscript berikutnya. Yakni actionscript yang berada pada
gambar 3.9.
setProperty(kincir, _rotation, i*45);

pada script property diatas, kita mendeklarasikan property awal dari movieClip yang memiliki
nama Kincir, kemudian kita atur posisi derajat awalnya yakni senilai “i*45”. nilai i pada
awalnya berupa (i=1)*45.
Berikutnya,
i++;
menunjukkan bahwa nilai i ditambah sebanyak i+1 tiap putarannya. Hingga mencapai kondisi
seperti yang dideklarasikan dengan Action “IF(i>45)”. Artinya kincir diputar sampai 45 kali,
kalau sudah 25 kali. Maka variable harus kembali kenilai awal. Yakni i=1.
3.3 MENU INTERAKSI
Menu interaksi ini adalah sebuah bentuk animasi yang dapat berinteraksi dengan kita.
Kita bisa melakukan sebuah bentuk interaksi dengan menekan tombol-tombol yang telah kita
buat pada flash. Bentuk-bentuk menu interaksi pun sangat beragam, kita bisa membuatnya
sesuai dengan kreatifitas kita.
Misalnya saat kita akan membuat CD interaktif menggunakan FLASH, kita harus
memahami terlebih dahulu mengenai bentuk interaksi ini. Pada bahasan kali ini, menu interaksi
inilah yang menjadi ujung tombak saat kita membuat sebuah CD interaktif. Okey deh…, tanpa
banyak basa-basi lagi. Simak tutorial membuat menu interaksi sederhana berikut ini.
1. Pertama-tama, kita siapkan terlebih dahulu layout dari media interaktif kita. Seperti
yang anda lihat pada gambar 3.10, disini saya membuatnya layout sederhana dari media
interaktif yang nanti akan kita buat.
Gambar 3.10 layouting blueprint/konsep
Gambar 3.11 Layout setelah dibumbui desain
Pada gambar 3.10, itu adalah blueprint dari layout yang akan kita buat. Anda bisa
menggunakan insting design dan kreatifitas anda. Misalnya kita menambahi beberapa
movieClip yang pernah kita buat. Disini yang pernah kita buat adalah Kincir, maka
tinggal ditambah saja dengan kincir yang telah kita buat. Sehingga tampilannya seperti
pada gambar 3.11. Pada gambar 3.11, kita sudah bisa melihat bahwa media interaktif
kita makin tampak manis dan juga enak di pandang sebagai media interaksi. 
Usahakan bikin sebagus mungkin yach…., kalau masih binggung, mending bikin
sederhana dulu deh. Dari kotak-kotak menggunakan ractangel tools. Saya anggap anda
sudah bisa bikin kayak di gambar 3.10
2. Oh iya…, perlu saya tekankan disini. Meskipun masih tahap belajar, anda harus
memperhatikan kerapihan dalam permainan layer. Kita harus bisa menyendiri-
menyedirikan antara layer yang berisi tombol, isi, background dsb. Ingat juga…!!!
semua tutorial yang kita buat pada bab ini harus anda jadikan sebuah symbol. (seperti
pada bab II)
Gambar 3.12 layer tersusun rapih

untuk meletakkan obyek
3. Isikan actionscript “stop()” (tanpa petik) pada layer action di frame 1. Saya yakin anda
masih ingat caranya. Actionscript ini berfungsi menghentikan animasi saat
dirunning/Play. Animasi akan berjalan setelah dilakukan perintah interaksi saat
menekan tombol.
4. Okey.., setelah kita memberikan sebuah action, kita klik diframe 5 layer action.
Kemudian anda tekan tombol SHIFT, dan anda klik diframe 5 layer BG. Kemudian klik
kanan, dan pilih insert Frame. (langkah ini sama seperti pada langkah tutorial
sebelumnya.)
Gambar 3.14 membuat frame ke -5 pada semua layer
5. Selanjutnya, kita mengubah obyek tombol kontak, menjadi sebuah symbol tombol.
Caranya sama seperti pada tutorial sebelumnya, seleksi obyek yang akan dijadikan
symbol. Kemudian anda klik kanan, “Convert to symbol” dan anda pilih button.
(gambar 3.16) kemudian tekan OK.
Gambar 3.15 mengubah obyek menjadi symbol
Gambar 3.16 mengubah menjadi symbol button
6. Lakukan langkah yang sama pada beberapa obyek yang lain.
Gambar 3.17 convert obyek lainnya
7. Sekarang, button interaksi sudah siap untuk kita gunakan. Saatnya mempersiapkan
beberapa keyframe yang berisi materi/content dari menu interaksi kita. Caranya, anda
klik kanan pada frame 2,3, dan 4 di layer “isi”. Kita buat KeyFrame baru. Pasti masih
ingatkan anda caranya…?!? (klik kanan, Insert blank keyframe).
Gambar 3.18 membuat keyframe baru
8. Setelah anda membuat keyframe baru, silahkan anda isikan beberapa Content. Baik itu
Visi Misi, Layanan, atau pun kontak. Ingat…, waktu mengisi content harus beda
keyframe. Misalnya, saat anda mengisi content visi misi. Anda harus meletakkannya
diframe ke-2. Tujuannya saat menggunakan menu interaksi, content yang ditampilkan
tidak kacau.
Gambar 3.19 buat content visi misi dengan text tool
Perlu anda ingat, posisi dari ISI visi-misi ada pada frame ke-2. (gambar 3.20)
Gambar 3.20 posisi frame ke -2
9. Langkah berikutnya hampir sama. Yakni mengisi content Layanan dan juga kontak.
Lakukan langkah yang sama seperti pada langkah diatas. Hanya yang membedakan
adalah posisi dari framenya. Untuk content Visi-misi, berada pada frame ke-2.
Sedangkan content Layanan berada pada frame ke-3, dan kontak diframe ke-4.
10. Setelah semua content yang ada pada stage sudah siap semua, saatnya kita membuat
actionScript menu interaksi. Untuk awalnya, kita beri actionscript stop terlebih dahulu
pada layer action diframe pertama. Caranya, anda klik kanan pada frame pertama
dilayer action. Kemudian anda pilih action. Setelah muncul kotak editor actionScript.
Disana anda ketikkan actionscript seperti gambar 3.21.
Gambar 3.21 actionscript stop
Actionscript tersebut bertujuan untuk menghentikan gerak dari proyeksi frame di

timeline.
11. Setelah memberi actionscript pada timeline, saatnya anda beri actionscript pada tombol
yang telah anda buat tadi. Tujuannya adalah member interaksi saat tombol ditekan. Klik
kanan pada tombol Visi misi, kemudian anda pilih action. Ketikkan actionscript seperti
pada gambar 3.23
Gambar 3.22 memberi action pada tombol
Gambar 3.23 actionscript pada tombol

visi misi
penjelasan singkatnya mengenai actionscript yang ada pada tombol adalah. Saat tombol
visi misi ditekan, maka action yang dilakukan adalah menuju ke keyframe 2. Keyframe
yang berisi content visi misi.
12. Lakukan langkah yang sama untuk member actionscript ditombol Layanan, dan kontak.
Yang membedakan adalah posisi framenya. Anda tentu masih ingatkan posisi content
yang berisi layanan, dan kontak. Yaps….!!! Diawal tadi kita buat keyframe ke-3 berisi
Layanan dan keyframe ke-4 berisi Kontak. Kita tinggal mengganti angka keyframenya
saja.
Gambar 3.24 ubah nilai framenya
Kita tinggal mengubah nilai keyframe-nya sesuai dengan keyframe yang kita tuju. Ganti
saja angka 2 dengan 3. Maka ditombol Layanan sudah berisi action. Kalau anda ingin
member actionscript pada tombol Kontak, anda tinggal mengubah nilainya saja. Sama
seperti saat anda mengisi action di tombol Layanan.
13. Okey…!! Menu interaksi sudah kita buat, saatnya kita test Movie. (CTRL+Enter)
Tadaaaa……!!!  anda sudah bisa buat menu interaksi. Gimana….?!?! Keren
kan…?!?! Kalau anda masih belum berhasil, silahkan anda coba lagi dan lagi. Saya
yakin anda pasti bisa.
DAFTAR PUSTAKA
 Baba. “Animasi kartun dengan Macromedia Flash MX”, Elexmedia computindo. 2007
 Agus, Nugraha H.,M.Si. “Pengenalan Adobe Flash dan ActionScript 3.0”,
http://ukdw.ac.id. 2011
 Adelina. “Media Interaksi dengan Adobe Flash”, Universitas Sumatera utara. 2011
Biografi Penulis
Dedy Izham, Mengenal computer saat duduk di bangku SMK.
Sebelumnya, belum mengetahui sama-sekali mengenai computer. Lahir
dari keluarga Tidak miskin kurang kaya (keluarga sederhana), sehingga
beranggapan computer adalah barang mewah untuk dibeli.
Bermodalkan DOA, niat dan kemauan yang keras, akhirnya mampu

memiliki dan memahami sedikit tentang computer. Memiliki prestasi
yang cukup baik di bidang computer. Prestasi ini dibuktikan dengan hasil
yang memuaskan dalam suatu kompetisi baik LOKAL maupun
NASIONAL tingkat SMA/SMK/umum. Lulus SMK Multimedia pada
tahun 2010, setelah lulus sempat bekerja pada salah satu Home Studio Web Desain di Surabaya.
Bekerja di home studio bukanlah pilihannya, ia memilih bekerja untuk memperoleh tambahan
biaya KULIAH. Dan saat ini, ia melanjutkan studi-nya di salah satu UNIVERSITAS SWASTA
di Malang. Ia memilih ke Perguruan Tinggi Swasta bukan berarti tidak di terima di Perguruan
Tinggi Negeri, akan tetapi telat daftar di PTN (perguruan tinggi negri).
Saat ini, ia sudah keluar dari Home Studio Web Desain di Surabaya. Bermodalkan pengalaman
yang lebih dari cukup didunia computer, saat ini mengelola salah satu website
(www.jasamultimedia.com) sebagai dana tambahan studi di Perguruan Tinggi. Yang paling ironi,
walau jarang masuk kuliah, prestasi akademik dibidang komputernya bisa dipertahankan. 
PERHATIAN!!! Anda masih binggung dengan semua materi ditutorial ini.

HARAP TENANG…!!! Anda tidak perlu memanggil mentor profesional dan harus
membayar mahal. Yang anda perlukan adalah:
GURU PROFESIONAL yang ada didalam komputer ANDA SAAT INI. Dapatkan
Video Tutorial dari semua bahasan materi disini yang dikemas secara
INTERAKTIF. Dengan PAKET PREMIUM PEMBELAJARAN yang saya tawarkan,
anda akan merasa memiliki GURU PROFESIONAL yang ada didalam komputer
anda pribadi.
DAPATKAN SEKARANG JUGA !!!

http://belajar.jasamultimedia.com
Ilmu termahal diperoleh dari niat & pengorbanan


Cara Cepat Belajar Adobe Flash

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Cara Cepat Belajar Adobe Flash

Diunggah oleh

Hak Cipta:

Format Tersedia

2012

By. Dedy Izham

TEKNIK CEPAT BELAJAR

SELAMAT !!! Anda berhak menyebarkan Ebook sederhana ini sebagai

Dapatkan Video Tutorial Pendukung Buku Ini di:

Keberhasilan tidak datang dengan sendirinya.

SEKILAS TENTANG FLASH

1.1 HALAMAN AWAL

Gambar 1.1 Tampilan start page Adobe Flash CS3

1.2 LINGKUNGAN KERJA ADOBE FLASH CS3

Gambar 1.2 Komponen Utama

Gambar 1.4 Library Panel

1.5 ACTION SCRIPT

Gambar 1.4 Panel ActionScript

2.1 FRAME dan KEYFRAME

Gambar 2.1 Frame Sebuah Animasi

Gambar 2.2 Blank keyframe

2. Sekarang kita mencoba menggambarkan sebuah bidang pada stage di keyframe

Gambar 2.3 Blank keyframe berubah jadi Keyframe

Gambar 2.4 insert blank keyframe

Gambar 2.5 Ractangel pada frame-2

Gambar 2.6 insert keyframe

Gambar 2.7 modifikasi obyek

2.2 MOTION TWEENING

2.2.1 EFEK FADE IN dan FADE OUT

Gambar 2.8 Obyek persegi

Gambar 2.9 convert to symbol

Gambar 2.10 tampilan menu convert to symbol

Gambar 2.11 obyek persegi pada graphic

Gambar 2.12 posisi di Scene 1

Gambar 2.14 motion tween terbentuk

Gambar 2.15 mengubah property transparasi obyek

Gimana….?!?! Cukup mudah kan…?!?! Kesimpulnya…, proses di timeline pada frame

Gambar 2.16 bentuk awal kincir

Gambar 2.17 garis diagonal pembatas

Gambar 2.19 bagian kincir sudah diwarnai

Gambar 2.20 cekung ke dalam

Gambar 2.22 bentuk kincir

Gambar 2.23 menu transform

Gambar 2.24 kincir dengan lingkaran pusat

Gambar 2.25 posisi scene 1

Gambar 2.26 mengubah property putaran

Gambar 2.27 tambahan backgraound

2.2.3 OBYEK MENGIKUTI LINTASAN (path)

Gambar 2.29 berubah icon dilayer lintasan

Gambar 2.30 perubahan icon lagi

2.3 MOTION SHAPE

2.3.1 MENGUBAH BENTUK OBYEK

Gambar 2.32 membuat keyframe baru

Gambar 2.33 mengubah tween menjadi shape

Gambar 2.34 perubahan bentuk dengan motion shape

Bagaimana…?!?! Sekarang sudah tahukan perbedaan antara motion tween dengan

Gambar 2.35 ada yang salah dengan obyek di Stage

1. Buatlah document baru pada flash.

Gambar 2.36 ubah nama layer

Gambar 2.37 membuat layer baru

Gambar 2.38 simbol layer Gambar 2.39 obyek di stage

3.1 MENGENAL ACTIONSCRIPT

“Karena yang akan kita pelajari adalah actionscript 2.0”________

Gambar 3.1 membuat document baru ActionScript 2.0

Gambar 3.2 obyek kincir yang akan digerakkan

Gambar 3.3 ubah Instance name

Gambar 3.4 memberi action pada keyframe