MODUL PRAKTIKUM
MULTIMEDIA
LAB. PENGOLAHAN CITRA & MULTIMEDIA
JURUSAN TEKNIK INFORMATIKA S-1
FAKULTAS TEKNOLOGI INDUSTRI
INSTITUT TEKNOLOGI NASIONAL MALANG
2011
1
Modul Praktikum Multimedia – Lab Pengolahan Citra & Multimedia
BAB I
PENGENALAN MACROMEDIA FLASH 8
1.1 Jendela Kerja
Sebelum kita memulai menggunakan Macromedia Flash 8 sebaiknya kita mengenal dulu
jendela kerja dari software ini. Area kerja dari Macromedia Flash 8 ini terbagi menjadi
beberapa bagian yakni Menubar, Toolbar, Timeline, Stage, dan Panel
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.
2
Modul Praktikum Multimedia – Lab Pengolahan Citra & 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
Selection Tool(V) untuk memilih atau menyeleksi suatu objek.
Sub Selection Tool(A) untuk menyeleksi objek lebih detail dari Selection Tool.
Free Transform Tool(Q) untuk mentransformasikan objek yang terseleksi
Gradient Transform Tool(F)
untuk mentransformasikan gradient fill objek yang
terseleksi
Line Tool(N) untuk membuat objek berupa garis
Lasso Tool(L)
untuk menyeleksi objek dengan menggambar sebuah
garis seleksi
Pen Tool(P)
untuk menggambar garis dengan bantuan titik bantu
seperti dalam pembuatan garis, kurva atau gambar.
Text Tool(T) untuk membuat objek teks
Oval Tool(O) untuk membuat objek berbentuk bulat atau oval
Rectangle Tool(R) untuk membuat objek berbentuk persegi panjang
Pencil Tool(Y) untuk membuat garis
Brush Tool(B) untuk membuat bentuk garis-garis dan bentuk bebas
Ink Bottle Tool(S)
untuk mengubah warna garis, lebar garis dan style garis
atau garis luar sebuah bentuk
3
Modul Praktikum Multimedia – Lab Pengolahan Citra & Multimedia
Paint Bucket Tool(K)
untuk mengisi area – area kosong atau digunakan untuk
mengubah warna area sebuah objek yang telah diwarnai.
Paint dapat digunakan untuk mewarnai warna solid,
pengisian warna gradasi dan pengisian bitmap
Eyedropper Tool(I)
untuk mengambil sample sebuah warna dari gambar atau
objek
Eraser Tool(E) untuk menghapus objek
Hand Tool(H)
untuk menggeser tampilan stage tanpa mengubah
pembesaran
Zoom Tool(M,Z) untuk memperbesar atau memperkecil tampilan stage
Stroke Color
digunakan untuk memilih atau memberi warna pada
suatu garis
Fill Color untuk memilih atau memberi warna pada suatu objek
Black and White, No
Color, Swap Color
Black And White digunakan hanya untuk warna hitam
putih, No color digunakan untuk menghilangkan warna
fill atau stroke suatu objek, Swap Color digunakan untuk
menukar warna fill atau stroke suatu objek
1.3 Elemen – elemen dasar Animasi
Dalam pembuatan animasi ada beberapa elemen penting yang harus diketahui sebagai dasar
yaitu Frame, Keyframe, Blank Keyframe, Layer, Simbol dan Library.
1.3.1 Frame, Keyframe dan Blank Keyframe
Keyframe
Frame Blank Keyframe
4
Modul Praktikum Multimedia – Lab Pengolahan Citra & 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.
5
Modul Praktikum Multimedia – Lab Pengolahan Citra & 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.
Kegunaan dari layer :
a. Membuat animasi lebih dari Satu
b. Untuk mengkoordinir elemen-elemen dalam suatu movie
c. Agar tidak terjadi pengirisan objek antara yang satu dengan objek yang lain.
d. Agar dapat lebih cepat menemukan objek, dan lain-lain.
Untuk menambahkan layer dapat menggunakan beberapa cara yaitu dengan
menggunakan tombol Insert Layer atau dengan klik kanan pada Layer
sebelumnya dan pilih Insert Layer
6
Modul Praktikum Multimedia – Lab Pengolahan Citra & Multimedia
1.3.3 Simbol dan Library
Simbol adalah sebuah objek yang dirubah menjadi objek yang dapat digunakan
berulang kali, Simbol dapat berupa Movie Clip, Button atau Graphic.
Movie Clip merupakan rangkaian gambar di dalamnya (seperti film). Secara default,
objek tersebut akan dimainkan berulang-ulang, Button berfungsi sebagai tombol yang
dapat di klik, Graphic merupakan simbol yang berupa gambar.
Untuk membuat simbol, pilih pada menu Insert > New Symbol untuk membuat
simbol baru. Kemudian tentukan behavior dari simbol.
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.
7
Modul Praktikum Multimedia – Lab Pengolahan Citra & 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.
2.1. Tween Motion
Tween motion adalah animasi pergerakan simbol dari satu posisi ke posisi lainnya. Berikut
adalah langkah-langkah untuk membuat animasi Tween Motion dengan sebuah objek
sederhana.
a. Buatlah file Flash baru (Ctrl+N). Pada General Panel pilih Flash Document lalu klik Ok.
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.
8
Modul Praktikum Multimedia – Lab Pengolahan Citra & Multimedia
d. Pindahkan posisi objek di frame 15 tersebut.
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.
9
Modul Praktikum Multimedia – Lab Pengolahan Citra & Multimedia
g. Jalankan Animasi dengan Memilih menu Control > Test Movie (Ctrl+Enter).
2.2. Tween Shape
Tween shape adalah animasi perubahan bentuk objek bentukan(shape), yaitu satu bentuk
dapat berupah ke bentuk lainnya selama terus menerus. Langkah-langkahnya tidak jauh
berbeda dengan membuat Tween Motion.
a. Buatlah file Flash baru (Ctrl+N). Pada General Panel pilih Flash Document lalu klik Ok.
b. Buatlah objek teks dengan Text Tool.
10
Modul Praktikum Multimedia – Lab Pengolahan Citra & Multimedia
c. Ubah objek teks tersebut menjadi Shape dengan cara Klik kanan > Break Apart. Lakukan
Break Apart sebanyak 2 kali sampai menjadi objek shape.
d. Buatlah Keyframe baru pada frame 20(dapat disesuaikan).
e. Hapus Objek yang ada pada frame 20 tersebut, buat objek teks seperti pada point b di
atas (buat tulisan “shape”), lanjutkan dengan melakukan Break Apart seperti point c di
atas.
f. Klik frame 1 lalu pada Tab Properties pilih Tween Shape.
11
Modul Praktikum Multimedia – Lab Pengolahan Citra & 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).
2.3. Animasi Guide
Animasi Guide adalah animasi pergerakan yang mengikuti arah garis(guide) yang kita buat.
Langkah-langkahnya adalah sebagai berikut.
a. Buatlah file Flash baru (Ctrl+N). Pada General Panel pilih Flash Document lalu klik Ok.
b. Buatlah sebuah objek dengan Oval Tool pada frame 1 Layer 1.
12
Modul Praktikum Multimedia – Lab Pengolahan Citra & 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.
d. Buat Keyframe baru pada frame 20 lalu Create Motion Tween.
e. Buat sebuah garis dengan Pencil Tool pada Guide Layer.
f. Klik kanan pada frame 20 di Guide Layer lalu pilih Insert Frame.
13
Modul Praktikum Multimedia – Lab Pengolahan Citra & 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.
2.4. Animasi Mask
Mask artinya penutup yang menutupi suatu layer. Mask dapat berfungsi ketika suatu layer di-
Masking untuk menutupi layer yang diberada dibawahnya. Animasi Mask ini biasa
digunakan untuk membuat efek kilatan pada teks.
a. Buatlah file Flash baru (Ctrl+N). Pada General Panel pilih Flash Document lalu klik Ok.
14
Modul Praktikum Multimedia – Lab Pengolahan Citra & 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.
15
Modul Praktikum Multimedia – Lab Pengolahan Citra & Multimedia
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.
Objek teks pada frame 1 Layer 1 di Copy kemudian di Paste in Place pada frame 3
Layer 3
16
Modul Praktikum Multimedia – Lab Pengolahan Citra & Multimedia
i. Klik kanan pada Layer 3 dan pilih Mask.
j. Lakukan Test Movie (Ctrl+Enter).
2.5. Action Script 2.0
Macromedia flash memiliki fasilitas Action Script digunakan agar suatu project multimedia
lebih interaktif dan memiliki kecanggihan khusus. Seperti halnya pada pembuatan presentasi,
Tutorial Interaktif, ataupun Peta(map). Action Script yang digunakan pada versi Macromedia
Flash 8 adalah Action Script 2.0.
Tipe Data dan Variabel
17
Modul Praktikum Multimedia – Lab Pengolahan Citra & 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 :
18
Modul Praktikum Multimedia – Lab Pengolahan Citra & Multimedia
Contoh penggunaan Action Script :
Membuat Animasi Motion
Sebelumnya telah kita pelajari membuat animasi motion(pergerakan) dengan menggunakan
Tween Motion. Kali ini kita akan membuat animasi motion hanya dengan menggunakan
Action Script 2.0
Buat sebuah objek dengan Oval Tool.
19
Modul Praktikum Multimedia – Lab Pengolahan Citra & 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.
Masukkan Script di bawah Ini.
onClipEvent(enterFrame){
_x+=15;
}
Lakukan Test Movie (Ctrl+Enter)
20
Modul Praktikum Multimedia – Lab Pengolahan Citra & 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
21
Modul Praktikum Multimedia – Lab Pengolahan Citra & 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.
22
Modul Praktikum Multimedia – Lab Pengolahan Citra & 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)
Buat teks dengan Text Tool(T) di atas objek persegi tersebut.
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.
23
Modul Praktikum Multimedia – Lab Pengolahan Citra & 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.
Link Button ke Frame Tertentu
Setelah button kita buat maka selanjutnya adalah membuat link ke suatu frame.
Buatlah 2 buah layer, layer pertama beri nama Tombol dan layer kedua beri nama Isi.
24
Modul Praktikum Multimedia – Lab Pengolahan Citra & 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.
Berikan Script pada masing-masing button sebagai berikut :
Button “Merah” :
Button “Kuning”:
25
Modul Praktikum Multimedia – Lab Pengolahan Citra & Multimedia
Button “Hijau”:
Lakukan Test Movie(Ctrl+Enter)
3.4. Membuat Text Scrolling
Text Scrolling digunakan untuk teks isi materi tutorial yang panjang. Dengan menggunakan
teks scrolling kita dapat meminimalisir area untuk menampilkan teks tersebut.
Langkah untuk membuat Text Scrolling adalah sebagai berikut :
Buat 4 layer baru pada Timeline. Masing-masing beri nama layer Action, Mask, Teks,
Button.
Buat objek dengan menggunakan Rectangle Tool(R) pada layer Mask.
Buka menu Window > Common Libraries > Button
26
Modul Praktikum Multimedia – Lab Pengolahan Citra & 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.
27
Modul Praktikum Multimedia – Lab Pengolahan Citra & 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).
Insert frame pada frame 20 layer Mask
28
Modul Praktikum Multimedia – Lab Pengolahan Citra & Multimedia
Insert Keyframe pada frame 20 layer Teks
Geser objek teks pada layer tersebut ke atas hingga akhir tulisan.
Tambahkan Tween Motion diantara frame 1 sampai 20 di layer Teks.
Berikan Masking pada Layer Mask dengan klik kanan pada layer lalu pilih Mask.
Berikan Action Script pada button bawah sebagai berikut.
29
Modul Praktikum Multimedia – Lab Pengolahan Citra & Multimedia
Insert Keyframe pada frame 20 layer button
Hapus Action Script yang ada pada button bawah di frame 20. Kemudian berikan Action
Script pada button atas sebagai berikut.
Berikan Script Stop pada frame 1 layer Action.
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.
Berikan Script pada masing-masing button di frame 2 dan 19.
Untuk button atas berikan Script:
Untuk button bawah berikan Script:
Tambahkan Script sebagai berikut pada frame 1 layer Action.
30
Modul Praktikum Multimedia – Lab Pengolahan Citra & Multimedia
Insert Keyframe pada frame 20 layer Action dan berikan Script sebagai berikut pada
frame tersebut.
Lakukan Test Movie (Ctrl+Enter)
3.5. Membuat Tampilan Fullscreen
Biasanya kalu kita membuat sebuah .swf Movie di flash tampilannya saat dijalankan akan
sesuai dengan pengaturan ukuran dokumen pada panel properties. Misalkan 800x600 pixels.
Untuk bisa menampilkan .swf Movie secara fullscreen ketika dibuka kita bisa menambahkan
Script pada frame 1. Scriptnya adalah sebagai berikut.
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.
31
Modul Praktikum Multimedia – Lab Pengolahan Citra & 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”.
Break Apart teks tersebut. Klik kanan > Break Apart.
Seleksi seluruh objek tersebut kemudian Convert to Symbol dan jadikan button.
Insert Keyframe pada frame paling akhir(misal : frame 16)
Berikan Script pada Button Close.
32
Modul Praktikum Multimedia – Lab Pengolahan Citra & Multimedia
Berikan Script Stop pada frame 15 agar movie tidak berlanjut ke frame berikutnya.
Berikan Script pada frame 16.
Export Movie dan jalankan file .swf nya.
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)
Convert objek tersebut menjadi Movie Clip.
33
Modul Praktikum Multimedia – Lab Pengolahan Citra & Multimedia
Ubah Registration Pointnya ke pojok kiri atas. Kemudian tekan Ok.
Setelah itu berikan Instance Name pada Movie Clip tersebut dengan nama “stage”.
Tambahkan satu buah layer lagi pada Timeline.
Berikan Script pada frame 1 di layer 2.
“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.
34
Modul Praktikum Multimedia – Lab Pengolahan Citra & 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.
35
Modul Praktikum Multimedia – Lab Pengolahan Citra & Multimedia
Kemudian muncul tampilan terakhir. Klik Next.
Setelah itu drag Embedded video yang ada di Library ke Stage
File video sudah berhasil diimport ke dalam file Flash.
Kita juga dapat menambahkan beberapa navigasi seperti Play, Stop dan Pause untuk video
tersebut.
36
Modul Praktikum Multimedia – Lab Pengolahan Citra & 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.
Atur posisi button di bawah video.
Setelah itu pilih frame 1 lalu tambahkan Script stop.
37
Modul Praktikum Multimedia – Lab Pengolahan Citra & Multimedia
Kemudian berikan Script berikut pada tombol Play.
Kemudian berikan Script berikut pada tombol Stop.
Kemudian berikan Script berikut pada tombol Pause.
Lakukan Test Movie(Ctrl+Enter)
3.8. Audio/Sound
Langkah-langkah meng-Import file sound adalah sebagai berikut:
Pilih menu File > Import > Import to Library
Pilih file sound yang akan diimport.
38
Modul Praktikum Multimedia – Lab Pengolahan Citra & Multimedia
Drag file yang sudah diimport di Library ke stage.
Sehingga akan tampil garis frekuensi suara di frame 1.
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.
Menggunakan Suara dari file .swf
Menggunakan suara dari file .swf berguna agar ukuran file animasi menjadi lebih ringan.
Karena file .swf yang berisi suara dipisahkan dari file Movie utama. Sebelumnya lakukan
Import sound seperti langkah sebelumnya di atas dan simpan file .swf dari sound tersebut,
misalkan dengan nama “sound.swf”.
Buka file flash baru (Ctrl+N).
Ambil button gel Right untuk tombol menjalankan musik dan button gel Right untuk
tombol menghentikan musik dari Common Libraries.
39
Modul Praktikum Multimedia – Lab Pengolahan Citra & Multimedia
Berikan Script berikut pada button gel Right.
Berikan Script berikut pada button gel Stop.
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).
40
Modul Praktikum Multimedia – Lab Pengolahan Citra & Multimedia
Kemudian pada window Publish Setting pilih Type Windows Projector(.exe).
Setelah itu Klik Publish. Tunggu proses Publish hingga selesai.
3.10. Membuat File Autorun
41
Modul Praktikum Multimedia – Lab Pengolahan Citra & 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.
Klik menu File > Save As.
Simpan dalam folder yang sama dengan file .exe dengan nama AUTORUN.inf
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