A.PENGENALAN KOMPONEN-KOMPONEN FLASH

Gambar a. Window Macromedia Flash MX

Di bawah ini merupakan keterangan dari kegunaan masing-masing komponen Flash MX secara detail:

A.    Timeline, digunakan untuk mengatur dan mengontrol isi keseluruhan movie Anda.

Gambar a. Timeline Window

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

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

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.

 

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

Color Window terdiri dari:

1. Color Mixer, digunakan untuk mengatur warna pada objek sesuai dengan keinginan Anda. Ada 5 pilihan tipe warna, yaitu: None, Solid, Linear, Radial, Bitmap.
2. Color Swatches, digunakan untuk memberi warna pada objek yang Anda buat sesuai dengan yang warna pada window.

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

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

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

B.Window Utilitas Pada Flash MX

·         Library Window

Window ini digunakan untuk menampilkan objek-objek yang kita import dari luar lingkungan Flash MX maupun objek-objek bawaan dari Flash MX itupun sendiri. Untuk menggunakannya Anda dapat menekan tombol F11 pada keyboard atau dari menu Window pilih Library.

·         Document Properties Window

Window ini digunakan untuk merubah setting (baik itu ukuran, warna, maupun kecepatan movie) pada dokumen yang berada pada stage. Untuk menggunakannya Anda harus menekan tombol Ctrl+j secara bersamaan pada keyboard Anda, atau dari menu Modify pilih Document….Pada window yang satu ini Anda dapat merubah warna background dari dokumen Anda beserta ukurannya.

·         Window Layer Properties

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

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

 

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

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

Keterangan:

• Flash (.swf) : Menghasilkan file *.swf (untuk menjalankannya dibutuhkan flash player).
• Html (.html) : Menghasilkan file *.html (diperlukan internet explorer untuk menjalankannya). Konversi ini biasanya digunakan untuk membuat web.
• Gif, Jpeg, Png : Menghasilkan file gambar.
• Windows Projector : Menghasilkan file *.exe yang dapat langsung dijalankan.
• Macintosh Projector : Menghasilkan file *.hqx untuk macintosh.
• Quick Time : Menghasilkan file *.mov untuk Quick time player.

E. Dasar – Dasar Pewarnaan Objek Pada Flash MX

Memberi warna dengan Color Mixer & Color Swatches

Untuk memberi efek warna pada objek pada Flash MX hanya membutuhkan 2 color tool, yaitu: Color Mixer & Color Swatches. Saat ini kita akan membahas tentang bagaimana cara menggunakan tools tersebut.

Didalam Color mixer terdapat 5 macam type fill:

1.      None – tidak memberi warna apapun pada fill.

2.      Solid – memberi warna padat pada fill.

3.      Linier – memberi warna berbentuk linier pada fill.

4.      Radial – memberi efek warna radial pada fill.

5.      Bitmap – memberi image pada fill. (untuk mengimpor file gambar gunakan import to library pada file menu).

F. METODE PEMBUATAN ANIMASI

Animasi adalah proses penciptaan efek gerak atau efek perubahan bentuk yang terjadi selama beberapa waktu. Animasi bisa berupa gerak sebuah objek dari tempat yang satu ke tempat yang lain, perubahaan warna, atau perubahan bentuk (yang dinamakan “morphing”)

Animasi Flash dapat dilakukan dengan dua cara yaitu :

1. Frame by frame

2. Tweening

1. Frame by frame Animation (Animasi Frame Per Frame)

Bentuk dasar dari animasi adalah animasi frame per frame. Animasi frame per frame menuntut banyak gambar yang harus dibuat. Efek animasi diciptakan dengan mengganti gambar yang satu dengan gambar yang lain selama beberapa waktu. Contoh animasi frame per frame dapat dilihat pada Help | Samples | Flower. Semua gambar yang bergerak dihasilkan dari gambar yang berbeda-beda tiap framenya. Karena animasi frame per frame harus memiliki gambar yang unik tiap framenya maka animasi frame per frame sangat ideal untuk membuat animasi yang kompleks yang terdiri dari banyak perubahaan seperti ekspresi wajah. Kelemahan dari animasi frame per frame adalah membutuhkan banyak waktu untuk membuat setiap gambar dan menghasilkan file yang besar ukurannya.

Menambahkan keyframe

Untuk menambah keyframe pada timeline, sorot frame dan kemudian lakukan satu dari

beberapa cara berikut ini :

• Klik kanan dan pilih Insert Keyframe.

• Pilih Insert | Keyframe dari menu.

• Tekan F6 pada keyboard.

Membuat animasi frame per frame

Di bawah ini akan ditunjukkan proses pembuatan animasi frame per frame :

1.      Sorot frame dimana Anda akan memulai animasi frame per frame.

2.      Jikalau belum berupa sebuah keyframe, buatlah menjadi keyframe dengan cara memilih menu Insert | Keyframe (F6).

3.      Gambarlah atau impor gambar pertama Anda dari urutan gambar pada keyframe ini.

4.      Kemudian klik frame selanjutnya dan buatlah menjadi keyframe yang lain. Rubahlah isi dari keyframe ini dengan gambar berikutnya.

5.      Lakukan penambahan keyframe dan perubahan isinya sampai Anda memperoleh animasi yang utuh. Pada akhirnya teslah animasi Anda dengan kembali ke frame pertama dan kemudian pilih menu Control | Play .

Contoh :

Untuk membuat animasi ini sangatlah mudah, ikutilah petunjuk berikut ini.

• Gambarlah oval tool pada stage. Kemudian klik kanan pada frame kedua lalu pilih Insert Keyframe.

·         Setelah itu dengan menggunakan eraser tool hapuslah sebagian dari oval tool yang telah Anda buat hingga menyerupai gambar dibawah ini. Sebelumnya di bagian option ubahlah eraser mode menjadi erase normal.

 

• Ikutilah cara diatas untuk menghapus bagian yang lain dari oval tool. Perhatian: Sebelum menghapus oval tool, harus memasukkan keyframe terlebih dahulu. Hapuslah perlahan-lahan hingga oval tool habis sesuai dengan keyframe yang Anda buat.

 

• Jika Anda telah selesai membuatnya, jalankan movie tersebut dengan cara menekan tombol Enter. Untuk meng-compile film tersebut tekan Ctrl+Enter.

2. Tweening

Ada 2 jenis tween animation yaitu Shape tween dan Motion tween, dimana masingmasing memiliki karakter yang unik.

a. Motion Tweening (Animasi gerak)

Motion tween tidak hanya berguna untuk menggerakkan groups, simbol, atau teks yang dapat diedit dari satu tempat ke tempat lain. Motion tween menolong Anda untuk merubah ukuran, memutar, merubah warna dan transparansi simbol. Motion tween hanya bisa digunakan pada satu objek pada satu layer. Jadi jika ingin mengerakkan banyak objek maka membutuhkan banyak layer.

Contoh:

         1.   Gambar objek lingkaran pada kiri atas stage

         2.   Klik kanan frame 1, klik create motion tween

         3.   Klik kanan frame 20, klik create motion tween

         4.   Klik arrow tool , Drag/pindahkan objek lingkaran ke sebelah kanan stage

         5.   Jalankan dengan CTRL+Enter !

         6.   Untuk menambah gerakan, lakukan  langkah 3 – 4 !

b. Shape Tweening (Animasi Perubahan Bentuk)

      Contoh: perubahan bentuk 3 objek!

      1.   Gambar kotak merah, klik kanan frame 10, Insert blank key frame

      2.   Gambar lingkaran biru, klik kanan frame 20, Insert blank key frame

      3.   Gambar segitiga Hijau, klik kanan frame  30, Insert blank key frame

      4.   Pada frame 1, 20 dan 30 Pilih Shape pada Properties Tween, Ctrl+Enter

           

c.   Animasi objek dengan Efek Fade ( Pemudaran Warna)

      1.   Ketik Nama Anda. Size= 70, Bold

      2.   Klik Nama anda dengan , Tekan F8 (mrngubah text menjadi simbol), Ok

      3.   Klik kanan frame 20, Insert key frame, klik titik tengah text, Properties Color=Alfa, 0 %

      4.   Klik kanan frame 50, Insert key frame, klik titik tengah text, Properties Color=Alfa, 100 %

      5.   Klik kanana frame 1, create motion Tween, miringkan text Free Transform tool ,

      6.   Klik kanan frame 25, create motion Tween, Ctrl+enter

d.   Animasi dengan efek EASE (Objek memantul)

      1.   Gambar bola basket di atas kanvas, 2x klik bola dengan, tekan F8 name=bola, behavior=graphic, OK

      2.   Klik kanan frame 20 dan 40, Insert key frame.

      3.   Klik kanan frame 20, pindahkan bola ke bawah kanvas, klik frame 20 kecilkan bola dengan , klik kanan frame 21, insert keyframe

      4.   Klik kanan frame 1, Create motion tween, pada properties   Ease= -100

      5.   Klik kanan frame 21, Create motion tween, pada properties             Ease= +100, Ctrl+Enter !

e.   Animasi dengan efek Mask ( Spotlight)

      1.   Buat  tulisan WELCOME di tengah stage, kilik kanan frame 30, Insert Frame

      2.   Klik menu Insert-layer ; Di layer 2 gambar lingkaran warna putih disebelah kiri teks

      3.   (Di layer 2 )Klik kanan frame 15 dan 30, Insert keyframe

      4.   (Di layer 2 )Klik kanan frame 1, 15 dan 30, Create motion tween

      5.   (Di layer 2) Klik kanan frame 15, pindahkan lingkaran ke kanan teks dengan

      6.   Klik kanan layer 2, Pilih MASK, Ctrl+enter

f.    Movie Clip

      Movie clip menghasilkan rangkaian animasi!

      1.   Klik menu Insert-New symbol, behavior=movie clip, name=hati

      2.   Gambar bentuk hati dengan pencil smooth diantara tanda +

      3.   Seleksi objek hati, tekan F8, name=hati berdebar, behavior=graphic

      4.   Klik kanan frame 5-Insert key frame, perbesar ukuran hati dengan Free transform tool

      5.   Klik kanan Frame 1-Create motion tween; klik menu Edit-edit dokumen

      6.   Klik menu window-Library, klik+drag hati berdebar ke kanvas sebanyak 3 X, Ctrl+Enter!

g.   Objek dengan Efek Strech

      1.   Ketik SMP MARSUDIRINI, aktifkan teks dengan

      2.   Tekan F8, OK

      3.   Klik kanan frame 15-Insert keyframe

      4.   Klik menu Modify-Transform-scale- lebarkan teks anda ke segala arah!

      5.   Klik kanan frame 1, Copy frame; klik kanan frame 30-paste frame

      6.   Klik kanan frame 1 dan 15 – Create motion tween

      7.   Klik frame 15, klik teks, pada properties Color=Tint dan pilih warna lain, ctrl+enter

h.   Teks dengan animasi Shape tween

      1.   Ketik ANIMATION

      2.   Klik kanan frame 15-insert key frame

      3.   Ganti ANIMATION menjadi DIGITAL

      4.   Klik frame 1-tekan Ctrl+B 2 x; Klik frame 15- tekan Ctrl+B 2x

      5.   Drag Frame 15 sampai 1, ubah properties tween=Shape, ctrl+enter

§  Shape hints

Shape hints memberikan kontrol untuk shape tween yang kompleks. Anda bisa mengatur setiap titik awal dari animasi perubahan bentuk lalu titik akhir dari animasi perubahan bentuk tersebut. Dengan memberi beberapa shape hints maka kita bisa mengontrol animasi perubahan bentuk sesuai dengan yang kita inginkan karena dalam animasi perubahan bentuk yang kompleks seringkali apa yang kita inginkan tidak bisa dilakukan oleh program Flash secara otomatis kecuali melalui shape hints.

Menggunakan Shape Hints Pada Sebuah Shape Tween

Anda dapat dengan mudah menggunakan shape hints pada shape tween dengan cara sebagai berikut :

1.      Buatlah shape tween dengan menggunakan langkah-langkah Membuat Shape Tween di atas.

2.      Sorot frame awal dari shape tween. Pilih Modify | Transform | Add Shape Hint, atau tekan Ctrl + H untuk menambah sebuah shape hint. Shape hint muncul dengan lingkaran merah dengan sebuah huruf di dalamnya (huruf itu mulai dari a sampai z).

3.      Pindahkan shape hint ke tempat yang Anda inginkan.

4.      Sekarang sorot frame terakhir. Anda akan melihat lingkaran hijau kecil dengan huruf yang sama seperti pada shape hint awal. Pindahkan shape hint ke tempat di mana Anda ingin shape hint pertama bergerak menujunya.

5.      Jalankan movie Anda (Control | Play) untuk melihat bagaimana shape hint mempengaruhi tweening.

6.      Tambahkan shape hint hingga Anda puas dengan hasilnya. Ingatlah untuk mencocokkan shape hint yang ada pada frame awal dan frame akhir – a harus ke a, b ke b dan seterusnya.

Jika setelah Anda menambahkan shape hint kemudian Anda tidak menginginkan shape hint tersebut, Anda dapat membuang semua shape hint dengan memilih menu Modify | Transform | Remove All Hints. Anda dapat juga mengklik kanan pada salah satu shape hint untuk membuka menu pop-up shape hint. Menu ini memungkinkan Anda untuk menambahkan sebuah hint (Add Hint), membuang sebuah hint (Remove Hint), atau Remove All Hint.

TIPS

Untuk animasi perubahan bentuk yang kompleks, jangan segan-segan untuk menggunakan shape hint sebanyak-banyaknya. Semakin banyak shape hint maka animasi Anda akan semakin baik sesuai dengan keinginan Anda.

Membuat Motion Tween

Langkah-langkah membuat sebuah motion tween adalah :

1.      Sorot frame di mana Anda ingin membuat animasi. Jika belum berupa sebuah keyframe maka rubahlah menjadi keyframe.

2.      Gambar atau imporlah gambar yang Anda ingin lakukan animasi. Anda hanya dapat melakukan animasi pada group, simbol, dan teks yang dapat diedit.

§  Jika Anda menggunakan sebuah gambar, grouplah gambar tersebut atau ubah menjadi sebuah simbol.

§  Jika Anda mempunyai gambar berupa simbol di library, Anda cukup mendrag gambar dari library ke stage.

§  Jika Anda menggunakan teks yang dapat diedit, Anda tidak perlu melakukan apa pun karena sudah berupa objek.

3.      Sorot frame dimana animasi akan berakhir. Rubah frame ini menjadi sebuah keyframe dengan memilih menu Insert | Keyframe.

4.      Pindahkanlah gambar dalam stage ke tempat yang ingin dituju. Ingatlah Anda tidak hanya dapat menggerakkan gambar, Anda juga bisa melakukan putaran, merubah ukuran, dan merubah efek warna.

5.      Klik kanan pada sebuah frame di antara kedua keyframe dan pilih Create Motion Tween. Teslah animasi Anda.

6.      Jika Anda ingin mengubah properties motion tween, klik ganda pada salah satu frameyang berada di antara kedua keyframe untuk membuka kotak dialog Frame Properties. Pilih tab Tweening. Anda dapat melakukan perubahan properties, seperti pada gambar di bawah ini :

 

·         Tween scaling – Jika Anda ingin mengubah ukuran.

·         Rotate – Jika Anda ingin memutar objek. Pilih jenis putaran pada menu dropdown dan kemudian angka rotasi pada kotak times. Jika Anda mengetik 0 pada kotak times, atau memilih None pada menu drop-down, tidak ada putaran yang dilakukan.

·         Orient to path direction – Ketika objek mengikuti sebuah alur, pilihan ini menyebabkan objek berada di tengah alur.

·         Easing. Easin – menentukan bagaimana animasi Anda dari awal sampai akhir. Ini berguna jika Anda ingin menciptakan efek mempercepat atau memperlambat. Jika Anda ingin anmiasi Anda mulai dengan lambat dan kemudian cepat, geser slider ke arah in. Untuk animasi yang permulaannya cepat, dan kemudian melambat, geser slider ke arah out. Jika Anda ingin kecepatan animasi konstan maka biarkan slider berada di tengah. Anda dapat juga mengetik besar dari Easing yaitu dari –100 sampai 100.

Contoh :

Untuk menggunakan animasi tween tersebut maka ikutilah petunjuk berikut ini.

1.      Gambar objek (misal: rectangle tool) pada stage, kemudian buatlah objek tersebut menjadi satu group (Ctrl+G).

2.      Setelah itu klik kanan pada objek lalu pilih Distribute to layers. Kemudian beri nama layer tersebut dengan nama kotak dengan cara double click item tersebut di timeline.

3.      Melalui timeline tentukanlah panjang animasi tersebut berjalan dengan cara klik kanan pada frame ke 15 lalu pilih insert keyframe. (lihat gambar 4).

4.      Kemudian klik kanan pada frame yang telah terbentuk. Sebelumnya blok dahulu keseluruhanframe tersebut. Lalu pilih Create Motion Tween…. Maka frame yang Anda blok tadi akan keluar sebuah tanda panah (sesuai panjang frame).

 

5.      Anda gerakkan objek yang Anda buat dari tempat yang semula ke tempat yang lain. Jika objek sudah Anda pindahkan, silahkan tekan enter untuk menjalankan animasi yang Anda disain. Maka objek yang Anda buat tadi akan bergerak dari sisi awal menuju ke sisi yang lainnya secara otomatis.