MEMBUAT E-LEARNING DENGAN MACROMEDIA FLASH MX2004

Buatlah sebuah media pembelajaran e-Learning dengan menggunakan 2 buah scene seperti tergambar di bawah ini. Masing-masing scene mempunyai perbedaan fungsi seperti yang di ilustrasikan pada gambar di bawah ini:

Scene 1

 

Scene 2

 

Langkah-langkah:

1. Dari jendela utama program Macromedia klik tombol Flash document sbb:

 

2. Maka akan terbuka jendela utama macromedia flash MX2004
3. Langkah selanjutnya adalah membuat tambahan 2 buah layer, Klik Insert >Timeline layer. Lakukan sebanyak 2x sehingga akan terbentuk 3 buah layer sbb:

 

4. Langkah selanjuntya adalah , mengganti nama layer 1 menjadi logo, layer 2 menjadi teks dan layer 3 menjadi tombol. Klik 2x pada nama layer 1 dan ketikan logo dan tekan enter. Lakukan untu 2 layer yang lainnya sehingga akan nampak gbr sbb:

5. Langkah selanjuntya adalah memasukkan image logo ke dalam library yang selanjutnya akan dibuat menjadi animasi. Klik File > Import >import to library, maka akan muncul kotak dialog sbb:

-         Klik file image yang diinginkan dan tekan tombol Open.

6. Klik windows > library untuk menampilkan library yang aktif. Pada bagian library ini file image yang baru di import akan ditampung di library sbb:

7. Klik Insert > New symbol , maka akan muncul kotak dilog sbb:

-         Ketik logo pada bagian Name

-         Pilih Movie clip pada bagian Behavior

-         Tekan tombol OK

Maka secara otomatis akan tampil jendela instance movie dengan tanda + pada bagian tengah layar sbb:

8. Selanjutnya adalah memindahkan file image SAVE0044 ke bagian tengah tanda + yang ada dilangkah sebelumnya seperti gbr yang ada di bawah ini:

Setelah image Image SAVE0044 ini dimasukkan ke dalam movie clip maka selanjutnya movie clip logo ini dapat diberi animasi.

9. Aktifkan kembali Scene 1 dengan cara mengklik Scene 1 yang ada dibagian atas timeline sbb:

10. Selanjutnya klik layer logo dan frame 1. Seret movie clip logo yang ada di library ke Scene 1 sebelah kiri atas sbb:

11. Selanjutnya adalah memberikan animasi pada movie clip logo yang baru disisipkan. Klik kanan mouse pada frame 20 sehingga muncul menu, kemudian pilih Insert Key frame.
12. Klik kanan mouse pada frame 1 di layer logo dan pilih Create Motion Tween, maka akan muncul tanda panah dari frame 1 menuju frame 20 yang berarti pada frame 1 sampai 20 telah ada animasi.

13. Klik frame 1 pada layer logo, kemudian klik movie clip logo dan klik tombol Properties sehingga muncul menu sbb:

-         Pada bagian Color pilih Alpha, dan atur prosentase menjadi 0%. Hal ini dimaksudakan agar movie clip logo lenyap dari Scene 1

-         Setelah selesai klik tombol Control > Play untuk melihat animasi yang baru dibuat.

14. Langkah selanjuntya adalah membuat animasi teks yang akan bergerak dari bawah menuju ke atas. Klik frame 1 pada bagian layer teks.
15. Klik icon A yang ada dibagian tools, selanjuntya klik dibagian bawah scene 1 dan ketikkan “MY PRESENTATION” seperti gbr di bawah ini:

16. Klik kanan mouse pada frame 20 yang ada di layer teks dan pilih Insert Key Frame.
17. Pilih kembali frame 1 dan klik kanan mouse selanjuntya pilih Create Motion Tween untuk memberikan efek animasi pada teks yang baru dibuat

18. Klik frame 20 pada layer teks, dan seret teks “ MY PRESENTATION”     ke bagian tengah dari layar Scene 1 sbb:

     

19. Langkah selanjutnya adalah membuat tombol. Klik insert > new Symbol, maka akan muncul kotak dialog sbb:

-         Ketik Tombol pada bagian Name

-         Pilih Button pada bagian behavior dan tekan tombol OK. Maka layar monitor akan aktif ke layar Movie Clip Tombol Sbb:

20. Klik tombol rectangular pada bagian tools untuk menggambar tombol persegi empat sbb:

21. Klik kanan mouse pada frame Over dan pilih Insert Key Frame
22. Untuk merubah warna tombol pada frame Over untuk memberikan efek animasi perubahan warna pada tombol. Klik

23. Klik kanan mouse pada frame Down dan pilih Insert Key frame. Selanjutnya ulangi langkah 22 untuk merubah warna tombol pada frame ini.
24. Untuk mengaktifkan Scene 1 kembali klik Teks Scene 1 yang ada bagian atas Timeline.
25. Langkah selanjutnya adalah meletakkan tombol pada scene 1. Klik kanan mouse pada frame 20 di layer Tombol dan pilih Insert Key Frame
26. Seret simbol Tombol yang ada di Library ke Scene 1 diposisi kanan bawah sbb:

27. Masih pada frame 20 yang aktif pada layer tombol. Klik icon A untuk membuat teks “NEXT” pada bagian tombol seperti gbr di bawah ini:

28. Langkah selanjutnya adalah memberikan code (Action Script) pada tombol NEXT. Klik Tombol NEXT, dan buka Action Button sbb:

29. Buat 1 buah layer diatas layer Tombol dan beri nama layer “Action Frame”. Layer ini diperlukan untuk menghentikan animasi movie clip setelah mencapai frame 20 agar tidak berlanjut ke Scene- Scene lainnya.

30. Langkah selanjutnya adalah memberikan Action Frame pada Frame 20 di Layer Action Frame. Klik kanan mouse pada frame 20 di layer Action Frame yg aktif dan pilih Insert Key Frame
31. Buka Action Frame dan ketikkan perintah sbb:

 

32. Langkah berikutnya adalah membuat lembar kerja ke-2 atau Scene 2. Klik Insert > Scene, maka akan terbuka lembar kerja kosong.
33. Pada Scene 2 ini kita akan membuat 3 buah layer yaitu layer teks, tombol, dan layer Action Frame. Tambahkan 2 layer lagi untuk melengkapi layer 1 yang telah ada dengan cara menekan tombol Insert > timeline >Layer. Selanjutnya ganti nama layer-layer tersebut seperti langkah terdahulu menjadi layer teks, tombol dan Action Frame seperti pada gambar di bawah ini:

34. Klik layer Teks, dan kemudian klik frame 1.
35. Klik icon A pada bagian tools untuk menulis judul teks sbb:

36. Langkah selanjutnya adalah menambahkan 3 buah teks horizontal dengan menggunakan tombol yang telah kita buat sebelumnya. Klik layer Tombol, dan klik frame 1. Seret simbol Tombol yang ada di library dan letakkan di Scene 2 sebanyak 3 buah sbb:

37. Selanjuntya adalah memberi teks pada masing-masing tombol tersebut.Tetapi sebelumnya pindahkan layer teks berada disebelah atas layer Tombol. Klik dan drag layer Teks dan letakkan di atas layer Tombol. Maka akan terlihat sbb:

38.  Klik layer Teks kembali dan klik Icon A untuk mulai mengetik teks diatas tombol paling sebelah kiri seperti gbr berikut:

39. Lakukan langkah yang sama untuk membuat judul 2 tombol sisa menjadi “TEKS-2” dan “TEKS-3” seperti terlihat pada gambar di bawah ini:

40. Langkah selanjuntya adalah membuat tiga buah movie clip yang akan berhubungan dengan ke tiga tombol yang baru dibuat. Klik Insert > New Symbol, maka akan muncul kotak dialog sbb:

Ubah data-data seperti gbr diatas dan tekan tombol OK. Maka selanjuntya dilayar monitor akan aktif simbol Teks-1 yang masih kosong dengan tanda + ditengah layar.

41. Langkah selanjutnya adalah memasukkan teks maupun gambar ke titik penyisipan pada simbol Teks-1. Buka program Microsoft word/ Power point yang telah berisi data-data yang akan di copy ke simbol teks-1 sbb:

Pilih semua teks maupun gambar yang ada di power point dan tekan tombol CTRL + C

42. Kembali ke program Macromedia Flash MX. Klik menu Edit > Paste in Center, maka teks-teks akan tercopy ke simbol Teks-1 sbb:

43. Lakukan langkah 40 untuk membuat 2 buah movie clip untuk TEKS-2 dan TEKS-3 sehingga hasilnya akan nampak seperti gbr di bawah ini:

    

Teks-2                                                 Teks-3

44. Langkah selanjuntya adalah memasukkkan simbol TEKS-1, TEKS-2 dan TEKS-3 saty persatu ke Scene 2 di bawah layer Teks.
45. Klik Layer Teks, dan klik frame 1 lalu seret simbol TEKS-1 yang ada di library ke Scene 2 sbb:

Beri nama variabel Movie TEKS-1 ini menjadi Movie-Teks-1 seperti tampak pada gambar di atas.

46. Seret kembali simbol TEKS-2 yang ada di windows ke layar Scene 2  sehingga akan bertumpang tindih dengan movie TEKS-2 sbb:

           

Beri nama variabel Movie TEKS-2 ini menjadi Movie-Teks-2 seperti tampak pada gambar di atas.

47. Seret kembali simbol TEKS-3 yang ada di windows ke layar Scene 2  sehingga akan bertumpang tindih dengan movie TEKS-1 dan TEKS-2 sbb:

48. Langkah selanjutnya adalah mengatur agar tombol masing-masing untuk TEKS-1, TEKS-2 dan TEKS-2 berhubungan dengan movie clip teks yang baru saja diletakkan pada langkah 46 sampai 47.
49. Untuk menuliskan code untuk tombol TEKS-1 klik tombol tersebut dan buka Action Button sbb:

Ketikkan code program seperti gbr di atas.

50. Untuk menuliskan code untuk tombol TEKS-2 klik tombol tersebut dan buka Action Button sbb:

Ketikkan code seperti gbr di atas.

51. Untuk menuliskan code untuk tombol TEKS-3 klik tombol tersebut dan buka Action Button sbb:

Ketikkan code seperti gbr di atas.

52. Langkah selanjutnya adalah membuat code (Action Script) untuk Frame yang akan berfungsi mengatur agar semua Movie tadi tidak tampil saat Scene 2 dibuka. Action Frame ini akan diletakkan di layer Action Frame pada frame 1.
53. Klik Frame 1 pada layer Action Frame, dan buka Action Frame dan tuliskan code sbb:

54. Langkah berikutnya adalam menyimpan file ini dengan mengklik menu File > Save, maka akan muncul kotak dialog sbb:

-         Beri nama file pada bagian File Name dan tekan tombol Save. Maka file akan tersimpan dengan ektensi *.fla.

55. Langkah terakhir adalah menjalankan file tersebut dengan cara mengkompilasinya agar didapatkan file dengan ekstensi *.swf yang dapat dibuka tanpa perlu menggunakan program macromedia flash tetapi hanya diperlukan flash player. Klik menu Control > test Movie. Maka anda dapat melihat hasil kompilasi.
56. Selesai.