macromedia flash mx - silahkan download · pdf file9 belajar membuat animasi dengan...

42
Macromedia Flash MX Page 1 of 41 Macromedia Flash MX Belajar membuat animasi dengan menggunakan Macromedia Flash MX Menggunakan berbagai macam efek animasi Memahami penggunaan Actionscript Membuat presentasi multimedia

Upload: dokhanh

Post on 04-Feb-2018

223 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Macromedia Flash MX - silahkan Download · PDF file9 Belajar membuat animasi dengan menggunakan Macromedia Flash MX ... Lasso tool Tool ini digunakan untuk memilih objek sesuai dengan

Macromedia Flash MX Page 1 of 41

Macromedia Flash MX

Belajar membuat animasi dengan menggunakan Macromedia Flash MX Menggunakan berbagai macam efek animasi Memahami penggunaan Actionscript Membuat presentasi multimedia

Page 2: Macromedia Flash MX - silahkan Download · PDF file9 Belajar membuat animasi dengan menggunakan Macromedia Flash MX ... Lasso tool Tool ini digunakan untuk memilih objek sesuai dengan

Macromedia Flash MX Page 2 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.

Page 3: Macromedia Flash MX - silahkan Download · PDF file9 Belajar membuat animasi dengan menggunakan Macromedia Flash MX ... Lasso tool Tool ini digunakan untuk memilih objek sesuai dengan

Macromedia Flash MX Page 3 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.

Stage

TimeLine

ToolsBox

W o r k A r e a

Page 4: Macromedia Flash MX - silahkan Download · PDF file9 Belajar membuat animasi dengan menggunakan Macromedia Flash MX ... Lasso tool Tool ini digunakan untuk memilih objek sesuai dengan

Macromedia Flash MX Page 4 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 :

Klik kanan pada stage, lalu pilih Document Properties sehingga akan

mengeluarkan dialog box seperti gambar di bawah.

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 :

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

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.

Default

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

Page 5: Macromedia Flash MX - silahkan Download · PDF file9 Belajar membuat animasi dengan menggunakan Macromedia Flash MX ... Lasso tool Tool ini digunakan untuk memilih objek sesuai dengan

Macromedia Flash MX Page 5 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).

Page 6: Macromedia Flash MX - silahkan Download · PDF file9 Belajar membuat animasi dengan menggunakan Macromedia Flash MX ... Lasso tool Tool ini digunakan untuk memilih objek sesuai dengan

Macromedia Flash MX Page 6 of 41

Modifier yang ada pada tool ini adalah :

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

Snap to object

Smooth

Straighten

Snap to object, bila option ini aktif maka pada saat membuat atau memindahkan objek maka akan di-snaping antara satu objek ke objek lainnya. Smooth, option ini digunakan untuk menghaluskan outline yang telah dibuat, caranya seleksi outline yang akan di modify lalu click option ini.

1 2 3

Page 7: Macromedia Flash MX - silahkan Download · PDF file9 Belajar membuat animasi dengan menggunakan Macromedia Flash MX ... Lasso tool Tool ini digunakan untuk memilih objek sesuai dengan

Macromedia Flash MX Page 7 of 41

Modifier yang terdapat pada Lasso tool

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.

gunakan tombol shift bila ingin mendapatkan garis lurus.

Oval Tool(O)

Tool ini digunakan untuk membuat bentuk oval.

gunakan tombol shift untuk membuat lingkaran penuh.

Rectangle Tool(R)

Tool ini digunakan untuk membuat persegi panjang

gunakan tombol shift untuk membuat bujur sangkar.

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.

Magic Wand

Magic Wand Properties

Poligon Mode

Page 8: Macromedia Flash MX - silahkan Download · PDF file9 Belajar membuat animasi dengan menggunakan Macromedia Flash MX ... Lasso tool Tool ini digunakan untuk memilih objek sesuai dengan

Macromedia Flash MX Page 8 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.

Gunakan shift untuk mendapatkan garis dengan arah kelipatan 45 derajat.

Untuk menggambar garis lengkung, caranya klik pada titik pertama lalu drag pada titik

kedua.

Page 9: Macromedia Flash MX - silahkan Download · PDF file9 Belajar membuat animasi dengan menggunakan Macromedia Flash MX ... Lasso tool Tool ini digunakan untuk memilih objek sesuai dengan

Macromedia Flash MX Page 9 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

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

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 size

Brush shape

Brush type

Lock Fill 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 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

Page 10: Macromedia Flash MX - silahkan Download · PDF file9 Belajar membuat animasi dengan menggunakan Macromedia Flash MX ... Lasso tool Tool ini digunakan untuk memilih objek sesuai dengan

Macromedia Flash MX Page 10 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:

Ink bucket tool & Paint bucket tool

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.

Eraser shape

Faucet

Eraser mode

Faucet, menghapus semua fill yang berwarna sama. Eraser mode, sama seperti brush mode. Eraser shape, bentuk dari penghapus.

paint ink

Page 11: Macromedia Flash MX - silahkan Download · PDF file9 Belajar membuat animasi dengan menggunakan Macromedia Flash MX ... Lasso tool Tool ini digunakan untuk memilih objek sesuai dengan

Macromedia Flash MX Page 11 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.

Page 12: Macromedia Flash MX - silahkan Download · PDF file9 Belajar membuat animasi dengan menggunakan Macromedia Flash MX ... Lasso tool Tool ini digunakan untuk memilih objek sesuai dengan

Macromedia Flash MX Page 12 of 41

Manipulasi gambar ( Transform ) Size and Rotate Kita dapat mengaktifkan menu transform dengan memilih Window > Design Panel > Transform.

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

Constrain, Mempertahankan rasio awal antara lebar dan panjangnya

Page 13: Macromedia Flash MX - silahkan Download · PDF file9 Belajar membuat animasi dengan menggunakan Macromedia Flash MX ... Lasso tool Tool ini digunakan untuk memilih objek sesuai dengan

Macromedia Flash MX Page 13 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???

Page 14: Macromedia Flash MX - silahkan Download · PDF file9 Belajar membuat animasi dengan menggunakan Macromedia Flash MX ... Lasso tool Tool ini digunakan untuk memilih objek sesuai dengan

Macromedia Flash MX Page 14 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.

Page 15: Macromedia Flash MX - silahkan Download · PDF file9 Belajar membuat animasi dengan menggunakan Macromedia Flash MX ... Lasso tool Tool ini digunakan untuk memilih objek sesuai dengan

Macromedia Flash MX Page 15 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.

Page 16: Macromedia Flash MX - silahkan Download · PDF file9 Belajar membuat animasi dengan menggunakan Macromedia Flash MX ... Lasso tool Tool ini digunakan untuk memilih objek sesuai dengan

Macromedia Flash MX Page 16 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.

Page 17: Macromedia Flash MX - silahkan Download · PDF file9 Belajar membuat animasi dengan menggunakan Macromedia Flash MX ... Lasso tool Tool ini digunakan untuk memilih objek sesuai dengan

Macromedia Flash MX Page 17 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.

Page 18: Macromedia Flash MX - silahkan Download · PDF file9 Belajar membuat animasi dengan menggunakan Macromedia Flash MX ... Lasso tool Tool ini digunakan untuk memilih objek sesuai dengan

Macromedia Flash MX Page 18 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.

Page 19: Macromedia Flash MX - silahkan Download · PDF file9 Belajar membuat animasi dengan menggunakan Macromedia Flash MX ... Lasso tool Tool ini digunakan untuk memilih objek sesuai dengan

Macromedia Flash MX Page 19 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).

Page 20: Macromedia Flash MX - silahkan Download · PDF file9 Belajar membuat animasi dengan menggunakan Macromedia Flash MX ... Lasso tool Tool ini digunakan untuk memilih objek sesuai dengan

Macromedia Flash MX Page 20 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).

Page 21: Macromedia Flash MX - silahkan Download · PDF file9 Belajar membuat animasi dengan menggunakan Macromedia Flash MX ... Lasso tool Tool ini digunakan untuk memilih objek sesuai dengan

Macromedia Flash MX Page 21 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.

Page 22: Macromedia Flash MX - silahkan Download · PDF file9 Belajar membuat animasi dengan menggunakan Macromedia Flash MX ... Lasso tool Tool ini digunakan untuk memilih objek sesuai dengan

Macromedia Flash MX Page 22 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.

Page 23: Macromedia Flash MX - silahkan Download · PDF file9 Belajar membuat animasi dengan menggunakan Macromedia Flash MX ... Lasso tool Tool ini digunakan untuk memilih objek sesuai dengan

Macromedia Flash MX Page 23 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.

Page 24: Macromedia Flash MX - silahkan Download · PDF file9 Belajar membuat animasi dengan menggunakan Macromedia Flash MX ... Lasso tool Tool ini digunakan untuk memilih objek sesuai dengan

Macromedia Flash MX Page 24 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.

Page 25: Macromedia Flash MX - silahkan Download · PDF file9 Belajar membuat animasi dengan menggunakan Macromedia Flash MX ... Lasso tool Tool ini digunakan untuk memilih objek sesuai dengan

Macromedia Flash MX Page 25 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.

Page 26: Macromedia Flash MX - silahkan Download · PDF file9 Belajar membuat animasi dengan menggunakan Macromedia Flash MX ... Lasso tool Tool ini digunakan untuk memilih objek sesuai dengan

Macromedia Flash MX Page 26 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.

Page 27: Macromedia Flash MX - silahkan Download · PDF file9 Belajar membuat animasi dengan menggunakan Macromedia Flash MX ... Lasso tool Tool ini digunakan untuk memilih objek sesuai dengan

Macromedia Flash MX Page 27 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.

2. Pada actionscript Button tambahkan sintaks berikut.

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

stop();

on(release){ gotoAndPlay(5); }

stop();

Page 28: Macromedia Flash MX - silahkan Download · PDF file9 Belajar membuat animasi dengan menggunakan Macromedia Flash MX ... Lasso tool Tool ini digunakan untuk memilih objek sesuai dengan

Macromedia Flash MX Page 28 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. Untuk actionscript lainnya dapat dilihat di Reference.

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

Page 29: Macromedia Flash MX - silahkan Download · PDF file9 Belajar membuat animasi dengan menggunakan Macromedia Flash MX ... Lasso tool Tool ini digunakan untuk memilih objek sesuai dengan

Macromedia Flash MX Page 29 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.

Page 30: Macromedia Flash MX - silahkan Download · PDF file9 Belajar membuat animasi dengan menggunakan Macromedia Flash MX ... Lasso tool Tool ini digunakan untuk memilih objek sesuai dengan

Macromedia Flash MX Page 30 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.

Page 31: Macromedia Flash MX - silahkan Download · PDF file9 Belajar membuat animasi dengan menggunakan Macromedia Flash MX ... Lasso tool Tool ini digunakan untuk memilih objek sesuai dengan

Macromedia Flash MX Page 31 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.

Page 32: Macromedia Flash MX - silahkan Download · PDF file9 Belajar membuat animasi dengan menggunakan Macromedia Flash MX ... Lasso tool Tool ini digunakan untuk memilih objek sesuai dengan

Macromedia Flash MX Page 32 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.

Page 33: Macromedia Flash MX - silahkan Download · PDF file9 Belajar membuat animasi dengan menggunakan Macromedia Flash MX ... Lasso tool Tool ini digunakan untuk memilih objek sesuai dengan

Macromedia Flash MX Page 33 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.

Page 34: Macromedia Flash MX - silahkan Download · PDF file9 Belajar membuat animasi dengan menggunakan Macromedia Flash MX ... Lasso tool Tool ini digunakan untuk memilih objek sesuai dengan

Macromedia Flash MX Page 34 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).

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.

www.evopage.com

Page 35: Macromedia Flash MX - silahkan Download · PDF file9 Belajar membuat animasi dengan menggunakan Macromedia Flash MX ... Lasso tool Tool ini digunakan untuk memilih objek sesuai dengan

Macromedia Flash MX Page 35 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); }

Page 36: Macromedia Flash MX - silahkan Download · PDF file9 Belajar membuat animasi dengan menggunakan Macromedia Flash MX ... Lasso tool Tool ini digunakan untuk memilih objek sesuai dengan

Macromedia Flash MX Page 36 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.

Allow Scale TRUE Membuat tampilan stand alone player dimungkinkan untuk

diperbesardan diperkecil

FALSE Membuat tampilan stand alone player ditampilkan 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.

Exec Path- Membuka aplikasi lain di dalam jendela stand alone 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 :

pada button exit, dapat kita isi action berupa

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 .

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

fscommand("quit","true");

Page 37: Macromedia Flash MX - silahkan Download · PDF file9 Belajar membuat animasi dengan menggunakan Macromedia Flash MX ... Lasso tool Tool ini digunakan untuk memilih objek sesuai dengan

Macromedia Flash MX Page 37 of 41

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

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) { loadMovieNum(“evo.swf”,1); }

on(release) { unloadloadMovieNum(this); }

Page 38: Macromedia Flash MX - silahkan Download · PDF file9 Belajar membuat animasi dengan menggunakan Macromedia Flash MX ... Lasso tool Tool ini digunakan untuk memilih objek sesuai dengan

Macromedia Flash MX Page 38 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”.

Page 39: Macromedia Flash MX - silahkan Download · PDF file9 Belajar membuat animasi dengan menggunakan Macromedia Flash MX ... Lasso tool Tool ini digunakan untuk memilih objek sesuai dengan

Macromedia Flash MX Page 39 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();

Page 40: Macromedia Flash MX - silahkan Download · PDF file9 Belajar membuat animasi dengan menggunakan Macromedia Flash MX ... Lasso tool Tool ini digunakan untuk memilih objek sesuai dengan

Macromedia Flash MX Page 40 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.

Page 41: Macromedia Flash MX - silahkan Download · PDF file9 Belajar membuat animasi dengan menggunakan Macromedia Flash MX ... Lasso tool Tool ini digunakan untuk memilih objek sesuai dengan

Macromedia Flash MX Page 41 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

Page 42: Macromedia Flash MX - silahkan Download · PDF file9 Belajar membuat animasi dengan menggunakan Macromedia Flash MX ... Lasso tool Tool ini digunakan untuk memilih objek sesuai dengan

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