BAB 11 PRAKTIK PENGEMBANGAN MULTIMEDIA PEMBELAJARAN INTERAKTIF

(1)

BAB 11

PRAKTIK PENGEMBANGAN MULTIMEDIA PEMBELAJARAN INTERAKTIF

Setelah membaca dan memahami pembahasan dari bab 1 – 10, apa saja yang telah Anda peroleh? Sebelum memasuki bab 11 ini, Anda diharapkan sudah memiliki bekal teori tentang konsep multimedia pembelajaran seperti apa yang akan dikembangkan. Pada bab 11 ini akan dibahas praktik pengembangan MPI yang lebih banyak berisi tutorial program Macromedia Flash 8. Tutorial yang akan dibahas berkaitan dengan teknik-teknik animasi dan variasinya, menambahkan file audio dan video, serta membuat animasi menggunakan action script.

A. Aplikasi Variasi Animasi Tampilan Objek Menggunakan Masking

Animasi masking adalah animasi yang bermaksud untuk menampilkan objek yang semula disembunyikan supaya terlihat. Untuk memahami contoh dari animasi masking ini, silahkan ikuti langkah-langkah tutorial berikut:

1. Buka program Macromedia Flash 8 kemudian klik Create New > Flash Document.

2. Buatlah 3 layer, selanjutnya beri nama masing-masing layer seperti contoh berikut. Untuk mengganti nama layer, klik double pada layer yang akan diganti namanya.

3. Bila perlu gantilah warna background stagenya, misalnya menjadi warna hitam.

4. Pada layer 3 (layer teks) frame 1 silahkan tulis kalimat “Selamat Belajar”.

(2)

5. Selanjutnya, pada layer 2 (layer bola) frame 1 buatlah objek bola/lingkaran dengan warna putih.

6. Posisikan lingkaran yang sudah dibuat ke bagian kiri teks.

7. Setelah pembuatan objeknya sudah selesai selanjutnya kita buat animasinya.

Klik frame 90 di setiap layer, kemudian klik kanan lalu pilih insert keyframe.

(3)

8. Klik layer bola, kemudian klik kanan frame 90 lalu klik Create Motion Tween.

9. Setelah langkah di atas selesai, klik gambar bolanya lalu geser bolanya dengan menggunakan tanda panah kanan pada keyboard (jangan menggeser menggunakan mouse pakai saja tanda panah kanan di keyboard agar posisinya tidak berubah). Geserlah lingkaran ke bagian kanan teks.

10. Untuk melihat hasilnya, tekan Ctrl + Enter.

11. Agar terlihat seperti efek masking yang memunculkan teks, cobalah Anda ubah warna teks menjadi hitam dan posisikan lingkaran (bola) pada frame 1 di kanan teks, kemudian geser ke kiri setelah melakukan Create Motion Tween.

B. Membuat Animasi Menggunakan Layer Mask

Setelah Anda mengusai teknik masking diatas, selanjutnya kali ini akan dibahas tutorial menggunakan layer mask yang berguna untuk menampakkan bagian-bagian tertentu dari suatu objek. Silahkan ikuti langkah-langkah tutorial berikut:

2. Import sebuah gambar ke dalam stage dengan cara meng-klik File > Import >

Import to Stage.

(4)

3. Atur gambar agar sesuai dengan stage dengan menggunakan Free Transform Tool.

4. Klik Frame 20 Layer 1, lalu tekan F6 (Shortcut untuk fungsi Insert Keyframe).

5. Buat layer baru dan beri nama Layer Oval.

6. Klik Frame 1 Layer Oval, lalu buat objek lingkaran pada tampilan objek gambar dengan meng-klik Oval Tool pada toolbox.

(5)

7. Klik Frame 7 Layer Oval lalu tekan F6.

8. Lalu geserkan objek lingkaran ke kanan objek gambar. (sebaiknya geser dengan menggunakan arah panah pada keyboard).

9. Klik Frame 14 Layer Oval lalu tekan F6. Geser objek lingkaran tersebut ke bagian lain pada gambar (sebaiknya geser dengan menggunakan arah panah pada keyboard).

10. Klik kanan Frame 20 pada Layer Oval, lalu pilih dan klik Insert Keyframe (F6).

Geser objek lingkaran tersebut ke bagian lain pada gambar (sebaiknya geser dengan menggunakan arah panah pada keyboard).

11. Selanjutnya klik kanan Layer Oval lalu pilih Mask.

(6)

12. Klik kanan antara Frame 1 dan Frame 7 pada Layer Oval, kemudian pilih dan klik Create Motion Tween.

13. Klik kanan pada Frame 7 dan Frame 14 pada Layer Oval, kemudian klik Create Motion Tween.

14. Lakukan hal yang sama pada Frame 14 dan Frame 20, kemudian klik Create Motion Tween.

15. Untuk melihat hasilnya, tekan Ctrl + Enter.

C. Animasi Zoom (Melebar) Pada Objek

Animasi zoom ini akan memberikan efek tampilan yang awalnya kecil hingga berkembang dan membesar. Untuk memperjelas pemahaman Anda, silahkan praktik dengan mengikuti langkah-langkah tutorial berikut:

2. Muncul Document Properties melalui menu Modify > Document. Ubah frame rate menjadi 44 fps.

3. Import sebuah foto ke dalam dokumen dengan memilih menu File > Import, Import to Stage. Atur ukuran foro menggunakan free transform tool. Tips:

Anda dapat gunakan tombol Shift saat mengatur ukuran foto agar proporsional.

(7)

4. Klik kanan pada objek foto, kemudian pilih Convert to Symbol > Movie Clip.

5. Ubah kolom name menjadi “foto”.

6. Ganti nama Layer 1 menjadi Foto.

(8)

7. Dengan tampilan foto yang masih terseleksi, tampilkan panel Align dengan pilih menu Window > Align. Pada panel tersebut klik tombol Stage, kemudian klik Align Horizontal Center dan Align Vertikal Center.

8. Klik kanan Frame 40 layer Foto lalu klik Insert Keyframe.

9. Masih di Frame 40, tekan F6 berulang hingga sepuluh kali.

10. Pada frame ke 41, 43, 45, 47 dan 49 lakukan penghapusan dengan menekan tombol Delete pada keyboard.

(9)

11. Klik Frame 1, pilih Free Transform Tool pada toolbox. Geser bagian sisi ke arah dalam sehingga tampilan foto akan menjadi pipih seperti berikut.

12. Tampilkan panel Properties dengan pilih menu Window > Properties. Pada Color pilih Tint. Untuk nilai Tint, atur dengan nilai 100%.

13. Klik Frame antara frame 1 – 40, kemudian klik kanan lalu klik Create Motion Tween. Akan tampak garis panah sepanjang frame tersebut antara frame pertama hingga frame 40.

14. Untuk melihat hasilnya, tekan Ctrl + Enter. Berhasilkah Anda?

D. Aplikasi Variasi Animasi Teks

Masih ingatkah Anda bahwa teks merupakan salah satu komponen dalam multimedia pembelajaran? Teks juga dapat dimodifikasi menggunakan variasi animasi agar tampilannya semakin menarik. Pada pembahasan kali ini, akan dijelaskan langkah- langkah membuat animasi teks banner yang didalamnya berisi animasi teks muncul satu per satu, dan animasi teks memutar.

(10)

Animasi Teks Banner

Dalam animasi ini terdiri dari dua objek teks, yaitu teks SELAMAT DATANG dan teks DI JOGJA. Tampilan teks Selamat Datang berjalan seperti ketikan teks kemudian menghilang, selanjutnya teks Di Jogja muncul dari kecil sambil berputar. Untuk memperjelas pemahaman Anda, silahkan praktik dengan mengikuti langkah-langkah tutorial berikut:

2. Buatlah dua Layer dengan nama Teks 1 dan Teks 2.

3. Ubah ukuran stage (size) melalui panel properties menjadi 550 x 100 pixels.

4. Setelah diubah ukuran stage-nya maka tampilan stage menjadi area kerja banner.

5. Klik Frame 1 layer Teks 1, ketik teks Selamat Datang menggunakan Text Tool.

(11)

6. Selanjutnya, kita akan membuat animasi frame by frame untuk efek ketikan teks Selamat Datang, berikut ini caranya:

a. Klik kanan pada teks Selamat Datang lalu klik Break Apart.

b. Klik kanan pada Frame 1 layer Teks 1 lalu klik Copy Frames.

c. Klik kanan pada Frame 2 layer Teks 1 lalu klik Paste Frames. Lakukan langkah ini untuk Frame 3 – 13 pada layer Teks 1.

7. Lakukan penghapusan sebagian huruf pada frame tertentu, ikuti tabel dibawah ini:

8. Buatlah animasi Motion Tween pada teks Selamat Datang, caranya:

a. Klik kanan Frame 13 layer Teks 1 lalu klik Create Motion Tween.

(12)

b. Klik kanan Frame 25 layer Teks 1 lalu klik Insert Keyframe, kemudian perkecil objek.

c. Klik objek teks pada Frame 25 layer Teks 1 lalu buka jendela Properties, tentukan Color: Alpha, dengan nilai 0%.

9. Klik kanan Frame 25 layer Teks 2 lalu klik Insert Keyframe, ketikkan teks DI JOGJA menggunakan Text tool.

10. Buatlah animasi motion create pada teks Di Jogja dengan cara:

a. Klik kanan Frame 25 layer Teks 2 lalu klik Create Motion Tween. Tentukan Rotate CW dan Times 2 pada jendela Properties.

(13)

b. Klik kembali objek teks Di Jogja pada frame 25 layer Teks 2, lalu buka jendela Properties ubahlah Color: Alpha 0%.

c. Klik kanan Frame 35 layer Teks 2, klik Insert Keyframe lalu perbesar objek teks, buka jendela Properties, tentukan Color: Alpha, nilai 100%.

d. Klik kanan Frame 40 layer Teks 2 lalu klik Insert Frame.

(14)

E. Menambahkan Efek Suara dan Video

Seperti yang sudah dibahas pada BAB 5 tentang Komponen MPI, selain teks masih terdapat komponen multimedia lainnya yakni komponen suara (sound) dan video. Komponen suara mampu memberikan efek tampilan animasi yang lebih menarik dan hidup, sedangkan penambahan video dalam MPI dapat mendukung penyampaian materi (pesan) kepada pengguna. Tutorial tentang bagaimana cara menambahkan efek suara dan video menjadi penting dipahami, sehingga nantinya program MPI yang Anda buat dapat lebih menarik, interaktif, dan informatif.

Menambahkan Sound pada Animasi

Latihan ini bertujuan untuk memberikan efek suara pada animasi yang telah dibuat sebelumnya. Pada sesi latihan ini, digunakan proyek flash Membuat Animasi Menggunakan Layer Mask.

1. Buka file animasi yang telah dibuat (misal file: Masking Object.fla).

2. Klik menu File > Import > Import to Library. Pilih suara yang akan digunakan lalu klik Open.

(15)

3. Apabila jendela Library tidak muncul, silahkan Klik Window > Library. Jendela Library akan muncul dan berisi file audio yang telah di-import.

4. Klik Insert Layer untuk membuat layer baru dan beri nama Sound.

(16)

5. Klik pada Layer Sound Frame 1, bukalah jendela properties dan carilah kolom Sound yang memiliki dua pilihan: None/Sound Effect. Pilihlah Sound Effect (pilihan file audio yang telah kita import ke Library akan otomatis muncul sebagai pilihan).

6. Sehingga tampilan timeline pada Layer Sound akan berubah dan menandakan adanya file suara pada frame tersebut.

(17)

Menambahkan Video dalam Flash Document Untuk memperkuat pemahaman pengguna tentang suatu konsep, ada baiknya sebuah program MPI menyertakan file video yang dapat diakses dengan mudah. Namun, tidak semua jenis file video dapat dimasukkan kedalam Macromedia Flash 8.

Beberapa jenis file video yang dapat dimasukkan antara lain yang berekstensi:

.mov, .avi, .mpg/.mpeg, .dv/.dvi, .asf, .wmv, .flv.

Memasukkan file video dapat dilakukan dengan cata meng-embed video kedalam file .swf. Embed video ke dalam file SWF berarti memasukkan file video ke dalam file SWF tanpa menggunakan mode link. Cara ini memudahkan pendistribusian file flash dan video karena file yang disebar hanya satu, yakni file SWF. Untuk menambah pemahaman Anda, silahkan coba praktikkan langkah-langkah berikut:

2. Klik pada menu File > Import > Import Video.

3. Kemudian akan muncul kotak dialog Import Video sebagai berikut.

(18)

4. Tandai on your computer, kemudian klik browse untuk mencari file video yang akan diimport, lalu klik open.

5. Klik next pada bagian kanan bawah kotak dialog, sehingga muncul tampilan sebagai berikut.

6. Pilihlah embed video in SWF and play in timeline, lalu klik next.

(19)

7. Ketika muncul pertanyaan selanjutnya, akan tampak pilihan Symbol Type, berikut ini penjelasannya:

Embedded Video: Pilihan ini digunakan apabila Anda ingin menggunakan video yang di impor untuk playback linear pada timeline.

Movie Clip: Pilihan ini digunakan untuk mengatur video dan isinya. Timeline pada dokumen Anda akan diatur secara otomatis sesuai dengan kebutuhan video di dalam movie clip.

Graphic: dengan pilihan ini Anda tidak dapat berkomunikasi dengan video menggunakan actionscript. Biasanya, simbol jenis ini digunakan untuk gambar yang diam atau untuk membuat potongan animasi yang terhubung pada timeline agar dapat digunakan kembali.

8. Pilihlah embedded video diantara tiga pilihan diatas.

9. Selanjutnya, atur video yang di-Embedded menggunakan tiga pengaturan dengan menandai pengaturan berikut.

(20)

Jika menandai Place instance on stage, maka video akan langsung masuk ke dalam stage. Tetapi jika Anda ingin menempatkan video ke dalam panel Library maka hilangkan tanda pada pengaturan tersebut.

Jika menandai Expand timeline if needed untuk menampilkan panjang frame video pada timeline.

Jika menandai Include audio untuk mnenyertakan suara pada video yang Anda masukkan.

10. Klik next untuk melanjutkan proses import.

11. Klik finish untuk mengakhiri proses import video.

12. Selanjutnya, Anda dapat mengatur letak dan posisi video pada stage dengan menggunakan Free Transform Tool.

Catatan: pada Adobe Flash CS 6 tersedia tambahan fitur playback component yang otomatis terpasang pada video dengan berbagai model.

F. Membuat Animasi Menggunakan Action Script Actionscript merupakan bahasa pemrograman yang terdapat pada program Flash. Dengan menggunakan actionscript, Anda dapat membuat animasi lebih hidup dan atraktif. Bahasa Actionscript akan menambah interaksi yang lebih kompleks,

(21)

mengatur dan menampilkan data pada aplikasi yang Anda buat. Bahasa pemrograman actionscript juga memiliki aturan-aturan seperti sintaks dan struktur penulisan. Berikut ini akan dibahas beberapa contoh actionscript sederhana yang biasa digunakan dalam program MPI.

Action Stop

Action stop ini berfungsi untuk menghentikan animasi pada frame tertentu.

Perintah action stop ini dituliskan dalam bentuk: stop(); untuk lebih memahami kerja action stop ini, silahkan Anda praktikkan langkah-langkah berikut.

1. Buka file animasi yang telah dibuat (misal file: Animasi Frame by Frame.fla).

2. Buatlah layer baru, dan berilah nama layer “action”.

3. Klik pada frame terakhir (pada contoh diatas, frame terakhir animasi adalah frame 5), kemudian klik kanan > Insert Blank Key Frame.

(22)

4. Tekan F9 untuk menampilkan actionscript dan ketiklah perintah berikut:

stop(); Maka pada frame timeline akan berubah, seperti muncul simbol alpha.

Action NextFrame dan PrevFrame

Perintah nextFrame berfungsi untuk menuju pada frame berikutnya, sedangkan perintah prevFrame berfungsi untuk menuju pada frame sebelumnya. Kedua action tersebut biasanya digunakan pada perintah tombol untuk menuju halaman tertentu.

Untuk lebih memahami kerja kedua action terebut, berikut ini disediakan langkah- langkah latihan membuat slide foto. Silahkan Anda praktikkan langkah-langkah berikut.

2. Ganti nama Layer 1 menjadi “background”.

3. Pada Layer Background Frame 1, buatlah objek menggunakan rectangle tool dan berilah warna sesuai dengan keinginan Anda. Kotak ini akan menjadi background dari animasi slide foto yang akan kita buat.

(23)

4. Klik pada frame 5 layer backgorund, lalu tekan F5 (Insert Frame) untuk memperpanjang tampilan frame.

5. Tambah layer baru dan beri nama “objek”.

6. Klik Frame 1 layer Objek, lalu tekan F6 (Insert Keyframe).Tekan F6 beberapa kali hingga Frame 5.

7. Klik Frame 1 layer Objek, lalu import gambar atau objek ke stage dengan meng- klik menu File > Import > Import to Stage.

(24)

8. Gunakan Free Transform Tool untuk mengatur posisi dan ukuran objek.

9. Dengan cara yang sama, masukkan gambar atau objek yang berbeda pada frame 2,3,4 dan 5. (Ulangi langkah 7 dan 8).

10. Tambah layer baru dan beri nama “tombol”.

11. Klik menu Window > Common Libraries > Buttons untuk menampilkan panel Library.

12. Klik double playback rounded, lalu pilih dan drag ke stage tombol rounded green back dan rounded green forward.

(25)

13. Klik kanan pada rounded green forward lalu pilih Actions dan ketikkan perintah berikut:

on(release){

nextFrame();

}

14. Klik kanan pada rounded green back lalu pilih Actions dan ketikkan perintah berikut:

on(release){

prevFrame();

}

15. Tambahkan lagi layer baru dan beri nama “script”.

16. Pada frame 1 layer script tekan F9 untuk menampilkan jendela actionscript kemudian ketik perintah berikut:

stop();

(26)

Action gotoAndPlay

Perintah gotoAndPlay dapat digunakan untuk menuju ke sebuah keyframe dan langsung menjalankan animasi di frame yang dituju. Untuk lebih memahami kerja action terebut, berikut ini disediakan langkah-langkah latihan membuat menu utama sebuah program MPI. Silahkan Anda praktikkan langkah-langkah berikut.

2. Ganti nama Layer 1 menjadi “background”.

3. Klik tools rectangle tool lalu buatlah objek kotak pada stage seperti pada gambar berikut.

(27)

4. Klik di frame 20 layer background lalu tekan F5 (Insert Frame).

5. Tambahkan layer baru dan beri nama “tombol”.

6. Klik menu Window > Common Libraries > Buttons untuk menampilkan panel Library.

7. Klik double buttons rect flat, lalu pilih dan drag ke stage 4 tombol enter dari panel library.

(28)

8. Klik selection tool, lalu klik double pada tombol paling atas untuk mengeditnya.

9. Pada layer Text, klik tanda Unlock Layer sehingga layer tersebut tidak terkunci.

10. Klik keyframe di bagian Up pada layer Text, klik Text Tool lalu ganti teks “Enter”

pada stage menjadi “INTRO” .

11. Klik keyframe di bagian Down pada layer Text, klik Text tool lalu ganti teks

“Enter” pada stage menjadi “INTRO”.

12. Klik Scene 1 untuk kembali ke tampilan awal.

(29)

13. Lakukan hal yang sama untuk tombol Enter berikutnya dengan teks “TEKS”,

“VIDEO”, “AUDIO”, sehingga terlihat seperti contoh di bawah (ulangi langkah 8 sampai langkah 12).

14. Tambahkan layer baru dan beri nama Matakuliah.

15. Tambahkan keyframe pada Frame 2, Frame 5, Frame 10 dan Frame 15, seperti pada gambar di bawah ini:

(30)

16. Klik Frame 2 (untuk mengisi menu INTRO) pada layer Matakuliah, klik Text tool kemudian ketik Pengenalan Komponen Multimedia pada stage (lihat contoh dibawah ini). Tips: untuk mempermudah penambahan teks, terlebih dahulu lock (kunci layer tombol dan backgound).

17. Klik Frame 5 (untuk mengisi menu TEKS) pada layer Matakuliah, klik Text tool kemudian ketik Komponen Teks pada stage (lihat contoh di bawah ini).

(31)

18. Klik Frame 10 (untuk mengisi menu VIDEO) pada layer Matakuliah, klik Text tool kemudian ketik Komponen Video pada stage (lihat contoh di bawah ini).

19. Klik Frame 15 (untuk mengisi menu AUDIO) pada layer Matakuliah, klik Text tool kemudian ketik Komponen Audio pada stage (lihat contoh di bawah ini).

(32)

20. Klik tombol INTRO, tekan F9 untuk membuka jendela Actionscript kemudian ketik perintah berikut:

on(release){

gotoAndPlay(1);

}

21. Klik tombol TEKS, tekan F9 untuk membuka jendela Actionscript kemudian ketik perintah berikut:

on(release){

gotoAndPlay(5);

}

22. Klik tombol VIDEO, tekan F9 untuk membuka jendela Actionscript kemudian ketik perintah berikut:

on(release){

gotoAndPlay(10);

}

23. Klik tombol AUDIO, tekan F9 untuk membuka jendela Actionscript kemudian ketik perintah berikut:

on(release){

gotoAndPlay(15);

(33)

}

24. Selanjutnya, klik frame 1 dan frame 2 layer matakuliah, tekan F9 kemudian ketikkan perintah berikut:

stop();

25. Klik frame 5 layer matakuliah, tekan F9 kemudian ketikkan perintah berikut:

stop();

28. Maka tampilan pada timeline akan menjadi seperti ini:

G. Rangkuman

Tutorial yang sudah dibahas di atas berkaitan dengan teknik-teknik animasi dan variasinya, menambahkan file audio dan video, serta membuat animasi menggunakan action script. Semua tutorial latihan merupakan praktik sederhana sehingga Anda dapat praktikkan secara mandiri.

H. Daftar Pustaka

Dean, Damon & Andy Cowitt. (2006). Macromedia studio 8 all-in-one desk reference for dummies. Indianapolis: Wiley Publishing.

Modul Macromedia Flash. Makassar: Universitas Negeri Makassar.