Anda di halaman 1dari 48

_____________________________________________________________blog.flashbegin.

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.

Semarang, Maret 2009


Penulis

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 mampu membuat media animasi yang digunakan dalam Multimedia


Pembelajaran Interaktif.

Indikator Pencapaian Hasil Belajar


• Peserta dapat memahami fungsi bagian-bagian dalam tampilan Adobe Flash.

• Peserta dapat membuat bentuk dasar (shape) mengunakan Adobe Flash.


• Peserta dapat memahami, menggunakan dan membuat animasi frame by frame.
• Peserta dapat memahami, mengunakan dan membuat Motion Tween.

• Peserta dapat memahami, mengunakan dan membuat Shape Tween.

• Peserta dapat memahami, mengunakan dan membuat Motion Guide.

• Peserta dapat memahami dan mengunakan Masking.

• 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

INDIKATOR PENCAPAIAN HASIL BELAJAR


• Peserta dapat memahami fungsi bagian-bagian dalam tampilan Adobe Flash.

• Peserta dapat membuat bentuk dasar (shape) mengunakan 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

Pull down Menu

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.

Merataka object : Align


Redo : mengulang perintah yg di undo
Undo : membatalkan perintah
Paste : mengeluarkan memory clipboard
Copy : mengisi memory clipboard
Cut : menghapus objek tepilih
Preview : melihat hasil yang akan dicetak
Print : mencetak tampilan
Save : menyimpan data fla
Open : membuka data fla
New : membuat data baru

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

Selection tool Subselection tool


memilih object mengedit line object
Line tool Lasso tool
membuat garis memblock sebuah area
Pen tool Teks tool
membuat garis secara vector membuat tulisan
Oval tool Rectangle tool
membuat lingkaran atau elips membuat segi empat
Pencil tool Brush tool
membuat garis bebas membuat sebuah area bebas
Free Transform Gradient Transform tool
merubah ukuran secara bebas mengubah property gradien
Ink bottle tool Paint bucket tool
memberi garis tepi pada object memberi warna pada area
Eye dropper tool Eraser tool
mengambil sample warna menghapus
Hand tool Zoom tool
mengubah posisi stage membesarkan posisi stage
Stroke color
warna garis tepi (stroke)
Fill color
warna object

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)

Background (warna latar belakang)


Frame rate (tampilan frame per detik)

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.

1. Buatlah data baru dengan mengklik new pada command bar.


2. Atur properties animasi tersebut dengan mengubah parameter menekan tombol Size pada
Properties. Setelah itu akan muncul tampilan berikut :

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

Tip : sebelum mengambar dan setelah memilih Rectangle


Tool pada toolbar, lihat dulu warnanya, apakah
sudah sesuai dengan keinginan anda?
Warna putih dengan garis merah diagonal berarti
tidak memakai warna atau tidak memakai bagian itu.
Dalam contoh disamping object yang dibuat tidak
memakai garis tepi (stroke).

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.

Tip : Agar tidak mengganggu object yang sudah ada


buatlah object baru di tempat kosong, kemudian
baru dipindahkan ke tempat yang sesuai.
Untuk roda ke dua gunakan fasilitas copy dan
paste. Kemudian pindahkan ke tempat yang
sesuai

7. Untuk merubah warna atau gradasinya, klik oject lalu ubah warnanya denganj
menggunakan docker color mixer seperti dibawah ini.
Model gradasi
Solid
Linier
Radial

Warna yang dipilih Transparansi


Warna awal gradasi Warna akhir gradasi

Untuk mengetahui perubahannya kita bisa mencobanya satu-persatu.


8. Dengan Texs Tool pada toolbar buatlah dua buah tulisan dengan mengklik posisi yang
diinginkan. Untuk merubah ukuran, font dan warnanya gunkan texs properties seperti
gambar dibawah ini.
Jenis Font Ukuran Warna Bold Italic Align

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

INDIKATOR PENCAPAIAN HASIL BELAJAR


• Peserta dapat memahami, menggunakan dan membuat animasi 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

Perhatikan frame ini

4. Kemudian clik pada frame ke dua kemudian tekan F6 (confert to keyfarme) , jika benar
maka tampilan time line akan seperti gambar dibawah ini

Perhatikan keyframe 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.

Perhatikan keyframe ini

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

INDIKATOR PENCAPAIAN HASIL BELAJAR


• Peserta dapat memahami, menggunakan dan membuat 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

akan muncul tanda panah dan background biru


sebagai tanda kalau sudah berujut motion tween
Posisi awal dan posisi akhir pada sebuah gerakan (tween) ditandai dengan adanya
keyframe. Jadi keyframe ini memuat data objeck. Data object yang dimuat dalam keyframe
adalah data posisi, warna, ukuran dan rotasi. Kita juga bisa memasang keyframe di tengah-
tengah tween bila kita menginginkan ada perubahan di tengah tween.

LATIHAN
9. Buatlah Gambar seperti dibawah ini dan letakkan pada stage

Tip : Agar garis jalan tidak ikut berputar, buatlah roda


dan jalan pada layer yang berbeda.

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

Alpha : Menganti transparansi


Prosentasi transparansi

Advance : Gabuangan dari semua parameter


15. Kalau semua telah selesai dan benar dikerjakan maka setelah ditekan enter akan terlihat
roda yang menguling dari kiri ke kanan dan berubah warna

-0-

Produksi Animasi Interaktif dengan Adobe Flash oleh Toni Setyawan, ST Halaman - 16/48
_____________________________________________________________blog.flashbegin.com

Modul 4
SHAPE TWEEN

INDIKATOR PENCAPAIAN HASIL BELAJAR


• Peserta dapat memahami, menggunakan dan membuat 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

akan muncul tanda panah dan background hijau


sebagai tanda kalau sudah berujut shape tween

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

Click panah lalu pilih 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

INDIKATOR PENCAPAIAN HASIL BELAJAR


• Peserta dapat memahami, menggunakan dan membuat 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.

Klik disini dan lihat hasilnya

-0-

Produksi Animasi Interaktif dengan Adobe Flash oleh Toni Setyawan, ST Halaman - 22/48
_____________________________________________________________blog.flashbegin.com

Modul 6
MASKING

Indikator Pencapaian Hasil Belajar


• Peserta dapat memahami dan menggunakan 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.

Klik di sini untuk mengunci atau membuka kunci


8. Coba lakukan modifikasi pada animasi. Misalkan lingkaran sebagai masking yang diam
tetapi tulisan sebagai yang dimasking justru yang bergerak.

-0-

Produksi Animasi Interaktif dengan Adobe Flash oleh Toni Setyawan, ST Halaman - 25/48
_____________________________________________________________blog.flashbegin.com

Modul 7
IMPORT DAN EXPORT MEDIA

INDIKATOR PENCAPAIAN HASIL BELAJAR


• Peserta dapat melakukan import media dan export menjadi media lain untuk keperluan
pembuatan Multimedia Pembelajaran Interaktif.

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

Direktori tempat file media

Nama file media

Type file media

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.

Tip : Pada saat mouse mendekati garis atau pointer atribut


mouse akan berubah. Ada 3 macam atribut mouse,
temukan dan coba masing-masing fungsinya.

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

Pembesaran lebar dan tinggi dengan rasio yang


sama atau tidak.
Rotasi
Gambar di ubah miring

Posisi x gambar
Posisi y gambar

Ukuran tinggi dalam pixel


Ukuran lebar dalam pixel

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

Untuk menggunakan gambar ini click and drug icon


lalu letakkan di stage

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

8. Untuk import video akan muncul setting seperti gambar berikut

edia yang akan kita import impoerNama


file media

Kualitas media yang akan kita


masukkan dalam library

Skala (pixel) media yang akan kita


masukkan dalam library

Parameter media dalam library

Klik OK bila parameter telah sesuai


menyamakan frame rate video dengan Adobe Flash
mengikutkan suara dalam video
Kalau kita ingin mengubah kita bisa melakukan click and drug slider pada parameter yang
ingin kita ubah.
9. Dari tampilan diatas kita dapat membaca parameter media movie yang akan kita masukkan
ke dalam library. Bila kita ubah maka kita akan mendapatkan parameter yang berubah pula
pada media yang kita simpan dalam library.
Kualitas
Parameter kualitas media yang akan kita masukkan ke library. Semakin besar semakin
bagus kualitasnya tetapi semakin besar filenya.
Skala
Parameter skala untuk mengubah ukuran pixel media yang akan kita masukkan ke
library. Semakin besar semakin bagus detail tetapi semakin besar filenya.

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

INDIKATOR PENCAPAIAN HASIL BELAJAR


• Peserta dapat mengimport dan menggunakan 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

Zooming view grafik suara


Panjang suara yang akan kita munculkan
Skala panjang suara dalam detik
Garis Pan (volume) suara pada masing masing channel
Titik Pan yang dapat diatur ketinggiannya.
Right Channel
Left Channel
Tombol play untuk mencoba suara
Tombol stop untuk menghentikan mencoba suara
Untuk mengatur titik pan kita dapat melakukan klick and drug pada titik yang akan kita ubah
ketinggiannya. Setelah kita ubah maka garis pan akan menyesuaikan dengan titiknya.
Sync
Mensinkronkan suara dengan frame.
Loop
Berapa kali suara akan muncul setelah frame dijalankan. Atau dengan kata lain jumlah
pengulangan yang kita inginkan.

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.

File suara hasil import

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

Edit : mengedit suara

Loop : Jumlah looping bila diinginkan looping suara


Effect : memberikan effect pada suara

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.

File suara telah masuk ke dalam frame


ditandai dengan munculnya grafik
suara

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

INDIKATOR PENCAPAIAN HASIL BELAJAR


• Peserta dapat memahami, mengunakan dan membuat 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 :

Nama adalah nama symbol yang akan tampil di library.


Jenis symbol yang akan dibuat
Jika sudah diberi nama dan jenis simbol (Button) yang akan dibuat maka clik OK dan
tampilan akan menjadi seperti dibawah ini

Posisi gambar saat ditampilkan


Nama button yang sedang di edit
Setelah tampilan Timeline berubah seperti gambar di atas maka kita bisa memulai
mengambar pada stage.
Untuk menjalankan interaktifnya button selalu mengunakan action scrip sebagai program
bantunya. Dalam pengunaan action script pada button ada dua macam
on(press) {
perintah ;
}
on (release) {
perintah ;
}
On (press) : Perintah dilakukan saat tombol mouse ditekan.
On (release) : Perintah dilakukan saat tombol mouse dilepas.
Perintah : perintah-perintah action sript yang dijalankan.

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

5. Buatlah tombol mengunakan common libraries dalam map play back.


6. Jika tombol 1 dan 4 tidak ada, gunakan tombol gel Fast Forward dan gel Rewind
kemudian diedit dengan mendoble klik tombol tersebut.
7. Buatkan action script pada masing masing tombol dengan cara mengklik kanan tombol
lalu pilih action. Maka akan muncul tampilan seperti dibawah ini.

Tempat untuk listing action script


Tanda kalau action scriptnya untuk button
8. Untuk tombol no 1 isikan Action Script seperti list dibawah ini :
on (release) {
gotoAndPlay(1);
}
9. Untuk tombol no 2 isikan Action Script seperti list dibawah ini :
on (release) {
prevFrame();
}
10. Untuk tombol no 3 isikan Action Script seperti list dibawah ini :
on (release) {
nextFrame();
}
11. Untuk tombol no 4 isikan Action Script seperti list dibawah ini :
on (release) {
gotoAndPlay(15);
}

Produksi Animasi Interaktif dengan Adobe Flash oleh Toni Setyawan, ST Halaman - 43/48
_____________________________________________________________blog.flashbegin.com

Modul 10
SCENE

INDIKATOR PENCAPAIAN HASIL BELAJAR


• Peserta dapat memahami, mengunakan dan membuat 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

Untuk lebih jelasnya dapat dilihat dalam tampilan gambar berikut.

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

1. Help Program Adobe Flash.


2. Tutorial dalam help Program Adobe Flash.
3. Lessons dalam help Program Adobe Flash.
4. Artikel dan Troubel shoting mengunakan Adobe Flash di situs internet dengan alamat
http://www.macromedia.com
5. Artikel dan Troubel shoting mengunakan Adobe Flash di situs resmi Macromedia dengan
alamat http://www.babaflash.com

Produksi Animasi Interaktif dengan Adobe Flash oleh Toni Setyawan, ST Halaman - 48/48

Anda mungkin juga menyukai