Anda di halaman 1dari 42

Macromedia Flash MX

9 Belajar membuat animasi dengan menggunakan Macromedia Flash MX


9 Menggunakan berbagai macam efek animasi
9 Memahami penggunaan Actionscript
9 Membuat presentasi multimedia

Macromedia Flash MX Page 1 of 41


Bagian 1
Perkenalan lingkungan kerja dan tools-tools
Macromedia Flash adalah sebuah tool yang dapat digunakan untuk membuat
berbagai macam animasi, presentasi, game bahkan perangkat ajar. Selain itu Flash MX
ini dapat digunakan sebagai tool untuk mendesain web, dan berbagai aplikasi
multimedia lainnya.

Start Page

Ada beberapa menu di halaman awal macromedia Flash MX professional 2004, yaitu:

Open a Recent Item


Merupakan kategori yang menampilkan semua file / dokumen flash yang sudah
dibuat dalam ekstension .fla

Open
Merupakan perintah untuk membuka dokumen yang sudah pernah dibuat
namun tidak tercakup di Open Recent Item karena keterbatasan tempat.

Macromedia Flash MX Page 2 of 41


Create New
Merupakan perintah untuk membuat dokumen/ file flash baru.

Create from Template


Merupakan template yang disediakan oleh Macromedia dalam bentuk user
Interface

Extend
Perintah ini akan memanggil situs web macromedia untuk sesion Exchange.

Learn
Merupakan perintah untuk menuju ke halaman bantuan Flash (Help).

Pertama-tama kita harus mengenal terlebih dahulu lingkungan kerja Macromedia


Flash. Pada bagian kiri terdapat Tools, di bagian atas tengah Timeline, yang
digunakan untuk mengatur timeline animasinya, dan pada bagian tengah-tengah
terdapat Stage yaitu bagian yang visible secara visual saat di-publish atau di preview
di browser.

TimeLine

T
o
o W
l o
s Stage r
B k
o
x A
r
e
a

Macromedia Flash MX Page 3 of 41


Status Bar
Gambar di samping adalah menu status bar yang digunakan untuk
merubah zooming/ukuran stage secara keseluruhan, Option Fit in
Window akan menampilkan stage saja, Option Show Frame akan
Menampilkan Stage beserta Work Area, dan bila Show All akan ber
-fokus pada objek yang ada.

Hal-hal penting untuk diketahui :


Untuk merubah warna background dan ukuran stage dapat dilakukan dengan :
9 Klik kanan pada stage, lalu pilih Document Properties sehingga akan
mengeluarkan dialog box seperti gambar di bawah.
9 Atau dengan cara memilih menu Modify>Document (Ctrl+J).

Ukuran stage dapat diubah pada option Dimensions dimana width untuk lebar stage
dan height untuk tinggi stage, lebar dan tinggi minimum adalah 1 px, lebar dan tinggi
maximum adalah 2880 px.
Pada option Match :

9 Printer
Untuk merubah stage ke ukuran maximum available print area (ukuran stage
akan mengikuti besarnya kertas yang dipakai).

9 Contents
Untuk menyesuaikan lebar dan tinggi Stage dengan objek yang ada, bila objek
ditempatkan tepat di kiri atas Stage maka lebar stage akan sama besar dengan
objek, bila tidak maka jarak dari kiri dan atas stage ke objek akan sama
dengan jarak kanan bawah stage.

9 Default
Untuk merubah stage ke ukuran standard yaitu 550 x 400 pixel.

Macromedia Flash MX Page 4 of 41


Tools Box

Tools digunakan untuk menggambar dan memanipulasi gambar /objek.

Tools terbagi menjadi 4 bagian besar yaitu :

Tools pada bagian ini digunakan untuk mengedit dan memanipulasi


objek.

View pada bagian ini digunakan untuk memperbesar maupun


memperkecil layar monitor.

Colors pada bagian ini terdapat pallet untuk mengganti warna outline
dan fill.
Option bagian ini merupakan modifiers dari setiap tool yang dipilih,
Setiap tool mempunyai modifiers yang berbeda-beda.

Menggambar dengan Macromedia Flash

Selection tools

Tools ini biasanya digunakan untuk menseleksi object secara spesifik, dimana objek
dalam flash yang divisualisasikan di stage dapat dibagi menjadi beberapa bagian yaitu
shape dan symbol. Perbedaan mendasar pada shape dan symbol adalah bila kita
membuat shape maka shape tersebut tidak akan tersimpan dalam library, objek ini
akan tersimpan dalam keyframe dan frame dalam timeline bersangkutan.

Selection tool(V)
Tools ini digunakan untuk menyeleksi gambar secara langsung.

Cara penggunaan :
1. Pilih select area (dengan mengklik kanan mouse lalu ditahan sambil di drag
mousenya).
2. Select area terpilih.
3. Lakukan perubahan pada daerah yg terpilih (misal delete, memindahkan
tempat,dll).

Macromedia Flash MX Page 5 of 41


Modifier yang ada pada tool ini adalah :

Snap to Snap to object, bila option ini aktif maka pada saat
object membuat atau memindahkan objek maka akan di-
snaping antara satu objek ke objek lainnya.
Straighten

Smooth Smooth, option ini digunakan untuk menghaluskan


outline yang telah dibuat, caranya seleksi outline yang
akan di modify lalu click option ini.
Straighten, option ini digunakan untuk meluruskan garis-garis outline yang telah
dibuat, cara pakai sama seperti smooth.

Subselection Tool (A)

Tool ini digunakan untuk menyeleksi dan mengedit vertex-vertex yang terdapat dalam
suatu objek.

1. Memilih objek.
2. Objek terpilih dengan vertex-vertexnya.
3. Kita bisa mengadakan manipulasi terhadap vertex(contoh ditarik melebar).
4. Objek telah termanipulasi dangan bantuan Subselection Tool.

Tidak terdapat modifier untuk tool ini.

Lasso tool

Tool ini digunakan untuk memilih objek sesuai dengan pergerakan mouse, lain halnya
dengan selection tool diatas yang memilih objek dengan bentuk persegi panjang.

1 2 3

1. Pilih objek yang akan dimanipulasi dengan menggerakan mouse melewati objek
membentuk pola yang diinginkan.
2. Batasan objek telah terpilih sesuai pola yang diinginkan(daerah yang terasir).
3. Lalu kita gunakan selection tool untuk mendrag daerah terasir tersebut ke arah
yang diinginkan.

Macromedia Flash MX Page 6 of 41


Modifier yang terdapat pada Lasso tool

Magic Wand Magic Wand, Jika pilihan Magic Wand diaktifkan maka
daerah yang di select akan sesuai dengan aturan pada
Magic Wand magic wand propertiesnya.
Properties

Magic Wand Properties, Mengatur setingan dari magic


Poligon Mode Wand seperti apakah edge yang di select akan smooth,
Normal, dan sebagainya.

Poligon Mode, Jika pilihan Poligon ini diaktifkan maka


Daerah diselect dengan menggunakan batas-batas edge
Yang lurus.

Drawing tools

Dengan tools yang ada pada drawing tools kita dapat membuat ilustrasi sendiri, semua
object yang kita buat berupa shape.

Line Tool(N)
Tool ini digunakan untuk membuat garis.

9 gunakan tombol shift bila ingin mendapatkan garis lurus.

Oval Tool(O)
Tool ini digunakan untuk membuat bentuk oval.

9 gunakan tombol shift untuk membuat lingkaran penuh.

Rectangle Tool(R)
Tool ini digunakan untuk membuat persegi panjang
9 gunakan tombol shift untuk membuat bujur sangkar.
9 pilih custom pada menu properties untuk membuat rectangle lebih unik.

PolyStar Tool
Tool ini digunakan untuk membuat poligon misal segi-4, segi-5,dsb.
Untuk memilih segi poligon tersebut dpt dilihat di menu plg properties yg ada paling
bawah lalu pilih options. Lalu diisi saja Number of Sides yg dikehendaki.

Macromedia Flash MX Page 7 of 41


Pen Tool(P)
Tool ini berfungsi untuk menggambar path yang presisi dengan garis lurus atau
lengkung.

Untuk menggambar garis lurus, caranya klik pada titik pertama dan klik pada titik
kedua sehingga terbentuk satu segmen garis.
9 Gunakan shift untuk mendapatkan garis dengan arah kelipatan 45 derajat.
Untuk menggambar garis lengkung, caranya klik pada titik pertama lalu drag pada titik
kedua.

Macromedia Flash MX Page 8 of 41


Pencil Tool(Y)
Tool ini digunakan untuk menggambar garis, kurva dan bentuk lain seperti halnya kita
menggambar dengan pensil.

Modifier untuk tool ini adalah

Straighten, semua garis yang digambar akan bersifat kaku.


Smooth, semua garis yang digambar akan bersifat lengkung.
Ink, semua garis yang digambar akan sesuai dengan
pergerakan mouse.

Brush Tool(B)
Tool ini digunakan untuk melukis, dimana warna yang diwakili adalah warna fill.
Sehingga tipe dari object yang anda buat dengan Brush Tool adalah fill bukan outline.

Modifier untuk tool ini adalah


Lock Fill Lock Fill, dengan aktifnya option ini kita dapat
mengikuti pola warna dari object yang di fill sebelumnya.
Brush type
Ini akan sangat efektif pada saat kita memakai gradiasi.
Brush size
Brush Type, pada option ini kita dapat memilih
Brush shape beberapa mode dengan fungsi tertentu.(liat gambar).

Brush size, menentukan ukuran dari brush yang


dipakai.

Brush shape, menentukan bentuk dari brush yang


dipakai.

Brush Type

Macromedia Flash MX Page 9 of 41


Eyedropper Tool
Tool ini untuk mengambil sample warna dari fill dan stroke dimana toolnya akan
berubah sesuai dengan sumber dari warna yang diambil,bila yang diambil dari stroke
maka akan berubah menjadi Ink dan bila fill akan berubah menjadi Paint bucket.

Eraser tool
Tool ini digunakan untuk menghapus shape baik fill maupun stroke.
Modifier untuk tool ini adalah:

Faucet, menghapus semua fill yang berwarna sama.

Faucet Eraser mode, sama seperti brush mode.


Eraser mode
Eraser shape, bentuk dari penghapus.
Eraser shape

Ink bucket tool & Paint bucket tool

ink paint

Ink bucket tool, mengganti warna outline/stroke(garis) dari suatu objek.


Paint bucket tool, mengganti warna fill dari suatu objek.

Fill Color dan Stroke


Untuk mengubah warna baik fill maupun stroke dapat dilakukan di color box tetapi
selain dari sini kita juga dapat merubah kedua warna tersebut dengan menggunakan
panel yaitu color swatch dan color mixer.

Untuk mengaksesnya,pilih menu Window > Design Panel >Color Mixer/Color


Swatches.

Macromedia Flash MX Page 10 of 41


Dari window color mixer ini, kita dapat mengisi warna dengan solid atau
gradiasi atau bitmap, gradiasi akan sangat mempengaruhi besarnya file.
Sedangkan dari window swatches adalah tempat kita menyimpan warna atau gradiasi
baru yang ingin dipakai lagi.

Macromedia Flash MX Page 11 of 41


Manipulasi gambar ( Transform )

Size and Rotate


Kita dapat mengaktifkan menu transform dengan memilih Window > Design Panel
> Transform.

Constrain, Mempertahankan rasio


awal antara lebar dan panjangnya

Selain dengan mengisi size and rotate pada window transform, kita juga dpt merubah
size dengan menclik kanan objek kemudian pilih free transform , lalu mendrag edge
pada objek (lihat gambar di bawah).

Sedangkan untuk rotate, kita dapat merubahnya dengan men-klik pada objek
kemudian pilih free transform, lalu mendekatkan mouse ke salah satu ujung edge
sampai lambang rotate muncul, kemudian kita drag sesuai kebutuhan kita(lihat
gambar dibawah).

Macromedia Flash MX Page 12 of 41


Layer
Layer digunakan untuk memisahkan objek yg satu dengan objek lainnya.

Untuk menambah layer klik pada gambar di kiri bawah(Insert Layer) pada window
TimeLine. Dalam layer mengandung prinsip tumpukan kertas transparan, artinya
objek pada layer di atas akan menimpa / menutupi objek yang dibuat pada layer
sebelum-sebelumnya.

Tulisan boboho ada pada layer 1

Objek elips pada layer 2

???Layer 1 ada di atas layer 2???


???maka objek pada layer 2 akan ditutupi oleh objek layer 1???

Macromedia Flash MX Page 13 of 41


Bagian 2
Animasi Dasar
Pada bagian ini kita akan mempelajari animasi-animasi dasar yang dikenal dengan
sebut tweening. Ada dua macam Motion dan Shape.

Motion
Kita akan mencoba untuk membuat animasi gerakan sederhana. Sebelumnya kita
akan mencoba menggerakkan suatu objek sederhana. Buatlah sebuah objek pada
stage. Kemudian setelah membuat objeknya, pada bagian frame klik kanan pilih
Create Motion Tween.

Kemudian pada frame 35 misalkan klik kanan pilih Insert Keyframe.


Setelah itu ubah posisi objek pada frame 35, misalkan di sebelah kanan. Maka dengan
menggunakan dua keyframe tersebut objek akan bergerak dari posisi awal perlahan-
lahan ke posisi akhirnya di frame 35. Lihat gambar berikut.

Macromedia Flash MX Page 14 of 41


Jalankan dengan menggunakan Ctrl + Enter, untuk melihat hasilnya. Pada keyframe
pertama letak objek adalah disebelah kiri, sedangkan pada keyframe kedua di 35
objek diletakkan pada posisi yang berbeda, maka objek tersebut akan dianimasikan
bergerak dari keyframe pertama ke keyframe kedua.

Objek akan bergerak dengan kecepatan yang ditentukan fps ( frame per second ).
Secara default nilai dari fps adalah 12 yang berarti setiap 12 frame lamanya adalah
satu detik. Kita dapat mengubah nilai default ini. Caranya masuk ke menu Modify >
Document.

Ubahlah nilai pada frame ratenya.


Dimension digunakan untuk mengatur ukuran stage yang diinginkan.
Background Color untuk menentukan warna background dari stage.
Dalam membuat animasi dengan menggunakan frame pada Timeline memiliki
Properties sendiri untuk memberikan efek tertentu pada animasinya. Kliklah pada
frame pertama animasi. Kemudian cek di bagian bawah terdapat Properties.

Macromedia Flash MX Page 15 of 41


Coba ubah nilai dari Ease, click tombol disebelahnya dan drag ke bawah. Maka
animasinya akan mendapat efek berangsur-angsur semakin cepat, nilai percepatannya
ditentukan dari nilai Easenya ( negatif untuk semakin cepat ). Ubah juga nilainya
menjadi Out untuk mendapatkan efek semakin lambat.

Kemudian coba juga ubah bagian Rotate, pilih CW ( Clockwise ) untuk searah jarum
jam atau CCW ( Counter Clockwise ) untuk berlawanan dengan jarum jam. Maka objek
akan berputar secara otomatis sejumlah yang ditentukan n times.

Mengimpor gambar
Kita dapat mengimpor gambar-gambar untuk dimasukkan ke dalam animasi flash kita.
Pada bagian file pilih Import > Import to Library. Kemudian pilihlah file gambar
yang ingin diimpor ke dalam Flash.

Macromedia Flash MX Page 16 of 41


Pilihlah gambar yang ingin dimasukkan ke library. Kemudian klik Open.
Untuk membuka library, pilih menu Windows > Library.

Untuk memasukkan gambar tersebut ke stage, click and drag gambar pada library ke
stage. Setelah itu gambarnya pun dapat dibuat efek motion, misalkan dibuat bergerak
seperti contoh sebelumnya.

Macromedia Flash MX Page 17 of 41


Shape
Selain motion kita dapat membuat efek shape. Coba buat sebuah objek dengan
drawing tool, misalkan membuat suatu lingkaran pada frame pertama dan sebuah
kotak pada frame ke-35.

Pada frame pertama, ubahlah


properties tween menjadi Shape.
Kemudian perhatikan warna pada
bagian frame akan berubah menjadi
warna hijau.

Kemudian jalankan untuk melihat


efeknya. Bentuk bola akan secara
perlahan-lahan berubah menjadi
bentuk kotak. Perubahan bentuk inilah
yang disebut Shape.

Contoh lain kita coba buat pada frame ke-50, sebuah objek teks. Ingatlah bahwa
bentuk Shape bisa dilakukan hanya untuk vektor, sehingga objek teks yang kita buat
harus kita pecah hingga menjadi vektor . Klik kanan pada objek teks untuk pilih Break
Apart, atau tekan Ctrl + B.

Sebelum Break Apart Setelah Break Apart 2 kali.

Setelah ubahlah properties dari frame ke-35 tersebut, untuk bagian Tweennya menjadi
Shape. Lihatlah efeknya, bentuk bulat akan secara bertahap berubah menjadi kotak,
kemudian dilanjutkan secara bertahap menjadi bentuk objek teks.

Macromedia Flash MX Page 18 of 41


Bagian 3
Animasi Dasar 2
TimeLine Effect
Timeline Effect merupakan suatu animasi yang siap pakai (telah disediakan oleh Flash
MX 2004).

Cara pemakaian, select object yg akan diberikan animasi lalu klik pada menu Insert >
Timeline Effects
1.Assistants

a. Copy to Grid
Jika ingin membuat duplikasi dari objek baik dengan pencerminan pada kolom
Maupun barisnya (lihat gambar di bawah).

Macromedia Flash MX Page 19 of 41


b. Distributed Duplicate
Jika ingin membuat duplikasi dari objek dengan tambahan scaling maupun merubah
warnanya dan memberinya motion(lihat gambar dibawah).

2. Effect
a. Blur : Menampilkan animasi seolah-olah objek bertambah buram(blur).
b. Drop Shadow : Memberikan bayangan pada objek yang dibuat.
c. Expand : Memberikan animasi pada text, seperti memberikan effect
squeeze(menyempit).

Macromedia Flash MX Page 20 of 41


d. Explode
Memberikan animasi seolah-olah objek menjadi terpecah menjadi beberapa bagian.

3. Transform/Transition

a. Transform
Memberikan animasi kepada objek baik berpindah tempat, scalling, perubahan
warna, perputaran,dsb.

b. Transition
Memberikan effect transisi(pemunculan) pada objek.

Macromedia Flash MX Page 21 of 41


Motion Guide
Kita dapat menggunakan motion guide untuk membuat animasi bergerak sesuai
dengan path yang kita buat. Pertama-tama kita buat dulu motion pathnya.

Dengan menggunakan Motion Guide kita dapat membuat objek animasi bergerak
sesuai dengan path.
Cara penggunaan :
1. Pada layer pertama buatlah objek yang akan diberi animasi dengan guide layer.
2. Kemudian kita buat layer kedua,dan taruh diatas layer pertama,layer ini nantinya
akan berfungsi sebagai path(arah animasi) dari layer dibawahnya.
3. Lalu buatlah animasi motion biasa untuk objek pada layer pertama tadi. Tapi
letakan fokus objek tepat pada garis/path yang telah dibuat pada layer 2.
kemudian pada keyframe akhir dari animasi , letakkan juga fokus objek berpacu
pada path pada layer 2.
4. Terakhir, clik kanan pada layer atas(path),lalu pilih guide.

Macromedia Flash MX Page 22 of 41


Export File

Dalam Flash MX ini, animasi yang kita buat dapat ditampilkan(dipublish) dalam format
yang berbeda-beda, baik dalam bentuk exe(executable file),html(untuk dipublish di
web), mov(movie), jpg,gif(gambar), gif(animated image), dll.

Untuk mempublishnya menjadi exe,html,mov,jpg,gif(non-animated image), dapat


dilakukan dengan memilih menu File > Publish Settings.

Sedangkan untuk mempublishnya menjadi avi(movie clip), gif(animated image), dapat


dilakukan dengan memilih menu File > Export > Export Movie > lalu kita pilih tipe
yang kita mau(pada extension type).
Lihat gambar dibawah.

Macromedia Flash MX Page 23 of 41


Bagian 4
Masking dan Penerapannya
Masking dan Penerapannya
Dalam bab ini akan mempelajari cara penggunaan masking. Dengan menggunakan
teknik masking kita dapat mengatur bagian mana dari suatu layer yang akan
ditampilkan dan yang tidak ingin ditampilkan.

Buatlah suatu teks dengan warna biru pada suatu layer, dan objek teks yg sama
dengan warna putih pada layer yang berbeda.

Tambahkan layer baru untuk maskingnya, kemudian klik kanan pada layer tersebut
dan pilihlah Mask.

Macromedia Flash MX Page 24 of 41


Pada layer mask kita buat sebuah batang hitam kurang lebih setinggi teks yang kita
buat, kemudian kita animasikan bergerak dari kiri ke kanan.

Untuk melihat efeknya pastikan layer mask, dan layer putih sudah terkunci.
Kemudian tariklah penunjuk timeline untuk melihat animasi masking yang terjadi dari
waktu ke waktu. Bagian teks putih yang berada di layer putih tidak semuanya
ditampilkan tetapi hanya sebagian. Sedangkan layer biru akan ditampilkan semuanya.
Hal ini menimbulkan efek seperti gambar di atas, karena dengan adanya mask yang
dianimasikan maka bagian dari teks putih yang ditampilkan pun bergerak dari kiri ke
kanan.

Contoh lain misalkan kita membuat efek spotlight. Buatlah warna background stage
menjadi hitam. Kemudian import sebuah gambar dan dimasukkan ke dalam Library.

Macromedia Flash MX Page 25 of 41


Buatlah 2 buah layer, yang pertama letakkan gambar objek yang ingin
ditampilkan, yang kedua ubahlah menjadi mask. Sekarang buatlah animasi pada layer
mask, misalkan sebuah lingkaran yang bergerak, maka gambar akan dimunculkan
pada bagian-bagian yang kita masking. Selain itu efek-efek seperti kaca pembesar
juga menggunakan teknik masking yang sama.

Macromedia Flash MX Page 26 of 41


Bagian 5
Penggunaan Button dan Scene
Button
Buatlah sebuah objek, kemudian klik kanan, dan konversi menjadi button. Button ini
memiliki beberapa behavior.

Beberapa behaviornya adalah :


1. Up
Adalah keadaan di mana mouse tidak berada di dalam area buttonnya.
2. Over
Adalah keadaan di mana mouse sedang berada di dalam area buttonnya.
3. Down
Adalah keadaan pada saat di mana mouse ditekan pada area buttonnya.
4. Hit
Adalah keadaan pada saat di mana mouse ditekan dan dilepas pada area
buttonnya.

Kita dapat membuat gambar yang berbeda sehingga kita dapat memberikan efek yang
berbeda, misalkan pada saat Over gambarnya berubah.

ActionScript

1. Pada frame satu tambahkan sintaks berikut.

stop();

2. Pada actionscript Button tambahkan sintaks berikut.

on(release){
gotoAndPlay(5);
}

3. Pada frame 5 tambahkan sebuah teks yang berbeda dan actionscript sebagai
berikut.

stop();

Macromedia Flash MX Page 27 of 41


Fungsi stop() digunakan untuk menghentikan proses timeline. Kemudian on(release)
adalah proses pada saat button diklik dan dilepaskan, gotoAndPlay(5) akan membuat
timeline bergerak ke frame 5.

Selain itu juga dapat menggunakan penamaan pada frame. Kita dapat memberi
penamaan pada frame, pada bagian property dari frame.

Sehingga pada saat penggunaan actionscript kita dapat menggunakan nama


framenya.

on(release){
gotoAndPlay(“startFrame”);
}

Untuk actionscript lainnya dapat dilihat di Reference.

Macromedia Flash MX Page 28 of 41


Bagian 6
Menu Interactivity
Buatlah rancangan struktur menu sebagai berikut. Kita akan membuat strukturmenu
di mana pada saat mouse berada di area menu 1 maka akan pop up sebuah menu di
bawahnya.

Untuk isi content dari menu 1 kita gunakan movie clip. Buatlah sebuah move clip pada
layer baru dan letakkan pada bagian bawah menu 1.

Kemudian klik pada objek movie clip tersebut dan berilah nama instancenya, misalkan
menu1_content.

Macromedia Flash MX Page 29 of 41


Di dalam movie clip tersebut kita dapat membuat beberapa frame animasi. Kliklah dua
kali untuk masuk ke dalam movie clip tersebut.

Pada bagian dalam movie clip buat frame dengan animasi di mana kotak akan secara
bertahap muncul, settinglah nilai alphanya. Beri dua buah nama frame, yang pertama
hide di mana tidak terdapat objek apapun dan show yang menjalankan animasi
munculnya kotak secara perlahan-lahan.

Kemudian untuk masing menu, dari 1-3 konversikanlah ke bentuk movieclip sehingga
kita bisa memberikan actionscript. Tambahkan actionscript berikut pada instance
menu1.

Maka pada saat mouse berada pada area menu1, maka akan memanggil objek
menu1_content untuk menjalankan timelinenya pada frame show, demikian pula pada
saat mouse tidak berada pada area menu1, maka akan menjalankan timeline pada
objek menu1_content ke hide, sehingga kotak tidak ditampilkan.

Macromedia Flash MX Page 30 of 41


Selanjutnya kita tinggal memasukkan button-button di dalam movie clip tersebut, di
mana akan melakukan suatu action pada saat button tersebut diklik. Untuk masing-
masing menu kita buat satu per satu objek contentnya.

Pada saat mouse menunjuk pada menu 1,


maka kotak akan perlahan-lahan muncul.

Ini dikarenakan actionscript yang kita


tambahkan pada event rollOver dan
rollOut. Efek seperti ini yang disebut
dengan popup menu.

Kita juga dapat menggunakan efek scrolling menu. Di mana kita dapat membuat menu
yang bergerak. Menu-menu dapat dibuat dengan menggunakan Button kemudian
dimasukkan ke dalam movie clip dan kemudian dianimasikan.

Kasus
Membuat Menu Scrolling
Mintalah instruktur anda untuk membantu membuat menu scrolling ini.

Membaca teks dari file


Buatlah sebuah objek teks dan sebuah button.

Pada bagian objek teks, gunakan outline.

Macromedia Flash MX Page 31 of 41


Kemudian siapkan file teksnya. Simpanlah file teks di tempat satu folder dengan di
mana kamu menyimpan file flash ini. Isi file teksnya adalah sebagai berikut.

varText ini sesuai dengan yang kita masukkan pada bagian Var pada properties dari
teks objek ini. Kemudian tambahkan actionscript pada button “getdata”.

Maka flash akan membaca file dari testing.txt kemudian nilainya akan dimasukkan
pada objek yang memiliki variabel varText.

Scrolling Text

Buatlah sebuah objek teks pada stage dan dua buah movieclip untuk scrollingnya.

Kemudian settinglah propertynya menjadi.

Macromedia Flash MX Page 32 of 41


Kemudian pada bagian movieclip kita buat actionscriptnya. Untuk tombol atas
tambahkan script sebagai berikut.

Untuk tombol bawah tambahkan script berikut.

Tool Tips

Di sini kita bisa gunakan efek dari Button.

Pada bagian button terdapat empat macam kondisi.


Up – pada saat mouse sedang tidak berada pada area button tersebut.
Over – pada saat mouse sedang berada pada area button tersebut.
Down – pada saat mouse sedang dalam posisi ditekan pada area button tersebut.
Hit – pada saat mouse telah diklik pada area button tersebut.

Untuk membuat efek tooltip kita bisa tambahkan pada saat kondisi Over dengan
menggunakan layer baru. Sehingga pada saat mouse berada di area dari Button
tersebut, maka akan muncul keterangan tooltipnya.

Macromedia Flash MX Page 33 of 41


Bagian 7
Pembuatan interaksi dalam Flash
Membuat link/URL
Berikut ini akan dipraktekkan pemberian action Get URL di dalam movie Flash :
1. Buatlah dokumen baru dengan menklik menu File > New, dan gunakan default
properties movie yang diberikan program Macromedia Flash MX.
2. Ketikkan teks www.evopage.com dalam stage. (liat gambar dibawah).

www.evopage.com

3. Pada contoh kali ini akan dipraktekkan pembuatan hit button untuk dijadikan
tombol tersembunyi diatas tombol text. Hit button adalah objek tombol yang hanya
menggunakan state hit, sehingga objek ini pada saat disipkan ke dalam Stage
tidak akan terlihat. Untuk membuatnya, klik menu Insert > New Symbol
sehingga muncul kotak dialog create new symbol.
4. Pada kotak dialog tersebut, ketikkan nama hit kemudian pilihlah button untuk opsi
behaviour.
5. Pada jendela pengeditan symbol Hit, klik kanan layer Hit kemudian pilihlah
perintah insert Keyframe (atau F6).
6. Pada layer Hit, buatlah objek persegiempat sesuai keinginan, misalnya seperti
contoh yang terlihat pada gambar dibawah ini.

Macromedia Flash MX Page 34 of 41


7. Kembalilah ke menu utama, dengan menklik ikon Scene 1 yang terdapat di bagian
kiri atau jendela pengeditan symbol Hit.
8. Tampilkan panel Library kemudian seret(drag) symbol Hit ke dalam Stage,
posisikan instance Hit sehingga berada di atas objek teks. Jika ukuran instance Hit
lebih kecil dari ukuran teks, perbesarlah ukuran instance Hit. Sehingga menutupi
keseluruhan teks (liat gambar dibawah).

9. Gunakan tools Arrow kemudian klik instance Hit untuk memilihnya.


10. Pada panel Actions, bukalah daftar Actions > Browsers/Network kemudian klik
ganda pada action Get URL. Setelah itu ketikkan alamat URL, misalnya
www.evopage.com pada kotak URL.

on(release)
{
getURL(www.evopage.com);
}

Macromedia Flash MX Page 35 of 41


fscommand
Salah satu perintah yang banyak digunakan dalam membuat interaksi dalam movie
flash adalah fscommand.
Dibawah ini adalah daftar perintah di dalam action fscommand beserta argumennya.

Perintah Argumen Fungsi


Full Screen TRUE Membuat tampilan stand alone player menjadi fullscreen.
FALSE Membuat tampilan stand alone player menjadi normal.
Membuat tampilan stand alone player dimungkinkan
Allow Scale TRUE untuk
diperbesardan diperkecil
Membuat tampilan stand alone player ditampilkan
FALSE menurut
ukuran aslinya.
Show Menu TRUE Menampilkan menu di dalam stand alone player
FALSE Menyembunyikan menu di dalam stand alone player.
Quit - Keluar dari stand alone player.
Membuka aplikasi lain di dalam jendela stand alone
Exec Path- player.
aplikasi

Untuk perintah Fullscreen, Allowscale, dan Showmenu , biasanya diletakkan pada layer
pertama atau pada awal dari suatu movie flash yang kita buat.
Sedangkan perintah Quit dan Exec , biasanya di attach dalam button.
contoh penggunaan perintah Fscommand di dalam movie Flash
pada frame 1 kita ketik :

fscommand("fullscreen","true");
fscommand("showmenu","false");

pada button exit, dapat kita isi action berupa

fscommand("quit","true");

Load Movie
Action Load Movie dapat digunakan untuk membuka movie flash. Tapi terlebih dahulu
kita harus mempublish movie flash yang akan dibuka menjadi flash player(swf). Jika
movie flash(swf) yang akan dibuka berada dalam folder yang sama, maka kita cukup
mengetikan nama file beserta extensinya. Namun jika movie swf yang akan dibuka
berada di folder yang berbeda, kita harus mengetikan rootnya, sebagai contoh
d:\flash\evo.swf .

Macromedia Flash MX Page 36 of 41


Contoh penggunaan : (misal kita taruh action pada suatu button)

on(release)
{
loadMovieNum(“evo.swf”,1);
}

Unload Movie
Action Unload Movie adalah kebalikkan dari action Load Movie. Action Unload Movie
Digunakan untuk menutup movie flash yang sebelumnya dibuka. Untuk menggunakan
action Unload Movie, pilihlah objek tombol(button) atau frame kemudian bukalah
daptar Action > Browser/Network dan pilihlah unloadMovie.
Contoh penggunaan

on(release)
{
unloadloadMovieNum(this);
}

Macromedia Flash MX Page 37 of 41


Bagian 8
Membuat presentasi Multimedia
Di sini kita akan mempelajari beberapa script untuk pengaturan Movie Control.

Nah pada layer 1 kita buat beberapa tombol dalam bentuk movieclip. Kemudian pada
layer 2 buat beberapa keyframe dengan nama satu, dua, dan tiga.
Kemudian di frame-frame tersebut buat beberapa gambar yang berbeda.

Untuk masing-masing button pada actionscriptnya kita bisa buat pada saat diklik
movie control pindah ke frame tertentu.

Maka pada saat buttonnya diklik movie control akan pindah langsung ke frame dengan
nama “tiga”.

Macromedia Flash MX Page 38 of 41


gotoAndStop
movie dipindahkan pada frame tertentu, dan movie control akan stop pada frame
tersebut.
Contoh penggunaan:
gotoAndStop(30); // untuk pergi ke frame 30
gotoAndStop(“Scene 2”,1); // untuk pergi ke Scene 2, frame 1

gotoAndPlay
movie dipindahkan pada frame tertentu, dan movie control akan play, lanjut terus
mulai dari frame tersebut. Penggunaannya sama dengan method gotoAndStop

nextScene
pindah ke Scene berikutnya.
Contoh penggunaan :
nextScene();

prevScene
pindah ke Scene sebelumnya.
Contoh penggunaan :
prevScene();

Macromedia Flash MX Page 39 of 41


Bagian 9
Review
Coba dibuat suatu menu dari cd interaktif yang biasa terbundle pada majalah-majalah
komputer sekarang, kira-kira bentuknya sebagai berikut:

1. Intro.
Berisi pendahuluan / perkenalan dan penjelasan tentang isi secara keseluruhan.
2. Menu awal
Gunakan menu scrolling untuk menu-menunya.
3. Bagi bagian-bagiannya menjadi sub bab dan link masing-masing menu ke file swf
lain (misalnya
menggunakan file swf yang sudah pernah dibuat sebelumnya).

Gunakan kreativitas anda untuk membuat cd interaktif.


Selamat mengerjakan.

Macromedia Flash MX Page 40 of 41


Bagian 10
Buat web Interaktif
Buatlah web interaktif, gunakan fitur-fitur berikut ini :
1. Tween ( Motion & Shape )
2. Guide Layer
3. Masking
4. ActionScript

Pilihlah salah satu materi berikut ini :


1. Buatlah home page pribadi, di mana harus memuat informasi-informasi berikut
ini :
- informasi profil diri, nama, tanggal lahir, zodiac, alamat, email, dan
sebagainya.
- Gallery, berisi beberapa foto-foto
2. Buatlah undangan dalam bentuk multimedia interaktif. Misalkan undangan
acara ulang tahun, acara seminar, undangan konser dan sebagainya.
- jenis acara
- kapan dan tempat berlangsungnya acara
- acara-acara yang akan diadakan
- contact person

Macromedia Flash MX Page 41 of 41


Filename: Macromedia Flash MX.doc
Directory: D:\Evo\RnD\diktat\special\Macromedia Flash
Template: C:\Documents and Settings\EVO\Application
Data\Microsoft\Templates\Normal.dot
Title: Pengenalan Flash MX Professional 2004
Subject:
Author: Yohanes Budiman Wijaya
Keywords:
Comments:
Creation Date: 9/5/2005 9:24:00 PM
Change Number: 154
Last Saved On: 2/22/2006 4:50:00 PM
Last Saved By: EVO
Total Editing Time: 732 Minutes
Last Printed On: 4/27/2006 4:00:00 PM
As of Last Complete Printing
Number of Pages: 41
Number of Words: 4,202 (approx.)
Number of Characters: 23,953 (approx.)