Tutorial Flash

Macromedia Flash MX 9 9 9 9

Belajar membuat animasi dengan menggunakan Macromedia Flash MX Menggunakan berbagai macam efek animasi Memahami penggunaan Actionscript 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 l s B o x

Macromedia Flash MX

Stage

W o r k A r e a

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 object, bila option ini aktif maka pada saat membuat atau memindahkan objek maka akan disnaping antara satu objek ke objek lainnya.

Snap to object Straighten

Smooth, option ini digunakan untuk menghaluskan outline yang telah dibuat, caranya seleksi outline yang akan di modify lalu click option ini.

Smooth

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. 2. 3. 4.

Memilih objek. Objek terpilih dengan vertex-vertexnya. Kita bisa mengadakan manipulasi terhadap vertex(contoh ditarik melebar). 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 Properties

Poligon Mode

Magic Wand, Jika pilihan Magic Wand diaktifkan maka daerah yang di select akan sesuai dengan aturan pada magic wand propertiesnya. Magic Wand Properties, Mengatur setingan dari magic 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 Brush type

Lock Fill, dengan aktifnya option ini kita dapat mengikuti pola warna dari object yang di fill sebelumnya. Ini akan sangat efektif pada saat kita memakai gradiasi.

Brush size Brush shape

Brush Type, pada option ini kita dapat memilih 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

Eraser mode, sama seperti brush 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 perlahanlahan 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 : c. Expand :

Memberikan bayangan pada objek yang dibuat.

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 framenya.

saat

penggunaan

actionscript

kita

dapat

menggunakan

nama

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 masingmasing 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

Full Screen

TRUE FALSE

Allow Scale

TRUE FALSE

Show Menu

TRUE FALSE

Quit Exec

Pathaplikasi

Fungsi Membuat tampilan stand Membuat tampilan stand Membuat tampilan stand untuk diperbesardan diperkecil Membuat tampilan stand menurut ukuran aslinya.

alone player menjadi fullscreen. alone player menjadi normal. alone player dimungkinkan alone player ditampilkan

Menampilkan menu di dalam stand alone player Menyembunyikan menu di dalam stand alone player. Keluar dari stand alone player. Membuka aplikasi lain di dalam jendela stand alone player.

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.)