Belajar Flash

Dasar-dasar Flash 

Mengenal Flash MX

Macromedia Flash atau yang sering disebut juga dengan Flash merupakan program untuk membuat animasi dan aplikasi web. Selain itu, juga dapat digunakan untuk pembuatan game, animasi kartun dan aplikasi multimedia interaktif seperti demo produk dan tutorial interaktif yang kini banyak  dijumpai dalam CD.

Membuka Program Flash MX

Aktifkan Flash MX melalui tombol Start > Program > Macromedia > Macromedia Flash MX

Tunggulah beberapa saat hingga muncul tampilan area kerja dari Flash MX, Kenali bagian-bagian utama didalam Flash MX berikut ini :

  

Keterangan 

1. Title Bar	Menampilkan nama program dan file dokumen yang sedang aktif
2. Menu Bar	Terdiri dari 10 menu utama yang masing-masing berisi sub menu atau perintah lagi
3. Timeline	Fungsi untuk mengorganisasi dan mengontrol waktu pemutaran movie dan frame.
4. Panel	Fungsi untuk mengatur penggunaan warna, component,library, scena, action, behavior, dan lain-lain.
5. Toolbox	Terdiri dari beberapa tool untuk membuat gambar, teks, warna dan mengatur tampilan gambar pada stage.
6. Stage	Merupakan lembar kerja  dimana gambar, teks dan tombol navigasi dibuat untuk keperluan animasi atau aplikasi.
7. Property Inspector	Fungsinya untuk mengatur ukuran dan warna stage, menentukan frame rate, dan memilih ruler atau satuan ukuran yang akan digunakan untuk membuat objek.

 Mengatur Ukuran Stage

Dalam keadaan default, ukuran stage ditetapkan sebesar 550 X 400 pixels. 

Aktifkan Property Inspector  yang berada di bawah lembar kerja.

 

 Klik Size pada tombol  Document Properties hingga muncul :

 

Ubah nilai Dimension sesuai dengan kebutuhan. Background Color adalah untuk memberi warna pada stage.

-------------------------------------------------

Membuat Objek pada Flash

Menggambar Bentuk Sederhana

Aktifkan  Flash MX dan perhatikan Toolbox yang tersedia pada kiri tampilan. Untuk menggambar suatu objek maka terlebih dahulu harus mengenal tools yang ada pada Flash MX.

Tools

Arrow Tool : digunakan untuk memilih objek. | Sub Select Tool : Untuk memodifikasi sebuah garis yang dibuat dengan pen tool. | Line Tool : Alat untuk membuat garis. | Lasso Tool : Memilih suatu area secara tidak teratur / bebas. | Pen Tool : Alat untuk menggambar garis bersambung. | Text Tool : Membuat objek tulisan. | Oval Tool : Alat untuk membuat objek elips. | Rectangle Tool : Membuat objek bentuk persegi. | Pencil Tool : Alat untuk membuat garis aau titik secaa bebas. | Brush Tool : Menggambar dengan kuas secara bebas. | Free Transform Tool : Memodifikasi  bentuk dari objek. | Fill Transform Tool : Memodifikasi bentuk dan posisi dari gradient fills. | Bottle Tool : Mewarnai suatu garis. | Paint Bucket Tool : Memodifikasi warna dan gradasi warna didalam suatu objek. | Eye Dropper Tool : Mengambil warna dari suatu objek yang kemudian bisa dipakai untuk objek lain dengan warna yang sama. | Erase Tool : Menghapus suatu gambar. | Hand Tool : Untuk menggeser stage secara bebas. | Zoom Tool : Untuk melihat perbesaran gambar. | Stroke Color : Untuk memiih warna ketika menggambar garis. | Swap Color : Membalik warna garis atau isi suatu objek. |  Fill Color : Mengisi warna pada bagian objek yang sedang digambar. | No Color : Menghilangkan warna dari objek. | Default Colors : Mengembalikan stroke menjadi warnaasal hitam pada stroke dan putih pada fill. | Option Panel : Pilihan untuk memodifikasi efek dari tools yang kita pilih.

Menggambar Garis

Aktifkan atau klik Line Tool  pada Toolbox. Tempatkan pada Stage. Klik mouse pada posisi yang diinginkan lalu drag untuk menarik garis lurus. Setelah diperoleh panjang garis yang diinginkan, lepaskan tombol mouse. Akan terlihat tampilan garis.

Menggambar Lingkaran

Aktifkan atau klik Oval Tool  pada Toolbox. Tempatkan pada Stage. Klik mouse pada posisi yang diinginkan lalu drag untuk membuat lingkaran. Lepaskan pada posisi dimana objek tersebut besar atau kecil sesuai dengan kebutuhan. Akan terlihat tampilan lingkaran.

Menggambar Segitiga

Aktifkan atau klik Line Tool  pada Toolbox. Tempatkan pada Stage. Klik mouse pada posisi yang diinginkan lalu drag untuk menarik garis lurus. Setelah diperoleh panjang garis yang diinginkan, lepaskan tombol mouse. 

Lanjutkan membuat garis lurus yang kedua. Klik diujung garis pertama lalu drag untuk menarik garis lurus yang kedua. Setelah diperoleh panjang yang diinginkan,lepaskan tombol mouse. Hasilnya garis lurus kedua akan tampil.

Terakhir, buat garis lurus ketiga dengan cara mengklik ujung garis yang kedua lalu drag ke ujung garis yang pertama, lepaskan tombol mouse untuk menampilkan garis lurus yang ketiga. Sekarang akan terlihat tampilan segitiga.

Menggambar Segiempat

Aktifkan atau klik Rectangle Tool  pada Toolbox. Tempatkan pada Stage. Klik mouse pada posisi yang diinginkan lalu drag untuk membuat lingkaran. Lepaskan pada posisi dimana objek tersebut besar atau kecil sesuai dengan kebutuhan. Akan terlihat tampilan segiempat.

Membuat Warna pada Objek

Setelah kita membuat objek segitiga, oval maupun segiempat, maka langkah selanjutnya adalah memberi warna pada objek tersebut. Klik Paint Bucket Tool pada ToolBox. Tempatkan pada daerah dalam objek yangakan dibuat warnanya.

Mengatur Ukuran Tampilan Gambar

Aktifkan Objek yang akan diatur ukurannya baik diperbesar maupun diperkecil dengan cara mengklik Arrow Tool lalu klik daerah dalam pada objek.  

Setelah terseleksi objek yang akan diperbesar maupun diperkecil, lalu klik Free Transform Tool pada Toolbox. Akan tampil objek yang terseleksi dengan tanda titik-titik pada bagian garis objek.

Perbesar atau perkecillah objek tersebut dengan cara menggeser titik-titik tersebut sesuai dengan keinginan.

Menggunakan Ruler dan Grid

Terkadang didalam membuat suatu objek kita memerlukan bantuan untuk menentukan ukuran sesuai dengan ukuran yang ada seperti rules dan Grid.

Aktifkan Ruler dengan cara klik View > Rulers pada Menu Bar

Aktifkan Grid dengan cara klik View > Grid > Show Grid

Menyimpan Dokumen Flash

Setelah Objek dibuat maka langkah selanjutnya adalah dengan menyimpan objek tersebut dengan cara Klik File > Save As. Akan terlihat tampilan seperti :

Isikan nama file pada kotak kosong File name. Klik tombol  Save.

---------------------------------------------

Membuat Tombol pada Flash

Bagaimana membuat tombol pada Flash ?

Untuk membuat tombol pada Flash, langkahnya sebagai berikut

1. Membuat tombol dengan menggunakan teks
2. Membuat tombol dengan menggunakan kotak

1. Membuat tombol dengan menggunakan Teks

• Siapkan Stage
• Buatlah sebuah teks . Misalnya Home
• 
• Klik kanan pada tombol Home > pilih Convert to Symbol
• 
• Tulis Name : home, pilih Type : Button, selanjutnya klik tombol OK
• Selanjutnya klik 2 kali pada tombol home sehingga terlihat tampilan seperti :
• 
• Klik kanan pada daerah Over
• Lalu pilih Insert keyframe
• Klik tombol home
• Ubah warna menjadi biru pada properties
• Begitu juga dengan down dan hit (untuk area spot)
• Akhiri dengan meng klik scene 1
• Simpan dengan nama : tombol
• Jalankan dengan menekan tombol Ctrl+Enter

-----------------------------------------------------------------------

Memanggil file .swf pada Flash

Bagaimana memanggil file swf didalam Flash untuk link ?

Persiapan :

Siapkan 3 buah file swf yang sudah jadi sebagai file yang akan di link didalam satu folder (jangan diluar folder)

Langkah :

• Buatlah sebuah project untuk me-link-kan ke tiga file swf tersebut.
• Siapkan Stage dengan ukuran 650 x 480
• Buatlah tiga buah layer
• 
• Ubahlah warna background menjadi hitam

 

 

 Pada layer frame, buatlah segi empat pada stage dengan warna putih pada line dan non aktifkan pada fill color

• Pada layer tombol, buatlah tombol Gambar 1, Gambar 2, dan Gambar 3 seperti gambar berikut :

 

• 
• Selanjutnya adalah, Klik layer movie clip lalu tekan Ctrl+F8 untuk membuat tampilan kosong.sehingga akan tampil layar dialog seperti berikut :
• 
• Isikan Name : target ; type : Movie Clip... Klik tombol OK
• Klik Scene 1
• Pada Library terdapat beberapa nama antara lain : gambar1, gambar2, gambar3, dan target
• 
• Random Post
• Drag target yang ada di Library ke dalam bingkai dengan posisi di sebelah kiri atas. dan tulislah pada property untuk Instance Name : target
• 
• terlihat tanda + pada bingkai kiri atas
• 
• Selanjutnya penulisan script.
• Klik tombol Gambar 1, buka actions dan ketiklah script berikut :
• 
• Simpan dengan nama : Latihan loadMivie    didalam satu folder
• Jalankan dengan menekan Ctrl+Enter

 

 -------------------------------------------------------

 Membuat Menu pada Flash

Kita akan membuat tampilan seperti berikut :

Langkah-langkah nya adalah :

• Siapkan lembar kerja dengan ukuran default ( 550 x 400 pixels)
• Siapkan 5 layer dengan nama-nama : bg, tombol, text menu, content, dan halaman
• 
• 
  
• Selanjutnya adalah buatlah persegi panjang pada frame 1 layer bg dengan menggunakan Rectangle Tool (R)
• Setelah itu juga tombol-tombol pada frame 1 layer tombol sebanyak 4 tombol dengan terlebih dahulu merubah type nya menjadi button dengan cara klik kanan salah satu tombol tersebut lalu pilih Convert to Symbol selanjutnya pilih option Button > klik tombol Ok
• Dan untuk layer text menu buatlah tulisan/menu pada tiap-tiap tombol pada frame1 layer text menu

• Untuk layer Content, tulislah text yang berada tampilan diatas
• Untuk layer halaman tulislah text Halaman 1 dengan warna merah
• Selanjutnya klik kanan pada semua layer (layer bg, tombol, text menu, content dan halaman) pad frame 4 lalu pilih Insert keyframe
• Pada layer halaman dan frame 2 dan 3, klik kanan pilih insert keyframe
• Pada Layer halaman dan frame 2 , lalu klik tulisan Halaman 1 (yang berwarna merah) ubah menjadi Halaman 2
• Pada Layer halaman dan frame 3 , lalu klik tulisan Halaman 1 (yang berwarna merah) ubah menjadi Halaman 3
• Pada Layer halaman dan frame 4 , lalu klik tulisan Halaman 1 (yang berwarna merah) ubah menjadi Halaman 4
• Pada layer tombol, lalu klik kotak tombol 1, dan buka actions lalu tulis script berikut :

 

 

 ---------------------------------------------

Membuat Menu Popup

 

 Menu PopUp adalah efek animasi yang menampilkan submenu dari menu tersebut ketika pointer berada pada menu tersebut.

Langkah pembuatan :

1. Buat background pada dokumen
2. 
3. Buat layer baru lalu beri nama bar kemudian buat objek persegi panjang dengan Fill Color Biru namun tanpa Stroke Color. Atur posisi berada di atas layer Background
4. 
5. 
6. Untuk layer Background dan bar beri Insert Frame pada frame 15
7. 
8. Buat Layer Profil, Sejarah dan Visi dan Misi
9. 
10. Pilih frame 1 pada layer Profil kemudian buat tombol PROFIL dengan cara Klik kanan pada text PROFIL, lalu pilih Convert to Symbol, beri nama PROFIL  dan pilih type Button.. lalu Klik Ok
11. 
12. Beri insert keyframe pada frame 5, buat kotak letakkan dibawah menu Profil lalu di group
13. 
14. Pada layer Sejarah dan Visi dan Misi beri Insert Keyframe pada frame 5
15. Pada Layer Sejarah  buat text Sejarah  dengan warna kuning pada frame 5 lalu ubah menjadi tombol jangan lupa buatlah Rollovernya juga agar ketika pointer berada di atas text maka akan terlihat perubahan warna pada text tersebut.
16. 
17. Begitu pula dengan Visi dan Misi
18. Mulai dari layer Sejarah sampai layer Visi dan Misi sorot dari frame 11 hingga frame 15 klik kanan lalu pilih Remove Frames untuk menghapus frame
19. 
20. Pada Layer profil pilih frame 5 lalu beri nama frame menu-profil pada property inspector
21. 
22. pilih frame 1 lalu ketik script stop(); pada panel actions frames
23. 
24. Klik tombol PROFIL lalu tulis script berikut pada Actions Button
25. 
26. Pada frame 5 pilih tombol PROFIL lalu tulis script berikut :
27. 
28. Jalankan dengan menekan tombol Ctrl+Enter pada keyboard

 

 ------------------------------------------------------

Membuat Menu Rollover

 

 Rollover adalah efek animasi yang akan tampil ketika pointer  berada di atas tombol menu.

Langkah pembuatan :

1. Buat sebuah tombol menu
2. Ubah menjadi Button dengan cara Klik kanan pada tombol tersebut lalu pilih Convert too Symbol dan pilih Button
3. 
4. kalo sudah menjadi tombol, maka langkah selanjutnya adalah klik 2 kali pada tombol tsb maka akan terlihat gambar berikut :
5. 
6. Klik kanan pada over lalu pilih Insert KeyFrame lalu klik tombol tsb kemudian ubah warna menjadi merah pada properties
7. Begitu pula dengan Down  ubah menjadi warna kuning.
8. Dan untuk Hit cukup sampai Klik kanan > pilih Insert Keyframe
9. Selanjutnya klik Scene 1
10. Tekan tombol Ctrl + Enter untuk menjalankannya
11. Selamat mencoba.
12. Untuk menuliskan text menu Home, cukup di tuliskan di atas tombol tersebut.. lalu jalalankan...
13. 

 

 

 ------------------------------------------------------------

 Membuat Scrolling Text pada Flash

 Fungsi Scrolling Text adalah untuk menggulung text secara horizontal maupun vertikal.

Langkah pembuatan :

1. Siapkan dokumen baru lalu ganti nama layer menjadi Field Text
2. 
3. Buat Text paragraph seperti berikut :
4. Pada property Inspector pilih Text Type : Dynamic Text, Instance Name : text dan untuk Line Type pilih Multiline.
5. 
6. Tahan tombol Shift lalu klik 2 kali pada sudut kanan bawah bingkai teks, hasilnya kotak berubah menadi hitam
7. Drag kotak hitam ke atas hingga separuh bingkai teks.
8. 
9. Siapkan layer baru ganti nama layer menjadi Scroll
10. 
11. Buat tombol Up dan Down seperti gambar berikut :
12. Pembuatan tombol Up dan Down dengan cara klik kanan tombol Up yang sudah di gabungkan dengan teks nya lalu pilih Convert to Symbol, pilih Type : Button lalu klik tombol Ok. Begitu pula dengan tombol Down.
13. Pilih tombol Up lalu tulis script ini :
14. Pilih juga tombol Down lalu tulis script ini :
15. Simpan lalu jalankan dengan menekan tombol Ctrl + Enter pada Keyboard .
16. Hasilnya akan terlihat seperti berikut :
17.