1 | H a l a m a n

Matakuliah : Multimedia Authoring | Dosen Mulyadi, S.Kom

UNIVERSITAS SERANG RAYA

Other Reference Link

http://lecturer.eepis-its.edu/~dhoto/pelatihan/flash/ http://www.warungflash.com/ | http://www.ilmuwebsite.com/tutorial-flash

http://janggeng.blogspot.com/search/label/Tutorial | http://www.babaflash.com/forum/ http://bumianimasi.files.wordpress.com/2008/09/dasar-pemrograman-flash-game.pdf

2 | H a l a m a n

TAMPILAN FLASH Pada setiap versi, Macromedia/Adobe Flash memiliki tampilan yang berbeda-beda.

Perbedaan itu disebabkan juga pada penambahan fiturnya. Namun dari perbedaan

tersebut sebenarnya ada yang fungsinya sama. Tampilan yang akan di bahas pada

tutorial kali ini adalah tampilan pada Macromedia Flash 8. Untuk memulainya, pertama

bukalah terlebih dahulu Macromedia Flash 8 maka akan tampil seperti gambar di bawah

ini :

Perhatikan pada kotak dialog di tengah-tengah:

1. Open a Recent Item : membuka file berekstensi .fla yang terakhir anda buka di flash.

2. Create New : membuat file flash baru. Terdapat 7 pilihan tapi pada seluruh tutorial di sini menggunakan Flash Document.

3. Create from template : membuat file flash baru dengan template yang sudah disediakan.

Selanjutnya klik pada Flash Document.

3 | H a l a m a n

Maka akan muncul tampilan seperti di bawah ini :

Keterangan Gambar ;

1. Menu Bar : kumpulan perintah-perintah operasi pada flash. 2. Toolbox : kumpulan tool yang memiliki fungsi-fungsi yang berbeda pada setiap

toolnya. 3. Timeline : digunakan untuk mengatur frame, layer dan durasi animasi. 4. Stage : halaman kerja pada flash. 5. Library : panel yang digunakan untuk menampilkan objek-objek yang dibuat. 6. Properties : panel yang digunakan untuk menampilkan informasi 7. Color Mixer : panel yang digunakan untuk memilih warna. 8. Align & Info & Transform : panel yang digunakan untuk mengubah ukuran dan

mengatur letak objek.

MENU BAR

Menu bar berisi kumpulan menu yang memiliki beragam fungsi. Letaknya berada di bar judul. Lihat gambar di bawah ini untuk lebih jelasnya :

Gambar dan letak menu bar

1. File : berisi kumpulan menu yang berhubungan pada dokumen flash anda. Misalnya menu save untuk menyimpan dokumen flash anda.

2. Edit : berisi kumpulan menu yang berhubungan dengan objek di stage. Misalnya menu select all yang digunakan menyeleksi seluruh objek di stage

4 | H a l a m a n

3. View : berisi kumpulan menu yang berhubungan dengan tampilan di stage. Misalnya menu zoom in yang digunakan untuk memperbesar tampilan stage

4. Insert : berisi kumpulan menu yang berhubungan dengan timeline, symbol serta scene. Misalnya menu scene digunakan untuk menambahkan scene pada dokumen flash anda

5. Modify : berisi kumpulan menu yang digunakan untuk mengedit objek di stage. Misalnya menu convert to symbol yang digunakan untuk membuat objek menjadi symbol

6. Text : berisi kumpulan menu yang berhubungan dengan huruf. Misalnya menu font yang digunakan untuk memilih jenis huruf.

7. Commands : berisi kumpulan menu yang berhubungan dengan flash javascript. Misalnya menu run command yang digunakan untuk menjalankan flash javascript.

8. Control : berisi kumpulan menu yang digunakan untuk melihat hasil animasi/objek yang anda buat. Misalnya menu play yang digunakan untuk menjalankan animasi di timeline.

9. Window : berisi kumpulan menu yang berhubungan dengan panel-panel di flash. Misalnya menu actions yang digunakan untuk menampilkan panel actions.

10. Help : berisi kumpulan menu yang berhubungan dengan tutorial dan cara menggunakan flash. Misalnya menu flash help yang digunakan untuk menampilkan panel berisi tutorial dan cara menggunakan flash.

TOOLBOX

Berisi kumpulan tool yang memiliki beragam fungsi. Apabila panel ini belum muncul anda dapat melakukan salah satu dari 2 cara di bawah ini:

1. Melalui menu bar Window>Tools 2. Menekan Ctrl+F2 pada keyboard.

Tampilan pada toolbox

5 | H a l a m a n

Keterangan Gambar ;

1. Selection Tool digunakan untuk memilih dan menyeleksi objek. Tekan tombol V pada keyboard untuk mengaktifkannya.

Selection tool terletak di pojok kiri atas toolbox. Fungsi utamanya untuk menyeleksi suatu objek. Selain fungsi utama tersebut selection tool juga digunakan untuk mengubah bentuk shape dan line. Untuk menggunakan selection tool anda bisa menekan tombol selection tool pada toolbox atau bisa juga dengan menekan tombol V pada keyboard. Berikut 2 contoh penggunaannya : 1. Menyeleksi dan memindah objek

Buatlah sebuah flash document kemudian buatlah sebuah lingkaran di stage . Tekan tombol V pada keyboard. Setelah selection tool aktif, letakkan kursor mouse di luar lingkaran sampai muncul tanda persegi di kursor mouse. Klik dan drag mouse sampai sebuah kotak yang muncul menutupi lingkaran. Lepaskan tekanan pada mouse lalu klik dan drag lingkaran di stage ke sembarang tempat dan lepaskan tekanan pada mouse.

2. Melengkungkan lingkaran

Buatlah sebuah flash document kemudian buatlah sebuah lingkaran di stage. Pastikan lingkaran tersebut tidak terseleksi, tekan tombol V pada keyboard. Setelah selection tool aktif, tempatkan kursor mouse di dekat lingkaran sampai muncul tanda garis seperempat lingkaran. Klik dan drag mouse untuk melengkungkan lingkaran. Lepaskan tekanan pada mouse jika sudah selesai.

2. Subselection Tool fungsinya hampir sama dengan selection tool tapi lebih detail. Tekan tombol A pada keyboard untuk mengaktifkannya.

Subselection tool terletak di pojok kanan atas toolbox. Fungsinya hampir sama dengan selection tool hanya saja terdapat perbedaan dalam mengubah bentuk objek. Untuk menggunakan selection tool anda bisa menekan tombol selection tool pada toolbox atau bisa juga dengan menekan tombol A pada keyboard. Berikut contoh penggunaannya : 1. Menyeleksi dan memindah objek

Buatlah sebuah flash document kemudian buatlah sebuah lingkaran di stage. Tekan tombol subselection tool di toolbox. Setelah subselection tool aktif, letakkan kursor mouse di samping lingkaran sampai muncul sebuah kotak hitam pada kursor mouse kemudian klik dan drag ke sembarang tempat. Jika sudah lepaskan tekanan pada mouse.

6 | H a l a m a n

2. Melengkungkan lingkaran Buatlah sebuah flash document kemudian buatlah sebuah lingkaran di stage. Tekan tombol subselection tool di toolbox. Setelah subselection tool aktif, letakkan kursor mouse di samping lingkaran sampai muncul sebuah kotak hitam pada kursor mouse kemudian klik. Akan muncul kotak-kotak putih di sekeliling objek. Letakan kursor mouse di salah satu kotak putih tersebut sampai muncul kotak putih di kursor mouse. Klik dan drag mouse ke sembarang arah lalu lepaskan tekanan.

3. Free Transform Tool digunakan untuk mengubah ukuran dan rotasi objek. Tekan

tombol Q pada keyboard untuk mengaktifkannya.

Free Transform Tool terletak di bawah Selection Tool. Free Transform Tool digunakan untuk merubah ukuran objek, memiringkan bentuk objek, menyeleksi objek, dan memutar objek. Untuk menggunakan Free Transform Tool anda bisa menekan tombol Free Transform Tool pada toolbox atau bisa juga dengan menekan tombol Q pada keyboard. Berikut contoh penggunaannya : 1. Memperbesar ukuran objek Buatlah sebuah flash document kemudian buatlah

sebuah lingkaran di stage. Tekan tombol Q pada keyboard. Setelah Free Transform Tool aktif, seleksi lingkaran di stage. Letakkan kursor mouse di pojok kanan bawah lingkaran sampai kursor berubah bentuk menjadi tanda panah yang miring. Klik dan drag kursor mouse menjauhi lingkaran dan lepaskan drag.

2. Memiringkan objek Buatlah sebuah flash document kemudian buatlah sebuah

lingkaran di stage. Tekan tombol Q pada keyboard. Setelah transform tool aktif, seleksi lingkaran di stage. Letakkan kursor mouse di sebelah kanan lingkaran sampai kursor berubah bentuk. Klik dan drag kursor mouse ke bawah lalu lepaskan drag.

4. Gradient Transform Tool digunakan untuk mengubah ukuran dan rotasi warna/fill. Tekan tombol F pada keyboard untuk mengaktifkannya.

Gradient Transform Tool terletak di bawah Subselection Tool. Gradient Transform Tool digunakan untuk mengatur letak, ukuran, rotasi,dan bentuk warna radial/linear. Untuk menggunakan Gradient Transform Tool anda bisa menekan tombol Gradient Transform Too pada toolbox atau bisa juga dengan menekan tombol F pada keyboard. Berikut contoh penggunaannya :

7 | H a l a m a n

1. Memindah letak warna radial Buatlah sebuah flash document kemudian buatlah sebuah lingkaran berwarna radial putih hitam tanpa garis di stage. Tekan tombol F pada keyboard. Setelah tranform tool aktif, klik lingkaran di stage. Letakkan kursor mouse di tengah-tengah lingkaran sampai kursor berubah bentuk menjadi + dengan tanda panah. Klik dan drag mouse ke sebelah kiri atas lalu lepaskan drag.

5. Line Tool digunakan untuk membuat garis. Tekan tombol N pada keyboard untuk mengaktifkannya.

Line Tool terletak di bawah Free Transform Tool. Line Tool digunakan untuk membuat garis. Apabila anda membuka panel properties (Ctrl+F3) ketika line tool aktif, maka pada panel properties akan tampil pilihan warna, bentuk, dan tebal garis serta beberapa penunjang lainnya. Untuk menggunakan line tool anda bisa menekan tombol line tool pada toolbox atau bisa juga dengan menekan tombol N pada keyboard. Berikut contoh penggunaannya : 1. Membuat garis

Buatlah sebuah flash document kemudian tekan tombol Line Tool pada toolbox. Setelah kursor berubah bentuk menjadi tanda + anda siap untuk menggambar garis. Klik mouse di stage bagian kiri atas. Kemudian drag mouse ke kanan bawah. Jika sudah lepaskan tekanan pada mouse.

6. Lasso Tool digunakan untuk untuk menyeleksi objek. Tekan tombol L pada

keyboard untuk mengaktifkannya.

Lasso tool terletak di bawah Gradient Transform Tool. Fungsinya sama dengan selection tool namun pada lasso tool ini kita dapat menyeleksi objek seperti menggambar garis pada stage. Untuk menggunakan lasso tool anda bisa menekan tombol lasso tool pada toolbox atau bisa juga dengan menekan tombol L pada keyboard. Berikut contoh penggunaannya : 1. Menyeleksi objek

Buatlah sebuah flash document kemudian buatlah sebuah lingkaran di stage terlebih dahulu. Tekan tombol L pada keyboard. Setelah lasso tool aktif, mulailah menyeleksi objek dengan menggambar sebuah garis. Klik dan drag kursor mouse di stage dari lingkaran bagian tengah atas ke bawah lingkaran dan kembali lagi ke atas sambil kursor memutari bagian luar lingkaran. Lepaskan drag maka lingkaran yang dibuat tadi akan terseleksi setengah bagian.

8 | H a l a m a n

7. Pen Tool digunakan untuk membuat garis dengan titik-titik bantu. Tekan tombol P

pada keyboard untuk mengaktifkannya.

Pen tool terletak di bawah Line Tool. Pen tool juga memiliki fungsi yang sama dengan Line tool tapi pada pen tool akan muncul titik-titik yang digunakan untuk membantu dalam pembuatan garis. Apabila garis yang dibuat saling terhubung sehingga menjadi sebuah bentuk (kotak misalnya), maka bagian dalam bentuk tersebut akan secara otomatis terisi oleh warna berdasarkan warna pada fill color. Untuk menggunakan pen tool anda bisa menekan tombol pen tool pada toolbox atau bisa juga dengan menekan tombol P pada keyboard. Berikut contoh penggunaannya : 1. Membuat garis sederhana

Buatlah sebuah flash document. Tekan tombol P pada keyboard. Setelah pen tool aktif, klik sekali kursor mouse di stage bagian kiri atas. Lalu klik sekali kursor mouse di stage bagian kanan bawah.

8. Text Tool digunakan untuk membuat static, dynamic, dan input text. Tekan

tombol T pada keyboard untuk mengaktifkannya.

Text tool terletak di bawah lasso tool. Digunakan untuk membuat kata/kalimat di stage. Terdapat tiga macam yaitu Static Text, Dynamic Text, dan Input Text. Untuk penjelasan dan penggunaan lebih lengkap silahkan lihat di bawah ini : 1. Static Text

Digunakan untuk menampilkan kata/kalimat yang hanya dapat diubah bentuk dan isinya saat berada di Flash. Untuk membuatnya, aktifkan terlebih dahulu text tool dengan cara mengkliknya langsung di toolbox atau menekan tombol T pada keyboard. Setelah text tool aktif, bukalah panel properties dengan menekan Ctrl+F3 pada keyboard. Ubah Text type pada panel properties menjadi Static Text. Pastikan text tool masih aktif, klik stage sekali maka akan muncul sebuah static text kosong. Mulailah menulis pada static text kosong ini. Jika sudah klik sekali mouse di stage pada sembarang tempat.

9 | H a l a m a n

Untuk mengatur panjang dan lebar static text, pastikan text tool masih aktif lalu klik static text di stage. Maka akan muncul kotak-kotak di sekeliling static text yang anda tekan tadi yang dapat anda gunakan untuk mengatur panjang dan lebar static text.

Text type : digunakan untuk memilih jenis text Font : digunakan untuk memilih jenis huruf Font size : digunakan untuk mengubah ukuran huruf Text (fill) color : digunakan untuk mengubah warna huruf Toggle the bold style : digunakan untuk menebalkan huruf Toggle the italic style : digunakan untuk memiringkan huruf Align Left : digunakan untuk membuat huruf rata kiri Align Center : digunakan untuk membuat huruf rata tengah Align Right : digunakan untuk membuat huruf rata kanan Justify : digunakan untuk membuat huruf rata kanan kiri Edit format options : digunakan untuk mengubah format teks seperti jarak

spasi antara kalimat di atas dengan di bawah Change orientation of text : digunakan untuk mengatur bentuk tulisan

horisontal atau vertikal Letter spacing : digunakan untuk mengatur jarak antara huruf Character position : digunakan untuk mengatur posisi huruf normal, berada

di atas, berada di bawah Font rendering option : digunakan untuk mengatur render pada kalimat Selection width : digunakan untuk mengatur panjang static text Selection height : digunakan untuk mengatur lebar static text Selection X position : digunakan untuk mengubah letak koordinat x static

text Selection Y position : digunakan untuk mengubah letak koordinat y static

text Selectable : digunakan untuk membuat static text dapat di seleksi Auto kern : digunakan untuk mengaktifkan kerning secara otomatis Url Link : digunakan untuk menaruh alamat situs pada static text Target : digunakan untuk mengatur kemunculan web browser ketika url link

pada static text ditekan

10 | H a l a m a n

2. Dynamic Text

Digunakan untuk menampilkan kata/kalimat yang dapat berubah sewaktu-waktu. Untuk mengubah bentuk dan isinya anda dapat menggunakan actionscript. Untuk membuatnya, aktifkan terlebih dahulu text tool dengan cara mengkliknya langsung di toolbox atau menekan tombol T pada keyboard. Setelah text tool aktif, bukalah panel properties dengan menekan Ctrl+F3 pada keyboard. Ubah Text type pada panel properties menjadi Dynamic Text. Pastikan text tool masih aktif, klik stage sekali maka akan muncul sebuah dynamic text kosong. Anda dapat mengisikan tulisan pada dynamic text kosong ini atau tetap mengkosongkannya. Untuk menghubungkan dynamic text dengan actionscript anda dapat mengisi kotak instance name ataupun kotak Var Untuk mengatur panjang dan lebar dynamic text, pastikan text tool masih aktif lalu klik dynamic text di stage. Maka akan muncul kotak-kotak di sekeliling dynamic text yang anda tekan tadi yang dapat anda gunakan untuk mengatur panjang dan lebar dynamic text

Text type : digunakan untuk memilih jenis text Font : digunakan untuk memilih jenis huruf Instance name : digunakan untuk menghubungkan dynamic text dengan

actionscript Font size : digunakan untuk mengubah ukuran huruf Text (fill) color : digunakan untuk mengubah warna huruf Toggle the bold style : digunakan untuk menebalkan huruf Toggle the italic style : digunakan untuk memiringkan huruf Align Left : digunakan untuk membuat huruf rata kiri Align Center : digunakan untuk membuat huruf rata tengah

11 | H a l a m a n

Align Right : digunakan untuk membuat huruf rata kanan Justify : digunakan untuk membuat huruf rata kanan kiri Edit format options : digunakan untuk mengubah format teks seperti jarak

spasi antara kalimat di atas dengan di bawah Letter spacing : digunakan untuk mengatur jarak antara huruf Character position : digunakan untuk mengatur posisi huruf normal, berada

di atas, berada di bawah Font rendering option : digunakan untuk mengatur render pada kalimat Edit character options: digunakan untuk memilih karakter mana saja yang

ingin dimasukkan ke dalam dynamic text Selection width : digunakan untuk mengatur panjang dynamic text Selection height : digunakan untuk mengatur lebar dynamic text Selection X position : digunakan untuk mengubah letak koordinat x dynamic

text Selection Y position : digunakan untuk mengubah letak koordinat y dynamic

text Line type : digunakan untuk memilih tipe garis yang ditampilkan Selectable : digunakan untuk membuat dynamic text dapat di seleksi Render text as HTML : digunakan untuk membuat dynamic text di render

sebagai HTML Variable : digunakan untuk menghubungkan dynamic text dengan

actionscript Auto kern : digunakan untuk mengkatifkan kerning secara otomatis Url Link : digunakan untuk menaruh alamat situs pada dynamic text Target : digunakan untuk mengatur kemunculan web browser ketika url link

pada dynamic text ditekan 3. Input Text

Digunakan untuk memasukkan kata/kalimat sesuai keinginan user/pengguna. Untuk mengubah bentuk dan isinya anda juga dapat menggunakan actionscript. Untuk membuatnya, aktifkan terlebih dahulu text tool dengan cara mengkliknya langsung di toolbox atau menekan tombol T pada keyboard. Setelah text tool aktif, bukalah panel properties dengan menekan Ctrl+F3 pada keyboard. Ubah Text type pada panel properties menjadi Input Text. Pastikan text tool masih aktif, klik stage sekali maka akan muncul sebuah input text kosong.

12 | H a l a m a n

Anda dapat mengisikan tulisan pada input text kosong ini atau tetap mengkosongkannya. Untuk menghubungkan input text dengan actionscript anda dapat mengisi kotak instance name ataupun kotak Var Untuk mengatur panjang dan lebar input text, pastikan text tool masih aktif lalu klik input text di stage. Maka akan muncul kotak-kotak di sekeliling input text yang anda tekan tadi yang dapat anda gunakan untuk mengatur panjang dan lebar input text

Text type : digunakan untuk memilih jenis text Font : digunakan untuk memilih jenis huruf Instance name : digunakan untuk menghubungkan dynamic text dengan

actionscript Font size : digunakan untuk mengubah ukuran huruf Text (fill) color : digunakan untuk mengubah warna huruf Toggle the bold style : digunakan untuk menebalkan huruf Toggle the italic style : digunakan untuk memiringkan huruf Align Left : digunakan untuk membuat huruf rata kiri Align Center : digunakan untuk membuat huruf rata tengah Align Right : digunakan untuk membuat huruf rata kanan Justify : digunakan untuk membuat huruf rata kanan kiri Edit format options : digunakan untuk mengubah format teks seperti jarak

spasi antara kalimat di atas dengan di bawah Letter spacing : digunakan untuk mengatur jarak antara huruf Character position : digunakan untuk mengatur posisi huruf normal, berada

di atas, berada di bawah Font rendering option : digunakan untuk mengatur render pada kalimat Edit character options: digunakan untuk memilih karakter mana saja yang

ingin dimasukkan ke dalam dynamic text Selection width : digunakan untuk mengatur panjang input text Selection height : digunakan untuk mengatur lebar input text Selection X position : digunakan untuk mengubah letak koordinat x input

text Selection Y position : digunakan untuk mengubah letak koordinat y input

text Line type : digunakan untuk memilih tipe garis yang ditampilkan

13 | H a l a m a n

Render text as HTML : digunakan untuk membuat dynamic text di render sebagai HTML

Variable : digunakan untuk menghubungkan dynamic text dengan actionscript

Auto kern : digunakan untuk mengkatifkan kerning secara otomatis Maximum character allowed : digunakan untuk mengatur jumlah huruf yang

dapat dimasukkan dalam input text

9. Oval Tool digunakan untuk membuat objek berbentuk lingkaran. Tekan tombol O pada keyboard untuk mengaktifkannya.

Oval Tool terletak di bawah Pen Tool. Oval Tool digunakan untuk membuat lingkaran. Apabila anda membuka panel properties (Ctrl+F3) ketika oval tool aktif, maka pada panel properties akan tampil pilihan warna, bentuk, dan tebal garis serta beberapa penunjang lainnya. Untuk menggunakan oval tool anda bisa menekan tombol oval tool pada toolbox atau bisa juga dengan menekan tombol O pada keyboard. Berikut contoh penggunaannya : 1. Membuat lingkaran

Buatlah sebuah flash document kemudian tekan tombol oval Tool pada toolbox. Setelah kursor berubah bentuk menjadi tanda + anda siap untuk menggambar lingkaran. Klik mouse di stage bagian kiri atas. Kemudian drag mouse ke kanan bawah. Jika sudah lepaskan tekanan pada mouse.

10. Rectangle Tool digunakan untuk membuat objek berbentuk persegi. Tekan

tombol R pada keyboard untuk mengaktifkannya.

Rectangle Tool terletak di bawah Text Tool. Rectangle Tool digunakan untuk membuat persegi. Apabila anda menekan tombol rectangle tool di toolbox dan menahannya selama 1-2 detik maka akan muncul kotak pilihan Rectangle Tool dan Polystar Tool. Polystar tool digunakan untuk membuat bintang bersegi-x dan segi-x. Apabila anda membuka panel properties (Ctrl+F3) ketika rectangle/polystar tool aktif, maka pada panel properties akan tampil pilihan warna, bentuk, dan tebal garis serta beberapa penunjang lainnya. Untuk menggunakan rectangle tool anda bisa menekan tombol rectangle tool pada toolbox atau bisa juga dengan menekan tombol R pada keyboard. Berikut contoh penggunaannya : 1. Membuat persegi panjang

Buatlah sebuah flash document kemudian tekan tombol rectangle Tool pada toolbox. Setelah kursor berubah bentuk menjadi tanda + anda siap untuk

14 | H a l a m a n

menggambar persegi. Klik mouse di stage bagian kiri atas. Kemudian drag mouse ke kanan bawah. Jika sudah lepaskan tekanan pada mouse.

2. Membuat bintang

Buatlah sebuah flash document kemudian tekan dan tahan tombol rectangle tool di toolbox sampai muncul kotak pilihan. Klik polystar tool pada kotak pilihan yang muncul. Buka panel properties (Ctrl+F3) dan tekan tombol Options pada panel properties tersebut. Pada panel yang muncul ubah style menjadi star lalu tekan ok. Anda sudah siap untuk menggambar bintang. Klik mouse di tengah-tengah stage. Kemudian drag mouse ke kanan bawah. Jika sudah lepaskan tekanan pada mouse.

11. Polystar Tool tombol ini muncul jika anda klik dan tahan tombol Rectangle Tool

dan pilih polystar Tool. Digunakan untuk membuat objek berbentuk persegi dengan jumlah segi yang sudah ditentukan.

Rectangle Tool terletak di bawah Text Tool. Rectangle Tool digunakan untuk membuat persegi. Apabila anda menekan tombol rectangle tool di toolbox dan menahannya selama 1-2 detik maka akan muncul kotak pilihan Rectangle Tool dan Polystar Tool. Polystar tool digunakan untuk membuat bintang bersegi-x dan segi-x. Apabila anda membuka panel properties (Ctrl+F3) ketika rectangle/polystar tool aktif, maka pada panel properties akan tampil pilihan warna, bentuk, dan tebal garis serta beberapa penunjang lainnya. Untuk menggunakan rectangle tool anda bisa menekan tombol rectangle tool pada toolbox atau bisa juga dengan menekan tombol R pada keyboard. Berikut contoh penggunaannya : 1. Membuat persegi panjang

Buatlah sebuah flash document kemudian tekan tombol rectangle Tool pada toolbox. Setelah kursor berubah bentuk menjadi tanda + anda siap untuk menggambar persegi. Klik mouse di stage bagian kiri atas. Kemudian drag mouse ke kanan bawah. Jika sudah lepaskan tekanan pada mouse.

2. Membuat bintang

Buatlah sebuah flash document kemudian tekan dan tahan tombol rectangle tool di toolbox sampai muncul kotak pilihan. Klik polystar tool pada kotak pilihan yang muncul. Buka panel properties (Ctrl+F3) dan tekan tombol Options pada panel properties tersebut. Pada panel yang muncul ubah style menjadi star lalu tekan ok. Anda sudah siap untuk menggambar bintang. Klik mouse di tengah-tengah stage. Kemudian drag mouse ke kanan bawah. Jika sudah lepaskan tekanan pada mouse.

15 | H a l a m a n

12. Pencil Tool digunakan untuk membuat garis. Tekan tombol Y pada keyboard untuk mengaktifkannya.

Pencil tool terletak di bawah Oval Tool. Pencil tool digunakan untuk menggambar seperti layaknya pensil dalam kehidupan nyata. Sama dengan line tool, pada pencil tool ini anda dapat mengubah warna, tebal, bentuk garis dan beberapa penunjang lainnya melalui panel properties (Ctrl+F3) ketika pencil toll aktif. Untuk menggunakan pencil tool anda bisa menekan tombol pencil tool pada toolbox atau bisa juga dengan menekan tombol P pada keyboard. Ketika pencil tool aktif coba perhatikan tulisan option pada toolbox bagian bawah. Anda akan melihat 2 options yang dapat digunakan pencil tool ini. 1. Drawing object : jika anda aktifkan tombol ini maka garis yang anda buat

dengan menggunakan pencil tool akan dijadikan drawing object. 2. Drawing mode : terdapat tiga pilihan di dalamnya yaitu, Starighten (garis yang

dibuat akan dibuat lurus), Smooth (garis yang dibuat akan dibuat melengkung), Ink (garis yang dibuat akan berdasarkan garis yang anda buat)

Berikut contoh penggunaannya : 1. Menggunkan pencil tool Buatlah sebuah flash document. Tekan tombol Y pada

keyboard. Setelah pencil tool aktif, klik dan tahan kursor mouse di stage dan anda sudah siap menggambar. Gerakkan kursor mouse sesuai keinginan anda. Jika sudah selesai menggambar, lepaskan tekanan pada mouse.

13. Brush Tool digunakan untuk menggambar shape dengan kuas yang sudah

ditentukan. Tekan tombol B pada keyboard untuk mengaktifkannya.

Brush tool terletak di bawah Rectangle Tool. Brush tool berfungsi seperti pencil tool hanya saja brush tool ini lebih besar bentuknya. Untuk menggunakan brush tool anda bisa menekan tombol brush tool pada toolbox atau bisa juga dengan menekan tombol B pada keyboard. Ketika brush tool aktif coba perhatikan tulisan option pada toolbox bagian bawah. Anda akan melihat beberapa options yang dapat digunakan brush tool ini. 1. Drawing object : jika anda aktifkan tombol ini maka gambar yang anda buat

dengan menggunakan brush tool akan dijadikan drawing object. 2. Lock fill : digunakan untuk mengunci warna fill. Misalnya anda menggunakan

warna radial hijau hitam. Jika lock fill ini anda aktifkan maka saat anda menggambar dengan brush tool, warna yang dihasilkan akan menyambung tidak saling tumpang tindih.

3. Brush mode : Digunakan untuk memilih mode brush terdapat 5 pilihan yaitu : Paint Normal (secara normal), Paint Fills (garis tidak akan terkena brush), Paint

16 | H a l a m a n

Behind (hasil brush berada diobjek lain), Paint Selection (hasil brush hanya kena pada objek shape yang diseleksi), Paint Inside (brush hanya digunakan dalam sebuah garis yang tengahnya kosong)

4. Brush size : digunakan untuk memilih ukuran brush yang digunakan 5. Brush shape : digunakan untuk memilih bentuk brush yang digunakan 6. Use presure : digunakan untuk membuat tebal hasil brush tergantung tekanan

yang anda berikan pada mouse 7. Use tilt : digunakan untuk membuat kursor brush menjadi berbentuk garis

lingkaran dengan tanda + di dalamnya. Berikut contoh penggunaannya : 1. Menggunakan brush tool

Buatlah sebuah flash document. Tekan tombol B pada keyboard. Setelah brush tool aktif, klik dan tahan kursor mouse di stage dan anda sudah siap menggambar. Gerakkan kursor mouse seuai keinginan anda. Jika sudah selesai menggambar, lepaskan tekanan pada mouse

14. Ink Bottle Tool digunakan untuk mewarnai dan merubah warna garis. Tekan

tombol S pada keyboard untuk mengaktifkannya. Ink bootle tool terletak di bawah Pencil Tool. Ink bootle tool digunakan untuk mewarnai stroke objek. Untuk menggunakan ink bootle tool anda bisa menekan tombol ink bootle tool pada toolbox atau bisa juga dengan menekan tombol S pada keyboard. Untuk mengetahui suatu objek bertipe stroke atau tidak, anda cukup menyeleksi objek tersebut lalu tekan Ctrl+F3. Apabila pada panel properties muncul tampilan seperti gambar di bawah ini maka objek yang anda seleksi tersebut bertipe stroke.

Berikut contoh penggunaannya: 1. Mengubah warna garis

Buatlah sebuah flash document. Buatlah sebuah garis berwarna hitam di stage dengan menggunakan line tool. Aktifkan ink bootle tool dengan menekan tombolnya pada toolbox. Ubah warna stroke color menjadi biru. Klik garis yang dibuat tadi dengan mouse yang sudah berubah menjadi kursor ink bootle tool. Maka garis pun akan berubah warna.

17 | H a l a m a n

15. Paint Bucket Tool digunakan untuk mewarnai dan merubah warna shape objek. Tekan tombol V pada keyboard untuk mengaktifkannya. Tekan tombol K pada keyboard untuk mengaktifkannya.

Paint bucket tool terletak di bawah Brush Tool. Paint bucket tool digunakan untuk memberikan warna pada ruang kosong atau mengubah warna pada fill objek. Untuk menggunakan paint bucket tool anda bisa menekan tombol paint bucket tool pada toolbox atau bisa juga dengan menekan tombol k pada keyboard. Berikut contoh penggunaannya: 1. Mengubah warna fill lingkaran

Buatlah sebuah flash document. Buatlah sebuah lingkaran dengan warna fill biru dan warna stroke hitam di stage. Aktifkan paint bucket tool dengan menekan tombolnya pada toolbox. Ubah warna fill color menjadi merah. Klik lingkaran yang dibuat tadi dengan mouse yang sudah berubah menjadi kursor paint bucket tool. Maka fill lingkaran pun akan berubah warna.

16. Eyedropper Tool digunakan untuk mengambil contoh warna. Tekan tombol I

pada keyboard untuk mengaktifkannya.

Eyedropper tool terletak di bawah Ink Bottle Tool. Eyedroppper tool digunakan untuk mengubah stroke style, stroke height, stroke color jika anda menggunakannya pada objek berbentuk stroke shape dan mengubah fill color jika anda menggunakannya pada objek berbentuk fill shape. Untuk menggunakan eyedropper tool anda bisa menekan tombol eyedropper tool pada toolbox atau bisa juga dengan menekan tombol i pada keyboard. Berikut contoh penggunaannya: 1. Mengganti fill color Buatlah sebuah flash document. Buatlah sebuah lingkaran dengan warna fill biru dan warna stroke hitam di stage dengan menggunakan oval tool. Ubah warna fill color menjadi merah. Aktifkan eyedropper tool dengan menekan tombolnya pada toolbox. Klik lingkaran yang dibuat tadi dengan mouse yang sudah berubah menjadi kursor eyedropper tool. Maka fill color pun akan berubah warna menjadi biru kembali.

17. Eraser Tool digunakan untuk menghapus objek. Tekan tombol E pada keyboard untuk mengaktifkannya.

Eraser tool terletak di bawah Paint Bucket Tool. Eraser tool digunakan untuk menghapus objek berbentuk stroke shape maupun fill shape. Untuk menggunakan eraser tool anda bisa menekan tombol eraser tool pada toolbox atau bisa juga

18 | H a l a m a n

dengan menekan tombol E pada keyboard. Ketika eraser tool aktif coba perhatikan tulisan option pada toolbox bagian bawah. Anda akan melihat beberapa options yang dapat digunakan eraser tool ini. 1. Eraser mode : Digunakan untuk memilih mode eraser. Terdapat 5 pilihan yaitu :

Erase Normal (menghapus secara normal), Erase Fills (menghapus objek bertipe fill shape saja), Erase Lines (menghapus objek bertipe stroke shape saja), Erase Selected Fills (menghapus objek bertipe fill shape yang terseleksi), Erase Inside (menghapus objek bertipe fill shape yang berada di dalam stroke shape)

2. Faucet : jika diaktifkan maka eraser dapat digunakan untuk menghapus obje bertipe fill shape atau stroke shape yang terhubung.

3. Eraser shape : digunakan untuk memilih bentuk penghapus. Berikut contoh penggunaannya : 1. Menghapus lingkaran

Buatlah sebuah flash document. Buatlah sebuah lingkaran berwarna merah dengan garis hitam di stage. Tekan tombol E pada keyboard. Pastikan option di bawah toolbox memiliki settingan sbb ; Eraser mode : Erase Normal, Faucet : tidak aktif, Eraser shape : berbentuk kotak terbesar. Setelah eraser tool aktif, klik dan drag mouse. Gerakkan kursor mouse ke arah lingkaran untuk menghapus lingkaran tersebut. Jika sudah selesai lepaskan drag.

18. Hand Tool digunakan untuk menggeser tampilan stage. Tekan tombol H pada keyboard untuk mengaktifkannya.

Hand tool terletak di bawah Eyedropper Tool. Hand tool digunakan untuk menggerakkan stage sesuai scrollbar yang terdapat pada stage. Untuk menggunakan hand tool anda bisa menekan tombol hand tool pada toolbox atau bisa juga menekan tombol H pada keyboard. Berikut contoh penggunaannya. 1. Menggerakkan stage.

Buatlah sebuah flash document. Pastikan zoom pada timeline bernilai 100. Tekan tombol H pada keyboard. Klik dan drag kursor mouse di stage kemudian gerakkan mouse untuk menggerakkan stage. Jika sudah selesai lepaskan drag.

19. Zoom Tool digunakan untuk memperbesar dan memperkecil tampilan stage.

Tekan tombol M atau Z pada keyboard untuk mengaktifkannya.

Zoom tool terletak di bawah Eraser Tool. Zoom tool digunakan untuk membesarkan atau mengecilkan tampilan ukuran stage. Untuk menggunakan zoom tool anda bisa menekan tombol zoom tool pada toolbox atau bisa juga menekan

19 | H a l a m a n

tombol M ataupun tombol Z pada keyboard. Ketika zoom tool aktif coba perhatikan tulisan option pada toolbox bagian bawah. Anda akan melihat beberapa options yang dapat digunakan zoom tool ini. 1. Enlarge : Jika aktif maka zoom tool akan berfungsi memperbesar ukuran

tampilan stage. 2. Reduce : Jika aktif maka zoom tool akan berfungsi memperkecil ukuran tampilan

stage. Berikut contoh penggunaannya. 1. Memperbesar ukuran tampilan stage.

Buatlah sebuah flash document. Pastikan zoom pada timeline bernilai 100. Tekan tombol Z pada keyboard. Pastikan Enlarge aktif pada options di bagian bawah toolbox. Klik mouse di stage untuk memperbesar stage.

20. Stroke Color digunakan untuk memilih warna garis.

Stroke Color terletak di bawah Hand Tool dan Zoom Tool. Stroke color digunakan untuk mengubah warna pada sebuah objek yang berbentuk stroke shape. Untuk menggunakan stroke color anda bisa menekan tombolnya langsung pada toolbox. Berikut contoh penggunaannya : 1. Mengubah warna garis

Buatlah sebuah flash document. Buatlah sebuah garis berwarna merah. Seleksi garis tersebut kemudian klik stroke color pada toolbox. Ubah warna pada stroke color menjadi biru. Maka warna garis pun berubah menjadi biru.

21. Fill Color digunakan untuk memilih warna shape objek.

Fill Color terletak di bawah Stroke Color. Fill color digunakan untuk mengubah warna pada sebuah objek yang berbentuk fill shape. Untuk menggunakan fill color anda bisa menekan tombolnya langsung pada toolbox. Berikut contoh penggunaannya : 1. Mengubah warna fill lingkaran

Buatlah sebuah flash document. Buatlah sebuah lingkaran dengan warna merah bergaris hitam. Seleksi fill yang berada di dalam lingkaran tersebut kemudian klik fill color pada toolbox. Ubah warna pada fill color menjadi biru. Maka warna fill lingkaran pun berubah menjadi biru.

20 | H a l a m a n

22. Black & White digunakan untuk membuat warna hitam pada Stoke Color dan warna putih pada Fill Color.

Black and white, No color, Swap colors ketika buah tombol ini terletak di bawah stroke color. Untuk menggunakannya anda dapat menekan tombolnya secara langsung pada toolbox. Kegunaan dari ketiga tombol tersebut adalah : Black and white : Digunakan untuk mengubah warna pada stroke color menjadi hitam dan fill color menjadi putih. No color : digunakan untuk membuat stroke color atau fill color yang terseleksi menjadi tidak ada warnanya. Swap colors : Menukar warna yang berada di stroke color dengan warna yang berada di fill color.

23. No Color digunakan untuk menghilangkan warna pada Stroke atau Fill Color. 24. Swap Color digunakan untuk menukar warna antara Stroke Color dan Fill Color.

TIMELINE

Timeline digunakan untuk frame, layer dan durasi animasi. Untuk memunculkan timeline anda dapat melakukannya melalui 3 cara yaitu :

1. Menekan tombol timeline di bawah menu bar 2. Melalui menubar Window>Timeline 3. Menekan tombol Ctrl+Alt+T pada keyboard Secara default panel timeline sudah muncul tetapi apabila belum muncul lakukan salah satu dari 3 hal di atas.

Keterangan Gambar ;

1. Tombol Timeline : tombol yang digunakan untuk memunculkan dan menghilangkan panel timeline.

2. Tombol back : tombol yang digunakan untuk kembali ke scene. 3. Tombol scene : fungsinya sama dengan tombol back. 4. Tombol Edit Scenes : tombol yang digunakan untuk mengedit scene.

21 | H a l a m a n

5. Tombol Edit Symbols : tombol yang digunakan untuk mengedit symbol. 6. Zoom : digunakan untuk memperbesar atau memperkecil tampilan stage. 7. Show/Hide All Layers : tombol yang digunakan untuk menyimpan dan

menghilangkan tampilan seluruh objek di stage. 8. Lock/Unlock All Layers : tombol yang digunakan agar seluruh objek di stage

dapat diubah/diedit atau tidak. 9. Show All Layers as Outlines : tombol yang digunakan agar seluruh objek di stage

tampil dalam bentuk garis saja atau tidak. 10. Timeline header : digunakan untuk menampilkan jumlah frame. 11. Playhead : digunakan untuk menunjukan di frame berapakah anda berada. 12. Insert Layer : digunakan untuk memasukkan layer baru. 13. Add Motion Guide : digunakan untuk memasukan layer motion. 14. Insert Layer Folder : digunakan untuk memasukan folder. 15. Delete Layer : digunakan untuk menghapus layer. 16. Center Frame : digunakan untuk membuat playhead berada di tengah-tengah

frame. 17. Onion Skin : digunakan untuk menampilkan objek pada frame sebelumnya

maupun sesudahnya dengan warna transparan. 18. Onion Skin Outlines : digunakan untuk menampilkan objek pada frame

sebelumnya maupun sesudahnya dengan garis luarnya saja. 19. Edit Multiple Frames : digunakan untuk menampilkan dan mengedit objek pada

frame sebelumnya maupun sesudahnya. 20. Modify Onion Markers : digunakan untuk mengatur onion marker. 21. Current Frame : digunakan untuk menunjukan di frame mana anda berada. 22. Frame Rate : digunakan untuk menunjukan frame rate. 23. Elapsed Time : digunakan untuk menunjukan berapa lama animasi pada frame

dimainkan.

1. Blank Keyframe 2. Keyframe 3. Motion Frame 4. Folder Layer 5. Layer 6. Mask Frame 7. Guide Frame

22 | H a l a m a n

Apabila di dalam frame terdapat tanda bulat putih, berarti frame tersebut kosong tidak mengandung objek apapun. Apabila frame tersebut terdapat tanda bulat hitam, berarti frame tersebut terdapat objek. Tanda kotak dalam frame hanyalah sebagai pemisah yang maksudnya memiliki kesamaan dengan frame-frame sebelumnya, jika di dalam frame tersebut terdapat tanda panah, bermakna terdapat tweening dalam beberapa frame tersebut, garis putus-putus berarti tweening yang gagal terjadi dalam frame. Sedangkan bila di furame tersebut terdapat huruf a kecil, berarti frame tersebut mengandung action script. Frame yang terdapat tanda bendera merah maksudnya frame tersebut telah diberi identitas (nama pada properti), dan jika frame tersebut terdapat tanda gelombang biru, berarti frame tersebut mengandung suara.

STAGE Stage merupakan tempat halaman kerja di flash. Seluruh objek yang kita buat berada di stage ini. Stage terdiri dari 2 bagian yaitu bagian dalam dan bagian luar. Perhatikan gambar di bawah ini untuk lebih jelasnya :

Gambar Stage Objek-objek yang dibuat di luar stage tidak akan muncul di swf. Hanya objek-objek di dalam swf saja yang muncul dengan catatan pada menu View, Show All harus diaktifkan. Selanjutnya pastikan anda tidak menyeleksi satu objek pun di stage lalu tekan Ctrl+F3. Maka akan muncul panel properties seperti gambar di bawah ini :

23 | H a l a m a n

Gambar panel properties

1. Background : digunakan untuk memilih warna pada stage. Secara default warnanya adalah putih. Warna yang digunakan pada stage hanya warna solid (satu warna). Jika anda ingin membuat warna radial pada stage misalnya, anda harus membuat sebuah persegi panjang berwarna radial dengan panjang dan lebar yang sama dengan stage.

2. Frame rate : digunakan untuk mengatur kecepatan memainkan frame dalam 1 detik. Misalnya anda mengisikan 20 fps, berarti dalam waktu 1 detik 20 frame akan dimainkan. Semakin besar nilainya semakin cepat dan halus hasil animasi yang dibuat.

3. Size : digunakan untuk mengatur stage. Tekan tombol di sebelah tulisan size maka akan muncul gambar seperti di bawah ini :

Gambar Document Properties

1. Title : judul pada document flash anda 2. Description : deskripsi tentang document flash anda 3. Dimensions : digunakan untuk mengatur width (panjang) dan height (lebar)

stage 4. Match :

Printer : menyamakan ukuran stage dengan ukuran kertas printer

24 | H a l a m a n

Contents : memperbesar atau memperkecil ukuran stage sesuai letak dan ukuran konten

Default : menyamakan ukuran stage sama dengan ukuran default 5. Background color : sama dengan penjelasan pada background di atas 6. Frame rate : sama dengan penjelasan pada frame rate di atas 7. Ruler units : satuan ukuran yang digunakan pada panjang dan lebar. Terdapat 6

macam yaitu : Inches, Inches (decimal), Points, Centimeters, Milimeters, Pixels. Sebaiknya anda menjadikan Pixels sebagai default karena pada tutorial-tutorial yang ada di sini menggunakan pixels.

8. Make Default : tombol yang digunakan untuk menyimpan perubahan yang dilakukan di panel Document Propvrties ini dan menjadikannya settingan default.

LIBRARY Panel Library merupakan panel yang digunakan untuk menampilkan objek-objek yang dibuat di flash. Objek-objek tersebut berupa movie clip, button, graphic. Sound dan video yang diimport juga masuk dalam panel Library ini. Bisa juga dikatakan objek tidak akan masuk ke dalam panel library ini jika belum dijadikan symbol atau diimport ke dalam panel library. Apabila panel library belum muncul, anda bisa memunculkannya dengan cara: 1. Melalui menu bar Window>Library

Pilih menu seperti gambar di atas

25 | H a l a m a n

2. Menekan tombol Ctrl+L pada keyboard.

Panel Library Panel Library ini akan sering digunakan. Jadi sebisa mungkin panel library ini harus dimunculkan.

COLOR MIXER Panel yang digunakan untuk mengubah dan membuat warna untuk stroke color dan fill color. Stroke color digunakan untuk mewarnai garis sedangkan fill color digunakan untuk mewarnai objek berbentuk shape. Untuk membuka panel ini anda dapat membukanya melalui 2 cara yaitu : 1. Melalui menu bar Window>Color Mixer

Pilih menu Color Mixer

26 | H a l a m a n

2. Menekan tombol Shift+F9 pada keyboard. Pilih salah satu cara di atas, maka akan muncul panel berikut ini :

Panel Color Mixer

1. Type : terdapat 5 macam type warna yang dapat digunakan : None : Tidak ada warna. Solid : Satu warna. Linear : Warna yang terdiri dari 2 warna atau lebih yang membentuk garis

lurus. Radial : warna yang terdiri dari 2 warna atau lebih yang membentuk lingkaran

. Bitmap : warna yang bersumber pada gambar. Untuk hal ini anda harus

mengimport 2. Overflow : Muncul jika anda memilih warna bertype linear atau radial.

Digunakan untuk untuk mengaplikasikan warna linear/radial pada fill maupun stroke color. Terdapat 3 macam jenis : Extend : menampilkan warna linear/radial dari awal sampai akhir. Reflect : menampilkan refleksi dari warna linear/radial jika warna sudah habis. Repeat : mengulang warna linear/radial jika warna sudah habis.

3. Linear RGB : membuat SVG-compliant (Scalable Vector Graphics) pada warna

linear/radial. 4. RGB : digunakan untuk mengatur tingkat intensitas warna R (red/merah), G

(green/hijau), B (blue/biru). 5. Alpha : digunakan untuk mengatur tingkat transparansi.

27 | H a l a m a n

6. Color picker : digunakan untuk memilih warna secara visual. Drag kursor berbentuk plus untuk mencari warnanya.

7. Hexadecimal value : menampilkan nilai hexadecimal dari warna yang anda gunakan. Anda juga dapat mencari warna dengan memasukan nilai dari hexadecimal warna yang anda inginkan.

8. Current color swatch : digunakan untuk menampilkan warna yang anda pilih.

SYMBOL Symbol adalah sebuah elemen dalam flash yang dapat berupa object tombol, images ataupun movie clip. Symbol ini dapat digunakan berulang kali dalam sebuah document flash. Letaknya pada panel library. Tampilan jendela symbol dapat di munculkan dengan menekan tombol F8. Symbol memiliki 3 fungsi: A. Movie Clip

Merupakan symbol dengan animasi di dalamnya. Langkah-langkah membuat sebuah movie clip: 1. Buat sebuah file baru, File > New. 2. Siapkan sebuah objeck yang akan menjadi symbol. Sebagai contoh di sini digunakan sebuah

file vector image lebah (untuk membuatnya, bisa menggunakan freehand ataupun illustrator).

Nantinya lebah ini akan di-animasikan bagian sayapnya, dijadikan movie clip untuk digunakan

berulang-ulang.

3. Di freehand / illustrator, pisahkan terlebih dahulu tubuh dan sayapnya 4. Masuk ke freehand/illustrator, copy badannya terlebih dahulu (ctrl+c), kembali ke flash, letakan

pada layer 1, frame ke-1, paste (ctrl + v).

28 | H a l a m a n

5. klik kanan pada badan lebah tersebut, pilih convert to symbol. Klik pada bagian movie clip

6. Double klip pada objeck lebah, fungsinya untuk mengedit symbol yang sudah kita buat. Maka pada bagian timeline akan tampil Scene 1--- lebah, artinya kita sedang dalam mode mengedit

movie clip lebah.

7. Buat layer baru untuk sayapnya, copy dari freehand/illustrator 8. Klik kanan pada layer 2, frame 5, insert key frame. 9. Klik pada layer 2, hingga tampak di blok, kembali klik kanan, pilih create motion tween. 10. Klik frame 10, F6 (Insert keyframe). kembali ke frame 5, tekan Q untuk free transform, kecilkan bagian

sayap ini.

11. Tekan F5 (Insert Frame) pada layer 1, grame 10.

29 | H a l a m a n

12. Kembali ke scene 1, dengan meng-klik text scene 1 pada timeline 13. Test Movie (ctrl +ENTER) 14. Klik kanan pada layer lebahnya, pilih add motion guide. 15. Maka akan tampil layer tambahan seperti pada gambar berikut.

16. Klik di frame ke-1 layer guide, hingga tampak di blok. 17. Gambar lintasan yang akan dilalui sang lebah, gunakan pen tool. 18. Klik kanan pada frame 10 layer guide, insert frame / F5 19. Klik kanan pada frame 10, layer 1, insert keyframe / F6 20. Blok dengan cara meng-klik layer 1, klik kanan pada framenya, pilih create motion tween 21. Klik frame ke-10 layer 1, geser ke ujung lain lintasan yang sudah kita buat.

30 | H a l a m a n

22. Test movie, maka akan tampil seperti dia atas ini. Lebah akan mengikuti lintasan yang sudah kita

23. buat, tetapi arahnya, masih satu, hanya ke atas saja.

31 | H a l a m a n

24. Rotate sang lebah hingga searah dengan lintasan, shingga seperti di bawah ini. 25. Lanjutkan dengan mengklik panel orient to path di bagian properties, gunanya, agar lebah tersebut

mengikuti alur yang sudah kita tentukan.

26. Test movie.

B. Button

Merupakan symbol yang berfungsi sebagai tombol, jika di klik maka akan memberikan respon, entah itu link, sound ataupun eksekusi sebuah perintah Langkah-langkah membuat sebuah movie clip:

1. Buat sebuah file baru, File > New 2. Buat sebuah kotak dengan rectangle tool atau tekan R pada layer 1 frame 1. 3. Double klik pada kotak tersebut, sehingga baik stroke maupun fillnya ter-select. Klik kanan

pilih convert to symbol

32 | H a l a m a n

4. Pilih Button dan beri nama pada kolom name 5. Lanjutkan dengan double klik pada tombol tersebut sehingga kita meng-edit button-nya.

6. Di dalam button tersebut terdapat 4 frame,

Up --> Posisi statis button, tidak ada aksi. Over --> Posisi ketika cursor singgah di button, button menunjukan respon atau perubahan.

Down --> Posisi ketika button di klik, button menunjukan respon atau perubahan.

Hit --> Area aksi dimana button akan menunjukan responnya. Apa yang ada di dalam frame

hit,

nantinya tidak akan ditampilkan pada button kita.

7. Klik F6, pada frame over. 8. Aktif pada frame over double klik pada object, ganti warnanya, maka ketika cursor memasuki area

hit tombol akan berubah warna menjadi biru.

9. Klik F6, pada frame down dan hit kembali aktif di frame down. Pilih object tersebut geser ke

bawah 10 point, ke kanan 10 point.

33 | H a l a m a n

10. Hasilnya jika button tersebut di klik, akan tampak sperti ditekan ke bawah. 11. Test movie

C. Graphic Merupakan symbol yang berfungsi hanya sebagai image statik, tidak ada animasi Langkah-langkah membuat sebuah movie clip: 1. Buat sebuah file baru, File > New 2. Import sebuah gambar, File > Import > Import to stage, pilih sebuah image dari folder anda. 3. Klik kanan pada image tersebut, pilih convert to symbol

4. Jika anda ingin mengecek image tersebut, tekan F11 atau Window > Library, secara otomatis image tersebut akan disimpan di library, dan sewaktu-waktu dapat digunakan, tinggal klik dan

drag pada stage.

ANIMASI Animasi dalam flash pada dasarnya adalah rangkaian frame-frame yang ditampilkan secara berurutan dimana di setiap frame tersebut terdapat objek yang akan dianimasikan. Animasi dalam flash terbagi menjadi beberapa bagian, dan masing-masing bagian memiliki karakteristik dan tehnik tersendiri, yaitu sebagai berikut :] A. ANIMASI FRAME BY FRAME

Animasi frame by frame adalah animasi yang dibentuk dari perbedaan kondisi beberapa frame yang dijalankan secara satu persatu. Perhatikan contoh di bawah ini :

1. Klik frame 1 kemudian buatlah sebuah objek lingkaran dalam stage, letakkan lingkaran

ini pada sisi kiri stage. 2. Klik kanan pada pada frame 2 dan pilih Insert keyframe, sekarang geserlah lingkaran

tersebut sedikit ke kanan. 3. Ulangi langkah 2 untuk frame 3, 4 dan seterusnya hingga frame 5, perhatikan gambar

dibawah ini

34 | H a l a m a n

4. Test movie (Ctrl + Enter) untuk melihat hasilnya, jika berhasil, maka movie akan

menampilkan objek lingkaran yang bergerak dari kiri ke kanan. B. ANIMASI MOTION TWEEN

Animasi Tween pada dasarnya adalah animasi yang didsarkan pada perbedaan kondisi 2 buah frame dalam 1 layer yang diantara kedua frame tersebut diberikan efek Tween, untuk memahamkan tentang tween motion, perhatikan contoh berikut :

1. Klik frame 1 dan buatlah sebuah objek lingkaran di sisi kiri stage. 2. Klik kanan pada frame 20 dan pilih Insert keyframe, geserlah lingkaran tersebut ke

kanan 3. Klik kanan di salah satu frame yang berada di antara frame 1 dan frame 20, misal frame

10, 4. kemudian pilih Create Motion Tween, jika langkah di atas benar, maka akan muncul

tanda panah yang mengarah ke frame 20. Perhatikan dibawah ini ;

5. Lakukan test movie (Ctrl + Enter) maka akan terlihat bahwa bola bergerak dari kiri ke

kakan. Dengan adanya tweening sangat membantu dalam mempercepat pembuatan suatu animasi, kita tidak perlu lagi menggambar proses frame by frame selama gerakan animasi tersebut masih berada dalam satu pola.

Penggunaan Beberapa Animasi Motion Tween adalah sebagai berikut :

a. Animasi dengan Tween Shape Animasi Tween Shape adalah animasi dalam frame yang memungkinkan terjadinya perbuhan bentuk objek. Untuk memahaminya, lakukan langkah-langkah berikut : 1. Buat sebuah file baru dan aktifkan frame 1 kemudian buatlah sebuah text menggunakan

Text Tool.

35 | H a l a m a n

2. Tekan Ctrl + B untuk memecah huruf tersebut menjadi objek shape. Jika text Anda menggunakan lebih dari 1 huruf, maka tekan Ctrl + B sebanyak 2 kali.

3. Klik kanan pada frame 20 dan pilih Insert Blank Keyframe, kemudian buatlah sebuah text yang berbeda dengan text pada frame 1.

4. Lakukan hal yang sama untuk text pada frame 20 seperti pada langkah 2. 5. Klik sembarang frame diantara frame 1 20 kemudian perhatikan panel property, pada

Tween pilihlah shape, jika berhasil maka akan muncul tanda panah tween menandakan tweening berhasil. Perhatikan gambar dibawah ini untuk seluruh proses di atas;

6. Lakukan test Movie untuk melihat hasilnya.

b. Animasi dengan Motion Path Animasi dengan motion path pada dasarnya sama dengan motion tween, hanya saja animasi pada motion path terdapat suatu jejak garis yang akan diikuti oleh objek yang dianimasikan. Untuk membuat animasi motion path, lakukan langkah-langkah di bawah ini : 1. Buka file baru dan buatlah sebuah segitiga menggunakan Rectangle Tool. 2. Klik kanan pada layer 1 dan pilih Add Motion Guide , maka akan muncul sebuah layer baru

yang memiliki icon seperti ini . 3. Klik frame 1 layer guide, kemudian gambarlah sebuah garis menggunakan Pencil Tool pada

stage. 4. Arahkan segitiga ke ujung kiri dari garis guide, perhatikan lingkaran kecil yang menucul saat

Anda men-drag segitiga ke ujung garis, gunakan bantuan lingkaran ini untuk menempatkan segitiga ke ujung garis. Putarlah segitiga munurut arah garis.

5. Insert keyframe pada frame 30, baik layer 1 maupun layer guide, pada frame 30 layer 1, tempatkan kembali segitiga di ujung garis yang berlawanan seperti cara no. 4

6. Klik kanan pada sembarang frame diantara frame 1 dan 30 layer 1 dan pilih Create Motion Tween.

7. Perhatikan panel property dan centang option Orien to Path agar segitiga mengarah mengitkui arah garis, Perhatikan gambar 3.4 untuk seluruh proses di atas. Lakukan test movie untuk melihat hasilnya, jika ternyata segitiga tidak mengikuti pola garis yang Anda gambar, kemungkinan ada kesalahan dalam hal penempatan segitiga di ujung garis, segitiga secara otomatis akan menempel ke ujung garis jika Anda mendekatkan sensor lingkaran kecil saat memindahkan segitiga.

36 | H a l a m a n

c. Animasi dengan Masking Masking dalam flash berarti menutup sebagian stage dan hanya memperlihatkan bagian tertentu. Animasi dengan masking biasanya dipergunakan untuk pembukaan sebuah presentasi atau memberikan efek seperti senter. Perhatikan langkah-langkah berikut : 1. Buka sebuah fila baru, buatlah sebuah text pada stage misalkan FLASH dengan ukuran

font agak besar sekitar 50 - 60. 2. Tambahkan sebuah layer baru (layer 2) dan buatlah sebuah objek lingkaran pada layer yang

baru yang besarnya lingkaran kira-kira seukuran font. 3. Insert keyframe pada frame 30 untuk layer 1 dan layer 2, kemudian buatlah sebuah animasi

motion tween sederhana untuk lingkaran, usahakan objek lingkaran ini mengenai badan text. Perhatikan gambar berikut ;

4. Klik kanan pada layer 2 dan pilih Mask dan lakukan test movie untuk melihat hasilnya. Agar lebih tampak hidup, ubahlah warna Background stage menjadi gelap dan ubah warna text 40 menjadi terang. Adapun warna dari objek lingkaran yang bertindak sebagai mask tidak perlu diubah.

37 | H a l a m a n

ACTION SCRIPT

Action script adalah bahasa pemograman yang digunakan dalam flash untuk menjalankan fungsifungsi tertentu. Macromedia Flash memiliki ratusan script dengan fungsi yang berbeda-bedaakan tetapi yang sering digunakan hanya beberapa script saja, sehingga akan memudahkan kita apabila kita masih awam terhadap Flash maupun Action Script-nya. Action script dalam flash dapat diterapkan pada 3 tempat yaitu pada:

frame, tombol, dan movie clip.

Peletakan action script pada masing-masing tempat memiliki cara yang berbeda, walaupun dapat menghasilkan hasil yang sama. Sebelum melangkah lebih jauh tentang action script, ada baiknya jika kita mempelajari dasar-dasar action script terlebih dahulu, tehnologi action script yang akan kita pelajari masih berbasis Action Script 2.0 yang biasanya dipergunakan pada Macromedia Flash 8 dan masih terdapat pada Adobe Flash CS4 A. Dasar Dasar Action Script Action Panel Anda dapat membuat ActionScript di dalam Action Panel. nama Action Panel muncul sebagai Frame Action Panel apabila skrip diaplikasikan ke Frame atau Object. Action Panel apabila skrip diaplikasikan ke objek seperti movie clip atau tombol. Untuk membuka Action Panel, lakukan salah satu dari cara di bawah ini:

1. Pilih salah satu frame yang aktif, kemudian pilih menu window action atau menekan tombol F9,

2. Untuk menutup panel action acript, tekan kembali tombol F9.

38 | H a l a m a n

Tanda Baca dalam ActionScript Seperti dalam bahasa tulisan memiliki tanda baca untuk mengakhiri kalimat, atau mengelompokkan berbagai kalimat menjadi satu paragraf, Flash juga memiliki tanda baca seperti itu.

a. Kurung kurawal dan titik koma Kurung kurawal, { }, digunakan untuk melakukan pengelompokan, contoh :

Dalam skrip di atas, kedua metode stopAllSounds dan stop akan dieksekusi saat tombol mouse dilepaskan karena berada dalam satu kelompok seperti sebuah paragraf. Titik koma berfungsi seperti tanda akhir kalimat yang setelah kalimat pertama berakhir kemudian beralih ke kalimat berikutnya. Di dalam ActionScript, setiap pernyataan dieksekusi dari atas ke bawah secara berurutan. Jadi pada contoh di atas, setelah metode stopAllSounds selesai baru kemudian stop dijalankan.

b. Komentar Komentar adalah keterangan yang ditambahkan di dalam skrip untuk menjelaskan apa arti kode tersebut namun hal ini tidak akan berpengaruh sama sekali terhadap jalannya action script. Komentar dapat membantu memahami skrip apabila Anda hendak mereview kembali kode tersebut untuk perbaikan. Komentar diawali dengan dua buah garis miring, //, dan berlaku hingga akhir baris.

Perlu diperhatikan juga bahwa penulisan action script adalah case sensitif, artinya penulisan huruf kecil dan huruf besar akan memiliki maksud yang berbeda. Secara default, penulisan fungsi action yang benar akan merubah warna text menjadi warna biru

39 | H a l a m a n

B. Action Script Pada Frame Action script pada frame yang paling sering digunakan adalah script untuk mengontrol jalannya suatu animasi, baik animasi utama pada frame utama, maupun animasi yang berada di dalam movie clip. Perhatikan contoh latihan berikut :

1. Buatlah sebuah file baru kemudian buatlah sebuah animasi motion tween sederhana berupa bola yang bergerak dari kiri ke kanan sebanyak 30 frame kemudian test movie. Anda akan melihat bahwa movie dimainkan secara terus menerus (loop). Anda sama sekali tidak memiliki kontrol terhadap animasi tersebut. Kita akan mengontrol movie dengan script sederhana berisi action stop, play, dan goto.

2. Buat layer baru dan beri nama denganl layer action. Anda akan menempatkan script di frame di layer tersebut. Biasakanlah untuk membuat script di layer tersendiri agar memudahkan dipeerbaiki.

3. Insert keyframe di frame 30 kemudian tekan F9 untuk membuka panel action dan ketikkan script berikut pada panel act ion script.

4. Tutup Action Panel. Perhatikan pada frame 30 akan terdapat sebuah huruf a kecil pada frame yang menandakan pada frame tersebut terdapat script.

5. Lakukan test movie maka movie akan berhenti di frame 30. Perhatikan gambar di bawah ini .

Sekarang kita akan mencoba action goto yang memungkinkan sebuah animasi berpidah-pindah antar frame.

6. Buka kembali panel action script pada frame 30, hapus action script stop (); dan ganti dengan action goto

Lakukan Test Movie. Anda akan melihat movie dimainkan pertama kali sampai frame terakhir kemudian kembali ke frame 20.

7. Ulangi kembali langkah 6, dan ganti action script pada frame 30 menjadi

Lakukan test movie maka Anda akan melihat movie akan dimainkan hingga frame 30 kemudian berhenti pada frame 15.

40 | H a l a m a n

Untuk memudahkan pengetikan action script, terdapat sebuah panel yang terletak di sebelah kiri panel action script yang berfungsi sebagai script otomatis tanpa melakukan pengetikan, pehatikan gambar disamping. ! Kliklah salah satu fungsi action tersebut maka secara otomatis akan muncul action script pada panel action.

C. Action Script Pada Tombol Script dalam sebuah tombol merupakan suatu fungsi yang akan dieksekusi apabila tombol tersebut ditekan. Sebagai bahan latihan, gunakan file yang sama seperti action script pada frame.

1. Hapus seluruh action script yang ada di dalam frame sehingga animasi berjalan secara terusmenerus.

2. Buatlah 2 buah tombol masing-masing bernama tombol play dan tombol stop. 3. Klik tombol play dan masukkan script berikut :

4. Klik tombol stop dan masukkan script berikut :

5. Lakukan test movie untuk melihat hasilnya. Ketika Anda menekan tombol stop maka

movie akan berhenti seketika, dan untuk menjalankannya kembali, tekan tombol play

41 | H a l a m a n

D. Action Script Pada Movie Clip Action script pada movie clip harus diawali dengan salah satu event handler yang akan mengaktifkan berbagai macam kondisi sebuah fungsi, event handler tersebut antara lain : onClipEvent (load) { } : fungsi akan dijalankan saat movie clip pertama kali muncul ke dalam stage. onClipEvent (unload) { } : fungsi akan dijalankan saat movie clip menghilang. onClipEvent (enterFrame) { } : fungsi akan dijalankan sepanjang frame yang aktif. onClipEvent (mouseDown) { } : fungsi akan dijalankan saat mouse ditekan. onClipEvent (mouseUp) { } : fungsi akan dijalankan saat mouse dilepas (setelah sebelumnya ditekan). onClipEvent (mouseMove) { } : fungsi akan dijalankan saat mouse digerakkan. onClipEvent (keyDown) { } : fungsi akan dijalankan saat sebuah tombol keyboard ditekan onClipEvent (keyUp) { } : fungsi akan dijalankan saat sebuah tombol keyboard dilepas (setelah sebelumnya ditekan) onClipEvent (data) { } : : fungsi akan dijalankan saat data eksternal diload ke movie clip Untuk memahami event handler di atas, lakukan contoh latihan berikut :

1. Buka sebuah file baru kemudian buatlah sebuah objek segi lima, caranya tahan agak lama rectangle tool, kemudian pilih polystart tool.

2. Konversi segilima menjadi movie clip. 3. Klik movie clip segi lima kemudian tekan tombol F9 untuk membuka panel action dan

masukkan script berikut : onClipEvent (load) {

_x = 300; _y = 200;

} onClipEvent (enterFrame) {

_rotation += 5; } onClipEvent (mouseDown) {

_xscale = 80; _yscale = 80;

} onClipEvent (mouseUp) {

_xscale = 120; _yscale = 120; _alpha = 50;

} onClipEvent (mouseMove) {

_alpha = 100; _xscale = 100; _yscale = 100;

} onClipEvent (keyDown) {

_visible = false; } onClipEvent (keyUp) {

_visible = true; }

4. Lakukkan test movie untuk melihat hasilnya.

Penjelasan :

1. Pada kelompok event handler load, movie pertama kali akan ditempatkan pada koordinat X = 300 dan Y = 200;

2. Pada kelompok event handler enterframe, movie clip akan berputar searah jarum jam dengan pertambahan sudut sebesar 5 derajat.=

3. Pada kelompok event handler mouseDown, saat mouse ditekan, movie clip akan mengalami pengecilan ukuran sebesar 80 % baik skala X maupun skala Y.

42 | H a l a m a n

4. Pada kelompok event handler mouseUp, saat mouse dilepas, movie clip akan mengalami perbesaran ukuran sebesar 120 % baik skala X maupun skala Y dan juga mengalami transparansi (nilai alpha )sebesar 50 %.

5. Pada kelompok event handler keyDown, saat sembarang tombol ditekan, maka movie clip akan menghilang dari stage.

6. Dan pada kelompok event handler keyUp, saat tombol tersebut dilepas, maka movie clip akan muncul kembali.

PUBLISH

Publish Setting adalah fasilitas untuk menentukan file flash yang kita buat akan kita eksekusi menjadi file berformat apa. Pada Flash 8, kita dapat mengeksekusi file flash kita menjadi berbagai macam format seperti *swf, *html, *gif, dsb. (pehatikan gambar di bawah).

Penentuan format publish setting dilakukan pada langkah terakhir setelah kita yakin bahwa pekerjaan kita telah selesai. Untuk mengeksekusi file flash kita menjadi file berformat apa cukup kita lakukan dengan cara :

1) klik menu File, 2) pilih Publish Setting. 3) Tentukan file flash kita akan

kita eksekusi menjadi file berformat apa dengan dengan cara memberi tanda seleksi (centang) pada Formats Type.

4) klik Publish dan akhiri dengan 5) klik OK.