com
PENDAHULUAN
Dalam pembuatan E learning terdapat berbagai macam media yang dapat disampaikan.
Media tersebut antara lain Media Teks, Media Gambar, Media Animasi, Media Suara, Media
Photo dan lain-lain. Dari berbagai media yang ada, media yang sangat menonjol yang sering
digunakan adalah media Animasi. Media animasi sangat penting karena selain berwujud
gambar juga memiliki unsur gerak. Jadi untuk mengambarkan suatu materi akan lebih mudah.
Format E learning yang sering digunakan adalah format Web yang didalamnya terdapat
file animasi. Dalam E learning file web sebagai tempat dan sarana komunikasinya sedang file
animasi sebagai materinya. Dari berbagai macam format animasi yang dapat di masukkan ke
dalam web, animasi yang berformat swf-lah yang paling tepat. Selain memiliki file yang kecil swf
juga memiliki banyak variasi tampilan. Program pembuat animasi dengan format swf salah
satunya Adobe Flash. Dengan Adobe Flash kita dapat dengan leluasa membuat animasi swf,
bahkan kita dapat menambahkan Action Script agar animasi lebih interaktif. Bahkan
menggunakan Adobe Flash kita tidak sekedar membuat animasi tetapi mampu membuat
simulasi. Simulasi adalah animasi yang interaktif dan dapat mendekati keadaan nyata. Dengan
simulasi kita dapat membuat virtual lab.
Dalam pembuatan media untuk E learning ada beberapa hal yang wajib kita perhatikan.
Ada beberapa syarat penting yang harus di penuhi agar e learning lebih rasional. File media swf
jangan terlalu besar karena untuk komunikasi di internet, bandwidh sangat dibatasi. Dalam
ukuran internet file sebesar 500 Kb sudah sangat besar. Jadi dalam pembuatan materi
Elearning jangan sampai sebesar ukuran tersebut. Untuk mengatasinya kita dapat memperkecil
topik materi yang disajikan.
Banyak sekali fasilitas yang terdapat dalam Adobe Flash. Dalam modul ini akan di
terangkan materi-materi pembuatan animasi mengunakan Adobe Flash tingkat dasar. Meski
hanya tingkat dasar, pembaca yang telah mempelajari modul ini diharapkan mampu membuat
media animasi untuk keperluan pembuatan E learning.
Toni Setyawan, ST
Produksi Animasi Interaktif dengan Adobe Flash oleh Toni Setyawan, ST Halaman - 1/48
_____________________________________________________________blog.flashbegin.com
TUJUAN
Kompetensi Dasar
• Peserta mampu membuat animasi tingkat dasar mengunakan Adobe Flash.
• Peserta dapat melakukan Import media dan export menjadi media lain untuk keperluan
pembuatan Multimedia pembelajaran Interaktif.
• Peserta dapat mengimport dan mengunakan media suara.
• Peserta dapat memahami, mengunakan dan membuat button.
• Peserta dapat memahami, mengunakan dan membuat scene.
Petunjuk Belajar
• Bacalah dengan seksama dan pahamilah uraian pada masing-masing modul agar anda
dapat memahami masing-masing perintah dan petunjuk dalam latihan.
• Cobalah mengerjakan latihan dalam masing-masing modul langsung mengunakan
computer dan ikuti petunjuk yang ada dalam modul.
• Pelajarilah modul secara berurutan karena setiap modul saling berkaitan.
Produksi Animasi Interaktif dengan Adobe Flash oleh Toni Setyawan, ST Halaman - 2/48
_____________________________________________________________blog.flashbegin.com
Modul 1
PENGENALAN ADOBE FLASH
URAIAN
Pada saat kita menjalankan Adobe Flash atau Macromedia Flash akan muncul tampilan
seperti gambar berikut.
Pada tampilan diatas dapat dikelompokkan menjadi beberapa bagian yaitu menu
pulldown, command bar, tool bar, time line, state, properties dan docker. Dari kelompok
kelompok tersebut ada perintah perintah yang pokok dan paling sering digunakan. Selain itu ada
juga kelompok yang sama artinya dengan program lainnya. :
Produksi Animasi Interaktif dengan Adobe Flash oleh Toni Setyawan, ST Halaman - 3/48
_____________________________________________________________blog.flashbegin.com
Menu Pull down adalah kumpulan perintah-perintah yang terdapat pada Adobe Flash. Kelompok
File terdapat perintah :
Publish Seting : mengatur bentuk publish yang diinginkan
Publish : mempubilsh animasi ke bentuk akhir
Export Movie : mengubah file animasi menjadi file video
Kelompok Edit terdapat untuk mengedit mis copy, paste
Copy Frame : Copy seluruh object yang ada dalam frame
Paste Frame : pengeluarkan hasil copy frame
Kelompok Insert terdapat perintah :
Convert to symbol : mengkonversi object menjadi symbol.
New symbol : membuat object baru.
Kelompok Modify terdapat perintah group yang berfungsi mengelompokkan object.
Kelompok Windows terdapat perintah untuk mengeluarkan macam-macam docker.
Command Bar
Command Bar adalah icon perintah yang umum.
Produksi Animasi Interaktif dengan Adobe Flash oleh Toni Setyawan, ST Halaman - 4/48
_____________________________________________________________blog.flashbegin.com
Tools Bar
Tools Bar adalah icon perintah untuk mengambar
Time Line
Time line adalah tempat frame yang akan bergantian tampil berdasarkan time rate yang telah
kita atur.
Layer Frame
Show/hide layer Keyframe
Lock layer
Delete layer
Tambah layer folder
Add motion guide
Tambah layer
Produksi Animasi Interaktif dengan Adobe Flash oleh Toni Setyawan, ST Halaman - 5/48
_____________________________________________________________blog.flashbegin.com
Stage
Stage adalah layer tempat kita untuk mengambar dan membuat animasi.
Nama scene yang ditampilkan
Posisi Zoom View
Mengubah scene yang ditampilkan
Mengubah symbol yang tampilkan
Properties
Properties akan selalu berubah tergantung object yang dipilih, karena yang ditampilkan adalah
properties dari object yang dipilih.
Pada tampilan berikut ini adalah properties movie yang terdiri dari
Size (ukuran)
Publish (type publish yang dipilih)
Produksi Animasi Interaktif dengan Adobe Flash oleh Toni Setyawan, ST Halaman - 6/48
_____________________________________________________________blog.flashbegin.com
Pada tampilan berikut ini adalah properties text yang terdiri dari
mode teks jenis huruf warna huruf bold Justify
ukuran huruf italic
Lebar koordinat x
Tinggi koordiant y
Pada tampilan berikut ini adalah properties shape yang terdiri dari
Warna garis tepi ukuran garis tepi motif garis tepi
Warna shape
Lebar koordinat x
Tinggi koordiant y
Docker
Docker adalah kumpulan icon tool sebagai perintah untuk melakukan sesuatu. Docker yang
ditampilkan bisa di atur sesuai perintah yang sering kita lakukan. Docker bisa ditampilkan pada
layer lebih dari satu, hal ini akan memudahkan kita untuk mengunakan Adobe Flash, karena
tinggal menklik icon untuk memerintah.
Sebagai contoh tampilan di atas adalah docker Align dan transform yang sering digunakan.
Docker align berisi perintah yang terdapat pada kelompok Align seperti rata kiri, rata kanan,
center dan lain-lainnya. Sedangkan Docker Transform berisi ukuran objek dalam persen, rotate
Produksi Animasi Interaktif dengan Adobe Flash oleh Toni Setyawan, ST Halaman - 7/48
_____________________________________________________________blog.flashbegin.com
untuk memutar objeck dalam satuan derajat dan skew untuk memiringkan objeck dalam satuan
derajat.
LATIHAN
Buatlah gambar seperti gambar dibawah ini mengunakan perintah-perintah yang telah diuraikan
diatas.
Ubah dimensi menjadi ukuran yang anda inginkan misalkan 400 x 300 dimana 400 adalah
lebar dan 300 adalah tinggi. Kemudian ubah background dengan warna putih dengan cara
mengklik segitiga kecil kemudian pilih warnanya. Ubah pula Frame Rate menjadi 15 fps.
Produksi Animasi Interaktif dengan Adobe Flash oleh Toni Setyawan, ST Halaman - 8/48
_____________________________________________________________blog.flashbegin.com
3. Dengan Rectangle Tool pada toolbar buatlah segiempat bertumpukan seperti gambar di
bawah ini. Clik and drag mouse dari titik kiri atas ke titik kiri bawah Kemudian lakukan hal
yang sama untuk segi empat di bawahnya
4. Editlah sudut sudutnya dengan mengunakan subselection tool pada toolbar. Kemudian klik
object yang akan diedit sudutnya dengan mengklik bagian tepi object tersebut.
Bila berhasil akan muncul garis hijau di bagian tepi dan segi empat
di tiap sudutnya. Untuk merubah posisi sudutnya, clik and drag segi
empat tersebut ke tempat yang anda inginkan. Setelah sesuai
dengan bentuk yang diinginkan click ke tempat kosong, maka garis
hijau akan hilang.
5. Buatlah tempat roda dengan menghapus gambar mengunakan erase pada tool bar. Hingga
menjadi seperti gambar dibawah ini
Produksi Animasi Interaktif dengan Adobe Flash oleh Toni Setyawan, ST Halaman - 9/48
_____________________________________________________________blog.flashbegin.com
6. Dengan elips Tool pada toolbar buatlah dua buah lingkaran yang dipasang sebagai roda
seperti gambar dibawah ini.
7. Untuk merubah warna atau gradasinya, klik oject lalu ubah warnanya denganj
menggunakan docker color mixer seperti dibawah ini.
Model gradasi
Solid
Linier
Radial
9. Setelah selesai simpan pekerjaan anda dan publishlah dengan perintah shift - F12. Lihatlah
pada direktori tempat menyimpan file, akan muncul dua file baru, 1 file fla (file data asli
flash) dan file swf (file hasil publish yang siap digunakan.
-0-
Produksi Animasi Interaktif dengan Adobe Flash oleh Toni Setyawan, ST Halaman - 10/48
_____________________________________________________________blog.flashbegin.com
Modul 2
FRAME BY FRAME
URAIAN
Frame by frame adalah animasi yang biasa digunakan pada berbagai aplikasi program
pembuat film animasi atau kartun. Pemahaman konsep animasi ini sangat simple, dimana kita
memiliki gambar yang banyak yang memiliki sedikit perubahan. Bila gambar ini kita tapilkan
secara berurutan maka gambar yang tampak seolah-olah merupakan gambar yang bergerak.
Konsep ini sama seperti konsep pembuatan filem kartun pada jaman dahulu. Meski konsepnya
sangat sederhana dan sangat kuno, tapi konsep animasi frame by frame ini masih digunakan
apabila semua type animasi yang ada dalam flash tidak dapat dilakukan.
Dalam pembuatannya animasi frame by frame ini sangat rumit karena kita harus
membuat gambar setiap frame yang berbeda agar animasi kelihatan bergerak, tetapi kita dapat
membuat animasi dalam bentuk apapun. Coba perhatikan deretan gambar berikut
Perhatikan gambar di atas, pada gambar diatas terdapat perbedaan pada masing
masing gambar. Bila gambar tersebut ditampilkan secara berurutan maka gambar seolah-olang
bergerak dan mengambarkan bunga yang tumbuh dan ada kupu-kupu terbang diatasnya
Produksi Animasi Interaktif dengan Adobe Flash oleh Toni Setyawan, ST Halaman - 11/48
_____________________________________________________________blog.flashbegin.com
LATIHAN
1. Buatlah Animasi frame by frame dengan ukuran width = 240 px dan height = 260 px.
2. Gambar seperti yang ditampilkan pada halaman sebelumnya mengunakan brush tool,
jangan lupa atur dahulu warnanya (fill color) sebelum mengoreskan ke stage. Untuk lebih
detailnya sesuaikan pula brush size dan brush shape.
Brush Size
Brush Shape
3. Buatlah gambar yang pertama dahulu. Bila contoh gambar diatas terlalu rumit buatlah
gambar yang sederhana dahulu yang merupakan gambar berurutan.seperti gambar
dibawah ini.
Setelah selesai buatlah gambar pada frame selanjutnya. Untuk memudahkan proses copykan
frame pertama dengan menekan tombol F5 (insert > frame), jika benar maka tampilan time line
akan seperti gambar dibawah ini
Produksi Animasi Interaktif dengan Adobe Flash oleh Toni Setyawan, ST Halaman - 12/48
_____________________________________________________________blog.flashbegin.com
4. Kemudian clik pada frame ke dua kemudian tekan F6 (confert to keyfarme) , jika benar
maka tampilan time line akan seperti gambar dibawah ini
5. Bila sudah seperti pada gambar diatas kemudian itu ubah gambar yang kita inginkan
bergerak (perhatikan contoh gambar di halaman sebelumnya). Sedangkan objek yang akan
kita jadikan gambar diam (contoh dalam gambar di atas adalah gambar pot) tidak usah kita
ubah gambarnya.
6. Hal yang sama juga berlaku untuk membuat gambar pada frame 3, 4, 5 dan seterusnya.
Bila ada mengambar sampai frame 15 maka tampilan time line akan seperti gambar
dibawah.
7. Untuk mencoba animasi yang sudah kita buat, tekan Ctrl-Enter dan click tada silang merah
untuk menutupnya.
8. Setelah selesai simpan pekerjaan anda dan publishlah dengan perintah shift - F12. Lihatlah
pada direktori tempat menyimpan file, akan muncul dua file baru, 1 file fla (file data asli
flash) dan file swf (file hasil publish yang siap digunakan.
-0-
Produksi Animasi Interaktif dengan Adobe Flash oleh Toni Setyawan, ST Halaman - 13/48
_____________________________________________________________blog.flashbegin.com
Modul 3
MOTION TWEEN
URAIAN
Motion Tween adalah fasilitas pada Adobe Flash yang berfungsi untuk menggerakkan
object dalam satu layer. Agar object yang lain tidak ikut bergerak maka object tersebut harus
diletakkan pada layer yang berbeda. Pada Motion Tween kita dapat menggerakkan object
berdasar posisi maupun berputar, bahkan kita dapat mengubah warnanya.
layer yang terdapat objeck yang akan digerakkan
keyframe awal keyframe akhir
LATIHAN
9. Buatlah Gambar seperti dibawah ini dan letakkan pada stage
Produksi Animasi Interaktif dengan Adobe Flash oleh Toni Setyawan, ST Halaman - 14/48
_____________________________________________________________blog.flashbegin.com
Panjangkan frame hingga frame 30 dengan cara mengklik kanan frame ke 30 pada layer
tersebut kemudian pilih insert frame. Lihat gambar berikut
10. Kemudian buatlah motion tween pada layer roda dengan mengklik kanan keyframe roda
(keyframe disimbolkan dengan frame yang ada titiknya) lalu pilih create motion tween. Jika
benar maka time line menjadi biru dan terdapat garis putus-putus dan akan menjadi seperti
gambar dibawah ini.
11. Kemudian buatlah keyframe pada frame terakhir dengan mengklik kanan frame terakhir
roda lalu pilih insert keyframe. Jika benar maka time line akan menjadi seperti gambar
dibawah ini.
12. Pada saat ini kita sudah memiliki dua posisi object ditandai dengan dua keyframe. Jadi
keyframe adalah status motion tween. Untuk membuatnya bergerak kita tinggal merubah
posisi pada keyframe yang lain. Caranya klik key frame yang belakang lalu ubah posisi roda
ke sebelah kanan seperti gambar berikut.
Produksi Animasi Interaktif dengan Adobe Flash oleh Toni Setyawan, ST Halaman - 15/48
_____________________________________________________________blog.flashbegin.com
13. Tekan enter untuk melihat hasil tween. Bila motion tween berhasil maka roda akan bergerak
dari kiri ke kanan. Untuk membuat rodanya berputar maka klik Tween Properties seperti
gambar dibawah ini.
Mode Tween
Motion : posisi
Shape : bentuk
Ease : Linieritas Tween
Rotate
CW : Berputar searah jarum jam
CCW : Berlawanan jarum jam
14. Kalau semua telah selesai dan benar dikerjakan maka setelah ditekan enter akan terlihat
roda yang menguling dari kiri ke kanan. Untuk membuat perubahan warna atau
transparansinya kita dapat mengklik posisi frame kemudian mengklik object yang akan kita
ubah. Untuk parameternya dapat dilihat pada object properties berikut
Color
Brightness : Kecerahan
Tint : Menganti warna
Prosentasi pencampuran
Warna penganti
-0-
Produksi Animasi Interaktif dengan Adobe Flash oleh Toni Setyawan, ST Halaman - 16/48
_____________________________________________________________blog.flashbegin.com
Modul 4
SHAPE TWEEN
URAIAN
Shape Tween adalah fasilitas pada Adobe Flash yang berfungsi untuk mengubah bentuk
object dalam satu layer. Agar object yang lain tidak ikut berubah maka object tersebut harus
diletakkan pada layer yang berbeda.
layer yang terdapat objeck yang akan diubah bentuknya
keyframe awal keyframe akhir
Object yang dapat diubah bentuk adalah object shape. Bila object tersebut bukan
sebuah shape maka kita harus mengubah object tersebut menjadi object shape dengan cara
menekan Ctrl+B (Break Apart). Contoh objeck bukan object shape adalah object Teks.
LATIHAN
1. Buatlah Gambar seperti dibawah ini pada stage. Gambar kuda dan kambing dibuat pada
layer yang berbeda.
Produksi Animasi Interaktif dengan Adobe Flash oleh Toni Setyawan, ST Halaman - 17/48
_____________________________________________________________blog.flashbegin.com
2. Kemudian panjangkan frame kambing sesuai keinginan anda lalu letakkan frame kuda ada
dibelakang frame kambing dengan cara click and drug. Kalau benar pada time line akan
seperti gambar dibawah ini.
3. Untuk memasangkan shape tween kambing menjadi kuda click keyframe kambing lalu ubah
frame properties seperti gambar dibawah ini.
Tween
Motion
Shape
4. Kalau benar maka frame kambing berubah menjadi hijau dan ada gambar panahnya seperti
gambar dibawah ini
5. Kalau kita jalankan dengan menekan enter maka akan tampak gambar kambing bergerak
dan menjadi gambar kuda. Kalau menginginkan gambar hanya berubah tidak bergerak, kita
bisa memindahkan kedua gambar pada posisi yang sama. Caranya klik keyframe kuda lalu
gerser gambar sesuai posisi kambing.
Produksi Animasi Interaktif dengan Adobe Flash oleh Toni Setyawan, ST Halaman - 18/48
_____________________________________________________________blog.flashbegin.com
-0-
Produksi Animasi Interaktif dengan Adobe Flash oleh Toni Setyawan, ST Halaman - 19/48
_____________________________________________________________blog.flashbegin.com
Modul 5
MOTION GUIDE
URAIAN
Pembuatan Motion Tween telah dibahas pada modul 2. Motion Tween akan
menggerakkan object dari satu posisi ke posisi yang lain dengan garis lurus. Kalau kita
menginginkan gerakan objeck tersebut tidak lurus maka kita dapat memasangkan motion guide
pada tween tersebut. Dengan kata lain kita dapat membuat jalur yang akan dilewati gerakan
objeck tween mengunakan Motion Guide.
layer motion guide
layer object yang gerakanNya diatur oleh layer motion guide. Layer ini ditandai dengan
posisi icon agak menjorok ke dalam
Dengan Motion Guide ini kita dapat membuat jalur pergerakan sesuai dengan garis yang
kita buat pada layer motion guide. Isi dari layer motion guide ini adalah garis dalam bentuk apa
saja, bisa lurus, belok, melengkung dan lain-lain.
LATIHAN
1. Buatlah Gambar bola seperti dibawah ini pada kiri atas stage.
Produksi Animasi Interaktif dengan Adobe Flash oleh Toni Setyawan, ST Halaman - 20/48
_____________________________________________________________blog.flashbegin.com
2. Gerakkan ke arah kanan bola mengunakan motion tween. (pelajari lagi modul 2 jika anda
lupa).
3. Lalu click kanan layer hingga muncul tulisan seperti gambar berikut
Kemudian pilih add motion guide. Kalau benar layer akan bertambah seperti gambar
berikut.
4. Buat garis pada layer guide dengan diawali mengclick keyframe layer guide lalu membuat
garis mengunakan line tool pada toolbar. Buat garis tersebut di state yang menandakan
jalur pergerakan tween. Lihat gambar dibawah ini
5. Rubah garis lurus menjadi melengkung dengan cara mendekatkan mouse pada garis
hingga gambar mouse berubah seperti gambar dibawah ini, kemudian clik and drug ke
bentuk lengkung sesuai keinginan anda.
Produksi Animasi Interaktif dengan Adobe Flash oleh Toni Setyawan, ST Halaman - 21/48
_____________________________________________________________blog.flashbegin.com
6. Bila proses benar maka akan dapat terbentuk gambar seperti dibawah ini.
7. Tekan enter untuk melihat hasil motion guide. Kalau gagal coba lakukan TIP berikut ini
Tip : Posisikan awal object dan akhir object sesuai dengan awal dan akhri garis guide.
Garis guide dapat dihilangkan dengan mengklik titik dibawah mata pada layer guide, kalau
benar maka akan terlihat gambar seperti dibawah ini.
-0-
Produksi Animasi Interaktif dengan Adobe Flash oleh Toni Setyawan, ST Halaman - 22/48
_____________________________________________________________blog.flashbegin.com
Modul 6
MASKING
URAIAN
Masking adalah fasilitas Adobe Flash yang berfungsi untuk menutup gambar atau object
dan menampilkan gambar atau object sesuai dengan object mask yang kita buat. Misal object
mask adalah lingkaran maka bila animasi dijalankan akan tampak objek yang asli tetapi yang
terlihat hanya bentuk lingkaran. Masking ini juga dapat dilakukan terhadap tween dan kita juga
dapat melakukan tween terhadap layer masking.
Layer masking
Layer objeck yang dimasking. Layer ini ditandai dengan menjorok ke dalam.
Dengan metoda masking kita dapat mengatur objeck yang akan ditampilkan dalam
sebuah animasi. Metoda masking akan terlihat dalam stage bila kedua layer dalam keadaan
lock. Bila tidak dalam keadaan lock masking tidak dapat berpengaruh terhadap view stage,
tetapi akan tetap berjalan bila animasi dijalankan dalam mode preview.
LATIHAN
1. Buatlah tulisan pada layer 1 di tengah state seperti gambar dibawah ini
Produksi Animasi Interaktif dengan Adobe Flash oleh Toni Setyawan, ST Halaman - 23/48
_____________________________________________________________blog.flashbegin.com
2. Kemudian pada layer yang berbeda (buat layer baru) buatlah gambar lingkaran pada posisi
di sebelah kiri tulisan seperti gambar dibawah ini
3. Buatlah semua layer menjadi 15 frame hingga timeline seperti gambar di bawah ini.
4. Buatlah tween pada layer dua (gambar lingkaran) dari kiri ke kanan tulisan. Hingga pada
saat dijalankan lingkaran menutupi tulisan.
5. Agar Mask menjadi melakukan masking pada layer 1 maka klik kanan layer dua lalu pilih
mask. Lihat gambar berikut.
6. Jika langkah ke 5 betul berarti timeline akan berubah menjadi seperti gambar berikut.
Produksi Animasi Interaktif dengan Adobe Flash oleh Toni Setyawan, ST Halaman - 24/48
_____________________________________________________________blog.flashbegin.com
7. Coba jalankan dengan menekan enter. Jika proses anda benar maka tulisan yang tampak
adalah bentuk lingkaran seperti objeck mask yang menutup.
Tip : Setelah layer diset sebagai mask mala layer tersebut akan secara otomatis dikunci (lock)
pada posisi ini layer tak bisa diedit. Untuk mengedit terlebih dulu membuka kunci dengan
mengclick gambar kunci pada layer yang akan anda edit.
Setelah diedit jangan lupa mengkunci kembali layer, karena masking tidak dapat berjalan bila
layer tidak terkunci. Meski masking seperti tidak berfungsi tetapi pada saat kita export
(publish) masking tetap dapat berfungsi.
-0-
Produksi Animasi Interaktif dengan Adobe Flash oleh Toni Setyawan, ST Halaman - 25/48
_____________________________________________________________blog.flashbegin.com
Modul 7
IMPORT DAN EXPORT MEDIA
URAIAN
Seperti halnya software-software yang lain Adobe Flash juga terdapat fasilitas export dan
import. Fungsi import ini digunakan untuk memasukkan media lain misal gambar (jpg, gif, bmp
dll), suara (wav, mp3 dll), vector (ai, wmf dll), animasi (swf, gif aminasi dll) atau movie (avi, mpg,
mov, wmf dll). Terdapat dua metoda import yang terdapat dalam Adobe Flash yaitu Import dan
Import to library. Kedua metoda ini memiliki maksud yang tersendiri, jadi kita harus menentukan
metoda import apa yang akan kita gunakan.
Import
Fasilitas ini menghasilkan media yang kita import akan langsung ditampilkan dalam stage dan
tersimpan pula dalam library. Jadi bila kita mengunakan fasilitas ini, kita harus mengatur dulu ke
layer dan frame mana import kita lakukan. Metoda ini tidak dapat kita gunakan dalam import
media suara. Meski kita melakukan import suara tetapi media suara tidak langsung masuk ke
frame. Untuk suara kita tetap harus memasukkan ke frame dengan cara manual.
Import to Library
Fasilitas ini menghasilkan media yang kita import hanya masuk ke dalam library. Jadi bila kita
akan mengunakan media tersebut, kita harus memasukkan melalui library. Jadi kita harus
menampilkan docker library dengan cara menekan Ctrl+F11. Setelah muncul docker tersebut
kita bisa mengunakan media tersebut dengan meng-click and drug media tersebut dan
dimasukkan ke stage. Kita harus mengigat bahwa sebelum kita memasukkan media kita siapkan
dahulu frame mana kita akan memasukkan media. Cara ini hanya diperuntukkan memasukkan
media selain media suara. Untuk memasukkan media suara diperlukan cara tersendiri yang
akan anda pelajari dalam latihan.
Fungsi export digunakan untuk mengubah animasi Adobe Flash menjadi media lainnya,
missal: swf, wav, avi, mov, gif animasi, exe, wmf, html dll. Export ini dalam Adobe Flash lazim
diistilahkan dengan Publish. Memang dalam Adobe Flash terdapat berbagai macam export yang
dapat dilakukan. Karena orientasi kita membuat animasi untuk Media Pembelajaran Interaktif
Produksi Animasi Interaktif dengan Adobe Flash oleh Toni Setyawan, ST Halaman - 26/48
_____________________________________________________________blog.flashbegin.com
maka modul ini hanya akan membahas export media berwujud swf. Kita memilih swf karena
selain kompatibel dengan Macromedia Authorware (software programmer MPI) juga memiliki
ukuran file yang kecil.
LATIHAN IMPORT
1. Klik file pada pulldown menu kemudian akan terlihat seperti gambar berikut
Import
Media yang di import langsung
masuk ke stage dan library
Import to library
Media yang diimport tidak masuk
ke state tetapi hanya di library
2. Dengan memilih perintah Import maupun Import to library akan muncul tampilan seperti
dibawah ini
Produksi Animasi Interaktif dengan Adobe Flash oleh Toni Setyawan, ST Halaman - 27/48
_____________________________________________________________blog.flashbegin.com
3. Bila tadi kita memilih import maka gambar langsung tampil di stage. Sebagai contoh dapat
dilihat pada gambar berikut
Tip : Gambar dengan format jpg atau bmp akan selalu memberi warna dan background segi
emapat. Bila kita menginginkan gambar yang di import tidak mempunyai background atau
background transparan kita sebaiknya mengunakan format gambar gif (gif mengenal warna
transparan). Tentu saja saja saat membuat gambar dengan format gif backgrundnya harus
dibuat transparan.
4. Bila kita ingin mengubah ukuran kita bisa mengunakan free transform tool pada tool bar.
Bila kita menekan tombol tersebut maka gambar akan menjadi seperti dibawah ini.
Click and drug pointer segi empat ini ke tempat yang anda
inginkan untuk mengubah ukuran.
Produksi Animasi Interaktif dengan Adobe Flash oleh Toni Setyawan, ST Halaman - 28/48
_____________________________________________________________blog.flashbegin.com
5. Selain dengan cara diatas, kita bisa mengubah ukuran object dengan mengunakan docker
transform dan info seperti gambar dibawah ini.
Pembesaran lebar
Pembesaran tinggi
Posisi x gambar
Posisi y gambar
6. Kalau kita melakuan import to library maka gambar tidak tampak pada stage. Untuk
menggunakan kita harus menampilkan library dengan F11 atau click window pull down lalu
pilih library. Kalau perintah benar akan muncul library seperti pada gambit berikut
7. Untuk import suara prosesnya sama dengan import to library, sedang untuk pengunaannya
akan dibahas pada modul selanjutnya.
Produksi Animasi Interaktif dengan Adobe Flash oleh Toni Setyawan, ST Halaman - 29/48
_____________________________________________________________blog.flashbegin.com
Produksi Animasi Interaktif dengan Adobe Flash oleh Toni Setyawan, ST Halaman - 30/48
_____________________________________________________________blog.flashbegin.com
LATIHAN EXPORT
Fasilitas export pada Adobe Flash lebih dikenal dengan nama publish. Ada juga export yang
tidak terdapat pada publish yaitu export movie dan export image. Penjelasan tentang macam-
macam export dapat dijelaskan pada langkah-langkah berikut.
1. Sebelum kita melakukan publish sebaiknya kita melakukan publish settings dengan cara
click File pada pull down menu lalu pilih publish settings. Maka akan muncul gambar
berikut.
Dari gambar diatas kita dapat menset file apa yang akan kita inginkan sebagai animasi hasil
publish. Untuk Authorware biasa digunakan swf, maka tanda centang di HTML sebaiknya
kita hilangkan saja dengan mengklik tanda tersebut.
2. Setelah kita klik OK maka pengaturan setting publish telah selesai. Untuk mem-publish kita
bisa mengklik File pada pull down menu lalu pilih Publish. Kalau proses publish berhasil kita
akan melihat tampilan animasi hasil Publish.
Tip : Untuk membuat media animasi pada Authorware, kita check swf saja. Jadi file hasil
publish hanya swf. Hal ini dilakukan agar proses publish lebih cepat.
Produksi Animasi Interaktif dengan Adobe Flash oleh Toni Setyawan, ST Halaman - 31/48
_____________________________________________________________blog.flashbegin.com
File hasil publish terletak di direktori tempat file Adobe Flash kita simpan.
3. Export movie digunakan untuk membuat animasi dengan format video. Caranya adalah
mengklick File pada pull down menu lalu pilih export movie. Selanjutnya kita tinggal mengisi
nama file dan format video yang akan kita buat. Dalam modul ini tidak memahas lebih lanjut
export metoda ini, karena tidak digunakan dalam pembuatan MPI.
4. Export image digunakan apabila kita ingin meng-export frame by frame ke dalam format
gambar. Dalam modul ini tidak memahas lebih lanjut export metoda ini, karena tidak
digunakan dalam pembuatan MPI.
Produksi Animasi Interaktif dengan Adobe Flash oleh Toni Setyawan, ST Halaman - 32/48
_____________________________________________________________blog.flashbegin.com
-0-
Produksi Animasi Interaktif dengan Adobe Flash oleh Toni Setyawan, ST Halaman - 33/48
_____________________________________________________________blog.flashbegin.com
Modul 8
MEMASUKKAN MEDIA SUARA
URAIAN
Untuk memperindah dan menghidupkan sebuah animasi kita dapat memasukkan suara
untuk sound effect maupun narasi. Dengan tambahan media suara kita mengharapkan animasi
yang kita buat akan lebih bagus. Cara memasukkan suara ke dalam animasi didahului dengan
meng-import file suara. Cara meng-import suara sama dengan cara meng-import media lain
yang telah diuraikan pada modul sebelumnya. Sebelum kita mencoba memasukkan media
suara sebaiknya kita pahami dahulu parameter yang berhubungan dengan suara. Pada saat kita
mengklik keyframe maka dibagian bawah stage terdapat parameter keyframe seperti gambar
dibawah ini.
properties tween properties sound
Properties tween telah dibahas pada modul sebelumnya. Properties sound berisi parameter
suara yang berfungsi untuk mengatur pemunculan suara pada animasi yang kita buat.
Parameter tersebut antara lain :
Sound
Parameter ini berisi nama file suara yang terdapat pada library. Kalau ingin diubah kita bisa
mengklik panah di sebelah kanan tulisan dan kita pilih suara apa yang ingin kita tampilkan
dalam frame tersebut. Bila dalam Library tidak terdapat media suara maka pada saat kita
mengklik panah kita tidak mendapatkan nama file suara tetapi hanya tertulis none.
Effect
Parameter ini berfungsi agar kita dapat mengatur bagaimana suara itu muncul pada frame
tersebut. Bisa muncul dari pelan terus keras, awalnya keras trus berakhir pelah, pindah canel
Produksi Animasi Interaktif dengan Adobe Flash oleh Toni Setyawan, ST Halaman - 34/48
_____________________________________________________________blog.flashbegin.com
kiri ke kanan dan lain lain. Bahkan kita dapat memilih custom dengan cara mengklik tombol
Edit di sebelah kanannya. Setelah kita klik akan muncul tampilan dibawah ini
Produksi Animasi Interaktif dengan Adobe Flash oleh Toni Setyawan, ST Halaman - 35/48
_____________________________________________________________blog.flashbegin.com
Dengan mengatur parameter di atas kita dapat secara leluasa mengatur pemunculan suara
seperti yang kita inginkan.
Cara-cara memasukkan dan mengatur suara ke dalam frame dapat dilakukan dengan
mencoba langkah-langkah dalam latihan berikut ini.
LATIHAN
Agar kita dapat leluasa mencoba memasukkan media suara, kita harus terlebih dahulu
membuat animasi yang akan kita masuki media suara. Apa bila anda masih kesulitan membuat
animasi yang terdapat dalam latihan ini sebaiknya anda membka kembali modul yang
sebelumnya.
1. Buatlah animasi bola memantul seperti gambar dibawah ini
Posisi bola pada frame 1 dan 30 melayang sedang pada frame 15 menyentuh lantai. Jadi
saat animasi dijalankan bola memantul ke lantai.
Produksi Animasi Interaktif dengan Adobe Flash oleh Toni Setyawan, ST Halaman - 36/48
_____________________________________________________________blog.flashbegin.com
2. Lakukan import suara dengan cara menekan Ctrl+R lalu memilih file suara yang akan kita
import dan tekan Open. Cara menimportnya sama dengan mengimport media lain dan telah
diuraikan pada modul sebelumnya.
3. Bila prosedur import Anda benar maka dalam library akan muncul seperti gambar dibawah
ini. Untuk memunculkan library Anda dapat menekan Ctrl+F11.
4. Buat layer baru dengan nama suara (double click layer untuk menganti nama). Kemudian
buat keyframe pada frame 15 (klik kanan pada frame 15 lalu pilih insert keyframe). Kalau
benar akan terlihat seperti gambar dibawah ini.
5. Click keyframe 15 pad layer suara lalu ubah keyframe properties seperti gambar dibawah ini
Clik panah lalu pilih suara yang akan dimasukkan
Produksi Animasi Interaktif dengan Adobe Flash oleh Toni Setyawan, ST Halaman - 37/48
_____________________________________________________________blog.flashbegin.com
6. Bila langkah anda benar maka time line akan berubah menjadi seperti gambar dibawah ini.
7. Jalankan animasi dengan menekan enter. Untuk melihat hasil akhir animasi tekan Ctrl F12
-0-
Produksi Animasi Interaktif dengan Adobe Flash oleh Toni Setyawan, ST Halaman - 38/48
_____________________________________________________________blog.flashbegin.com
TES AKHIR
Buatlah animasi seperti gambar dibawah ini dengan ukuran 800 x 600 dan frame rate 15 fps,
kemudian export ke dalam bentuk swf.
Keterangan :
1. Tulisan Pelatihan Produksi Multimedia bergerak dari atas (ukuran lebih besar) kebawah
dengan berubah warna.
2. Tulisan Adobe Flash bergerak dari kiri ke kanan dan setelah semua selesai diberi efek
mengkilat.
3. Logo bergerak sesuai garis dan berputar dengan awal lebih besar.
4. Tulisan Balai …… dari keadaan transparan ke posisi solid.
5. Berilah efek suara biar menarik.
6. Untuk jelasnya bisa dilihat file TestAkhir swf.
Produksi Animasi Interaktif dengan Adobe Flash oleh Toni Setyawan, ST Halaman - 39/48
_____________________________________________________________blog.flashbegin.com
Modul 9
BUTTON
URAIAN
Button adalah komponen yang penting dalam Adobe Flash. Karena dengan button kita
dapat membuat animasi yang interaktif. Misalnya dengan mengunakan botton user dapat
memerintah animasi untuk melaompak ke scene atau frame yang lain. Selain itu dapat
digunakan membuat effek-effek yang lain. Di dalam button ada 2 macam keadaan yaitu Up,
Over dan Down. Jadi untuk membuat button kita harus membuat tiga gambar. Bila kita mambuat
button maka nomer frame akan berubah menjadi Up, Over, Down dan Hit.
Up : bila krusor berada di luar Hit
Over : bila krusor berada di area Hit
Down : bila mouse di klik dan krusor berada di area hit
Hit : area untuk mengaktifkan fungsi button. Bila kosong maka areanya sesuai
dengan gambar yang ada.
Dengan tiga keadaan di atas maka button akan menjadikan animasi yang dibuat interaktif.
Agar button yang kita buat menjadi lebih dinamis kita dapat memasangkan movie clip
pada salah satu keadaan. Misalkan pada frame down kita pasangkan movie clip dan pada frame
up gambar statis maka bila button tersebut dijalankan dan mouse berada di posisi hit maka
gambar button tersebut beergerak dinamis sesuai dengan movie clip yang dipasangkan. Ada
dua cara untuk mengunakan button yaitu :
1. Mengunakan Common Libraries yang sudah tersedia.
Untuk mengaktifkannya kita dapat mengambil Pulldown
menu Windows > Common Libraries > Buttons. Dengan
perintah ini akan muncul docker seperti gambat di sebelah
kiri. Gambar tas emnunjukkan folder yang berisi
bermacam-macam button dan icon segiepat dengan
tangan menandakan symbol button yang disa digunakan.
Sedangkan gambar diatas adalah bentuk button yang
dipilih.
Produksi Animasi Interaktif dengan Adobe Flash oleh Toni Setyawan, ST Halaman - 40/48
_____________________________________________________________blog.flashbegin.com
2. Membuat sendiri dari awal, dengan memilih di pulldown menu Insert > New Symbol. Setelah
itu akan muncul tampilan berikut ini :
Produksi Animasi Interaktif dengan Adobe Flash oleh Toni Setyawan, ST Halaman - 41/48
_____________________________________________________________blog.flashbegin.com
LATIHAN
Buatlah animasi interakrif seperti gambar dibawah ini.
Keterangan :
1. Berisi tulisan seperti gambar diatas angka sesuai dengan nomer frame.
2. Animasi tidak bergerak otomatis, tapi menunggu respon tombol dibawahnya.
3. Tombol paling no 1 untuk melompat ke awal frame (frame 1)
4. Tombol paling no 2 untuk melompat ke frame sebelumnya (previous frame)
5. Tombol paling no 3 untuk melompat ke frame selanjutnya (next frame)
6. Tombol paling no 4 untuk melompat ke akhir frame (frame 15)
Langkah kerja :
1. Buatlah tiga layer dan diberi nama seperti gambar diatas.
2. Buatlah scrip stop(); di semua frame pada layer action.
3. Buatlah tulisan frame dan angka dibawahnya seperti gambar diatas pada layer teks.
4. Copikan sampai frame ke 15, kemudian edit angkanya sesuai dengan nomer frame.
Produksi Animasi Interaktif dengan Adobe Flash oleh Toni Setyawan, ST Halaman - 42/48
_____________________________________________________________blog.flashbegin.com
Produksi Animasi Interaktif dengan Adobe Flash oleh Toni Setyawan, ST Halaman - 43/48
_____________________________________________________________blog.flashbegin.com
Modul 10
SCENE
URAIAN
Scene adalah satu macam animasi yang berisi berbagai layer dan frame. Pada animasi
yang telah kita bahas sebelumnya hanya memiliki 1 scene. Bila kita akan membuat satu file
animasi dengan dua macam animasi yang berbeda dan kita akan memisahkannya kita bisa
membuatnya dengan 2 scene. Dengan mengunakan 2 scene kita dengan mudah melakuka
editing karena meskipun terdapat dalam satu file tetapi masing-masing animasi terpisah. Untuk
mengatur scene kita dapat mengaturnya dalam docker seperti dibawah ini :
Hapus scene
Tambah scene
Dupilkat scene
Nama scene
Dengan mengunakan dua scene kita lebih leluasa melakukan lompatan dari satu frame ke satu
frame dalam scene yang lain.
Dalam pengunaannya untuk elearning kita dapat memanfaatkan scene untuk memisahkan
menu materinya. Jadi dalam pengeditannya kita lebih mudah.
LATIHAN
Buatlah animasi seperti modul 8 tetapi memilik dua scene.
Keterangan
1. Scene pertama seperti modul 8
2. Scene kedua berisi seperti modul 8 tetapi tidak berisi angka melainkan huruf.
3. Tambahkan tombol huruf untuk scene angka dan tombol angka untuk scene huruf.
Produksi Animasi Interaktif dengan Adobe Flash oleh Toni Setyawan, ST Halaman - 44/48
_____________________________________________________________blog.flashbegin.com
Langka Kerja
1. Buka file modul 8 lalu save as dengan nama modul 9
2. Pada layer tombol buat tulisan huruf dengan segi empat seperi gambar diatas
3. Ubah tulisan huruf dan kotak menjadi tombol dengan mengklik kanan dan pilih confert to
symbol, lalu pilih button dan diberinama.
4. Tambahkan action script pada tombol huruf dengan list script dibawah ini
on (release) {
gotoAndPlay("Huruf", 1);
}
5. Duplikat scene dengan cara mengklik tombol duplikat pada docker scene
6. Ubah nama scene ke dua menjadi huruf ( ada dua scene yang satu bernama angka dan yang
satu huruf)
7. Edit layer teks dari angka ke huruf berurutan dalam setiam frame
8. Buat tombol angka dan sciptnya seperti langkah 2, 3 dan 4. Tetapi mengunakan list script
sebagai berikut :
on (release) {
gotoAndPlay("Angka", 1);
}
9. Coba animasi dengan menekan tombol Ctrl – F12.
Produksi Animasi Interaktif dengan Adobe Flash oleh Toni Setyawan, ST Halaman - 45/48
_____________________________________________________________blog.flashbegin.com
TES AKHIR 2
Buatlah animasi seperti gambar dibawah ini dengan ukuran 400 x 300 dan frame rate 15 fps,
kemudian export ke dalam bentuk swf.
Keterangan :
1. Tulisan diatas dengan warna merah dan backgroun kuning adalah tombol yang digunkan
untuk melompat ke menu lainnya.
2. Pada menu materi ada tombol untuk pindah ke isi materi yang lain tanpa pindah dari menu
materi
3. Pada menu simulasi ada 2 simulasi yang bisa dipilih
4. Pada menu tes ada beberapa soal yang dikerjakan dan ada hasil test.
5. Untuk jelasnya bisa dilihat file TestAkhir2 swf.
Produksi Animasi Interaktif dengan Adobe Flash oleh Toni Setyawan, ST Halaman - 46/48
_____________________________________________________________blog.flashbegin.com
PENUTUP
Terimakasih telah menggunakan modul ini untuk mempelajari cara pembuatan animasi
dengan format swf. Bila Anda mempelajarinya dengan sungguh-sungguh pasti saat ini Anda
sudah mampu membuat animasi dengan format swf untuk keperluan pembuatan Multimedia
Pembelajaran Interaktif.
Dalam pembuatan animasi, kita lebih kreatif bila memiliki “jam terbang” yang lama. Bila
kita sering berlatih membuat animasi, maka semakin lama kita akan semakin tahu tip dan trik
nya. Tip dan trik yang kita dapatkan dalam berlatih akan sangat berguna untuk membuat variasi
animasi dan mempercepat proses pembuatan animasi yang sesuai dengan keinginan kita.
Modul ini memang modul pembuatan animasi dengan format swf mengunakan Adobe
Flash dalam tingkatan yang dasar. Masih banyak fasilitas-fasilitas dalam Adobe Flash yang
belum dipelajari dalam modul ini. Selain itu dalam modul ini masih banyak kekurangan dan
kelemahannya. Penulis akan sangat berterimakasih bila mendapat kritik dan saran yang
membangun demi kesempurnaan modul ini.
Produksi Animasi Interaktif dengan Adobe Flash oleh Toni Setyawan, ST Halaman - 47/48
_____________________________________________________________blog.flashbegin.com
DAFTAR PUSTAKA
Produksi Animasi Interaktif dengan Adobe Flash oleh Toni Setyawan, ST Halaman - 48/48