Penuntun Macro Media Flash 8

Penuntun Macromedia Flash 8

|1

PENUNTUN MACROMEDIA FLASH 8 Oleh: Sayahdin AlfatA. PENGENALAN FLASH MX Macromedia Flash MX (Flash 8) merupakan vesi terbaru dari software Macromedia Flash sebelumnya (Macromedia Flash 7). Macromedia Flash adalah software yang banyak dipakai oleh desainer web karena mempunyai kemampuan yang lebih unggul dalam menampilkan multimedia, gabungan antara grafis, animasi, suara, serta interaktifitas user.

Macromedia Flash merupakan sebuah program aplikasi standar authoring tool profesional yang digunakan untuk membuat animasi vektor dan bitmap yang sangat menakjubkan untuk membuat suatu situs web yang interaktif, menarik dan dinamis. Software ini berbasis animasi vektor yang dapat digunakan untuk menghasilkan animasi web, presentasi, game, film, maupun CD interaktif, CD pembelajaran. Interaksi user dalam movie flash menggunakan Actionscript. Actionscript adalah suatu bahasa pemograman yang berorientasi objek yang dipakai dalam Macromedia Flash, baik Flash MX maupun Flash versi sebelumnya. Macromedia Flash MX menyediakan fasilitas-fasilitas yang lebih banyak dan menarik yang akan membantu, mempermudah user dalam mempelajari atau menggunakan software ini dibandingkan dengan Flash versi sebelumnya. Animasi-animasi dapat dibuat dengan lebih sederhana, cepat dan lebih menarik menggunakan Flash MX karena adanya kelebihan yang dimiliki oleh Flash MX.


|2

1. Menjalankan Macromedia Flash 8 Pilih Start, All Programs, Macromedia, Maromedia Flash 8.

2. Membuat Dokumen Baru Pilih File, New

Muncul jendela New Document Pilih General, Flash Document, Ok 3. Mengatur Dokumen Flash Digunakan untuk untuk mengatur tayangan, background.


|3

Pilih properties, size: 550 x 400 pixels Muncul jendela Document properties. Isikan Title: ::: Dasar-dasar Flash Description: Dasar-dasar animasimenggunakan Macromedia Flash Dimention: 550 px (width) x 500 px(height) Background color: ganti warna abu-abu. Pilih Ok untuk mengakhiri. Lihatlah perubahan background


|4

4. Menyimpan Dokumen Flash Pilih File, Save As

Simpan di D: Prak TI beri nama dasar-daar flash, pilih save untuk mengakhiri.

5. Mengimpor Media Digunakan untuk mengambil gambar dari tempat/folder lain yang sudah jadi seperti foto atau hasil scan. Pilih File, Import, Import to Stage.


|5

Muncul Jendela Import, pilih missal gambar picture1.wmf (atau ekstensi lain seperti jpg, bmp), Pilih open untuk membuka gambar.


|6

Gunakan

View,

Zoom

Out

untuk

menampakkan

seluruh

gambar

(memperkecil gambar). Untuk memperbesar gambar gunakan menu View, Zoom In. Gunakan Scroll horizontal atau vertikal di sebelah stage untuk memposisikan gambar.

Import dapat dilakukan langsung ke library (disimpan di program Flash) dengan cara Pilih File, Import, Import library.

Agar gambar yang dipilih tersedia/muncul di library, pilih menu Window, Library


|7

Gambar muncul di kotak library seperti berikut ini.

6. Window Layer Properties Merupakan window dimana Anda dapat mengatur setting dari layer yang Anda buat sesuai dengan keinginan Anda. Melalui windows ini Anda dapat mengatur bagaimana sebuah animasi berjalan. Untuk menjalankannya Anda dapat memilih menu Modify lalu pilih Layer


|8

7. Window Scene Merupakan window dimana Anda dapat mengatur scene yang ada. Melalui window ini Anda dapat menambahkan scene, menghapus scene, atau menduplikasikan sebuah scene. Untuk mengaktifkannya Anda dapat menekan secara bersamaan tombol Shift+F2 melalui keyboard, atau dengan memilih menu Modify lalu Scene.

8. Menjalankan Flash MX Movie Untuk menjalankan movie yang telah Anda buat, Anda dapat

mengaktifkannya melalui menu Control lalu pilih Play (tombol Enter pada keyboard). Untuk membuat movienya Anda dapat menekan tombol

Ctrl+Enter secara bersamaan setelah Anda simpan project Anda.9. Konversi File melalui Flash MX Anda dapat melakukan konversi file melalui flash MX. File yang dikonversi biasanya berbentuk file *.swf ke dalam bentuk lainnya, seperti *.html, *.exe, *.avi, dan lain sebagainya. Untuk mengkonversi file flash yang telah Anda buat, terlebih dahulu Anda harus

mengaktifkan konverternya terlebih dahulu. Cara mengaktifkannya yaitu dengan memberi checkmark pada type file yang Anda inginkan. Untuk mengaktifkan publish settings Anda dapat memilih menu File > Publish Settings (Ctrl+Shift+F12).


|9

Keterangan: Flash (.swf) : Menghasilkan file *.swf (untuk menjalankannya

dibutuhkan flash player). Html (.html) : Menghasilkan explorer file *.html (diperlukan internet ini

untuk

menjalankannya).

Konversi

biasanya digunakan untuk membuat web. Gif, Jpeg, Png : Menghasilkan file gambar. Windows Projector : Menghasilkan dijalankan. Macintosh Projector : Menghasilkan file *.hqx untuk macintosh. Quick Time : Menghasilkan file *.mov untuk Quick time player. file *.exe yang dapat langsung

B. PENGENALAN KOMPONEN-KOMPONEN FLASH MXSebelum membuat sebuah animasi ada kalanya Anda harus mengenal dahulu komponen-komponen apa saja yang dibutuhkan dalam pembuatan


| 10

sebuah animasi. Anda harus mengenal semua komponen yang terdapat di aplikasi Flash MX ini agar pekerjaan dalam pembuatan animasi ini dapat berjalan dengan lancar. Di bawah ini merupakan window dari Flash MX yang digunakan dalam pekerjaan pembuatan animasi, baik itu berupa graphic atau animasi bergerak (cartoon). Di bawah ini merupakan keterangan dari kegunaan masing-masing komponen Flash MX secara detail: 1. Timeline, digunakan untuk mengatur dan mengontrol isi keseluruhan movie Anda.

2. Stage, merupakan tempat dimana Anda bekerja dalam membuat sebuah animasi.


| 11

3. Tools Box, berisi alat-alat yang digunakan untuk menggambar objek pada stage.

Description of Tools Box: Arrow Tool Tool ini digunakan untuk memilih suatu objek atau untuk memindahkannya. Subselection Tool Tool ini digunakan untuk merubah suatu objek dengan edit points. Line Tool Tool ini digunakan untuk membuat suatu garis di stage. Lasso Tool Tool ini digunakan untuk memilih daerah di objek yang akan diedit. Pen Tool Tool yang digunakan untuk menggambar dan merubah bentuk suatu objek dengan menggunakan edit points (lebih teliti & akurat). Text Tool Tool ini digunakan untuk menuliskan kalimat atau kata-kata. Oval Tool Tool yang digunakan untuk menggambar sebuah lingkaran. Rectangle Tool Tool yang digunakan untuk menggambar sebuah segiempat. Pencil Tool


| 12

Tool ini digunakan untuk menggambar sebuah objek sesuai dengan yang Anda sukai. Tetapi setiap bentuk yang Anda buat akan diformat oleh Flash MX menjadi bentuk sempurna. Brush Tool Tool ini sering digunakan untuk memberi warna pada objek bebas. Free Transform Tool Tool ini digunakan untuk memutar (rotate) objek yang Anda buat atau mengubah bentuk objek menjadi bentuk lain. Fill Transform Tool Tools ini digunakan untuk memutar suatu objek yang diimport dari luar lingkungan Flash MX, serta untuk mengatur efek warna. Ink Bottle Tool Tool ini digunakan untuk mengisi warna pada objek yang bordernya telah hilang (tidak ada). Paint Bucket Tool Tool ini digunakan untuk mengisi warna pada objek yang dipilih. Eraser Tool Tool ini digunakan untuk menghapus objek yang Anda bentuk. Description of Colors Box:Stroke Color, digunakan untuk memberi warna pada garis/border Fill Color, digunakan untuk memberi warna objek Swap Colors, digunakan untuk menukar warna objek(Fill Color) dengan warna border / garis(Stroke Color). Black & White, digunakan untuk memberi warna objek dan warna border / garis dengan warna hitam putih.

Description of View Box:Zoom Tool, digunakan untuk memperbesar tampilan objek pada stage.

4. Color Window, merupakan window yang digunakan untuk mengatur warna pada objek yang Anda buat.

Hand Tool, digunakan untuk menggerakkan suatu tampilan objek pada stage tanpa merubah posisi objek tersebut pada stage.


| 13

Color Window terdiri dari: a. Color Mixer, digunakan untuk mengatur warna pada objek sesuai dengan keinginan Anda. Ada 5 pilihan tipe warna, yaitu: None, Solid, Linear, Radial, Bitmap.

b. Color Swatches, digunakan untuk memberi warna pada objek yang Anda buat sesuai dengan yang warna pada window.

5. Actions Frame, merupakan window yang digunakan untuk menuliskan Action Script untuk Flash MX. Biasanya Action Script digunakan untuk mengendalikan objek yang Anda buat sesuai dengan keinginan Anda.


| 14

6. Properties, merupakan window yang digunakan untuk mengatur property dari objek yang Anda buat.

7. Components, digunakan untuk menambahkan objek untuk web application yang nantinya di publish ke internet.

Window di atas merupakan window utama yang sering digunakan dalam pembuatan animasi secara window default layout. Pada dasarnya Flash MX mempunyai banyak window layout dalam pembuatan sebuah animasi,


| 15

diantaranya yaitu: Default Layout, Designer [1024x768], Designer [1280x1024], Designer [1600x1200], Developer [1024x768], Developer [1280x1024], Developer [1600x1200]. Untuk merubah window layout Anda dapat membukanya melalui menu Window lalu pilih Panel sets. Tetapi kali ini kita akan menggunakan window Default Layout, karena semua tools dan window standart yang kita butuhkan untuk membuat sebuah animasi ada disini semua. C. MENGGAMBAR OBYEK (OBJECT DRAWING) Diawali dengan membuka file baru, kali ini menggambar obyek kotak dan menulis teks. 1. Menggambar Obyek Pilih File, New

Muncul kotak New Document, pada general pilih Flash Document, akhiri dengan Ok. Pilih Rectangle Tool ( )

Lakukan penggambaran dengan tekan mouse, geser ke kanan dan bawah, lepaskan mouse. 2. Merubah Warna Pilih Selection Tool ( )


| 16

Pilih Properties pada Property Panel, pilih Fill Color ( mengganti warna arsir, dan Stroke Color ( warna garis.

) untuk

) untuk perubahan

3. Mengganti nama layer Double klik pada layer 1, ketik kotak.

4. Membuat Layer baru Pilih Insert Layer ( ), double klik pada later 2, ketik teks akhiri ),

dengan menekan tombol enter pada keyboard. Pilih text tool (

buatlah kotak untuk mengisi tulisan, lakukan pengetikan menggambar akhiri dengan enter sehingga menghasilkan bentuk berikut ini.


| 17

5. Mengganti warna huruf Pilih teks, pada properties klik Text Fill Color ( Klik sembarang tempat untuk mengakhiri. ), pilih warna biru.

D. ANIMASI FRAME TO FRAME Berbagai model animasi yang ada, animasi frame to frame merupakan model yang paling sederhanan. 1. Membuat Dokumen baru Pilih File, New, Flash Document, ok, maka muncul gambar seperti berikut. 2. Mengganti layer 1 menjadi garis Lakukan double klik pada layer 1, ganti dengan mengetikkan kata garis, akhiri dengan double klik.


| 18

3. Membuat Garis Pilih line tool ( ), buat garis vertikal, warna biru, dengan ketebalan

6,75 sehingga menjadi gambar berikut.

4. Copy, Insert Blank Keyframe, paste in place. Pilih garis dengan menggunakan Selection Tool ( ), klik garis, copy,

Insert Blank Keyframe pada Timeline, klik sembarang lokasi pada stage, klik kanan pilih Paste In Place, geser garisnya.Pointer di timeline 10, klik kanan, Insert Blank Keyfrane

Pilih garis, Klik kanan, Copy

2

1

Pada stage, Klik kanan, Paste in Place 3


| 19

Titik 1

Titik 2

3

Menggeser garis dari titik 1 ke 2

4Ulangi 4 kali hingga timeline ke 40, seperti berikut ini. 5. Menyimpan File, save beri nama frame2frame 6. Menjalankan Animasi Pilih menu Control, Test Movie. Lihatlah gerakan animasinya.

Pilih Close Button untuk mengakhiri


| 20

E. ANIMASI TWEENING Animasi selain menggunakan frame to frame, juga dapat menggunakan tweening. Pembuatan animasi dengan metode tweening atau in betweening yaitu pengguna hanya perlu membuat adegan awal dan adegan akhir saja, kemudian computer akan menggenerate secara otomatis frame-frame antaranya yang disebut in between. 1. Membuat dokumen baru Pilih menu File, New, Flash Document, Ok. 2. Membuat Layer Lakukan double klik pada layer name (layer 1), ganti menjadi kotak, akhiri dengan menekan tombol keyboard enter. 3. Menggambar kotak Pilih Rectangle Tool ( 4. Convert to Symbol a. Pilih gambar kotak pada stage menggunakan Selected Tool ( kanan, pilih Convert to Symbol. b. Muncul jendela Convert to Symbol, isikan name: kotak 1 dan pilih type graphic, pilih Ok untuk menutup jendela. c. Pilih Frame 25, d. Klik kanan mouse, pilih insert keyframe, e. Geser kotak ke kanan (panjang sesuai keinginan). ), klik ), buatlah gambar kotak di stage.


| 21

b a

c

e

dtempat baru

5. Memberi efek Motion Tujuannya adalah agar gerakan kotak menjadi halus, caranya: Klik kanan pada timeline antar frame, pilih Creat motion tween.

Geser ke


| 22

6. Menyimpan Simpanlah hasil kerja dengan nama tweening, klik save. 7. Melihat Hasil Pilih menu control, test movie F. ANIMASI MOTION GUIDE Motion Guide artinya obyek akan bergerak sesuai garis panduan yang dibuat. 1. Membuat Dokumen Baru Pilih menu File, New, Flash Document, Ok. 2. Membuat Motion Guide a. Pilih ikon Motion Guide ( )

b. Membuat garis guide menggunakan Pencil Tool (

)


| 23

c. Merubah layer name layer 1 menjadi lingkaran, menggambar lingkaran menggunakan oval tool ( ) menjadi bentuk berikut.

d. Memilih lingkaran, klik kanan, pilih Convert to Symbol, memberinya nama lingkaran, Type Graphic, akhiri dengan memilik Ok.


| 24

6. Pada time line 25, klik kanan, pilih Insert Keyframe.

Gambar guide menjadi tak tampak seperti berikut ini.


| 25

7. Klik pada Time Line 25 di guide, lakukan klik kanan Time Line 25, pilih Insert Frame.

8. Nampak ada perubahan di frame kotak putih kecil di time line, perubahan arsiran, dan garis guide terpilih. Bandingkan perintah keyframe yang berupa titik di timeline.


| 26

9. Memilih keyframe timeline 25,

geser lingkaran ke ujung lainnya.


| 27

10. Pilih keyframe lingkaran time line 1,

11. Pilih tween motion agar animasi berlangsung halus/tidak kaku


| 28

12. Lakukan pengetesan perjalanan lingkaran agar sesuai dengan garis guide (pandu) dengan menggeser kotak merah di time line.

13. Melihat hasil animasi, pilih menu Control, test Movie, G. SIMPLE ACTION SCRIPT Action script merupakan bahasa script yang digunakan dalam pemrograman flash, dengan script ini animasi lebih menarik dan interaktif. 1. Membuat Dokumen baru, pilih menu File, New, Flash Document, Ok. 2. Merubah layer 1 menjadi bejana

3. Menggambar kotak menggunakan Rectangle Tool rubahlah warnanya sesuai keinginan.


| 29

4. Merubah kotak menjadi symbol dengan klik kanan pada kotak, pilih Convert to Symbol.

5. Mengisi name bejana, dan type graphic, akhiri dengan Ok.

6. Membuat layer baru zat cair

7. Menggambar kotak, berikan warna berbeda.


| 30

8. Memasukkan frame dengan klik pada time line 30 layer bejana, klik kanan pilih Insert Frame. Artinya bejana akan bergerak hingga waktu ke-30.

9. Memasukkan keyframe layer zat cair pada timeline 30. Lakukan klik kanan pada time line 30 layer zat cair, pilih keyframe.


| 31

10. Free Transform Pilih kotak zat cair, klik kanan, free transform.

Geser ke atas kotak zat cair


| 32

11. Pilih time line 1, layer zat cair

Pada properties, pilih tween: Shape, klik sembaran lokasi di stage.

Lihat ada perubahan di time line.


| 33

Lihat juga hasil animasi dengan menggeser kota merah di time line. Gambar yang betul ketika bergeser, warna kuning juga bergerak.

Membuat Script Stop 1. Buat layer baru Stop, klik time line 1.

2. Pilih Action untuk memunculkan Action Panel. Klik tanda Add a New Item to the Script ( Function, Timeline Control, Stop. ), pilih Global


| 34

3. Klik tanda minimize ( Membuat Script Tombol Play 1. Membuat layer baru tombol Play

) untuk menutup Action panel.

2. Memunculkan library button, dengan pilih Window, Common Library, Button.


| 35

3. Geser ke kanan, pilih bentuk buttonnya. Pilih Button Circle Flat, Circle Flat Purple


| 36

4. Tekan dan geser ke stage,

5. Ubah

ukuran

agar )

serasi

dengan

gambar

menggunakan

Free

Transform Tool (

Memberi Action pada tombol play 1. Pilih Action ( ) untuk mengeluarkan Action panel ), pilih global functions,

2. Pilih tanda add a new item to the script ( movie clip control, on..


| 37

Pada jendela mucul script berikut

Pilih tanda show code hint (

) setelah tanda kurung buka, pilih

release dengan cara double klik muncul tambahan script.

Tekan enter setelah buka kurung kurawal

Pilih tanda

, pilih global functions, timeline control, play

Script akhir tombol play bertambah menjadi


| 38

Minimize kan action Lakukan Test Movie, jika enter dipilih maka animasi bergerak

Documents

Penuntun Macro Media Flash 8