Modul Praktikum Animasi Flash
Modul Praktikum Animasi Flash
MULTIMEDIA
2021
Modul Praktikum Multimedia
BAB I
PENGENALAN MACROMEDIA FLASH 8
Menubar
Berisi kumpulan menu yang berupa perintah-perintah operasi dalam Macromedia Flash
diantaranya File, Edit, View, Insert, Modify, Text, Commands, Control, Window dan Help.
Toolbar
Berisi kumpulan Tool yang memiliki fungsi dan kegunaan tertentu untuk melakukan design,
editing maupun pengaturan gambar dan objek.
Timeline
Berupa panel yang digunakan untuk pengaturan Layer, Timing objek dan pengaturan
lamanya durasi dari movie yang dibuat.
Stage
Halaman Kerja yang digunakan untuk menempatkan berbagai macam objek yang akan
ditampilkan.
1
Modul Praktikum Multimedia
Panel
Panel pada sisi kanan jendela Macromedia Flash terdiri dari Component Panel yang berisi
kumpulan komponen flash untuk membuat animasi lebih interaktif, Color Mixer Panel untuk
pengaturan warna dari gambar atau objek, dan Library Panel yang menyimpan objek-objek
seperti movie clip, grafik, button, sound, video dan lain-lain.
Panel di bagian bawah jendela Macromedia Flash terdiri dari Panel Action untuk
memberikan perintah Action Script pada Frame ataupun Objek, dan Panel Properties yang
berisi pengaturan dokumen, objek, tools dan lain sebagainya.
1.2 Toolbox
Tool Fungsi
Sub Selection Tool(A) untuk menyeleksi objek lebih detail dari Selection Tool.
2
Modul Praktikum Multimedia
Blank Keyframe
Frame
Keyframe
3
Modul Praktikum Multimedia
Frame
Frame merupakan tempat dari objek yang kita buat berada, isi dari frame akan selalu
sama dengan keyframe Sebelumnya. Untuk menambahkan frame dapat dilakukan
dengan klik kanan dan Pilih Insert Frame.
Keyframe
Keyframe merupakan frame dimana kita bisa meletakkan objek, keyframe digunakan
untuk menempatkan perubahan gambar atau objek dark animasi. Untuk
menambahkan keyframe dapat dilakukan dengan klik kanan dan pilih Insert
Keyframe.
Blank Keyframe
Frame yang kosong. Dilambangkan dengan bulatan putih. Dan apabila blank
keyframe ini berisi objek maka frame ini akan berubah menjadi keyframe. Untuk
menambahkan Blank keyframe dapat dilakukan dengan klik kanan dan pilih Insert
Blank Keyframe.
4
Modul Praktikum Multimedia
1.3.2 Layer
Layer pada Flash dianalogikan sebagai sebuah media gambar yang transparan. Kita
dapat menghasilkan komposisi gambar dengan menumpuk beberapa gambar yang
dibuat pada media transparan. Gambar pada lapisan bawah akan tertutup oleh gambar
pada lapisan atasnya, akan tetapi gambar pada lapisan bawah dapat terlihat di bagian
yang kosong dari lapisan atasnya.
menggunakan tombol Insert Layer atau dengan klik kanan pada Layer
sebelumnya dan pilih Insert Layer
5
Modul Praktikum Multimedia
Gambar yang sudah jadi juga dapat diubah menjadi simbol. Pilih gambar di stage
kemudian dari menu bar pilih Insert > Convert to Symbol.
Library merupakan tempat penyimpanan dari simbol-simbol yang telah kita buat,
simbol-simbol tersebut dapat kita gunakan sewaktu-waktu dengan mengambilnya dari
dalam Library.
6
Modul Praktikum Multimedia
BAB II
ANIMASI DASAR
Pada Bab II ini kita akan mempelajari dasar-dasar pembuatan animasi pada Macromedia Flash 8,
diantaranya adalah Tween Motion, Tween Shape, Animasi Guide dan Animasi Mask.
b. Buatlah sebuah Objek dengan Rectangular Tool atau Oval Tool pada frame 1 di Layer 1.
c. Buat sebuah Keyframe baru dengan cara, Klik kanan pada frame 15(dapat disesuaikan)
lalu pilih Insert Keyframe.
7
Modul Praktikum Multimedia
e. Klik kanan di frame antara keyframe 1 dan 15, lalu pilih Create Motion Tween.
f. Setelah muncul tanda panah di frame tersebut berarti Motion Tween telah berhasil kita
buat.
8
Modul Praktikum Multimedia
g. Jalankan Animasi dengan Memilih menu Control > Test Movie (Ctrl+Enter).
9
Modul Praktikum Multimedia
c. Ubah objek teks tersebut menjadi Shape dengan cara Klik kanan > Break Apart. Lakukan
Break Apart sebanyak 2 kali sampai menjadi objek shape.
10
Modul Praktikum Multimedia
g. Setelah muncul tanda panah pada frame berarti Tween Shape telah berhasil dibuat.
h. Jalankan Animasi dengan Memilih menu Control > Test Movie (Ctrl+Enter).
11
Modul Praktikum Multimedia
c. Buat Layer Guide dengan cara pilih menu Insert > Timeline > Motion Guide. Atau
dengan klik tombol Add Motion Guide yg ada pada panel Timeline.
f. Klik kanan pada frame 20 di Guide Layer lalu pilih Insert Frame.
12
Modul Praktikum Multimedia
g. Pindahkan objek lingkaran di frame 20 Layer 1 ke ujung garis yang lain menggunakan
Selection Tool(V). Pastikan titik tengah lingkaran berada tepat dengan ujung garis.
h. Lakukan Test Movie (Ctrl+Enter). Dapat dilihat bahwa objek lingkaran akan bergerak
mengikuti garis Guide yang kita buat.
13
Modul Praktikum Multimedia
b. Buatlah objek teks pada frame 1 Layer 1 dengan Text Tool, buat tulisan
“MULTIMEDIA”.
c. Tambahkan 2 buah Layer baru dengan cara pilih menu Insert > Timeline > Layer. Atau
dengan klik tombol Insert Layer yang ada pada Panel Timeline.
d. Copy objek teks “MULTIMEDIA” yang ada pada frame 1 Layer 1 dengan klik kanan
pada objek lalu pilih Copy. Setelah itu masuk ke frame 1 Layer 3 dan klik kanan pada
stage lalu pilih Paste in Place.
14
Modul Praktikum Multimedia
Objek teks pada frame 1 Layer 1 di Copy kemudian di Paste in Place pada frame 3
Layer 3
e. Insert frame pada frame 20 di Layer 1 dan 3.
f. Pada frame 1 Layer 2 buat objek dengan Rectangle Tool(R). Ganti Fill Color dengan
warna Gradient.
g. Untuk mengatur warna objek dapat dilakukan dengan mengedit property pada panel
Color Mixer di sebelah kanan window.
h. Buat Keyframe pada frame 20 Layer 2. Kemudian buatlah Animasi Tween Motion untuk
objek persegi tersebut.
15
Modul Praktikum Multimedia
16
Modul Praktikum Multimedia
Variabel adalah suatu penampung data. Penulisan variable ada aturannya juga, diantaranya :
Tidak boleh menggunakan variabel yang sama dengan keyword atau literal dari Action
Script sendiri, contoh true,false, null, dll.
Variabel harus unik, artinya nama variabel yang satu harus beda dengan nama variabel
yang lainnya, contoh kingkong1, kingkong2.
Operator
Operator digunakan untuk memanipulasi variabel. Macam-macam operator :
17
Modul Praktikum Multimedia
18
Modul Praktikum Multimedia
Ubah objek tersebut menjadi Symbol Movie Clip dengan klik kanan pada objek
kemudian pilih Convert to Symbol… beri nama simbol dan pilih Type Movie Clip.
Masuk ke panel Action untuk memberikan Action Script pada objek tersebut. Klik
kanan pada objek dan pilih Action.
19
Modul Praktikum Multimedia
BAB III
TUTORIAL INTERAKTIF
3.1. Elemen-elemen dasar pada Tutorial Interaktif
Macromedia Flash 8 saat ini banyak digunakan untuk pembuatan presentasi, Tutorial
Interaktif ataupun Company Profile. Kali ini kita akan mempelajari pengaplikasian
system Multimedia dengan menggunakan Macromedia Flash 8 untuk membuat sebuah
tutorial interaktif. Sebelum itu kita perlu mengetahui beberapa elemen yang harus ada
dalam sebuah tutorial interaktif.
Design Layout
Membuat sebuah Design Layout untuk Tutorial Interaktif tidaklah mudah dan harus
sesuai dengan Tutorial yang akan kita buat. Sebuah Tutorial Interaktif sebaiknya
memiliki tampilan yang menarik bagi user. Design yang menarik akan disukai oleh
para user dan juga dapat menjadi nilai lebih dari Tutorial yang kita buat. Pemilihan
design yang tepat dan sesuai dengan tema sangat diperlukan, misalkan kita membuat
sebuah Tutorial untuk anak usia TK maka sebaiknya kita membuat design yang
disukai oleh anak-anak TK. Gunakanlah pilihan warna-warna yang cerah dan disukai
oleh anak-anak serta gunakanlah gambar-gambar kartun untuk lebih menarik
perhatian dan membuat anak-anak betah menggunakan Tutorial yang kita buat.
Materi Tutorial
Pemilihan isi materi dalam sebuah Tutorial Interaktif disini sangatlah penting. Materi
yang kita buat harus sesuai dengan apa yang dibutuhkan oleh user, seperti untuk
Tutorial Pendidikan harus disesuaikan dengan Kurikulum Pendidikan terkini.
Penyampaian materi sebaiknya jangan terlalu rumit agar user dapat dengan mudah
memahami isi dari Tutorial.
Menu
Menu pada sebuah Tutorial Interaktif bisa dikatakan sebagai navigator yang akan
menuntun user ke isi dari materi yang ada. Menu sebaiknya jelas dan tidak
membingungkan user, sehingga user tidak tersesat dalam Tutorial yang kita buat. Jika
dirasa perlu buatlah sebuah menu Help yang berisi informasi mengenai Tutorial dan
fungsi dari button-button menu untuk lebih memudahkan user.
Animasi dan Pendukung lainnya
20
Modul Praktikum Multimedia
Animasi adalah nilai lebih dari sebuah Tutorial Interaktif dengan Flash. Dengan
adanya animasi maka akan mempermudah user untuk memahami isi materi lebih
jelas. Karena contoh secara visual dengan animasi akan lebih mudah dimengerti
daripada menyampaikan materi dengan teks atau tulisan saja. Terutama jika target
user adalah anak-anak usia TK yang belum bisa membaca dan memahami tulisan.
Penggunaan animasi akan sangat membantu dalam hal ini. Selain animasi kita juga
bisa menambahkan video yang berisi contoh dalam Tutorial Interaktif, video juga
merupakan elemen pelengkap yang bisa digunakan untuk menyampaikan materi
secara visual. Dan satu lagi pendukung untuk Tutorial Interaktif yaitu sound.
Pemilihan sound yang sesuai dan tepat akan menjadikan Tutorial yang kita buat lebih
menarik.
3.2. Membuat Layout (Design)
Membuat design layout dapat dilakukan dengan menggunakan software pengolah gambar
lain seperti Photoshop, CorelDraw dan sebagainya yang kemudian dapat di ekspor ke library
Macromedi Flash. Atau dapat juga langsung dibuat di Flash dengan menggunakan Tool-tool
yang ada. Di bawah ini ada beberapa model area layout yang dapat digunakan sebagai acuan
dasar pembuatan layout sebuah Tutorial Interaktif.
21
Modul Praktikum Multimedia
Selain dari beberapa contoh acuan di atas kita juga dapat mengkreasikan bentuk layout
Tutorial Interaktif sesuai dengan kreatifitas kita.
3.3. Membuat Menu
Membuat Button
Langkah untuk membuat button menu adalah sebagai berikut:
Buatlah sebuah objek berbentuk persegi dengan Rectangle Tool(R)
Seleksi objek persegi dan teks tersebut kemudian klik kanan > Convert to Symbol..
Berikan nama tombol dan pilih type Button, kemudian tekan Ok.
Objek Button telah jadi. Untuk mengedit objek tersebut dapat dilakukan dengan klik 2x
pada objek button tersebut. Setelah itu akan masuk ke panel Timeline khusus symbol
button yang terdiri dari 4 macam frame yaitu Up, Over, Down, Hit.
22
Modul Praktikum Multimedia
Frame Up adalah frame tampilan awal dari button sebelum diarahkan pointer. Over
adalah frame tampilan button saat mouse diarahkan di atas button. Down adalah frame
tampilan button setelah di-Klik. Dan Hit adalah area button dapat dieksekusi.
Klik kanan pada frame Over tersebut lalu pilih Insert Keyframe.
Ganti warna pada fill color lalu pilih Paint Bucket Tool lalu klik pada objek persegi.
Insert keyframe lagi pada frame Down dan ganti juga fill color dan warna teks.
Tambahkan lagi keyframe pada frame Hit tanpa perlu merubah warna. Ukuran persegi
akan menjadi area eksekusi dari button.
Lakukan Test Movie(Ctrl+Enter) untuk melihat perubahan button sebelum pointer
mouse diarahkan, saat pointer mouse di atas button dan saat button di-Klik.
Buatlah 2 buah layer, layer pertama beri nama Tombol dan layer kedua beri nama Isi.
23
Modul Praktikum Multimedia
Buatlah beberapa buah button pada layer Tombol frame 1, contoh disini menggunakan
teks yang di Convert menjadi button. Insert frame pada frame 5 layer Tombol.
Buat keyframe pada frame 2, 3, dan 4 pada layer Isi. Buatlah objek dengan Rectangle
Tool(R) pada frame tersebut dan beri fill color merah pada objek di frame 2, fill color
kuning pada objek di frame 3 dan fill color hijau pada objek di frame 4.
Berikan Action Script pada frame 1 layer Tombol dengan script berikut.
Button “Kuning”:
24
Modul Praktikum Multimedia
Button “Hijau”:
25
Modul Praktikum Multimedia
Ambil button pada folder Classic Button > Playback > gel Left, drag button tersebut ke
Stage pada layer Button frame 1.
Lakukan transformasi pada button. Pilih menu Modify > Transform > Rotate 90° CW
sehingga arah button menjadi ke atas.
Tambahkan satu lagi button seperti di atas dan lakukan transform Rotate 90° CCW.
Sehingga nanti posisi kedua button akan seperti dibawah ini.
26
Modul Praktikum Multimedia
Berikan Instance name di properties pada button yang atas dengan nama „btn1‟ dan
button yang bawah dengan nama „btn2‟
Masukkan teks yang panjang pada layer Teks frame 1 dengan menggunakan Text
Tool(T).
27
Modul Praktikum Multimedia
Geser objek teks pada layer tersebut ke atas hingga akhir tulisan.
Berikan Masking pada Layer Mask dengan klik kanan pada layer lalu pilih Mask.
28
Modul Praktikum Multimedia
Hapus Action Script yang ada pada button bawah di frame 20. Kemudian berikan Action
Script pada button atas sebagai berikut.
Sekarang kita tambahkan Effect Button disable agar pada saat posisi awal button atas
tidak dapat di-Klik dan pada saat posisi scroll berakhir button bawah tidak dapat di-Klik.
Insert Keyframe pada frame 2 dan 19 di layer Button.
29
Modul Praktikum Multimedia
Insert Keyframe pada frame 20 layer Action dan berikan Script sebagai berikut pada
frame tersebut.
Setelah itu lakukan Export Movie. File > Export > Export Movie…
Kemudian bukalah file .swf hasil dari Export Movie tersebut. Movie akan tampil secara
fullscreen.
3.6. Membuat Tombol Close
Tombol Close akan memudahkan kita untuk keluar dari Movie yang sudah di fullscreen.
Langkah-langkah membuatnya adalah sebagai berikut.
30
Modul Praktikum Multimedia
Pada salah satu frame(missal: frame1 layer 1) buatlah sebuah objek dengan menggunakan
Oval Tool(O), ukuran lingkaran tidak usah terlalu besar.
Gunakan Text Tool(T) untuk membuat objek tanda silang menggunakan huruf “X”.
Seleksi seluruh objek tersebut kemudian Convert to Symbol dan jadikan button.
31
Modul Praktikum Multimedia
Berikan Script Stop pada frame 15 agar movie tidak berlanjut ke frame berikutnya.
3.7. Video/Movie
Import .swf Movie
Sebelum meng-Import Movie siapkan sebuah file .swf Movie yang akan di Import. Sebagai
contoh disini kita menggunakan file .swf dengan nama “mobil..swf”.
Buat file flash baru (Ctrl+N).
Buatlah sebuah objek dengan Rectangle Tool(R)
32
Modul Praktikum Multimedia
Setelah itu berikan Instance Name pada Movie Clip tersebut dengan nama “stage”.
“mobil..swf” adalah nama file yang akan di load. Area adalah Instance name dari movie
clip yang akan menjadi tempat .swf Movie ditampilkan.
Simpan file, kemudian Export Movie. Pastikan file disimpan dalam satu folder yang
sama dengan file .swf Movie yang di load.
Import File Video
Kita dapat memasukkan file video ke dalam file flash. Format-format video yang dapat
diimport antara lain *.mpeg, *.avi, *.flv. Berikut adalah langkah-langkah mengimport video.
Buka file flash baru (Ctrl+N).
Pilih menu File > Import > Import to Library. Pilih file video yang akan diimport.
Setelah itu akan muncul kotak dialog import. Pastikan file video yang diimport sudah
sesuai kemudian klik Next.
33
Modul Praktikum Multimedia
Akan muncul pilihan Deployment video. Pilih Embed video in SWF play in Timeline.
Kemudian klik Next.
Kemudian akan mucul pilihan Embedding. Pilih symbol type Embeded Video kemudian
klik Next.
34
Modul Praktikum Multimedia
Kita juga dapat menambahkan beberapa navigasi seperti Play, Stop dan Pause untuk video
tersebut.
35
Modul Praktikum Multimedia
Ambil button pada Common Libraries. Window > Common Libraries > Button.
Pilih button pada Classic Button > Playback. Button gel Right untuk Play, Button gel
Stop untuk Stop dan Button gel Pause untuk Pause.
36
Modul Praktikum Multimedia
3.8. Audio/Sound
Langkah-langkah meng-Import file sound adalah sebagai berikut:
Pilih menu File > Import > Import to Library
37
Modul Praktikum Multimedia
Pilih Layer 1 lalu pada panel Property Pilih Loop agar sound diulang terus menerus.
Ket:
- Sound : Untuk memilih file suara yang sudah diimport ke Library.
- Effect : Untuk memberikan efek pada suara.
- Repeat : Untuk perulangan suara dengan jumlah perulangan tertentu.
- Loop : Untuk perulangan suara terus menerus.
Lakukan Test Movie.
38
Modul Praktikum Multimedia
Simpan file dalam satu folder yang sama dengan file .swf sound yg di load.
Lakukan Test Movie (Ctrl+Enter).
3.9. Publish Project
Pada Macromedia Flash terdapat fasilitas untuk mem-publish project Movie yang kita buat
menjadi ekstensi tertentu seperti *.EXE, *.HTML, *.MOV dsb. Disini kita akan mem-
publish project Movie kita menjadi *.EXE agar dapat dijalankan tanpa menggunakan flash
player. Langkah-langkahnya sebagai berikut.
Pilih menu File > Publish Setting(Ctrl+Shift+F12).
39
Modul Praktikum Multimedia
40
Modul Praktikum Multimedia
Nantinya Tutorial Interaktif yang kita buat akan dikemas dalam bentuk CD. Setelah di atas
kita membuat file *.exe selanjutnya adalah kita membuat file autorun agar file *.exe yang
telah kita buat dapat dibuka secara otomatis ketika CD dimasukkan ke dalam CD-ROM.
Buka program Notepad dari All Programs > Accessories
Ketikkan kode perintah Autorun. Fileflash.exe adalah contoh nama dari file.
Proses selanjutnya adalah melakukan Burning CD Interaktif yang telah kita buat. Isi di
dalam CD adalah file .exe dan file Movie pendukung lainnya serta file AUTORUN.inf
41