Tutorial Macromedia Flash 8

Macromedia Flash 8

Macromedia flash 8 ialah sebuah software yang memiliki banyak fungsi. Selain digunakan untuk membuat animasi kartun program atau software ini juga dapat digunakan untuk membuat animasi pada Web, CD tutorial, presentasi produk, aplikasi interaktif, game edukasi sederhana, presentasi untuk tugas kuliah dll.

Untuk dapat memahami dasar-dasar dari software macromedia flash 8 kita akan melewati beberapa tahapan belajar, yaitu:

1.      Mengenal layout dari macromedia flash 8

2.      Membuat dan memahami cara kerja Motion Tween

3.      Membuat dan memahami cara kerja Motion Guide

4.      Membuat dan memahami cara kerja Mask

5.      Membuat slide presentasi sederhana

Dari beberapa tahapan di atas kami berharap dapat merangsang keingintahuan peserta dalam memahami dan menguasai dengan mahir suatu software (dalam hal ini macromedia flash 8) agar dapat menjadi bekal dikemudian hari.

1.       Layout Macromedia Flash 8

2.      Motion Tween

Motion tween merupakan animasi sederhana yang ada pada flash. Kita hanya tinggal menentukan titik awal dan titik akhir dari pergerakan benda.

1.      Siapkan stage dengan ukuran 550 x 400 pixel dengan melakukan “double klik” pada:

2.      Rubah fps (frame per second) menjadi 30. Caranya seperti pada langkah pertama.

3.      Buat lingkaran bebas pada stage dengan menggunakan Oval Tool (shortcut O) pada ToolBox.

4.      Seleksi lingkaran dengan menggunakan Selection Tool (shortcut V).

5.      Pilih Modify → Convert to Symbol (shortcut F8).

6.      Pada kotak dialog isi nama symbol dan pilih type sebagai Movie Clip lalu klik OK.

Setelah itu symbol akan masuk ke dalam panel library di sebelah kanan layar.

7.      Lalu klik kanan pada frame pertama layer 1 dan pilih Create Motion Tween.

8.      Klik kanan pada frame 15 dan pilih insert keyframe, lalu klik pada frame 15 dan pindahkan posisi lingkaran tersebut.

9.      Animasi tween telah selesai dan dapat anda test dengan menekan Enter atau Ctrl-Enter.

3.      Motion Guide

Supaya motion tween dapat bergerak sesuai jalur yang kita inginkan maka dapat digunakan Motion Guide.

1.      1.      Masih pada file yang sama, sekarang klik kanan pada layer 1 dan pilih Add Motion Guide.         Setelah itu timeline akan berubah menjadi:

2.      Klik frame 1 pada layer Guide lalu gambar sebuah garis sembarang.

3.    Klik frame 15 pada layer 1 dan letakkan lingkaran tersebut tepat pada garis dengan menggunakan Selection Tool dengan kondisi Snap to Object telah aktif.

4. Setelah itu test dengan menggunakan Ctrl-Enter dan dapat terlihat bahwa lingkaran telah bergerak sesuai dengan jalur yang kita buat. Jika gerakan terlalu cepat coba turunkan nilai fps dengan cara seperti yang tadi (langkah 2 Motion Tween).

4.      Animasi Mask Sederhana

Animasi Mask bekerja seperti jika kita melubangi sebuah kertas pertama dengan pola lubang tertentu dan menumpuknya dengan kertas kedua sehingga gambar yang ada pada kertas kedua hanya tampak melalui pola lubang pada kertas pertama.

1.   Siapkan Stage dan fps seperti pada langkah 1 dan 2 Motion Tween dan rubah warna stage menjadi hitam #000000.

2.   Buat text bertuliskan “Light Effect” pada stage dengan menggunakan Text Tool (shortcut T).

3.   Dengan text tersebut masih terseleksi klik pada panel properties di bawah dan isi besar font menjadi 40 (jenis font dan warna bebas).

4.   Seleksi text tersebut lalu tekan Ctrl-Alt-2 dan Ctrl-Alt-5 untuk meletakkan text pada tengah-tengah stage.

5.   Ubah nama dari Layer 1 menjadi “mask” dengan melakukan double klik pada nama layer. Setelah itu klik Insert New Layer pada jendela layer sehingga muncul layer baru dan pindahkan layer 2 tersebut dengan menDragnya ke bawah.

6.   Klik kanan pada layer mask dan pilih Mask.

Jika sudah seperti ini itu berarti layer 2 telah berperan sebagai kertas kedua dan layer mask berperan sebagai kertas pertama yang memiliki pola lubang seperti pada ilustrasi yang telah disampaikan diawal.

7.   Klik pada frame 1 pada layer 2 dan buat sebuah lingkaran (tanpa stroke color atau garis tepi) dengan mengatur warna gradien bertipe radial dari warna putih ke warna hitam pada panel Color Mixer. Dan letakkan lingkaran tersebut seperti gambar berikut (jangan lupa untuk mengklik gambar gembok disamping layer 2 untuk dapat mengedit layer tersebut):

 Untuk menonaktifkan stroke color klik pada logo stroke color dan klik lambang
.

untuk merubah warna klik dua kali pada lambang
. Gradian dapat kita edit dengan menggeser lambang
 sesuai dengan yang kita inginkan.

  

8.   Buat motion tween pada lingkaran yang baru kita buat seperti pada cara yang sebelumnya telah diajarkan sehingga lingkaran tersebut bergerak dari samping kiri text menuju ke samping kanan text.

Jangan lupa menambahkan frame pada layer mask agar jumlahnya sama dengan jumlah frame pada layer 2 dengan cara klik frame pada layer yang dituju dan pilih Insert Frame (shortcut F5).

9.   Test dengan menekan Ctrl-Enter dan anda akan mendapatkan sebuah animasi efek cahaya.

5.      Slide presentasi sederhana

1. Siapkan Stage berukuran 550 x 400 pixel dengan fps : 30.
2. Buat tulisan “HOME”, “CONTACT”, “PRODUCT” dengan menggunakan text tool(T) dengan font dan ukuran bebas. Lalu atur seperti pada gambar:

3. Seleksi tulisan “HOME” lalu buat symbol movieclip dengan menekan F8. Isi nama seperti pada gambar, lalu tekan OK.

4. Lalu Double klik pada instance movieclip tulisan “HOME” dan kita telah berada di dalam instance movieclip tersebut.
5. Ubah nama layer tempat tulisan “HOME” berada menjadi “home”. Lalu ubah tipe layer menjadi mask dengan klik kanan pada layer tersebut dan pilih Mask.
6. Buat dua layer lagi dan beri nama “abu-abu” dan ”hitam” dan letakkan pada bagian bawah layer home seperti pada gambar:

7. Pada layer abu-abu buat objek kotak tanpa garis tepi dengan warna #CCCCCC dan posisikan seperti pada gambar:

8. Copy frame 1 pada layer abu-abu dengan cara klik kanan pada frame lalu pilih copy frames. Lalu paste pada frame 1 layer hitam.

9. Pada layer hitam ubah warna objek kotak tersebut menjadi hitam dengan cara seleksi objek kotak tersebut lalu klik pada fill color dan pilih warna hitam. lalu posisikan kedua objek kotak seperti pada gambar:

 

10. Buat symbol movie clip pada kedua objek kotak yang kita punya dan beri nama “hitam” pada kotak hitam dan “abu-abu” pada kotak abu-abu dengan menekan F8.

11. Buat motion tween pada objek kotak hitam dan juga kotak abu-abu dengan pergerakan seperti pada gambar:

12. Buat layer baru dengan nama “script”. Lalu buat blank keyframe pada frame 10 dengan cara klik kanan pada frame 10 layer script dan pilih insert blank keyframe.

13. Dengan keadaan frame 10 pada layer script masih terseleksi tekan F9 untuk membuka panel action dan ketikkan “stop();”.

Script ini berfungsi untuk berhenti pada frame tempat script ini berada (dalam hal ini frame 10 pada layer script). Jika suatu frame sudah terdapat script di dalamnya maka keyframenya akan berubah menjadi seperti gambar:

14. Setelah itu kita kembali ke timeline utama dengan cara double klik pada stage atau klik pada tulisan Scene 1 seperti pada gambar:

15. Lalu buat symbol button dengan cara tekan ctrl+F8 lalu isikan kotak dialog seperti pada gambar. Jangan lupa memilih type:button.

16. Isi dari symbol instance button ialah sebagai berikut:

Terdapat empat frame yaitu frame Up, Over, Down, dan Hit.

-          Frame Up berfungsi sebagai tampilan tombol pada kondisi awal sebelum ditekan.

-          Frame Over berfungsi sebagai tampilan ketika kursor mouse berada tepat di atas tombol.

-          Frame Down berfungsi sebagai tampilan tombol pada kondisi sedang ditekan.

-          Frame Hit berfungsi sebagai area tekan tombol tersebut.

17. Lalu isikan frame Up dengan text “HOME” sama persis ukuran dan warnanya seperti yang telah kita buat sebelumnya dan letakkan tepat ditengah stage.

18. Lalu isi frame Over dengan cara buat blank keyframe dahulu pada frame Over lalu isikan dengan instance “home_over” yang terdapat pada panel library dengan cara mendragnya ke dalam stage dan letakkan tepat ditengah stage.

19. Lalu copy frame Up dan paste pada frame Down dan juga frame Hit. Hal ini akan menyebabkan tidak adanya perubahan ketika tombol ditekan dengan keadaan awal. Hasil akhir timeline akan seperti gambar:

20. Lalu kembali ke timeline utama dengan double klik pada stage. Klik kanan pada tulisan “HOME” yang terdapat pada stage dan pilih swap symbol.

21. Pada kotak dialog yang muncul pilih instance home_btn dan klik OK.

Yang kita lakukan ini ialah menukar instance home_over dengan instanve home_btn

22. Pada tahap ini kita telah menyelesaikan pembuatan tombol “HOME”. Setelah itu lakukan hal yang sama untuk kedua tombol yang lain (CONTACT dan PRODUCT).
23. Setelah semua tombol sudah selesai dibuat langkah selanjutnya adalah membuat script untuk link tombol dan juga membuat isi dari tiap tombol.

24. Untuk membuat script navigasi link pada tombol klik pada tombol “HOME” yang ada pada stage lalu tekan F9 untuk membuka panel action dan ketikkan:

 on(release){

            gotoAndStop("home");

            }

Script tersebut berfungsi untuk membuat ketika tombol ditekan maka kita akan berpindah dan berhenti pada frame “home”.

25. Lakukan hal yang sama pada tombol “CONTACT” dan “PRODUCT” tapi bedakan alamat frame yang dituju. Untuk tombol contact:

Untuk tombol product:

26. Lalu buat layer baru dengan nama label. Seleksi frame 1 pada layer tersebut dan beri label dengan cara klik panel properties yang terdapat di bawah stage dan ketikkan nama “home” pada tempat seperti pada gambar:

27. Buat blank keyframe pada frame ke 2 dan ke 3. Lalu beri nama label “contact” dan “product” dengan cara yang sama.
28. Lalu posisikan keyframe tersebut dengan cara mendragnya seperti pada gambar:

29. Lalu buat layer baru dan beri nama “script”. Dengan frame pertama masih terseleksi tekan F9 dan ketikkan stop();
30. Buat layer baru dengan nama “isi” lalu buat blank keyframe dan posisikan seperti pada gambar:

31. Pilih blank keyframe yang berada pada frame yang sama dengan label dan buat objek tulisan yang sesuai dengan nama label tersebut.

32. Lakukan juga untuk semua label yang kita punya.

33. Lalu langkah terakhir ialah klik kanan pada frame 35 pada layer 1 dan pilih insert frame. Test presentasi sederhana yang telah kita buat dengan menekan ctrl+enter.