Dr.

Djuniadi, MT Feddy Setyo Pribadi, MT

Pembuatan Media Pembelajaran Berbasis Komputer dan Internet
Program Studi S1 Pendidikan Teknik Elektro

PENDIDIKAN PROFESI GURU LEMBAGA PENGEMBANG PENDIDIKAN DAN PROFESI UNIVERSITAS NEGERI SEMARANG TAHUN 2009

KATA PENGANTAR

ii

TINJAUAN UMUM
Buku panduan untuk Pendidikan Profesi Guru (PPG) dengan judul Pembuatan Media Pembelajaran Berbasis Komputer dan Internet merupakan buku yang dikembangkan dengan pendekatan HOW TO. Buku ini bertujuan membantu saudara untuk memecahkan persoalan yang biasa dihadapi oleh pengembang media pembelajaran berbasis komputer dan internet. Buku ini tidak bertujuan untuk menggantikan buku-buku mengenai pengembangan presentasi, video pembelajaran, animasi, multimedia pembelajaran interaktif, dan video streaming. Akan tetapi menjadi suplemen cerdas dari buku-buku yang sudah ada. Setiap subbab dalam buku ini dimulai dengan suatu pertanyaan untuk diselesaikan. Dengan demikian peserta didik akan melakukan suatu aktivitas (How do I ...) untuk menjawab pertanyan tersebut. Solusi dari pertanyaan

tersebut dipaparkan secara bertahap dan jelas untuk memberikan arah kepada peserta didik. Pendekatan ini dipilih dengan cermat untuk memberikan

pengalaman keberhasilan sehingga memberikan dorongan kuat kepada peserta didik untuk berkreasi mengembangkan media pembelajaran berbasis komputer dan internet. Setiap akhir bab akan diberikan evaluasi tentang pemecahan persoalan dari suatu kasus. Buku pembuatan media pembelajaran berbasis komputer dan internet ini berisi 8 bab dan didalam setiap bab terdapat subbab-subbab yang terkait dengan topik dari masing-masing bab tersebut. Detil dari setiap bab dapat dilihat pada daftar isi buku ini.

Penulis

iii

DAFTAR ISI
KATA PENGANTAR TINJAUAN UMUM DAFTAR ISI BAB I. PRESENTASI ............................................................................... 1 Bagaimana saya membuat A. Template Presentasi …………………………………………... 1 B. Presentasi dengan memadukan teks dan gambar ……………. 13 C. Presentasi dengan animasi …………………………………… 16 D. Presentasi dengan video ……………………………………… 19 BAB II. VIDEO PEMBELAJARAN ……………………………………….. 22 Bagaimana saya membuat 1) Video Presentasi Pembelajaran ………………………………… 22 2) Video Aktivitas Pembelajaran ………………………………… 26 3) Video Streaming Pembelajaran ………………………………... 29 BAB III. MULTIMEDIA PEMBELAJARAN INTERAKTIF LEVEL 1 …… 33 Bagaimana saya membuat 1) Naskah Pembelajaran Interaktif ………………………………. 33 2) Rekaman Audio Pembelajaran ……………………………….. 35 3) Perencanaan Atribut Image dan Video ………………………… 38 4) Integrasi Image dan Rekaman Audio …………………………. 40 5) Video Pembelajaran Berbasis Image …………………………. 43 BAB IV. MULTIMEDIA PEMBELAJARAN INTERAKTIF LEVEL 2 …. 48 Bagaimana saya membuat 1) Desain Antar Muka …………………………………………… 48 2) Integrasi Antar Muka dengan Video ......................................... 70 3) Setuhan Akhir Pada MPI ……………………………………… 77 BAB V. ANIMASI ....................................................................................... 86 Bagaimana saya membuat 1) Animasi Teks ............................................................................. 86 2) Animasi Objek ........................................................................... 92 BAB VI. PUBLIKASI WEB ANIMASI ........................................................ 106 Bagaimana saya membuat 1) Player Animasi Berasal dari URL …………………………….. 106 2) Player Animasi Berasal dari Server …………………………... 109 3) Skrip Web Animasi ……………………………………………. 113 BAB VII. PUBLIKASI VIDEO STREAMING …………………………….. 117 Bagaimana saya membuat 1) Browser dengan Player FLV …………………………………. 117 2) Skrip Video Streaming ………………………………………… 119 3) Skrip Video Streaming dengan Player Server ………………… 123 4) Embedded Video Streaming ………………………………….. 126 BAB VIII. E-LEARNING …………………………………………………… 130 Bagaimana saya membuat 1) Pendaftaran Sebagai Member Sistem E-learning …………… 130 2) Mata Pelajaran Pada Sistem E-learning ……………………… 134 3) Upload Materi Pembelajaran …………………………………. 139 4) Menyisipkan Materi Gambar ……………………………….. 144 5) Menempatkan Video Streaming …………………………….. 147 6) Quis Online ………………………………………………….. 151 DAFTAR PUSTAKA

iv

Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

BAB I PRESENTASI

A. Bagaimana saya melakukan ...... Membuat template presentasi? Persoalan
Slide presentasi merupakan suatu alat yang digunakan untuk menyampaikan pesan dari pembicara ke audiennya. Presentasi akan menjadi kekuatan tersendiri jika slidenya di buat semanarik mungkin sehingga audien tertarik untuk melihatnya. Tampilan presentasi menarik dan beridentitas dapat dibuat dengan membuat template sendiri. Persoalan yang menantang dalam hal ini adalah bagaimana membuat template sendiri sesuai dengan tema dan style yang kita inginkan?

Teknik
Microsoft power point mempunyai fitur yang dapat dimanfaatkan untuk memasukan gambar, mempercantik teks dan juga membuat gambar bidang serta kurva. Dengan fitur-fitur tersebut kita dapat dengan mudah membuat template menurut selera dan tema presentasi yang akan di sajikan. Gambar 1.1 dan 1.2 merupakan contoh template yang dapat diciptakan dari fitur drawing box dan beberapa image yang di sisipkan ke dalam slide presentasi.

Gambar 1.1. Halaman pertama slide presentasi

1

Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

Gambar 1.2. Halaman kedua dan seterusnya slide presentasi

Tahapan
Tahapan – tahapan yang dilakukan untuk mengembangkan template sendiri adalah sebagai berikut: 1. Jalankan program microsoft power point. 2. Pilihlah item New pada toolbar atau kliklah menu File lalu pilihkan drop down menu New. Kemudian pilih View dan klik menu Master dan Slide master (View→Master→Slide master) maka akan tampil jendela seperti gambar 1.3.

Gambar 1.3. Halaman awal program power point

2

Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

3. Hilangkan default table yang disediakan dengan cara memilih desain template yang tertera kemudian tekan tombol delete, maka dilayar tampil halaman tampak seperti pada gambar 1.4.

Gambar 1.4. Halaman power point yang telah dikosongkan 4. Setelah slide dalam keadaan kosong kemudian sisipkan sebuah image (gambar) dengan cara klik menu toolbar Insert kemudian arahkan kursor ke drop down menu Picture lalu geserlah kursor ke menu From File kemudian klik. Perhatikan gambar 1.5.

Gambar 1.5. Struktur menu insert picture

3

Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

5. Kemudian muncul kotak dialog seperti gambar 1.6. Pada kotak dialog ini carilah file gambar di dalam yang saudara inginkan untuk disisipkan kedalam slide. Pilihlah file gambar tersebut dengan cara klik pada gambar kemudian tekan tomol Insert pada bagian kanan bawah kotak dialog.

Gambar 1.6. Kotak dialog insert picture 6. Setelah gambar muncul di slide terlihat seperti gambar 1.7, aturlah posisi gambar sesuasi dengan gambar 1.1 dengan cara klik kiri pada bagian gambar dengan mouse kemudian tahan dan geser ke arah kiri kemudian lepaskan.

Gambar 1.6. Image yang telah disisipkan pada slide 7. Tambahkan sebuah kotak dari tool drawing box yang berada di bagian bawah dengan cara klik gambar icon kotak kemudian klik pada bagaian

4

Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

kiri atas slide tahan dan drag ke kanan bawah slide seperti tampak pada Gambar 1.7

Gambar 1.7. Kotak yang telah di tambahkan pada slide 8. Untuk menjadikan kotak sebagai background berada di bagian belakang gambar maka klik kanan pada mouse pada bagaian tengah kotak, setelah keluar menu pop up arahkan kan kursor ke menu order lalu ke sub menu send backward. Hasilnya terlihat pada gambar 1.8.

Gambar 1.8. Kotak yang telah berada di belakang gambar 9. Langkah selanjutnya adalah menambahkan tulisan pada bagian slide sebagai tempat untuk menempatkan judul presentasi. Klik icon Teks Box yang berada pada toolbar bagaian bawah slide. Kemudian tempatkan kursor pada bagian slide lalu klik dan drag hingga muncul kotak teks box.

5

Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

Kemudian tuliskan judul presentasi pada Teks Box tersebut (lihat gambar 1.9).

Gambar 1.9. Teks Box yang telah berada pada slide 10. Tambahkan Teks Box seperti pada langkah 9 untuk menambahkan tulisan Penyaji dan Di bawakan pada.... Tempatkan Teks Box seperti terlihat pada gambar 1.10.

Gambar 1.10. Presentasi yang telah dilengkapi dengan gambar dan teks 11. Sebagai sentuhan akhir tambahkan dua buah garis vertikal dan horisontal seperti terlihat pada Gambar 1.11. Dengan cara klik icon garis yang terletak pada toolbar bagian bawah kemudian klik dan drag pada slide.

6

Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

Gambar 1.11. Hasil akhir dari desain slide halaman pertama Tahap selanjutnya membuat template untuk slide kedua dan seterusnya yang merupakan slide isi presentasi (seperti gambar 1.2). Adapun langkah-langkah nya adalah sebagai berikut: 12. Tambahkan slide baru dengan cara klik menu Insert pada toolbar bagian atas, selanjutnya pilih New slide, terlihat seperti gambar 1.12.

Gambar 1.12. Menu Insert dan pull down New Slide 13. Setelah menekan pilihan New Slide maka akan tampil slide baru seperti pada Gambar 1.13. kemudian hapus semua Teks Box yang ada dengan cara klik Teks Box tersebut kemudian tekan delete pada tombol keyboard.

7

Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

Gambar 1.13. Slide Baru 14. Setelah slide dalam keadaan kosong, tambahkan sebuah kotak pada bagian atas slide yang terlihat seperti Gambar 1.14.

Gambar 1.14. Slide Baru yang dilengkapi dengan kotak 15. Tambahkan sebuah kotak lagi dan diletakan dibawah kotak yang pertama serta susun seperti terlihat pada Gambar 1.15. Hilangkan warna yang memenuhi kotak kedua dengan cara klik ikon Fill color pada toolbar bagian bawah dan klik menu No fill.

8

Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

Gambar 1.15. Slide Baru dengan dilengkapi dengan 2 kotak 16. Masukan gambar dekoratif pada bagian slide ini dan tempat posisinya pada bagian kiri atas dari slide hingga terlihat seperti Gambar 1.16.

Gambar 1.16. Slide baru dilengkapi 2 kotak dan gambar dekoratif di kiri atas 17. Masukan 2 buah gambar dekoratif yang kedua pada slide ini dan tempatkan posisinya pada bagian kanan slide hingga terlihat pada seperti gambar 1.17

9

Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

Gambar 1.17. Slide baru dilengkapi 2 kotak dan gambar dekoratif di sisi kanan 18. Langka selanjutnya adalah menggandakan (copy) gambar tersebut dengan cara klik salah satu gambar kemudia tekan tombol shift pada keyboard kemudian klik gambar yang lain untuk melakukan pemilihan kedua gambar tersebut, lalu tekan tombol kombinasi Ctrl + C untuk melakukan pengkopian gambar. Tekan tombol kombinasi Ctrl + V untuk mencetak gambar, kemudian susun gambar seperti telihat pada Gambar 1.18.

Gambar 1.18. Background slide bagaian isi. 19. Backgraound presentasi slide isi sudah siap kemudian kita kunci susunan gambar tersebut dengan cara pilih semua gambar dengan metode seperti pada langkag ke 7, kemudian klik kanan pada deretan gambar bagian kanan slide hingga muncul menu pop up seperti gambar 1.19. kemudian pilih menu Grouping → Group.

10

Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

Gambar 1.19. Background slide bagaian isi yang akan di kunci 20. Setelah menekan menu group maka semua gambar tersebut telah menjadi satu kesatuan. Pada Toolbar Slide Master View arahkan kursor mouse pada tulisan Close Master View dan tekan klik kiri mouse. Kemudian arahkan mouse pada slide mini kedua yang disebelah kiri kemudian tekan tombol Enter maka terlihat seperti Gambar 1.20.

Gambar 1.20. Slide bagaian isi yang sama 21. Langkah terakhir adalah menyimpan hasil desain template dengan cara memilih menu File → Save, kemudian isikan nama semisal my template pada kotak isian File Name pada kotak dialog Save. Kemudian tekan tombol Save.

11

Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

Bagaimana bekerjanya
Slide template tersebut sudah siap digunakan untuk membuat presentasi dengan desain menarik dan mencirikan identitas diri sang pembuatnya. Pada subbab selanjutnya template ini akan digunakan untuk membuat presentasi dengan berbagai model presentasi.

12

Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

B. Bagaimana saya melakukan ...... Membuat presentasi dengan memadukan teks dan gambar? Persoalan
Pembuatan presentasi tentunya akan lebih menarik jika presentasi tersebut dilengkapi dengan paduan teks dan gambar, persoalan yang muncul adalah bagaimana membuat presentasi tersebut?

Teknik
Microsoft power point mempunyai fitur yang dapat dimanfaatkan untuk memasukan gambar dan mempercantik tulisan. Dengan fitur tersebut kita dapat dengan mudah membuat membuat presentasi dengan mengkombinasikan teks dan gambar.

Tahapan
Tahapan – tahapan yang dilakukan untuk membuat presentasi tersebut adalah sebagai berikut : 1. Jalankan program microsoft power point 2. Buka slide yang telah kita buat diatas dengan memilih toobar File → Open 3. Siapkan gambar yang akan di presentasikan, kemudian masukan gambar tersebut pada slide. 4. Tambahkan sebuah tulisan dan tempatkan pada bagian atas slide untuk mengindikasikan judul slide seperti terlihat pada Gambar 1.21. Teks dapat dipercantik dengan memilih tipe dan besar ukuran font dari toolbar Font pada bagian atas slide

Gambar 1.21. Pengaturan tipe dan ukuran font 5. Memasukan gambar ke dalam slide ada dua cara, cara yang pertama seperti telah dijelaskan subbab 1.1, sedangkan cara yang kedua yaitu melalui menu Insert → Picture → Clip Art seperti yang terlihat pada Gambar 1.22

13

Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

Gambar 1.22. Menu Insert → Picture → Clip Art 6. Setelah sub menu Clip Art di klik maka akan tampil kotak dialog seperti pada gambar 1. 23. Di dalam kotak dialog tersebut muncul daftar folder disebelah kiri kotak dialog dan tampilan gambar terdapat pada folder yang aktif. Pilih salah satu gambar kemudian klik kanan di tengah gambar tersebut hingga muncul menu pop up, kemudian klik menu Copy.

Gambar 1.23.Kkotak dialog Clip Art. 7. Setelah klik menu Copy tutup kotak dialog Clip Art, kemudian kembali ke halaman slide dimana gambar tersebut akan ditempatkan, lalu tekan tombol kombinasi pada keyboard Ctrl + V untuk menempatkan gambar pada slide. Kemudian atur posisi gambar seperti terlihat pada gambar 1.24.

14

Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

Gambar 1.24. Pengaturan posisi gambar pada slide 8. Selanjutnya memasukan tulisan sebagai keterangan gambar tersebut. Tempatkan dua Teks Box pada kanan gambar dan bawah gambar seperti pada Gambar 1.25.

Gambar 1.25. Slide yang dilengkapi dengan gambar dan teks.

Bagaimana bekerjanya
Slide dibuat sampai selesai dan disesuaikan dengan kebutuhan presentasi. Slide presentasi berisi kombinasi teks dan gambar. Gambar dimaksudkan untuk memberi ilustrasi dan visualisasi dari pesan yang disampaikan kepada para komunikan. Sedangkan teks dimaksudkan untuk memberi penjelasan dari pesan tersebut. Dengan demikian presentasi kombinasi teks dan gambar siap digunakan untuk menyampaikan pesan kepada komunikan.

15

Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

C. Bagaimana saya melakukan ...... Membuat presentasi dengan animasi? Persoalan
Pembuatan presentasi tentu akan lebih menarik jika presentasi tersebut dilengkapi dengan animasi. Persoalannya adalah bagaimana membuat presentasi yang dilengkapi dengan animasi tersebut?

Teknik
Microsoft power point mempunyai tool-tool yang dapat dimanfaatkan untuk membuat animasi seperti menggerakan teks mengatur munculnya teks dan gambar serta animasi untuk perpindahan dari satu slide ke slide selanjutnya.

Tahapan
Tahapan – tahapan yang dilakukan untuk membuat presentasi dengan animasi sebagai berikut : 1. Jalankan program microsoft power point 2. Buka slide yang sudah kita buat dengan memilih toobar File → Open 3. Tampilkan slide yang telah saudara buat, kemudian klik teks “Judul Presentasi” hingga tampal seperti Gambar 1.26.

Gambar 1.26. Teks Box”Judul Presentasi” yang terpilih 4. Kemudian klik menu Slide Show → Custom Animation. Hingga tampilan seperti pada gambar 1.27. Kotak dialog disebelah kanan slide berisi properties untuk membuat animasi slide. Kemudian klik tombol Add Effect, maka akan tampil tampilan seperti Gambar 1.28.

16

Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

Gambar 1.27. Slide dengan menu properties Add Effect disebelah kanan 5. Setelah muncul menu pop up, kemudian pilih salah satu model animasi yang disediakan, misalnya kita memilih Entrance→Box maka akan tampil tampilan seperti Gambar 1.29.

Gambar 1.28. Slide yang dilengkapi dengan sub menu Add Effect. 6. Sesaat Teks Box akan memunculkan suatu animasi sesuai dengan model animasi yang baru saja saudara pilih, kemudian perhatikan pada kotak Teks Box akan muncul angka 1 pada sudut kiri atas. Kemudian pada kotak sebelah kanan slide akan menampilkan informasi hasil pengaturan Teks Box yang dipilih (lihat gambar 1.29).

17

Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

Gambar 1.29. Slide hasil pengaturan pada teks box ”Judul Presentasi” 7. Untuk melakukan animasi pada teks yang lain, pilih Teks Box tersebut seperti yang terlihat pada gambar 1.30. kemudian lakukan seperti pada langkah 6. Setelah anda melakukan pengaturan animasi pada Teks Box “Penyaji” maka akan muncul angka 2 pada sudut kiri atas Teks Box tersebut.

Gambar 1.30. Slide hasil pengaturan pada teks box ”Penyaji”. 8. Lakukan langkah yang sama untuk membuat animasi pada teks dan pada gambar yang lain. Urutan angka yang muncul menunjukan urutan kemunculan pada saat slide show setelah kita mengklik mouse.

Bagaimana bekerjanya
Slide dengan animasi telah selesai. Untuk menyajikannya tekanlah icon slide show. Tambahan animasi menjadikan proses transisi antar slide dan presentasi menjadi lebih menarik. Dengan demikian presenter mendapatkan perhatian penuh dari para peserta presentasi tersebut.

18

Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

D. Bagaimana saya melakukan ...... Membuat presentasi dengan video? Persoalan
Pembuatan presentasi adakalanya dilengkapi dengan sebuah video untuk menjelaskan secara visual kepada audien. Video mampu memberikan informasi secara visual dari suatu proses seperti kejadian sebenarnya. Hal ini menjadikan pesan yang disampaikan mudah dipahami oleh audien. Persoalanya adalah bagaimana memasukan video kedalam slide presentasi?

Teknik
Microsoft power point mempunyai fitur yang dapat dimanfaatkan untuk memasukkan video ke dalam slide. Video yang dapat dimasukkan ke dalam slide antara lain berformat avi, mpeg, wm dll.

Tahapan
Tahapan – tahapan yang dilakukan untuk membuat presentasi tersebut adalah sebagai berikut : 1. Jalankan program microsoft power point 2. Buka slide yang sudah kita buat dengan memilih toobar File → Open 3. Klik pada slide ke tiga untuk mengaktifkan slide nya dimana kita akan menempatkan sebuah video pada slide tersebut. 4. Masukan video yang akan di tampilkan pada slide dengan cara klik menu Insert → Movies and Sound → Movie From File seperti tampak pada gambar 1.31.

Gambar 1.31. Menu insert movie 5. Setelah itu tampil kotak dialog seperti gambar 1.32. Kemudian carilah video yang akan di tampilkan ke dalam presentasi, selanjutnya klik pada file video tersebut dan klik tombol OK. Setelah tombol OK di klik maka tampil kotak pertanyaan seperti pada gambar 1.33. Tekan tombol When Cliked. Event ini dimaksudkan bahwa movie akan dimainkan ketika saudara melakukan klik kiri pada mouse diatas video tersebut.

19

Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

Gambar 1.32. Kotak dialog insert movie

Gambar 1.33. Konfirmasi event movie untuk dimainkan 6. Slide presentasi dengan video didalamnya tampak seperti gambar 1.34. Klik icon Slide Show maka terlihat seperti pada gambar 1.35. Selanjutnya kliklah tepat didaerah dimana gambar movie tersebut muncul.

Gambar 1.34. Slide dengan movie

20

Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

Gambar 1.35. Slide Show untuk memainkan movie

Bagaimana bekerjanya
Pembuatan slide dengan movie telah selesai dan siap digunakan untuk presentasi. Apabila kita tekan icon Slide Show maka dilayar tampil seperti gambar 1.35 dan presentasi siap dihiasi dengan pemutaran movie. Arahkan pointer mouse diatas kotak movie tersebut dan tekan klik kiri mouse dan movie diputar untuk keperluan pembelajaran.

21

 
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

BAB II VIDEO PEMBELAJARAN

A. Bagaimana saya melakukan ……. Membuat video presentasi pembelajaran? Persoalan
Presentasi pembelajaran dengan menggunakan Ms Power Point dapat direkam menjadi video pembelajaran. Untuk merekam dapat menggunakan software bantu Camtasia Studio 6. Fitur yang kita gunakan adalah Record Power Point. Sehubungan dengan itu persoalan yang timbul adalah bagaimana merekam presentasi power point dengan menggunakan Camtasia Studio 6?

Teknik
Ketika saudara menggunaan fitur Record Power Point dalam proses merekam presentasi power point, fitur Record Power Point secara otomatis menyatu ke dalam software bantu Power Point. Sehingga proses record dapat langsung dilajankan melalui Ms Power Point. Proses record ini sangat mudah dilakukan sehingga hasil record dapat langsung diconvert menjadi file berformat tertentu.

Tahapan
Proses record presentasi dengan menggunakan Camtasia Studio 6 dapat dilakukan sebagai berikut: 1. Aktifkan Camtasia Studio 6 sehingga dilayar tampil seperti gambar 2.1.

Gambar 2.1. Halaman Awal Camtasia Studio 6

22   

 
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

2. Aktifkan fitur Record Power Point (lihat gambar 2.2). Jika Fitur Record Power Point sudah aktif, maka saudara dapat mengaktifkan Ms Power Point dan dilanjutkan memilih file presentasi pembelajaran (lihat gambar 2.3).

Gambar 2.2. Mengaktifkan fitur Record Power Point 3. Setelah file presentasi aktif, maka tampak menu pada tab add-ins pada Ms Microsoft Power Point, lihat gambar 2.3 yang ditandai elip.

Gambar 2.3. Menu Record 4. Selanjutnya pilih icon Begin Recording kemudian tekan icon slide show dari presentasi Power Point. Lakukan presentasi sesuai denga materi pembelajaran.

23   

 
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

5. Setelah presentasi selesai, secara otomatis akan muncul dialog untuk berhenti record. Simpan project dan beri nama sesuai materi pembelajaran dengan format *.pptx.camrec, lihar gambar 2.4.

Gambar 2.4. Menyimpan hasil rekaman video 6. Drag and Drop hasil record yang ada pada clip bin ke dalam Show StoryBoard (lihat gambar 2.5). Kemudian simpan Project dalam bentuk *.camproj

Gambar 2.5. Drag and drop hasil record ke storyboard 7. Proses record presentasi telah selesai dan siap untuk di convert ke berbagai format file.

24   

 
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

Bagaimana bekerjanya Hasil rekaman video presentasi pembelajaran siap digunakan untuk membuat file video streaming. Hal ini perlu dilakukan proses konversi dari file berformat *.pptx.camrec menjadi file video streaming yang berformat *.flv.

25   

 
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

B. Bagaimana saya melakukan ……. Membuat video aktivitas pembelajaran? Persoalan
Saudara dapat membuat video pembelajaran, yang menunjukkan operasi sebuah software/aplikasi atau proses dari suatu aktivitas. Saudara juga dapat merekam hal tersebut dengan menggunakan Camtasia Studio 6. Persoalannya adalah bagaimana cara merekam aktivitas pembelajaran tersebut?

Teknik
Record The Screen merupakan fitur Camtasia Studio untuk merekam semua aktivitas pembelajaran yang tampil dilayar komputer.  Ketika saudara merekam dengan fitur record the screen disarankan mematikan semua program yang tidak diperlukan. Hal ini untuk memperingan kerja microprosesor. Aktivitas ini mudah dilakukan, sehingga tidak membutuhkan waktu lama untuk dapat melakukannya.

Tahapan Merekam seluruh aktivitas pada layar komputer (Record the Screen) dapat dilakukan dengan tahapan sebagai berikut:
1. Aktifkan program Camtasia Studio 6 sehinga pada layar computer saudara tampil halaman seperti gambar 2.6. Kemudian klik fitur Record the screen (ditandai dengan elip).

Gambar 2.6. Halaman Awal Camtasia Studio 6 2. Setelah saudara mengaktifkan fitur Record The Screen maka akan muncul menu record seperti terlihat pada gambar 2.7.

26   

 
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

Gambar 2.7. Menu record setelah fitur record the screen aktif 3. Saudara dapat mulai merekam seluruh aktivitas yang tampil di layar komputer dengan menekan tombol Full Screen kemudian menekan tombol REC (lihat gambar 2.7). Sedangkan untuk menghentikan perekaman dapat dilakukan dengan menekan tombol F10. 4. Setelah proses merekam selesai, maka saudara menyimpan hasil rekaman dalam format *.camrec (lihat gambar 2.8).

Gambar 2.8. Menyimpan hasil rekam 5. Drag and Drop hasil perekaman yang ada dalam clip bin (1) ke dalam Show Story Board (2), lihat pada gambar 2.9. Kemudian pilih File→Save Project As, beri nama file dan simpan project dalam bentuk *.camproj.

27   

 
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

Gambar 2.9. Drag dan Drop dari icon 1 ke icon 2

6. Proses perekaman video pembelajaran selesai dan hasilnya siap digunakan untuk membuat video streaming pembelajaran.

Bagaimana bekerjanya
Hasil rekaman video pembelajaran siap digunakan untuk membuat file video streaming. Hal ini perlu dilakukan proses konversi dari file berformat *.camrec menjadi file video streaming yang berformat *.flv.

28   

 
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

C. Bagaimana saya melakukan ……. Membuat video streaming pembelajaran? Persoalan
Setelah dapa subbab sebelumnya saudara dapat merekam media pembelajaran berbasis Power Point dan Capture Screen, sehingga menghasilkan suatu project pada software bantu Camtasia Studio 6. Project rekaman tersebut dapat dibuat menjadi video streaming sehingga bias dipublikasi ke dalam web site. Persoalannya sekarang adalah bagaimana membuat video streaming pembelajaran (flv/swf) dari project tersebut ?

Teknik
Untuk mengubah project menjadi video streaming pada Camtasia Studio 6 saudara dapat menggunakan fitur produce. Fitur ini dapat merubah project Camtasia Studio 6 menjadi beberapa format file, salah satunya adalah format file *.flv dan *.swf. Project yang telah diubah format menjadi file format video flash, akan memudahkan saudara untuk memutar video pembelajaran tersebut atau untuk keperluan publikasi di web site.

Tahapan
Tahapan konversi file berformat camproj menjadi flv/swf dapat dilakukan dengan tahapan sebagai berikut: 1. Aktifkan program bantu Camtasia Studio 6 lihat gambar 2.10. Kemudian buka file project dengan memilih File→Open sehinga terlihat seperti gambar 2.11.

Gambar 2.10. Halaman Awal Camtasia Studio 6

29   

 
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

2. Perhatikan gambar 2.11, kemudian pilih file project yang akan dikonversi menjadi video streaming.

Gambar 2.11 Membuka Project Camtasia 3. Setelah file project terbuka, kemudian yakinkan bahwa icon file video juga berada di Clip Bin dan Time line. Kalau belum Drag icon di Clip Bin tahan dan Drop pada Story Boar/Time line. Selanjutnya aktifkan fitur Produce Video As (File→Produce As), seperti terlihat pada gambar 2.12.

Gambar 2.12. Tampilan Produce As

30   

 
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

4. Pilih menu Custom Production Setting (lihat gambar 2.13). Kemudian saudara tekan Next, maka tampil halaman seperti gambar 2.14. Pilih format file yang diinginkan. Karena saudara akan membuat video streaming maka pilihlah MP4/FLV/SWF

Gambar 2.13. Tampilan untuk memilih Custom production setting

Gambar 2.14. Memilih format file MP4/FLV/SWF

31   

 
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

5. Tekan next dan ikuti langkah selanjutnya. Tentukan folder tempat saudara menyimpan video streaming seperti terlihat pada gambar 2.15.

Gambar 2.15. Menentukan folder penyimpan hasil video pembelajaran 6. Perhatikan gambar 2.15. Tekan tombol finish untuk memulai konversi. Tahap ini merupakan tahap terakhir, sehingga hasil konversi siap digunakan sebagai video pembelajaran.

Bagaimana bekerjanya
Video pembelajaran yang telah saudara buat telah siap digunakan untuk dipublikasikan kedalam web atau dijalankan langsung. Untuk menjalankan langsung diperlukan FLV palyer yang telah diinstalasi kedalam komputer saudara dan lakukan dua-kali klik (klik-klik) pada file video tersebut maka video pembelajaran langsung dapat dinikmati.

32   

 
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

BAB III MULTIMEDIA PEMBELAJARAN INTERAKTIF LEVEL 1
A. Bagaimana saya melakukan ……. Membuat naskah pembelajaran interaktif? Persoalan
Pada pembuatan video pembelajaran untuk media pembelajaran interaktif, naskah merupakan komponen penting. Naskah adalah alur cerita/skenario yang menentukan kandungan materi dari video pembelajaran tersebut. Oleh karena itu persoalan yang kita hadapi adalah bagaimana kita menyusun naskah materi yang singkat, padat, jelas dan sesuai dengan kurikulum yang telah ditentukan?

Teknik
Pembuatan naskah, bisa menggunakan berbagai macam pengolah kata, misalkan OpenOffice Writer, Ms Word dsb. Naskah dapat dibuat dalam bahasa Indonesia atau bahasa asing. Pemilihan isi naskah disesuaikan dengan materi atau kurikulum. Misalkan saudara akan membuat naskah untuk mata pelajaran fisika SMP kelas 7 bab 1 subbab 1 adalah “PENGERTIAN BESARAN SATUAN DAN PENGUKURAN”, sehigga naskah tersebut berisi materi tentang pengertian besaran satuan dan pengukuran yang merupakan alur penjelasan dari “PENGERTIAN BESARAN SATUAN DAN PENGUKURAN”. Pemilihan kata dalam penulisan naskah hendaknya disesuaikan dengan kaidah bahasa Indonesia baku maupun bahasa asing yang baku, sehingga ketika naskah tersebut dibaca, direcord dan digabungkan dengan video pembelajaran, hasil penggabungan tersebut mudah dimengerti oleh siswa. Tahapan Naskah video pembelajaran dibuat dengan tahapan sebagai berikut: 1. Tentukan materi/mata pelajaran. 2. Tentukan alur cerita penjelasan tentang materi tersebut. 3. Tentukan kerangka naskah yang sesuai dengan materi. 4. Membuat naskah dengan memperhatikan pemilihan kata dan kalimat yang baku dan sesuai dengan alur cerita penjelasan. 5. Naskah selesai dibuat, dan naskah siap dibaca serta direkam.

33   

 
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

Berikut ini contoh naskah video pembelajaran untuk mata pelajaran kimia tentang “Asam, Basa dan Garam” ASAM, BASA DAN GARAM Salah satu buah yang mempunyai rasa asam yang khas adalah jeruk nipis, karena buah ini mempunyai rasa asam yang cukup kuat dibandingkan dengan jenis jeruk lainnya. Dalam buah jeruk terdapat senyawa asam sitrat, senyawa asam yang sering digunakan dalam makanan adalah cuka, serta asam karbonat dan asam fosfat yang terdapat didalam darah dan berperan dalam mengangkut sari – sari makanan. Sebenarnya, untuk menentukan apakah suatu zat bersifat asam atau basa, kita dapat mencicipi zat tersebut. Akan tetapi ingat, bahwa tidak semua zat aman bagi tubuh kita. Berdasarkan hal tersebut, maka untuk keperluan eksperimen para ilmuwan membuat lakmus. Warna lakmus dapat berubah dengan cepat ketika bereaksi dengan asam maupun basa. Perubahan warna yang dihasilkan oleh lakmus dapat terlihat jelas. Lakmus menjadi merah dalam larutan asam dan menjadi biru dalam larutan basa. Kalian pernah mencuci dengan menggunakan sabun bukan? Nah tahukah kalian mengapa sabun berbusa? Pada dasarnya, sabun dapat berbusa karena sabun bersifat basa atau mengandung senyawa basa. Garam merupakan senyawa atau zat yang dihasilkan dari reaksi netralisasi asam – basa. Disamping indikator buatan, seperti lakmus, kita juga dapat mengenali senyawa asam atau basa dengan menggunakan indikator alami seperti bunga sepatu. Giling beberapa daun mahkota bunga sepatu dengan menggunakan sedikit air. Jika terkena larutan asam akan berwarna merah, jika basa kan berubah menjadi hijau.

Bagaimana bekerjanya
Naskah yang telah jadi siap digunakan untuk voice over atau backsound dari video pembelajaran interaktif. Naskah tersebut dibaca dan direkam untuk kemudian digabungkan dengan video pembelajaran.

34   

 
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

B. Bagaimana saya melakukan ……. Membuat rekaman audio pembelajaran? Persoalaan
Pembuatan video pembelajaran tidak akan terlepas dari pengolahan audio. Dalam pembuatan audio bagi video pembelajaran, program bantu yang saudara gunakan adalah Adobe Audition serta microphone yang berguna untuk merubah sinyal analog menuju sinyal digital. Program adobe audition dapat membantu recording suara termasuk pengaturan level suara dari hasil record. Dengan demikian bagaimana saudara membuat audio yang akan digunakan untuk backsound/voice over dari video pembelajaran?

Teknik
Adobe Audition dapat kita gunakan untuk merekam audio dan mengolah audio. Recording audio memanfaatkan fitur record pada adobe audition. Suara yang direkam dapat diolah menggunakan berbagai effect yang ada dalam fitur adobe audition. Salah satu effect yang digunakan adalah Hard Limiting, effect ini berguna untuk membatasi level suara hasil record agar suara yang dihasilkan menjadi lebih merata. Proses tersebut dapat dilakukan dengan mudah serta tidak membutuhkan resources komputer yang besar. Tahapan Jalankan software Adobe Audition dan sambungkan microphone dengan terminal soundcard komputer, sehingga siap untuk memulai perekaman. Tahapannya sebagai berikut: 1. Aktifkan Adobe Audition sehingga dilayar tampil seperti gambar 3.1.

Gambar 3.1. Lembar kerja Adobe Audition 2. Pilih new project pada tab file Adobe Audition (File→New Project), dan tentukan setting dari waveform (lihat gambar 3.2).

35   

 
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

Gambar 3.2. Setting Waveform Setting waveform secara default, Sample Rate yang digunakan 44100, channels yang digunakan adalah stereo serta menggunakan Resolution 16-bit. 3. Mulailah merekam bacaan naskah. Untuk merekam dapat dilakukan dengan cara mengaktifkan microphone, menekan tombol record, dan diikuti dengan pembacaan naskah.

Gambar 3.3. Tombol record yang ada di Adobe Audition 4. Hasil rekaman (lihat gambar 3.4) berupa format suara digital yang dapat diolah dan di convert dalam berbagai format.

36   

 
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

Gambar 3.4. Hasil record dari pembacaan naskah. 5. Menyimpan hasil rekam suara kedalam folder dan memberi nama file sekaligus format file yang misalnya *.wav seperti yang diperlihatkan pada gambar 3.5.

Gambar 3.5. Menyimpan Hasil Record 6. Perekaman audio selesai.

Bagaimana bekerjanya
Audio hasil rekam yang berupa format suara digital selanjutnya disimpan dalam format *.wav hal ini disebabkan file *.wav banyak didukung oleh softwaresoftware video editor. File audio hasil rekam ini digunakan sebagai backsound atau sound over dalam pembuatan video pembelajaran interaktif.

37   

 
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

C. Bagaimana saya melakukan ……. Membuat perencanaan atribut image dan video pembelajaran? Persoalan
Salah satu hal penting dalam pembuatan video pembelajaran adalah merencanakan image atau gambar yang sesuai dengan skenario atau alur cerita isi materi. Penggunaan image yang sesuai dengan isi materi akan memperjelas penyampaian isi materi serta memacu imajinasi siswa dalam memahami isi materi yang disampaikan melalui video pembelajaran. Jadi persoalan yang mendasar adalah bagaimana saudara memilih dan menentukan image dalam pembuatan video pembelajaran ?

Teknik
Image atau gambar yang digunakan dalam pembuatan video pembelajaran terbagi menjadi 3 komponen, yaitu : 1. Image background 2. Image karakter 3. Image materi Semua pengolahan dan pembuatan image yang dibutuhkan menggunakan software bantu Adobe Photoshop dan Corel Draw. Tahapan Tahan perencaan image dapat dilakukan sebagai berikut: 1. Lakukan analisa skenario/alur cerita materi. 2. Tentukan background yang tidak terlalu terang warnanya, agar tulisan dalam video pembelajaran lebih tampak contonya lihat gambar 3.6.

Gambar 3.6. Contoh image background

38   

 
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

3. Buat karakter yang akan digabungkan ke dalam video pembelajaran. Contohnya lihat gambar 3.7.

Gambar 3.7. Contoh image karakter 4. Selanjutnya pilihlah dan kumpulkan image yang berhubungan dengan materi dan alur cerita penjelasan materi. Contoh : Dalam alur cerita dijelaskan tentang asam dan basa, maka image yang berhubungan adalah image lakmus, dalam hal ini lakmus berguna untuk mengetahui kadar asam dan basa suatu zat (lihat gambar 8).

Gambar 3.8. Contoh image materi 5. Setelah semua image ditentukan, maka proses perencanaan image telah selesai, sehingga image bisa di import ke dalam software editing video.

Bagaimana bekerjanya
Image yang telah dipilih dan dikumpulkan siap untuk di eksport ke dalam software bantu Adobe After Effect sebagai komponen utama dalam pembuatan video pembelajaran. Komponen image yang telah di eksport akan dirangkai menjadi sebuah video pembelajaran dan diconvert dalam format video yang diinginkan dalam pembuatan video pembelajaran.

39   

 
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

D. Bagaimana saya melakukan ……. Membuat integrasi image dan rekaman audio pembelajaran? Persoalan
Hal utama dalam pembuatan video pembelajaran adalah menggabungkan image dan hasil rekaman audio pembacaan naskah menjadi satu kesatuan. Persoalannya sekarang adalah bagaimana saudara menggabungkan image dan rekaman suara menjadi satu kesatuan? Teknik Adobe After Effect dapat saudara gunakan untuk menggabungkan image dan rekaman audio. Fitur yang digunakan adalah fitur import dalam Adobe After Effect. Ketika saudara memulai sebuah project dalam Adobe After Effect, hal yang harus diperhatikan adalah durasi waktu dari video pembelajaran tersebut. Durasi waktu disesuaikan dengan isi meteri dari video pembelajaran. Teknik import ini sangat mudah dilakukan sehingga tidak membutuhkan waktu yang lama untuk mempelajarinya.

Tahapan
Untuk menggabungkan rekaman audio dan image ikutilah tahapan sebagai berikut: 1. Analisa durasi waktu yang diperlukan dalam video pembelajaran. 2. Memulai Project pada Adobe After Effect sehingga dilayar tampil seperti gambar 3.9.

Gambar 3.9. Memulai project

40   

 
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

3. Memulai dan mengatur composition. Composition merupakan gabungan komponen yang diperlukan dalam project Adobe After Effect. Memulai composition dapat dilakukan dengan menekan tombol Ctrl+N. Dalam menu setting composition (lihat gambar 3.10), terdapat beberapa hal yang dapat kita tentukan, antara lain adalah : a. Nama composition b. Ukuran Resolusi, pada umumnya berukuran Witdh 800 dan Height 600 c. Pixel Aspect Ratio, default D1/DV NTSC (0.9) d. Frame Rate, secara default 25 frame rate dan, e. Durasi video, yang dapat kita tentukan berdasarkan materi video pembelajaran.

Gambar 3.10. Composition setting 4. Import Image dan rekaman audia. Teknik import dapat dilakukan dengan menekan Ctrl+I hingga muncul menu untuk memilih file yang akan kita import seperti terlihat pada gambar 3.11.

41   

 
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

Gambar 3.11. Import sebuah file rekaman audio dan image 5. Hasil Import file dapat dilihat di window project Adobe After Effect seperti terlihat pada gambar 3.12.

Gambar 3.12. Hasil import file 6. Proses import file audio dan image telah selesai.

Bagaimana bekerjanya
Hasil dari penggabungan rekaman audio dan image ini selanjutnya digunakan sebagai bahan utama dari pengolahan video pembelajaran. Rekaman uadio menjadi backsound video pembelajaran serta image akan digunakan untuk menjelaskan lebih lengkap isi materi pelajaran melalui video pembelajaran.

42   

 
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

E. Bagaimana saya melakukan ……. Membuat video pembelajaran berbasis image? Persoalan
Hal utama dalam pembuatan video pembelajaran berbasis image adalah saudara harus berkreasi dan berimajinasi, sehingga video pembelajaran menjadi lebih hidup, dan menarik untuk dilihat oleh para siswa. Dengan demikian persoalan yang saudara hadapi adalah bagaimana membuat video pembelajaran yang menarik sehingga siswa tertarik untuk mengikuti materi pelajaran yang terkandung dalam video pembelajaran?.

Teknik
Adobe After Effect dapat saudara gunakan untuk membuat video pembelajaran dengan berbagai fitur dan properties yang tersedia. Untuk menggerakkan teks dan image menggunakan properties position sedangkan untuk membuat effect dissolve, dapat menggunakan effect opacity. Teks yang akan digunakan dapat diatur warna serta ukuran teks sehingga lebih menarik. Penggabungan file import diletakkan pada window composition view dengan metode drag and drop. Dengan kelengkapan fitur dan properties yang ada di adobe after effect semua penggabungan dapat dilakukan dengan mudah oleh para kreator.

Tahapan
Pembuatan video pembelajaran berbasis image dapat mengikuti tahapan sebagai berikut: 1. File yang telah di import di drag and drop menuju window composition view (lihat gambar 3.13).

Gambar 3.13. Proses Drag and Drop Image background menuju Window Composition View

43   

 
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

Jika image background berhasil di drag and drop menuju project, maka di time line view akan tampil nama file background yang berhasil di pindah menuju window composition view (lihat gambar 3.14).

Gambar 3.14. File background yang berhasil di pindah ke window composition view akan tampil pada timeline view 2. Ikuti dengan import file yang lain menuju window composition view menggunakan metode drag and drop (lihat gambar 3.15).

Gambar 3.15. Semua file import yang telah di pindah window composition view akan tampil pada timeline view 3. Tambahkan text pada window composition view sebagai judul video pembelajaran. Fitur yang digunakan adalah Horizontal Type Tool pada Window Tool (lihat gambar 3.16).

Gambar 3.16. Horizontal Type Tool

44   

 
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

4. Tambahkan text yang lain pada window composition view jika diperlukan sehingga tampil seperti gambar 3.17.

Gambar 3.17. Menambahkan text yang lain pada window composition view 5. Memberikan effect dissolve pada transisi image dan text. Untuk memberikan effect dissolve pada transisi peralihan antar object dapat dilakukan dengan beberapa langkah : a. Buka properties file atau object yang telah dipindah ke window composition view, kemudian add KeyFrame pada opacity properties pada awal object b. Setting value menjadi 0 %, lihat gambar 3.18.

Gambar 3.18. Setting properties opacity file object value pada awal object

45   

 
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

c. Add KeyFrame dengan memberikan jarak waktu dari Keyframe pertama, dengan setting value opacity 100 % (lihat gambar 3.19).

Gambar 3.19. Setting properties opacity file object value setelah setting KeyFrame awal d. Ikuti langkah tersebut diakhir properties opacity file object value pada object yang telah dipindah ke window composition view 6. Add KeyFrame pada semua properties opacity file object yang telah dipindah ke window composition view, sehingga masing-masing file object mempunyai setting opacity diakhir dan awal file object, hal inilah yang membuat effect transisi dissolve pada setiap pergantian file object. 7. Simpan project yang telah dibuat dengan ekstensi *.aep. Project Adobe After Effect merupakan gabungan file yang terkait, sehingga jika susunan folder diubah, akan berpengaruh terhadap dengan susunan project Adobe After Effect. 8. Selanjutnya melakukan penyimpanan sekaligus melakukan konversi ke file streaming FLV/SWF sebab ukuran file ini sangat kecil, sehingga sangat mudah di embed dalam website (lihat gambar 3.20). Hasil export ini juga bisa digabungkan dengan interface menu. Interface menu ini berguna untuk memanggil file video tersebut. 9. Selesai dan video pembelajaran siap digunakan.

46   

 
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

Gambar 3.20. Export project menjadi sebuah format file FLV.

Bagaimana bekerjanya
Video pembelajaran berformat FLV dapat digunakan langsung sebagai video pembelajaran atau dikembangkan lagi sebagai vodeo pembejaran interaktif. Selain itu juga dapat digunakan dalam video on demand pada vido pembelajaran di web site atau e-learning.

47   

 
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

BAB IV MULTIMEDIA PEMBELAJARAN INTERAKTIF LEVEL 2

A. Bagaimana saya melakukan ……. Membuat desain antar muka? Persoalan
Video pembelajaran yang telah saudara buat pada bab sebelumnya perlu dibuatkan antar muka sehingga dapat dikemas menjadi multimedia pembelajaran interaktif. Sekarang persoalannya adalah bagaimana membuat antar muka tersebut?

Teknik
Saudara dapat membuat desain antar muka dengan menggunakan program Macromedia Flash 8. Sejumlah fitur telah disediakan sehinga pembuatan antar muka multimedia pembelajaran dapat dilakukan dengan menyenangkan.

Tahapan
Untuk membuat antar muka multimedia pembelajaran interaktif dapat mengikuti tahapan sebagai berikut: 1. Buka program Macromedia Flash yang telah terinstall di komputer Anda (lihat gambar 4.1.

Gambar 4.1. Menjalankan Program Macromedia Flash 2. Pada layer saudara sekarang ditampilkan layar pertama Macromedia Flash 8 seperti tampak pada gambar 4.2.

 

48

 
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

Gambar 4.2. Tampilan awal program Macromedia Flash 3. Kemudian buat halaman baru dengan memilih tombol Flash Document pada Create New. Ubah setting tampilan dengan mengatur properties, yang terletak di bagian bawah interface. Caranya, tekan tombol Size, akan ditampilkan kotak dialog Document Properties seperti gambar 4.3. Pada Dimensiens, masukkan angka 800 px pada Width dan 600 px pada height. Background color atur warna putih, dan frame rate beri nilai 12 fps. Pada ruler unit, pilih Pixel. Bila pengaturan sudah selesai, tekan tombol OK.

Gambar 4.3. Kotak dialog Document Properties

 

49

 
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

4. Simpan terlebih dulu file baru ini dengan cara pada menu pilih File > Save As, masukkan nama file pada File Name , lalu tekan tombol Save (lihat gambar 4.4).

Gambar 4: Menyimpan File 5. Selanjutnya, seleksi frame 1 Layer 1 pada panel Timeline (lihat gambar 4.5).

Gambar 4.5. Menyeleksi Frame 1 Layer 1 6. Buat dua buah lingkaran/elips dengan ukuran melebihi lebar stage, seperti pada panel ditunjukkan gambar 4.6. Caranya, aktifkan tombol Oval Tool Tools. Hilangkan warna dalam lingkaran dengan memilih tombol None Fill pada bagian Color di panel Tools. Setelah itu buat sebuah persegi panjang hingga menutup seluruh stage.

 

50

 
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

Gambar 4.6. Menggambar dua lingkaran dan sebuah persegi panjang 7. Besarkan tampilan stage, dengan mengubah nilai Preview menjadi 50 %. Lalu buat empat garis mendatar dan miring, dua garis diletakkan di bagian atas stage, dan dua lainnya di bagian bawah. Pastikan tiap ujung garis menempel pada garis yang lain, untuk mempermudah pengaturan warna pada langkah-langkah berikutnya. Hasilnya seperti tampak pada gambar 4.7. Caranya, aktifkan tombol Line Tool pada panel Tools.

Gambar 4.7. Menambahkan garis di stage bagian atas dan bawah

 

51

 
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

8. Hilangkan garis-garis yang ada di bagian luar stage, dan beberapa garis di dalam stage, dengan seleksi satu-persatu garis tersebut, lalu tekan tombol Delete pada keyboard. Hasilnya seperti gambar 4.8.

Gambar 4.8: Menghilangkan garis di luar stage pada panel Tools, dan atur warna Fill 9. Aktifkan tombol Paint Bucket Tool menjadi Orange (#FFCC33), lewat Fill Color (lihat gambar 4.9).

Gambar 9: Mengatur warna fill color 10. Arahkan kursor pada bidang yang dibatasi garis lengkung, baik di sisi kiri stage maupun kanan stage. Lalu klik satu kali, bangun tersebut akan terisi warna orange (lihat gambar 4.10).

 

52

 
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

Gambar 4.10. Memberi warna orange 11. Dengan cara yang sama, atur warna fill bangun trapesium yang ada di bagian bawah dan atas stage menjadi biru (#BCE3FF). Setelah itu, hapus semua garis outline yang ada di stage ini (lihat gambar 4.11).

Gambar 4.11. Memberi warna biru pada 12. Tambahkan satu layer baru, dengan menekan tombol Insert Layer panel Timeline. Layer 2 pun akan ditambahkan di bagian atas layer 1 (lihat gambar 4.12).

 

53

 
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

Gambar 4.12. Menambahkan layer 13. Kunci layer 1 dengan mengaktifkan tombol Lock di layer 1, agar tidak bisa diubah-ubah isi dari layer tersebut. Selanjutnya seleksi layer 2 frame 1, untuk tempat bekerja berikutnya (lihat gambar 4.13).

Gambar 4.13. Mengunci layer 14. Masukkan teks judul media pembelajaran, dengan menekan tombol Text pada panel Tools. Pada panel Properties, pilih kategori Static Text, Tool dan ubah warna teks menjadi biru (#000066), lewat tombol Text (fill) Color. Jenis dan ukuran font juga bisa diatur lewat Properties. Atur pula teks menjadi rata kiri (lihat gambar 4.14).

Gambar 4.14. Mengatur warna teks 15. Ketikkan teks di stage bagian pojok kiri atas (lihat gambar 4.15).

 

54

 
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

Gambar 4.15. Memasukkan teks 16. Dengan pengaturan teks berbeda, ketikkan teks tentang hak cipta di bagian pojok kanan bawah. Hasilnya dapat dilihat pada gambar 4.16.

Gambar 4.16. Menambahkan teks hak cipta 17. Selanjutnya tambahkan sebuah layer di timeline. Jangan lupa untuk mengunci layer 2. Pada layer 3 frame 1, akan dibuat tombol-tombol untuk pengaturan media pembelajaran. Pertama-tama, kita akan membuat tombol menu. Klik dobel Rectangle Tool pada panel Tools untuk mensetting sudut kotak. Masukkan angka 20, lalu tekan tombol OK (lihat gambar 4.17).

 

55

 
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

Gambar 4.17. Mengatur sudut kotak 18. Atur warna fill menjadi coklat (#CC6600), dan buat sebuah kotak serta diletakkan di sebelah kiri stage (lihat gambar 4.18).

Gambar 4.18. Membuat sebuah kotak menu 19. Beri teks bertuliskan HOME di atas kotak menu tersebut, dengan jenis font Arial dan warna kuning (#FFFF00) seperti gambar 4.19.

Gambar 4.19. Menambahkan tulisan Home 20. Selanjutnya seleksi semua objek kotak dan teks tersebut dengan drag mouse. Ciri objek yang sudah terseleksi ditunjukkan seperti gambar 4.20.

 

56

 
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

Gambar 4.20. Menyeleksi semua objek 21. Sebuah tombol ini akan kita gandakan menjadi empat. Caranya, klik kanan lalu pilih Copy. Klik kanan lagi, dan pilih Paste. Atur tombol-tombol hasil duplikat ini sehingga tersusun seperti gambar 4.21.

Gambar 4.21. Menduplikati tombol 22. Ganti teks tombol kedua, ketiga dan keempat menjadi MATERI, LATIHAN, TES (lihat gambar 4.22).

Gambar 4.22. Mengubah teks

 

57

 
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

23. Seleksi semua objek di tombol HOME dengan tombol Selection Tool, lalu klik kanan dan pilih Convert to Symbol (lihat gambar 4.23).

Gambar 4.23. Memilih Convert to Symbol 24. Akan ditampilkan kotak dialog Convert to Symbol seperti gambar di bawah ini. Pada Name ketikkan home_btn, dan pada type pilih Button. Bila sudah selesai, tekan tombol OK (lihat gambar 4.24).

Gambar 4.24. Kotak dialog Convert to Symbol 25. Dobel klik tombol HOME, sehingga masuk ke symbol button (lihat gambar 4.25).

Gambar 4.25. Tampilan smbol button

 

58

 
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

26. Pada layer 1, seleksi bagian Over, lalu klik kanan, pilih Insert Key Frame (lihat gambar 4.26).

Gambar 4.26. Menambahkan keyframe 27. Pada Over, seleksi objek kotak. Ganti warna fill objek kotak, menjadi merah (#FF0000). Caranya, aktifkan Paint Bucket Tool , kemudian atur fill colors, dan klik mouse di dalam kotak tersebut (lihat gambar 4.27).

Gambar 4.27. Mengubah warna di bagian Over 28. Pada bagian Down, klik kanan dan pilih Insert Keyframe (lihat gambar 4.28).

Gambar 4.28. Insert keyframe di bagian Down

 

59

 
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

29. Ubah warna kotak menjadi biru (#00FFFF) dan teks menjadi merah (#FF0000) seperti terlihat pada gambar 4.29.

Gambar 4.29. Mengubah warna di bagian Down 30. Kembali ke scene awal dengan menekan tombol Scene 1. Kini buat 3 tombol lainnya menjadi button seperti yang telah dibuat tadi. Caranya sama, yang membedakan hanya nama button saat Convert to Symbol. Pada tombol MATERI, ketikkan name materi_btn, latihan= latihan_btn dan tes=tes_btn. Jangan lupa untuk mengubah warna di bagian UP, OVER, dan DOWN di masing-masing tombol. 31. Selanjutnya, semua tombol baik HOME, MATERI, LATIHAN, dan TES, berikan instance name. Caranya, seleksi tombol MATERI. Kemudian pada panel properties, pada Instance Name ketikkan tbl_materi (lihat gambar 4.30).

Gambar 4.30. Memberi nama Instance 32. Lakukan hal yang sama untuk tombol HOME dengan Name Instance tbl_home, LATIHAN dengan Name Instance tbl_latihan dan tombol TES dengan Name Instance tbl_tes, secara bergantian, jangan sekaligus. 33. Selanjutnya tetap di layer 3 frame 1, buat kotak dengan warna fill coklat (#993300), dan tanpa garis tepi. Letakkan di dekat tombol MATERI, seperti ditunjukkan gambar 4.31.

 

60

 
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

Gambar 4.31. Menggambar kotak 34. Seleksi kotak tersebut, klik kanan dan pilih Convert to Symbols. Pilih type Movie Clip dan beri nama materi_mc. Lalu tekan tombol OK (lihat gambar 4.32).

Gambar 4.32. Mengubah jadi Movie Clip 35. Berikan instance name pada movie clip materi dengan nama materi (lihat gambar 4.33).

Gambar 4.33. Memberi nama Instance 36. Seleksi movie clip materi, klik dobel, untuk masuk ke symbol movie clip (lihat gambar 4.34).

 

61

 
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

Gambar 4.34. Masuk jendela Movie Clip materi_mc 37. Tambahkan layer baru, kunci layer 1. Lantas seleksi layer 2 frame 1(lihat gambar 4.35).

Gambar 4.35. Tambah layer baru 38. Ketikkan teks berwarna putih, type Static Text, seperti ditunjukkan gambar 4.36. Untuk pindah garis, jangan tekan ENTER, tapi buat teks baru lagi, sehingga masing-masing baris teks selalu pisah.

Gambar 4.36. Memasukkan teks

 

62

 
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

39. Seleksi tiap-tiap teks yang baru dibuat, lantas ubah menjadi symbol button, dengan cara klik kanan, pilih Convert to Symbols. 40. Selanjutnya tiap-tiap tombol tersebut akan diberi scrip yang berisi perintah eksekusi ketika tombol tersebut ditekan. Caranya, seleksi tombol MATERI 1 dengan Selection Tool, lalu buka panel Action dengan menekan tombol F9. Masukkan scrip pada gambar 4.37.

Gambar 4.37. Script untuk tombol MATERI 1 41. Berikutnya seleksi tombol MATERI 2, MATERI 3, dan MATERI 4 secara bergantian, dan masukkan script seperti gambar 4.38, 4.39 dan 4.40, ke masing-masing tombol tersebut.

Gambar 4.38 Script untuk Tombol MATERI 2

Gambar 4.39 Scrip untuk Tombol MATERI 3

 

63

 
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

Gambar 4.40. Scrip untuk Tombol MATERI 4 42. Tambahkan satu layer baru, sehingga menjadi 3 layer. Buka kunci layer 1, dengan cara klik satu kali gambar kunci di layer 1 (seperti gambar 4.41).

Gambar 4.41. Menambahkan Layer Baru 43. Blok frame 2 dari semua layer, lalu klik kanan dan pilih Insert Keyframe. Hal ini artinya objek di frame 2 sama dengan objek di frame 1 (lihat gambar 4.42).

Gambar 4.42. Menambahkan Keyframe 44. Seleksi layer 1 frame 1, lalu klik kanan dan pilih Clear Frames. Langkah ini bertujuan untuk menghilangkan semua objek di frame 1 layer 1 (lihat gambar 4.43).

 

64

 
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

Gambar 4.43. Mengosongkan Satu Frame 45. Lakukan hal yang sama terhadap layer 2 frame 2. 46. Sorot frame 3 milik layer 1, 2, dan 3, lalu klik kanan, dan pilih Insert Keyframe (lihat gambar 4.44).

Gambar 4.44. Menambah Keyframe 47. Sorot frame 3 milik layer 1 dan 2, lalu geser obyek yang terseleksi menuju ke tombol LATIHAN (lihat gambar 4.45).

 

65

 
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

Gambar 4.45. Menggeser Obyek 48. Hapus semua teks MATERI 1, dengan cara sorot frame 3 layer 2, lalu tekan tombol Delete. 49. Masih di layer 2 frame 3, buat teks untuk sub menu LATIHAN, tiap-tiap baris secara terpisah (lihat gambar 4.46).

Gambar 4.46. Menuliskan Teks LATIHAN

 

66

 
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

50. Buat masing-masing teks LATIHAN 1 hingga 4 menjadi symbol, dengan cara klik kanan pilih Convert to Symbol, tentukan typenya Button. 51. Seleksi layer 3 frame 1. Buka panel Action dengan menekan tombol F9, lantas tuliskan script pada gambar 4.47.

Gambar 4.47. Memasukkan Scrip 52. Kembali ke scane awal, dengan menekan tombol Scene 1. Tambahkan satu layer baru, untuk memasukkan action script (lihat gambar 4.48).

Gambar 4.48. Menambahkan Layer Baru 53. Seleksi layer 4 frame 1, dan buka panel Action untuk memasukkan scrip, dengan menekan tombol F9. Masukkan script seperti yang tertulis pada gambar 4.49.

 

67

 
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

Gambar 4.49. Memasukkan Scrip 54. Tahap selanjutnya kita akan memasukkan bahan-bahan yang akan ditampilkan di media pembelajaran ini, seperti materi, latihan, tes, dan lainlain. Pertama kali dimulai dari menu HOME. Dalam menu HOME, akan ditampilkan penjelasan tentang media ini. Pada Scene 1, tambahkan 1 layer baru, dan letakkan di atas layer 3 (lihat gambar 4.50).

Gambar 4.50. Menambahkan Layer

 

68

 
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

55. Kemudian sorot layer 5 frame 1, aktifkan tombol Text Tool , atur warna menjadi hitam, dan ketikkan tulisan seperti gambar 4.51. Untuk materi lain yang berupa teks dimasukkan dengan cara yang sama.

Gambar 49: Menambahkan Teks 56. Pembuatan antar muka dan memasukan materi berupa teks sudah selesai. Bagaimana bekerjanya Antar muka yang telah selesai dibuat dengan dilengkapi materi berupa teks. Apabila materi pelajaran yang dimuat dalam media ini lengkap maka media pembelajaran ini dapat digunakan untuk melaksanakan proses belajar mengajar. Alangkah lebih baik dilengkapi dengan materi pelajaran berupa video pembelajaran yang pernah saudara buat. Dengan demikian antar muka ini siap dilengkapi dengan materi pelajaran berupa video pembelajaran.

 

69

 
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

B. Bagaimana saya melakukan ……. Membuat integrasi antar muka dengan video pembelajaran? Persoalan
Antar muka multimedia pembelajaran telah selesai saudara buat. Video pembelajaran juga sudah saudara buat. Selanjutnya adalah bagaimana mengintegrasikan kedua komponen tersebut sehingga menjadi MPI?

Teknik
Saudara akan mengintegrasikan video pembelajaran yang telah dibuat sebelumnya ke program antar muka ini. Video materi pembelajaran tersebut akan dipanggil melalui tombol MENU dan SUB MENU. Tools yang digunakan adalah Macromedia Flash 8.

Tahapan
Intergrasi antar muka dan video pembelajaran dapat dilakukan dengan tahapan sebagai berikut: 1. Buka file .fla desain media pembelajaran yang telah saudara buat sebelumnya. Sorot frame 2 semua layer lalu klik kanan, pilih Insert Keyframe, sehingga frame 2 terisi obyek yang sama dengan frame 1 Lihat gambar 4.50.

Gambar 4.50. Menambahkan Keyframe 2. Kosongkan frame 2 layer 5 dengan menyorot frame ini, lalu tekan tombol Delete. Teks “SELAMAT DATANG” yang ada di frame 1, tidak ditampilkan di frame 2 ini. Selanjutnya, pada menu pilih File > Import > Import to Library, guna memasukkan file video ke flash (lihat gambar 4.51).

 

70

 
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

Gambar 4.51. Perintah Menambahkan File Video 3. Lalu pilih lokasi file video yang berisi media pembelajaran yang telah dibuat sebelumnya, kemudian tekan tombol Open. Dalam kasus ini, file yang akan diimport adalah media pembelajaran.flv (lihat gambar 4.52).

Gambar 4.52. Memilih File 4. Pada layar saudara muncul tampilan kotak dialog, tekan saja tombol Next. Pada bagian Deployment, pilih Stream from Flash Communication Server. Lalu tekan tombol Next (lihat gambar 4.53).

 

71

 
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

Gambar 4.53. Menentukan Kategori Tampilan 5. Akan ditampilkan bagian Skinning (lihat gambar 4.54). Pada bagian Skin, pilih SteelOverAll.swf, lalu tekan tombol Next, kemudian tombol Finish.

Gambar 4.54. Memilih Jenis Skin

 

72

 
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

6.

Video yang telah diimport tersebut akan tampil di stage (lihat gambar 4.55).

Gambar 4.55. Video Tampil Di Stage 7. Atur lebar tampilan video, agar tidak menutupi bidang lain. Caranya, aktifkan pada panel Tools, lalu geser tepi video tombol Free Transform Tool yang bertanda kotak putih (lihat gambar 4.56).

Gambar 4.56. Mengatur Posisi Video

 

73

 
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

8. Seleksi video tersebut, dan beri nama instance di panel Properties dengan nama video (lihat gambar 4.57).

Gambar 4.57. Memberi Name Instance 9. Selanjutnya seleksi video tersebut, klik kanan pilih Convert to Symbol. Masukkan nama symbol video_mc, dan pilih tipe Movie Clip. Atur registration di pojok kiri atas. Bila sudah selesai, tekan tombol OK (lihat gambar 4.58).

Gambar 4.58. Mengconvert Video Jadi Simbol 10. Selanjutnya klik dobel video tersebut, untuk masuk ke symbol clip. Sorot frame 2 layer 1, lalu klik kanan pilih Insert Keyframe. Setelah itu, sorot frame 1, klik kanan pilih Clear Frame. Hal ini dilakukan untuk memindahkan objek yang ada di frame 1 ke frame 2. Hasil tampilan timeline seperti ditunjukkan pada gambar 4.59.

Gambar 4.59. Memindahkan Letak Objek di Frame Pada layer 1 di clip video_mc nantinya untuk meletakkan isi materi pembelajaran, mulai MATERI 1 hingga MATERI 4, sesuai dengan jumlah sub menu yang telah dibuat sebelumnya. Secara berurutan, bahan tersebut diletakkan di frame 2 untuk MATERI 1, frame 3 untuk MATERI 2, frame 4 untuk MATERi 3, dan frame 5 untuk MATERI 4.

 

74

 
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

11. Langkah berikutnya, memasukkan bahan MATERI 2. Caranya, sorot frame 3, klik kanan pilih Insert Blank Keyframe, untuk menambahkan keyframe yang tidak memiliki objek (lihat gambar 4.60).

Gambar 4.60. Menambahkan Keyframe Kosong 12. Lalu pada frame 3 ini, masukkan file video bahan materi yang kedua, dengan cara yang sama seperti dijelaskan sebelumnya. Selanjutnya berturut-turut hingga semua materi dimasukkan ke layer ini. Hasil tampilan layer seperti gambar 4.61.

Gambar 4.61. Tampilan Timeline 13. Selanjutnya tambahkan layer baru, lalu masukkan script di frame 1 layer 2 (lihat gambar 4.62).

Gambar 4.62. Menambahkan Scrip dan Tampilan Timeline 14. Kembali ke scene awal dengan menekan tombol Scene 1. Coba tes hasil pekerjaan sementara ini, dengan menekan tombol Ctrl+Enter. Arahkan mouse pada menu MATERI, akan muncul sub menu. Tekan tombol salah satu sub menu tersebut untuk melihat isi materi (lihat gambar 4.63).

 

75

 
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

Gambar 4.63. Tes Movie 15. Untuk insert video pembelajaran materi yang lain dapat dilakukan dengan cara yang sama. 16. Insert video pembelajaran selesai. Bagaimana bekerjanya Melengkapi antar muka multimedia pembelajaran interaktif dengan video pembelajaran telah selesai saudara lakukan. Dengan demikian saudara tinggal memberi sentuhan akhir terhadap multimedia pembelajaran tersebut.

 

76

 
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

C. Bagaimana saya melakukan ……. Membuat sentuhan akhir pada MPI? Persoalan
Saudara telah melakukan integrasi antar muka dengan video pembelajaran. Sekarang saudara tinggal memberi sentuhan akhir terhadap pekerjaan yang telah saudara lakukan selama ini. Persoalannya bagaimana saudara akan memberikan sentuhan akhir terhadap MPI tersebut?

Teknik
Beberapa sentuhan yang bisa diberikan untuk media pembelajaran diantaranya membuat tombol EXIT dan SOUND. Tombol EXIT gunanya untuk mempermudah user ketika mau keluar dari aplikasi media pembelajaran yang telah dibangun. Dengan hanya cukup menekan tombol ini, maka aplikasi akan ditutup. Sementara tombol SOUND gunanya untuk memberikan backsound di media pembelajaran ini.

Tahapan
Tahapan ini akan membuat tombol EXIT dan diikuti pembuatan tombol SOUND. Tahapan pembuatan tombol Exit sebagai berikut: 1. Aktifkan file yang telah saudara buat, kemudian masuk pada scene awal, tambahkan layer baru di atas layer 5. Seleksi frame 1 layer 6 (lihat gambar 4.64).

Gambar 4.64. Menambah Layer Baru 2. Pada Macromedia Flash, telah disediakan bermacam-macam bentuk tombol, sehingga saudara tidak perlu susah-susah membuatnya. Saudara tinggal memilihnya satu persatu. Untuk memunculkan tombol-tombol itu, pada menu pilih Window > Common Libraries > Buttons (lihat gambar 4.65).

 

77

 
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

Gambar 4.65. Menampilkan Common Libraries Buttons 3. Pada panel Library Buttons, klik dobel folder buttons bubble 2, lalu seleksi Bubble 2 red (lihat gambar 4.66).

Gambar 4.66. Memilih Bubble 2 Red 4. Drag button yang terseleksi ke dalam stage, letakkan di pojok kanan atas seperti terlihat pada gambar 4.67.

 

78

 
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

Gambar 4.67. Memasukkan Buton ke Stage 5. Ubah tampilan layar stage menjadi 100%, dan seleksi tombol yang baru ditaruh di stage. Klik dobel tombol tersebut, untuk masuk ke symbol button (lihat gambar 4.68).

Gambar 4.68. Symbol Buton 6. Buka kunci pada layer text, dengan mengklik sekali gambar kunci tersebut.

Gambar 4.69. Membuka Kunci Layer

 

79

 
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

7. Lalu pada tombol yang ada di stage, klik dobel teks yang bertuliskan Enter. Ganti teks ini menjadi EXIT (lihat gambar 4.70).

Gambar 4.70. Mengubah Tulisan Teks 8. Kembali ke scene awal, dengan cara klik tombol Scene 1 yang sejajar dengan Timeline (lihat gambar 4.71).

Gambar 4.71. Kembali ke Scene Awal 9. Aktifkan panel Action yang terletak di atas panel Properties, dengan cara menekan tombol Action atau tekan tombol F9. Lalu aktifkan tombol pada panel Tools. Klik sekali tombol EXIT, untuk Selection Tool memastikan bahwa tombol inilah yang akan diberi scrip. Lantas ketikkan script yang terlihat pada gambar 4.72 di dalam panel Action.

Gambar 4.72. Memasukkan Scrip Selanjutnya saudara melakukan tahapan untuk membuat tombol SOUND, maka ikuti tahapan selanjutnya. 10. Pada Scene 1, sorot layer 6 frame 1. Import file audio dengan memilih menu File > Import > Import to Library. Pilih file audio yang akan dijadikan backsound, lalu tekan tombol Open. File tersebut akan tersimpan di dalam panel Library (lihat gambar 4.73).

 

80

 
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

Gambar 4.73. File Audio Tersimpan di Library 11. Kemudian buat movie clip dengan menekan tombol Ctrl+F8, lalu isikan Name soundonoff_mc dan pilih tipe Movie Clip. Lalu tekan tombol OK (lihat gambar 4.74).

Gambar 4.74. Membuat Movie Clip 12. Selanjutnya ditampilkan stage movie clip yang telah dibuat tadi. Selanjutnya pada panel Library Button.fla, seleksi folder playback rounded > rounded green play (lihat gambar 4.75).

Gambar 4.75. Seleksi Rounded Green Play

 

81

 
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

13. Drag tombol tersebut ke stage, tepat di tengah-tengah stage yang bertanda (+) seperti terlihat pada gambar 4.76.

Gambar 4.76. Mengedrag Tombol ke Stage 14. Kembali ke scene awal, dengan menekan tombol Scene 1. Dari panel Library, seleksi movie clip soundonoff_mc (lihat gambar 4.77).

Gambar 4.77. Menyeleksi Movie Clip

 

82

 
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

15. Drag ke stage, letakkan di sudut kiri bawah seperti terlihat dalam gambar 4.78.

Gambar 4.78. Meletakkan Movie Clip di Stage 16. Dobel klik movie clip yang baru ditaruh di stage tadi, akan ditampilkan jendela movie clip soundonoff_mc, dengan sebuah obyek tombol PLAY SOUND di pojok kiri bawah. Seleksi tombol tersebut, lalu tekan tombol F9, guna memasukkan script yang tampak pada gambar 4.79. Scrip ini akan mengarahkan ke frame 2, di mana nanti akan ditaruh tombol STOP dan sebuah sound.

Gambar 4.79. Memasukkan Scrip 17. Insert Blank Keyframe pada frame 2 layer 1, drag tombol rounded green stop dari panel Library, ke stage. Atur posisi seolah-olah sama dengan tombol PLAY yang ada di frame 1 (lihat gambar 4.80).

 

83

 
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

Gambar 4.80. Meletakkan Tombol STOP di Stage 18. Seleksi tombol STOP tersebut, lalu tekan tombol F9 untuk memasukkan scrip yang tampak pada gambar 4.81. Scrip ini akan mengarahkan ke frame 1, sehingga tombol berubah jadi PLAY. Scrip ini juga akan mematikan semua suara.

Gambar 4.81. Memasukkan Scrip di Tombol STOP 19. Tambahkan 2 layer baru, ganti nama layer 2 menjadi sound, dan layer 3 menjadi scrip (lihat gambar 4.82).

Gambar 4.82. Menambahkan Layer Baru 20. Pada layer sound frame 2, klik kanan dan pilih Insert Blank Keyframe. Di frame ini, lantas drag file backsound.mp3 yang ada di panel Library ke stage. Di frame 2 layer sound akan terlihat tanda garis yang menandakan file musik telah masuk (lihat gambar 4.83).

 

84

 
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

Gambar 4.83. Tampilan Frame yang Berisi File Sound 21. Seleksi layer scrip frame 1, lalu tekan tombol F9, dan masukkan scrip seperti terlihat pada gambar 4.84.

Gambar 4.84. Memasukkan Scrip 22. Kembali ke scene awal, lalu lihat hasil projek dengan menekan tombol Ctrl + Enter. Tekan tombol PLAY di pojok kiri bawah, maka suara backsound akan terdengar. Untuk mematikannya, tekan tombol STOP (lihat gambar 4.85).

Gambar 4.85. Tes backsound. Bagaimana bekerjanya Multimedia pembelajaran interaktif telah dilengkapi dengan backsoud yang diperlukan untuk menciptakan suasana nyaman dalam belajar. Dengan demikian MPI siap digunakan dalam proses belajar mengajar.

 

85

 
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

BAB V ANIMASI

A. Bagaimana saya melakukan ……. Membuat animasi teks? Persoalan
Teks merupakan alat penyajian materi pelajaran yang klasik. Walaupun demikian dengan sentuhan animasi penyajian materi pelajaran menjadi lebih memberi kesan. Sehubungan dengan itu bagaimana membuat animasi teks untuk pembelajaran?

Teknik
Fasilitas animasi teks telah disediakan dalam program Macromedia Flash 8. Efek animasi teks yang dapat dilakukan antara lain memberi efek pada teks mengetik manual, efek mengetik dengan scip dan sebagainya.

Tahapan
Animasi gerakan-gerakan teks menjadikan teks tidak statis lagi. Beberapa efek animasi teks akan dijelaskan pada tahapan berikut: 1. Efek Teks Mengetik dengan Cara Manual Efek ini akan menganimasikan teks dalam efek seperti mengetik, yaitu huruf akan muncul satu per satu dari kiri ke kanan sampai menjadi utuh satu kata. Pembuatannya dilakukan secara manual, dengan menata tampilan di tiaptiap frame. Langkah-langkahnya sebagai berikut: a. Buat file baru, dengan menekan tombol Ctrl + N. Simpan dengan nama file animasi teks.fla. . Atur di panel properties, b. Pada panel Tools, tekan tombol Text Tool pilih tipe Static Text, dan rata kiri. Ketikkan di stage “SELAMAT DATANG” (lihat gambar 5.1). c. Seleksi frame 15, klik kanan, pilih Insert Frame.

 

86

 
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

Gambar 5.1. Mengetikkan Teks d. Seleksi frame 1, klik dobel, hingga frame ter-blok hitam, lalu tekan tombol F6. Hasil tampilan layer 1 seperti gambar 5.2.

Gambar 5.2. Tampilan Keyframe di Frame 1 - 15 e. Klik frame 1, hapus semua karakter “SELAMAT DATANG”, dan ganti dengan garis bawah “_” seperti tampak pada gambar 5.3.

Gambar 5.3. Mengganti Nilai Frame 1

 

87

 
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

f.

Klik frame 2, hapus semua karakter, dan ketikkan “S_” (lihat gambar 5.4).

Gambar 5.4. Mengganti Nilai Frame 2 g. Klik frame 3, hapus semua karakter, dan ketikkan “SE_” (lihat gambar 5.5).

Gambar 5.5. Mengganti Nilai Frame 3 h. Klik frame 4, hapus semua karakter, dan ketikkan “SEL_” (lihat gambar 5.6).

Gambar 5.6. Mengganti Nilai Frame 4   88

 
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

i.

Lakukan penggantian karakter di tiap frame ini, hingga sampai frame 14. Di frame 15, tidak perlu dilakukan penggantian karakter, biarkan sama seperti semula. Lihat hasilnya dengan menekan tombol Ctrl + Enter seperti yang ditunjukkan pada gambar 5.7.

j.

Gambar 5.7. Hasil Animasi Mengetik 2. Efek Teks Mengetik dengan Scrip Efek mengetik ini menggunakan perintah scrip, yang cara pembuatannya sebagai berikut. a. Buat dokumen baru dengan menekan tombol Ctrl + N. Simpan file dengan nama animasi teks scrip.fla. . Atur properties dengan b. Pada panel Tools, klik tombol Text Tool memilih tipe Dinamic Text. Warna font hitam, ukuran font 15, dan rata kiri. Drag mouse dari ujung kiri hingga kanan stage (lihat gambar 5.8).

Gambar 5.8. Membuat Area Teks c. Dengan tombol Selection Tool pada panel Tools, seleksi kotak area teks yang baru dibuat tadi. Lalu di panel Properties, isi di bagian Var dengan box (lihat gambar 5.9).

 

89

 
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

Gambar 5.9. Memberi Instance Name d. Seleksi layer 1 frame 4, klik kanan pilih Insert Frame. Tambah layer baru di atas layer 1 (lihat gambar 5.10).

Gambar 5.10. Menambah Layer Baru e. Seleksi layer 2 frame 1, lalu tekan tombol F9 untuk memasukkan scrip di bawah ini. Pada bagian text, naskah yang dituliskan jangan sampai ganti baris. Naskah ini nantinya akan ditampilkan dengan efek mengetik (lihat gambar 5.11).

Gambar 5.11. Scrip di Frame 1 f. Kemudian seleksi layer 2 frame 2, klik kanan dan pilih Insert Blank Keyframe. Tekan tombol F9 untuk membuka panel Action. Masukkan scrip berikut ini (lihat gambar 5.12).

Gambar 5.12. Scrip di Frame 2

 

90

 
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

g. Selanjutnya seleksi layer 2 frame 3, klik kanan dan pilih Insert Blank Keyframe. Tekan tombol F9 untuk membuka panel Action. Masukkan scrip seperti tampak pada gambar 5.13.

Gambar 5.13. Scrip di Frame 3 h. Berikutnya, seleksi layer 2 frame 4, klik kanan dan pilih Insert Blank Keyframe. Masukkan scrip seperti yang tampak pada gambar 5.14 di layer 2 frame 4.

Gambar 5.14. Scrip di Frame 4 i. Lihat hasilnya, dengan menekan tombol Ctrl + Enter, seperti tampak pada gambar 5.15.

Gambar 518. Hasil Efek Teks Mengetik Bagaimana bekerjanya Pembuatan animasi teks telah saudara selesaikan. Animasi teks menjadikan media pembelajaran yang saudara buat lebih menarik dan merangsang minat serta perhatian siswa untuk belajar. Selain itu animasi memancing ide kreatif bagi para kreator multimedia pembelajaran.

 

91

 
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

B. Bagaimana saya melakukan ……. Membuat animasi objek? Persoalan
Animasi dari objek menjadi dasar untuk membuat materi ajar yang menarik dengan materi yang melibat objek bangun, seperti lingkaran, persegi, dan juga mengatur pergerakkannya. Sekarang persoalan yang saudara hadapi adalah bagaimana membuat animasi dari objek?

Teknik
Pembuatan animasi objek melibatkan fitur yang terkait dengan pembuatan objek, baik itu Rectangle Tool, Oval Tool, dan juga Motion Tool. Semua fitur tersebut sudah disediakan pada program Macromedia Flash 8.

Tahapan
Pada kesempatan ini saudara akan membuat animasi Objek Tween Shape, animasi Objek Tween Motion, animasi Motion Guide, animasi warna dan Animasi Objek Berubah Bentuk. Secara bertahap semua akan saudara lakukan dan tahapannya sebagai berikut:. 1. Animasi Objek Tween Shape Animasi ini dikenal dengan animasi tweenning, yakni membuat adegan di bagian awal dan bagian akhir saja. Program komputer akan menjalankan sendiri animasi tersebut. Untuk membuat animasi objek kotak, langkahlangkahnya sebagai berikut. a. Buka file baru, simpan dengan nama animasi kotak.fla. di panel Tools. Atur warna fill dengan biru b. Seleksi Rectangle Tool (#0000FF) dan stroke berwarna merah (#FF0000). Lalu gambar bidang kotak di stage (lihat gambar 5.19).

 

92

 
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

Gambar 5.19. Menggambar Objek Kotak c. Di layer 1 frame 20, klik kanan dan pilih Insert Keyframe. d. Seleksi seluruh objek kotak dengan tombol Selection Tool, geser objek ke sebelah kanan (lihat gambar 5.20).

Gambar 5.20. Menggeser Objek e. Kembali ke frame 1, lalu buka panel Properties. Pada bagian Tween, pilih Shape (lihat gambar 5.21).

Gambar 5.21. Memilih Shape

 

93

 
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

f.

Lihat di panel timeline, warna frame berganti menjadi hijau, sebagai tanda frame tersebut telah diberi efek Tween Shape (lihat gambar 5.22).

Gambar 5.22. Tampilan Frame yang Diberi Efek Tween Shape g. Lihat hasil animasi ini (gambar 5.23), yang menunjukkan objek bergerak dari posisi frame 1 ke posisi frame 20.

Gambar 5.23. Tampilan Animasi Tween Shape

2. Animasi Objek Tween Motion Pembuatan animasi Tween Motion hampir sama dengan Tween Shape. Yang membedakan pada Tween Motion, objek diubah (di-convert) terlebih dulu menjadi symbol dengan tipe movie clip. Untuk membuat animasi jenis ini, perhatikan langkah-langkah berikut ini. a. Buat layer baru pada file sebelumnya (lihat gambar 5.24). Kunci layer 1.

 

94

 
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

Gambar 5.24. Menambah Layer Baru , lukis sebuah b. Seleksi layer 2 frame 1. Aktifkan tombol Oval Tool lingkaran di stage bagian kanan, dengan fill color hijau (#00FF00) dan stroke hitam, seperti tampak pada gambar 5.25.

Gambar 5.25. Melukis Objek Lingkaran c. Aktifkan tombol Selection Tool gambar 5.26). , seleksi seluruh objek lingkaran (lihat

Gambar 5.26. Menyeleksi Seluruh Objek Lingkaran d. Tekan tombol F8, akan tampil kotak dialog Convert to Symbol (lihat gambar 5.27). Ketikkan lingkaran_mc pada Name, dan pilih Type Movie Clip. Tekan tombol OK.

 

95

 
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

Gambar 5.27. Mengubah Objek Menjadi Simbol Movi Clip e. Objek lingkaran kini telah berubah menjadi symbol movie clip, dengan tampilan seperti gambar 5.28.

Gambar 5.28. Tampilan Objek Movie Clip f. Selanjutnya, seleksi frame 20, klik kanan, pilih Insert Keyframe. Dengan tombol Selection Tool, geser objek lingkaran ke stage bagian kiri (lihat gambar 5.29).

Gambar 5.29. Menggeser Objek Lingkaran g. Kembali seleksi frame 1, lalu buka panel Properties. Pada bagian Tween, pilih Motion (lihat gambar 5.30).

Gambar 5.30. Memilih Tween Motion

 

96

 
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

h. Lihat tampilan frame di layer 2 pada gambar 5.31, sudah berubah warna menjadi biru, sebagai tanda bahwa frame tersebut telah diberi efek Tween Motion.

Gambar 5.31. Tampilan Warna Frame i. Lihat hasilnya dengan menekan tombol Ctrl + Enter. Objek lingkaran akan bergerak dari kanan ke kiri (gambar 5.32).

Gambar 5.32. Tampilan Animasi Gerak Objek

3. Animasi Motion Guide Animasi ini akan menampilkan gerakan objek yang mengikuti suatu panduan berupa garis yang telah dibuat sebelumnya. Untuk membuatnya, perhatikan langkah-langkah berikut ini. a. Buat file baru dengan nama animasiguide.fla. , yang terletak di panel Timeline, b. Tekan tombol Add Motion Guide bersebelahan dengan tombol Insert Layer (lihat gambar 5.33). Tombol ini untuk menambahkan Motion Guide pada layer. Layer Guide sebagai tempat meletakkan garis panduan (guide) yang akan dilewati sebuah objek yang bergerak.

 

97

 
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

Gambar 5.33. Menambahkan Motion Guide c. Seleksi layer Guide. Aktifkan tombol Pencil Tool Lukiskan garis guide di stage (lihat gambar 5.34). di panel Tools.

Gambar 5.34. Membuat Garis Guide d. Seleksi layer 1. Di stage, buat sebuah objek lingkaran kecil dengan Oval Tool 5.35). . Warna fill oranye (#FF9900) dan stroke hitam (lihat gambar

Gambar 5.35. Membuat Objek Lingkaran

 

98

 
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

e. Seleksi objek lingkaran dengan Selection Tools, lalu ubah menjadi symbol movie clip, dengan menekan tombol F8. Pada Name ketikkan lingk_mc dan tipe Movie Clip (lihat gambar 5.36). Lalu tekan tombol OK.

Gambar 5.36. Mengubah Menjadi Movie Clip f. Atur posisi objek lingkaran di ujung guide. Pastikan lingkaran kecil di tengah-tengah objek menempal di ujung garis (lihat gambar 5.37). Selain dengan tombol Selection Tool, pengaturan posisi ini juga bisa dikombinasikan dengan menggunakan tombol panah pada keyboard.

Gambar 5.37. Meletakkan Objek Movie Klip di Ujung Guide g. Kemudian sorot frame 40 layer 1, klik kanan, pilih Insert Keyframe. Sorot frame 40 layer Guide, klik kanan, pilih Insert Frame (lihat gambar 5.38).

Gambar 5.38. Menambahkan Frame dan Keyframe h. Selanjutnya seleksi layer 1 frame 40. Dengan tombol Selection Tool, atur posisi lingkaran ke ujung garis guide yang lain. Pastikan lingkaran kecil di tengah-tengah tepat di ujung garis (lihat gambar 5.39).

 

99

 
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

Gambar 5.39. Meletakkan Objek di Ujung Garis i. Kemudian seleksi frame 1 layer 1. Buka panel Properties, pada bagian Tween pilih Motion (lihat gambar 5.40).

Gambar 5.40. Memilih Tween Option j. Tekan tombol Enter, untuk melihat hasil animasi. Tampak objek lingkaran akan bergerak menyusuri garis, dari satu ujung ke ujung lain (lihat gambar 5.41).

Gambar 5.41. Tampilan Animasi Motion Guide

 

100

 
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

4. Animasi Warna Pada animasi ini menunjukkan tampilan perubahan warna satu ke warna lain, dengan memodifikasi warna fill di objek tersebut. Untuk membuatnya, berikut ini langkah-langkahnya. a. Buat file baru dengan nama animasiwarna.fla b. Buat objek bintang. Caranya, aktifkan tombol Polystar Tool yang ada di panel Tool (lihat gambar 5.42).

Gambar 5.42. Mengaktifkan Tombol Polystar c. Buka panel Properties, lalu tekan tombol Options. Atur Style Star, Number of Side = 5, dan Star Point Size = 1 (lihat gambar 5.43).

Gambar 5.43. Mengatur Setting Tool d. Gambarkan objek bintang di stage dapat dilihat pada gambar 5.44.

Gambar 5.44. Melukis Bintang

 

101

 
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

e. Selanjutnya, aktifkan panel Color Mixer lewat Window > Color Mixer. Panel tersebut akan muncul di sebelah kanan stage. Seleksi objek bintang dengan Selection Tool. Lalu pada panel Color Mixer, pilih tipe Radial (lihat pada gambar 5.45).

Gambar 5.45. Memilih Tipe Radial f. Atur warna bagian dalam lebih terang dibanding bagian luar, dengan menekan kotak kecil di bar pengaturan warna. Pilih warna dalam kuning (#FFFF00) dan luar biru (#0000FF) seperti pada gambar 5.46.

Gambar 5.46. Mengatur Warna g. Lalu seleksi frame 40, klik kanan dan pilih Insert Keyframe. h. Ganti warna objek di bagian dalam lebih gelap dibanding warna luar, atau kebalikan dari warna semula, yakni warna luar menjadi kuning dan warna dalam menjadi biru (lihat gambar 5.47).

Gambar 5.47. Warna Dibalik i. Selanjutnya seleksi frame 1, lalu buka panel Properties. Pada bagian Tween, pilih Shape (lihat gambar 5.48).

 

102

 
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

Gambar 5.48. Memilih Shape j. Lihat hasilnya dengan menekan tombol Ctrl + Enter. Warna objek perlahan-lahan akan berganti seperti tampak pada gambar 5.49.

Gambar 5.49. Tampilan Animasi Warna

5. Animasi Objek Berubah Bentuk Animasi ini akan menampilkan perubahan bentuk suatu objek ke bentuk objek yang lain. Pada pembahasan ini saudara akan melakukan pembuatan animasi berubah bentuk dari kotak ke lingkaran. Ikuti langkah berikut: a. Buat file baru dengan nama animasibentuk.fla. b. Buat objek kotak di stage dengan Rectangle Tool, atur warna fill biru (#0000FF) dan stroke hitam seperti tampak pada gambar 5.50. c. Seleksi frame 40, klik kanan, dan pilih Insert Keyframe. d. Hapus objek kotak, lalu buat objek lingkaran, dan letakkan di bagian bawah stage seperti tampak pada gambar 5.51.

 

103

 
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

Gambar 5.50. Membuat Objek Kotak

Gambar 5.51. Mengganti Objek Kotak Menjadi Lingkaran e. Seleksi frame 1, lalu buka panel Properties. Pada bagian Tween, pilih Shape. f. Lihat hasilnya dengan menekan tombol Ctrl + Enter. Objek kotak yang terletak di bagian atas stage akan bergerak ke bawah, dengan bentuknya yang perlahan-lahan berubah menjadi lingkaran (lihat gambar 5.52).

Gambar 5.52. Animasi Berubah Bentuk

 

104

 
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

Bagaimana bekerjanya Saudara telah membuat animasi Objek Tween Shape, animasi Objek Tween Motion, animasi Motion Guide, animasi warna dan Animasi Objek Berubah Bentuk. Semua itu merupakan bekal berharga untuk mengembangkan materi pelajaran yang menuntut adanya animasi untuk memudahkan siswa untuk memahami materi pelajaran tersebut.

 

105

 
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

BAB VI PUBLIKASI WEB ANIMASI

A. Bagaimana saya melakukan ……. Membuat player animasi berasal dari URL? Persoalan
Saudara akan membuat player animasi berasal dari URL. Tidak semua komputer dapat menjalankan animasi kita, hal ini disebabkan ada-tidaknya player Flash pada computer tersebut. Jika belum terinstall maka pada komputer harus diinstal player flash. Setelah itu baru digunakan untuk menjalankan web animasi dengan player berasal dari URL. Persoalannya adalah bagaimana membuat web animasi dengan player berasal dari URL?

Teknik
Program bantu yang saudara gunakan adalah Adobe Flash Player Plugin, Notepad dan Internet Explorer/Mozilla Firefox sebagai browser. Dengan program-program ini saudara dibantu dalam membuat web animasi. Teknik yang dipakai adalah saudara melengkapi sistem dengan Player Flash, sehingga sistem dapat menjalankan animasi Flash. Setelah sistem dipastikan lengkap, langkah selanjutnya adalah membuat player berbasis URL dengan menggunakan HTML.

Tahapan
Tahapan untuk membuat player animasi yang harus saudara ikuti adalah sebagai berikut: 1. Jalankan software Notepad (lihat gambar 6.1) atau Adobe Dreamweaver untuk mengetikkan skrip program player animasi dari URL.

Gambar 6.1. Notepad 2. Ketiklah di notepad seperti skrip program yang tampak pada gambar 6.2.

 

106

 
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>Website Animasi Elektro</title> </head> <body> <p>Selamat datang di Website Animasi Elektro</p> <object> <param name="movie" value="namafileswfanda.swf" /> <param name="quality" value="high" /> <embed src="namafileswfanda.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="320" height="320"></embed> </object> </body> </html> Gambar 6.3. Skrip program web animasi Sesuaikan namafileswfanda.swf dengan (berakhiran *.swf) yang saudara punya. nama file animasi

3. Simpan dokumen tersebut sebagai player-animasi.html (sesuaikan pula nama file ini, pastikan pada Save as Type adalah All Files) seperti tampak pada gambar 6.4.

Gambar 6.4. Save as type harus All Files pada Notepad 4. Aturlah file html saudara dan swf saudara berada pada satu folder (lihat gambar 6.5)

 

107

 
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

Gambar 6.5. File *html berada dalam satu folder dengan file *swf 5. Selesai Bagaimana bekerjanya Untuk mengetahui bagaimana bekerjanya, klik ganda file playeranimasi.html dan animasi saudara pun sukses dijalankan.

Gambar 6.6. Demo player animasi dari URL

 

108

 
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

B. Bagaimana saya melakukan ……. Membuat player animasi berasal dari server? Persoalan
Saudara akan membuat player animasi berasal dari server. Dengan demikian persoalan yang saudara hadapi adalah bagaimana saudara membuat player animasi berasal dari server?

Teknik
Program bantu yang saudara gunakan adalah Adobe (Macromedia) Flash 8 dan Internet Explorer/Mozilla Firefox. Dengan program-program ini saudara dibantu dalam membuat player animasi yang telah kita desain dan kembangkan dalam Adobe Flash 8 (dulu dikenal dengan nama Macromedia Flash 8), termasuk mengatur tipe file, versi player Flash minimum, kompresi animasi, suara/audio, template, dimensi, kualitas dan lain-lain. Saudara dapat mellakukan dengan memanfaatkan fasilitas Publishing yang ada pada Adobe Flash 8. Konsep sederhananya adalah mengkompilasi file *.fla (editan animasi berbasis flash) menjadi satu file kompak dengan ekstensi *.swf yang dapat dijalankan oleh Flash Player.

Tahapan
Jalankan Adobe Flash 8, sehingga Adobe Flash 8 siap digunakan untuk membuka project animasi dan melakukan publishing. Kemudian ikuti tahapan sebagai berikut: 1. Buka project animasi saudara dengan menggunakan menu File -> Open kemudian jelajah dan buka file project saudara. 2. Lakukan setting Publishing dengan menggunakan menu File -> Publish Setting (lihat gambar 6.7).

Gambar 6.7. Menu Setting Publish Adobe Flash 8

 

109

 
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

3. Lakukan pengaturan format publishing project saudara dengan menggunakan format HTML. Pastikan yang saudara centang/cek adalah format .html dan .swf (lihat gambar 6.8). Untuk sementara saudara gunakan penamaan default dari software, sehingga file html dan swf yang akan dihasilkan sama dengan nama file project kita.

Gambar 6.8. Jendela Setting Publish 4. Pindahkan perhatian saudara ke tab HTML, dimana saudara akan melakukan pengaturan disisi HTML (lihat gambar 6.9). Secara default, aturlah dengan parameter: - Template: Flash Only (untuk publish dalam format flash saja) - Dimension: Match Movie (untuk menyesuaikan ukuran dengan ukuran animasi)

 

110

 
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

-

Playback: centang Loop dan Display Menu (untuk mengaktifkan looping/perulangan dan menu pada animasi. Quality: High (untuk kualitas animasi, High/paling tinggi) Window Mode: Window (untuk modus window biasa) HTML alignment: Default Scale: Default Flash alignment: Horizontal: Center, Vertical: Center (untuk mengatur posisi animasi supaya berada ditengah layar) Centang Show warning messages untuk menampilkan pesan jika terjadi error.

Gambar 6.9. Jendela Setting Publish (tab HTML) 5. Tekan tombol OK untuk menyimpan semua variabel yang kita atur.

 

111

 
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

6. Lakukan publishing animasi dengan menggunakan menu File -> Publish (atau tekan tombol Shift + F12 bersamaan). Adobe Flash 8 akan menampilkan dialog proses pembuatan player animasi berasal dari URL kita. 7. Lihat pada direktori/folder tempat project file kita berada, akan terdapat dua file baru yaitu VoIp2.html dan VoIp2.swf. 8. Player animasi berasal dari URL telah selesai dibuat dan siap digunakan. Bagaimana bekerjanya Untuk menggunakan player animasi berasal dari server ini dapat dilakukan dengan melakukan klik ganda terhadap file VoIp2.html, kemudian munculah Internet Explorer/Mozilla Firefox yang akan memainkan animasi kita.

Gambar 6.10. Demo player animasi dari server

 

112

 
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

C. Bagaimana saya melakukan ……. Membuat skrip web animasi? Persoalan
Saudara akan membuat skrip atau kode program untuk web animasi. Bagaimana cara membuatnya?

Teknik
Program bantu yang akan saudara gunakan dalam memecahkan persoalan kali ini Adobe Dreamweaver 8 dan Filezilla FTP Client. Adobe Dreamweaver 8 kita gunakan untuk membuat skrip web animasi berbasis kode-kode HTML, dimana kita akan mengatur Judul Web, Warna, Font dan lain-lain. Sementara Filezilla FTP Client digunakan untuk membantu mengupload file skrip web animasi kita ke server, baik terkoneksi ke internet maupun intranet.

Tahapan
Tahapan dalam pengembangan web animasi adalah sebagai berikut: 1. Jalankan Adobe Dreamweaver 8 dan Buat file baru dengan menggunakan menu File -> New pada Category pilih Basic Page, kemudian pilih HTML dan tekan tombol Create (lihat gambar 6.11).

Gambar 6.11. Create file HTML pada Dreamweaver

 

113

 
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

2. Ubah modus editor Dreamweaver menjadi modus code developer dengan mengklik tab Code (lihat gambar 6.12).

Gambar 6.12. Ubah mode ke mode Code 3. Ketiklah skrip halaman web seperti gambar 6.13. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Website Animasi Elektro</title> </head> <body> <p>Selamat datang di Website Animasi Elektro</p> <object> <param name="movie" value="http://namadomainanda.com/namafileswfanda.swf" /> <param name="quality" value="high" /> <embed src="http://namadomainanda.com/namafileswfanda.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="320" height="320"></embed> </object> </body> </html> Gambar 6.13. Skrip web animasi 4. Untuk mengatur judul website, tuliskan judul baru diantara tag <title> </title> 5. Untuk memasukkan objek animasi baru, pastikan saudara menuliskannya diantara tag <body> </body> karena hanya kode yang berada diantaranya saja yang dapat dilihat. 6. Kode untuk memasukkan objek animasi baru dapat dilihat pada gambar 6.14.

 

114

 
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

<object width="550" height="400"> <param name="namamovie" value="namafile.swf"> <embed src="namafile.swf" width="550" height="400"> </embed> </object> Gambar 6.14. Skrip object animasi Dengan parameter Width untuk lebar, Height untuk tinggi objek. Pastikan nama dan alamat file animasi web yang saudara masukkan benar. Kode diatas adalah kode minimal dan paling sederhana, saudara bisa mempelajari lebih lanjut dalam mendesain web dengan pewarnaan, tata letak dan elemen-elemen lain dalam buku-buku yang relevan. 7. Upload file-file yang terkait dengan web animasi dengan Filezilla FTP Client. Login ke server dengan Filezilla, ketikkan namadomain, username, password dan tekan Enter.

Gambar 6.15. Panel autentifikasi login ftp pada FileZilla 8. Fokus ke panel sebelah kanan (direktori server) dan masuk ke folder public_html atau htdocs atau httpdocs, sesuai dengan aturan pada server saudara. Masuk dengan klik ganda pada nama folder tersebut. 9. Pada Panel kiri, pilih file-file yang akan diupload, kemudian klik kanan dan pilih Upload (lihat gambar 6.16).

Gambar 6.16. Upload file yang dibutuhkan

 

115

 
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

10. Pastikan semua file dan folder yang terkait dengan web saudara terupload. Sekarang website animasi saudara sudah dapat dilihat diseluruh dunia. Mudah bukan? Bagaimana bekerjanya Untuk melihat web animasi saudara, jalankan aplikasi Internet Explorer/ Firefox dengan mengunjungi alamat: http://nama-domain-anda.com/ Kemudian tekan tombol Enter. Ingat, nama domain saudara adalah nama atau alamat saudara di Internet, seperti http://elektro.com http://elektro.unnes.ac.id, untuk memperolehnya saudara harus membeli pada penjual Web Domain/Web Hosting atau mendapatkan domain/hosting gratis.

 

116

 
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

BAB VII PUBLIKASI VIDEO STREAMING
A. Bagaimana saya melakukan ……. Membuat browser dengan player FLV?
Persoalan Untuk menjelajah internet saudara menggunakan web browser. Beberapa web browser yang terkenal antara lain Internet Explorer, Mozilla Firefox, Opera dan Google Chrome. Semua browser dapat memenuhi dan menayangkan halaman web dengan baik, termasuk kemampuan memainkan video streaming berformat FLV. Kenyataannya semua browser itu tak bisa memainkannya begitu saja tanpa tambahan plugin. Plugin yang digunakan adalah Flash Player Plugin. Persoalannya sekarang bagaimana saudara memperoleh, menginstall dan mengintegrasikannya dengan web browser? Teknik Teknik yang digunakan adalah menambahkan dan mengintegrasikan plugin Flash Player ke web browser. Flash player adalah player file format streaming yang sudah menjadi standar dihampir semua situs streaming dewasa ini. Flash player dikembangkan oleh perusahaan Software House kelas dunia, Adobe. Versi terbaru dari Flash Player Plugin adalah versi 10.0.32.18 (saat buku ini ditulis) dan dapat digunakan untuk web browser berikut: Internet Explorer, Firefox, Safari dan Opera. Tahapan Tahapan yang dilakukan untuk menyiapkan browser saudara agar dapat menjalankan video streaming adalah sebagai berikut: 1. Masukkan CD pendukung buku ini, cari file install_flash_player.exe pada folder Software. Atau jika ingin memperoleh flash player terbaru silakan unduh dari http://get.adobe.com/flashplayer.

Gambar 7.1. Website download Flash Player

 

117

 
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

Perhatikan gambar 7.1, kemudian klik tombol Agree and Install Now berarti saudara telah menyetujui lisensi penggunaan dari software tersebut. Download segera dimulai dan tunggu sampai plugin browser ini selesai saudara unduh. 2. Tutup semua browser (Internet Explorer, Mozilla Firefox, Opera, dll) yang tengah berjalan. 3. Install plugin ini dengan mengklik ganda file install_flash_player.exe yang saudara download.

Gambar 7.2. Proses instalasi Flash Player Plugin 4. Klik Show details jika saudara tertarik mengetahui apa saja yang dilakukan oleh Installer ini (lihat gambar 7.3).

Gambar 7.3. Detail proses instalasi Flash Player Plugin 5. Tunggu sampai selesai kemudian klik tombol Close untuk menutup jendela installer plugin ini. Bagaimana bekerjanya Untuk mengetahui bagaimana bekerjanya, jalankan web browser saudara dan kunjungi situs dengan konten streaming didalamnya. Misalnya: • Edutube Unnes : http://edutube.unnes.ac.id • YouTube : http://youtube.com Indikator suksesnya adalah jika saudara berhasil menjalankan dan menikmati salah satu video streaming didalamnya.

 

118

 
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

B. Bagaimana saya melakukan ……. Membuat skrip video streaming? Persoalan
Untuk membuat skrip video streaming saudara harus mengembangkan sendiri halaman web berikut perangkatnya untuk memutar video streaming dengan mengetikkan serangkaian kode program web video streaming. Saat ini sudah ada perangkat lunak yang dapat membantu saudara membuat skrip video streaming dengan mudah yaitu JW Player. Dengan JW Player, saudara tak perlu terkoneksi internet untuk dapat menggunakan player video streaming di Internet. Lalu bagaimana saudara memperoleh dan membuat skrip video streaming dengan software ini?

Teknik
Teknik yang digunakan adalah teknik yang paling sederhana, dengan mempergunakan software JW Player (Jeroe Wienjering Player) yang diproduksi oleh LongTailVideo.com. JW Player dilepas dalam 3 bentuk lisensi, yaitu komersial, non-komersial dan open source. Saudara akan pakai versi nonkomersial/open source-nya saja. JW Player terdiri atas 4 file penting, yaitu namafile.html, player.swf, swfobject.js dan yt.swf. Disamping itu saudara juga harus mempunyai file video berekstensi FLV dan sebuah file gambar sebagai preview/gambaran video saudara sebelum dimainkan, jika perlu. Tahapan Untuk membuat skrip video streaming sauadara ikuti tahapan berikut: 1. Buka CD pendukung buku ini, carilah file bernama jw-flv-palyer.zip pada folder Bab 7. Atau jika saudara ingin mendapatkan versi terbaru, silakan jalankan web browser saudara dan download JW Player dari alamat: http://www.longtailvideo.com/players/jw-flv-player/

Gambar 7.4. Website download JW Flv Player

 

119

 
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

Masukkan alamat email saudara untuk mendapatkan tiket download JW Player (lihat gambar 7.5). Kemudian klik tombol Download Now

Gambar 7.5. Form email untuk download JW Player 2. Ekstrak file jw-flv-player.zip pada CD, atau mediaplayer.zip yang berisi JW Player yang baru saja saudara download dengan software bantu seperti Winzip, Winrar atau IZArc (lihat gambar 7.6).

Gambar 7.6. File Mediaplayer.zip dibuka dengan iZarc/WinZip 3. Ada 6 file hasil ekstrak jw-flv-player.zip atau mediaplayer.zip tersebut.

 

120

 
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

Gambar 7.7. Hasil ekstrak mediaplayer.zip (ada 6 file) Ingat, yang akan saudara pakai hanyalah file player.swf, swfobject.js dan yt.swf saja. 4. Kemudian dengan menggunakan bantuan software Adobe Dreamweaver 8 ataupun notepad silakan ketik kode berikut dan simpan dengan nama index.html (lihat gambar 7.8).
<html>  <head>  <title>Masukkan judul web video streaming saudara disini</title>  </head>  <body>  <p>Masukkan artikel, judul Video Streaming saudara disini, berikut narasi, atau kelengkapan lain yang  saudara anggap perlu</p>  <object id="player" classid="clsid:D27CDB6E‐AE6D‐11cf‐96B8‐444553540000" name="player" width="328"  height="200">      <param name="movie" value="player.swf" />      <param name="allowfullscreen" value="true" />      <param name="allowscriptaccess" value="always" />      <param name="flashvars"  value="file=namafilevideostreaminganda.flv&image=namafilepreviewvideostreaminganda.jpg" />      <embed        type="application/x‐shockwave‐flash"        id="player2"        name="player2"        src="player.swf"         width="328"         height="200"        allowscriptaccess="always"         allowfullscreen="true"        flashvars="file=namafilevideostreaminganda.flv&image=namafilepreviewvideostreaminganda.jpg"       />    </object>  </body>  </html> 

Gambar 7.8. Skrip video streaming 5. Selesai.

 

121

 
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

Bagaimana bekerjanya Untuk menjalankannya, saudara cukup mengklik ganda file index.html yang saudara buat tadi. Hasilnya video saudara akan dimainkan.

Gambar 7.9. Player streaming dari URL/lokal

 

122

 
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

C. Bagaimana saya melakukan ……. Membuat skrip video streaming dengan player server?
Persoalan Saudara dapat membuat skrip video streaming dengan player video berada di server. Persoalannya sekarang adalah bagaimana saudara membuat player video streaming dimana software playernya berada di suatu tempat di Internet? Teknik Teknik yang akan saudara gunakan hampir sama dengan teknik pada sub bab B, akan tetapi player yang dimaksud berada di suatu tempat di internet, sehingga saudara harus melakukan pengubahan letak player tersebut. Tahapan Untuk itu saudara melakukan tahapan sebagai berikut: 1. Jalankan software Notepad ataupun Adobe Dreamweaver untuk mengetikkan kode HTMLnya. 2. Ketikkan kode untuk player dari Server sesuai dengan skrip digambar 7.10.
<html>  <head>  <title>Web Animasi</title>  <script type="text/javascript">  function MM_CheckFlashVersion(reqVerStr,msg){    with(navigator){      var isIE  = (appVersion.indexOf("MSIE") != ‐1 && userAgent.indexOf("Opera") == ‐ 1);      var isWin = (appVersion.toLowerCase().indexOf("win") != ‐1);      if (!isIE || !isWin){          var flashVer = ‐1;        if (plugins && plugins.length > 0){          var desc = plugins["Shockwave Flash"] ? plugins["Shockwave Flash"].description  : "";          desc = plugins["Shockwave Flash 2.0"] ? plugins["Shockwave Flash  2.0"].description : desc;          if (desc == "") flashVer = ‐1;          else{            var descArr = desc.split(" ");            var tempArrMajor = descArr[2].split(".");            var verMajor = tempArrMajor[0];            var tempArrMinor = (descArr[3] != "") ? descArr[3].split("r") :  descArr[4].split("r");            var verMinor = (tempArrMinor[1] > 0) ? tempArrMinor[1] : 0;            flashVer =  parseFloat(verMajor + "." + verMinor); 

 

123

 
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet         }        }        // WebTV has Flash Player 4 or lower ‐‐ too low for video        else if (userAgent.toLowerCase().indexOf("webtv") != ‐1) flashVer = 4.0;          var verArr = reqVerStr.split(",");        var reqVer = parseFloat(verArr[0] + "." + verArr[2]);            if (flashVer < reqVer){          if (confirm(msg))            window.location =  "http://www.macromedia.com/shockwave/download/download.cgi?P1_Prod_Versi on=ShockwaveFlash";        }      }    }   }  </script>  </head>    <body onload="MM_CheckFlashVersion('7,0,0,0','Content on this page requires a  newer version of Macromedia Flash Player. Do you want to download it now?');">  <object classid="clsid:D27CDB6E‐AE6D‐11cf‐96B8‐444553540000"  codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash. cab#version=7,0,0,0" width="400" height="320" id="FLVPlayer">    <param name="movie" value="FLVPlayer_Progressive.swf" />    <param name="salign" value="lt" />    <param name="quality" value="high" />    <param name="scale" value="noscale" />    <param name="FlashVars"  value="&MM_ComponentVersion=1&skinName=Clear_Skin_1&streamName=guitar &autoPlay=false&autoRewind=false" />    <embed src="FLVPlayer_Progressive.swf"  flashvars="&MM_ComponentVersion=1&skinName=Clear_Skin_1&streamName=na ma‐file‐flv‐anda&autoPlay=false&autoRewind=false" quality="high"  scale="noscale" width="400" height="320" name="FLVPlayer" salign="LT"  type="application/x‐shockwave‐flash"  pluginspage="http://www.macromedia.com/go/getflashplayer" />  </object>  </body>  </html> 

Gambar 7.10. Skrip player berada di server Jangan lupa untuk mengganti variable nama-file-flv-anda dengan nama file streaming saudara (jika nama file videostreaming.flv, maka tulislah videostreaming saja).

 

124

 
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

3. Simpan file tersebut dengan nama streaming.html. Tempatkan pada satu folder dengan file video streaming saudara. 4. Selesai

Bagaimana bekerjanya
Untuk menjalankannya, tinggal klik ganda file html saudara, misalnya klik ganda file streaming.html, maka tampilah video streaming saudara dengan player dari server (lihat gambar 7.11).

Gambar 7.11. Player video streaming dari server

 

125

 
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

D. Bagaimana saya melakukan ……. Membuat embedded video streaming?
Persoalan Website yang menawarkan fasilitas berbagi video streaming seperti YouTube, Metacafe, ataupun Edutube milik Universitas Negeri Semarang umumnya menawarkan fitur embedding video streaming atau pencantuman video streaming ke halaman website/blog dengan mudah. Saudara akan melakukan embedded video streaming. Persoalan yang muncul adalah bagaimana hal itu dilakukan? Teknik Teknik yang digunakan adalah memanfaatkan salah satu prinsip fitur embedding object pada bahasa pemrograman HTML, dimana sebuah file dapat dimasuki/dibenami objek lain yang berbeda format/standar, misalnya video, animasi, software dll. Pada layanan video streaming popular, salah satu fitur yang ada adalah embedding streaming, dimana penyedia layanan membagikan kode embed videonya secara Cuma-Cuma, inilah yang akan saudara pakai. Tahapan Saudara harus mengikuti tahapan sebagai berikut: 1. Kunjungi website yang menawarkan embedded video streaming, seperti Youtube (gambar 7.12) atau Edutube Unnes (gambar 7.13). http://youtube.com/

Gambar 7.12. Youtube.com http://edutube.unnes.ac.id/

Gambar 7.13. Edutube.unnes.ac.id 2. Pilih atau cari video yang ingin saudara ambil ke website atau blog saudara. Misalnya dengan kata kunci “Pembuatan PCB” dan tekan tombol Search (lihat gambar 7.14)

 

126

 
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

Gambar 7.14. Search di Youtube 3. Jika terdapat video yang sesuai, YouTube akan menampilkan serangkaian daftar video tersebut (lihat gambar 7.15).

Gambar 7.15. Hasil search video di youtube 4. Pilih salah satu, klik Judul videonya. Misalnya Pembuatan PCB. Tunggu sampai halaman playernya muncul (lihat gambar 7.16).

Gambar 7.16. Tampilan video streaming youtube

 

127

 
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

5. Perhatikan pada gambar 7.17 bagian kanan saudara, akan terdapat boks dengan sajian kode URL dan Embed.

Gambar 7.17. Kotak berisi kode URL & Embed video 6. Salin kode untuk embedded streaming dengan menyalin pada isi box Embed (lihat gambar 7.18).

Gambar 7.18. Copy isi kotak Embed 7. Selesai. Kode Embed Siap digunakan.

Bagaimana menggunakannya
Untuk menggunakannya saudara hanya perlu menaruh kode embed tersebut kedalam website ataupun web blog saudara dengan syarat mendukung HTML. Skripnya dapat dilihat pada gambar 7.19 dan penerapan pada blog dapat dilihat pada gambar 7.20. Sedangkan hasilnya dapat dilihat pada gambar 7.21.
<object width="425" height="344"><param name="movie"  value="http://www.youtube.com/v/55m5xvleIZY&hl=en_US&fs=1&"></param><param  name="allowFullScreen" value="true"></param><param name="allowscriptaccess"  value="always"></param><embed  src="http://www.youtube.com/v/55m5xvleIZY&hl=en_US&fs=1&" type="application/x‐ shockwave‐flash" allowscriptaccess="always" allowfullscreen="true" width="425"  height="344"></embed></object> 

Gambar 7.19. Skrip embedded video streaming

 

128

 
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

Gambar 7.20. Penerapan kode embed di editor blog

Gambar 7.21. Tampilan streaming hasil kode embed

 

129

Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

Bab VIII E-learning A. Bagaimana saya melakukan ….. Pendaftaran sebagai member pada sistem e-learning? Persoalan Apabila ditempat kita sudah disediakan atau terinstalasi sistem e-learning sebagai fasilitas pembelajaran online selanjutnya apa yang harus kita kerjakan? Tentunya kita akan menempatkan materi pelajaran pada sistem tersebut. Akan tetapi sebelum itu dapat kita lakukan, kita harus membuat mata pelajaran dan itu dapat dilakukan apabila kita sudah menjadi member dari sistem e-learning tersebut. Dengan demikian persoalan yang kita hadapi adalah bagaimana kita mendaftarkan diri sebagai member pada sistem e-learning? Teknik Sistem e-learning yang kita gunakan dikembangkan dengan aplikasi Course Management System (CMS) moodle. Pada kesempatan ini sistem e-learning yang telah terinstalasi diberi nama ilmo (Increasing Learning Motivation). Pendaftaran sebagai member pada pembahasan ini akan melakukan proses registrasi, konfirmasi, kemudian menempatkan sebagai kreator mata pelajaran. Tahapan Jalankan sistem pembelajaran online ilmo pada browser anda dengan alamat http://ilmo.unnes.ac.id/, sehingga ilmo siap digunakan untuk melakukan pendaftaran member baru. Selanjutnya lakukan tahapan sebagai berikut: 1. Lakukan registrasi sebagai member ilmo. Pilihlah baner yang bertuliskan “Join klik disini” yang ditandai dengan elip (lihat gambar 8.1).

Gambar 8.1 Halaman ilmo untuk registrasi 2. Apabila saudara telah melakukan klik pada banner tersebut maka dilayar muncul halaman formulir pendaftaran member. Silahkan diisi lengkap, kemudian klik tombol buat keanggotaan baru (pada bagian bawah yang ditandai dengan elip) lihat gambar 8.2.

130

Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

Gambar 8.2 Formulir pendaftaran member 3. Setelah pengisian formulir pendaftaran selesai maka tampil halaman informasi konfirmasi melalui email seperti terlihat pada gambar 8.3. Kemudian saudara membuka email saudara untuk melakukan konfirmasi.

Gambar 8.3 Informasi konfirmasi melalui email 4. Selain melalui email, konfrimasi juga dapat dilakukan secara manual oleh admin. Halaman konfirmasi manual dapat dilihat pada gambar 8.4. Kemudian admin dapat mengkonfirmasi manual dengan cara melakukan klik pada tulisan “Confirm” (lihat gambar 8.4 dengan tanda elip).

131

Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

Gambar 8.4 Halaman konfirmasi manual oleh admin 5. Bagi saudara, proses pendaftaran sudah lengkap tinggal menunggu proses penempatan guru sebagai kreator mata pelajaran. Admin melakukan penempatan guru sebagai creator mata pelajaran dengan melakukan pemilihan Administrasi→Users→Permissions→Assign system roles maka tampil seperti halaman 8.5. Kemudian memilih user yang akan ditempatkan sebagai creator mata pelajaran (lihat yang ditandai dengan elip). Selanjutnya admin melakukan klik pada tombol ”Tambah”.

Gambar 8.5 Mengatur sebagai kreator mata pelajaran 6. Hasil dari proses penempatan guru sebagai kreator mata pelajaran dapat dilihat pada gambar 8.6. Pada sisi kolom sebelah kiri yang ditandai dengan elip sudah ada user ”Guru Panutan, djuniadi@gmail.com” sebagai kreator mata pelajaran.

132

Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

Gambar 8.6 Hasil penempatan guru sebagai kreator mata pelajaran 7. Proses pendaftaran selesai, guru sudah dapat login pada sistem elearning ilmo dan siap digunakan untuk membuat mata pelajaran. Bagaimana bekerjanya. Guru sudah dapat login pada sistem e-learning ilmo. Pada halaman pertama sesudah kita memanggil http://ilmo.unnes.ac.id melalui browser kita, ada menu login. Ketikan username dan password saudara pada menu login tersebut, kemudian klik tombol ”Login” maka saudara sudah siap berkreasi dengan menggunakan sistem e-learning.

133

Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

B. Bagaimana saya melakukan ….. Membuat mata pelajaran pada sistem e-learning? Persoalan Apabila ditempat kita sudah disediakan atau terinstalasi sistem e-learning sebagai fasilitas pembelajaran online selanjutnya apa yang harus kita kerjakan? Tentunya kita akan menempatkan materi pelajaran pada sistem tersebut. Akan tetapi sebelum itu dapat kita lakukan, kita harus membuat dan mengkonfigurasi mata pelajaran dan itu dapat dilakukan apabila kita sudah menjadi member dari sistem e-learning tersebut sebagai creator mata pelajaran. Pada pembahasan 8.1 kita sudah mendaftarkan diri dan ditempatkan sebagai kreator mata pelajaran. Sekarang persoalan yang kita hadapi adalah bagaimana kita membuat dan mengkonfigurasi mata pelajaran pada sistem e-learning? Teknik Member yang ditempatkan sebagai kreator dapat membuat mata pelajaran untuk dirinya maupun untuk teman guru yang lain. Selain itu kreator juga dapat menempatkan seseorang menjadi guru suatu mata pelajaran baik sendiri maupun team teaching. Tahapan Sistem pembelajaran online ilmo tampil pada browser dan saudara silahkan login dengan menggunakan username dan password sebagai kreator mata pelajaran. Selanjutnya lakukan tahapan sebagai berikut: 1. Setelah saudara login, pada layar tampil seperti gambar 8.7. Kemudian pilih salah satu kelas atau program studi misalnya program studi Pendidikan Teknik Elektro S1 (dengan tanda elip). Selanjutnya dilayar tampil halaman seperti yang ditunjukkan pada gambar 8.8.

Gambar 8.7 Tampilan setelah kita login 2. Selanjutnya saudara melakukan klik pada tombol “Tambah kursus baru”, maka tampil halaman seperti yang ditunjukkan pada gambar 8.9.

134

Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

Gambar 8.8 Halaman tambah mata pelajaran 3. Pada gambar 8.9 saudara akan melakukan pengaturan mata pelajaran. Hal ini dimulai dengan pengaturan kategori, nama lengkap, nama singkat, course id number dan penjelasan dari mata pelajaran tersebut. Semua itu dapat dilihat pada gambar 8.9a.

Gambar 8.9a Untuk pengaturan format mata pelajaran, jumlah pertemuan/topik, tanggal mulai pelajaran, jumlah berita/informasi yang ditampilkan, tampilkan perangkat, tampilkan laporan aktivitas, upload maksimum dan meta mata pelajaran ditunjukkan pada gambar 8.9b. Selain itu juga untuk pengaturan enrolments dan enrolment expiry notification. Sedangkan pengaturan pada group, ketersediaan, bahasa, role renaming dengan memperhatikan gambar 8.9c. Apabila semua item sudah diatur (coba saja, jangan takut salah nanti bisa dibetulkan) kemudian saudara menekan tombol “Simpan perubahan”

135

Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

Gambar 8.9b

136

Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

Gambar 8.9c Gambar 8.9 Halaman pengaturan mata pelajaran 4. Selanjutnya saudara melakukan penempatan guru yang mengajar mata pelajaran tersebut. Caranya adalah dengan masuk pada menu Roles (Ilmo→MKK→Roles) maka dilayar tampil halaman seperti yang ditunjukkan pada gambar 8.10. Pada kolom sebelah kiri terdapat daftar nama calon guru. Kemudian silahkan pilih nama yang sesuai dengan guru pengajar mata pelajaran tersebut, misalnya Guru Panutan, kemudian tekan tombol Tambah maka nama tersebut bergeser ke kolom sebelah kanan. Apabila guru pengajar mata pelajaran tersebut ada dua, maka pilih lagi nama guru yang dimaksud, misalnya Samsudin Anis kemudian tekan tombol Tambah maka nama tersebut bergeser di kolom sebelah kanan (lihat yang ditandai elip).

137

Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

Gambar 8.10 Menempatkan guru pengajar mata pelajaran 5. Pengaturan mata pelajaran dan gurunya sudah selesai. Mata pelajaran Sian diisi materi pelajaran. Bagaimana bekerjanya. Guru yang sudah ditempatkan sebagai pengajar mata pelajaran dapat login pada sistem e-learning ilmo dan masuk pada mata pelajaran tersebut serta dapat mengisi materi pada mata pelajaran tersebut.

138

Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

C. Bagaimana saya melakukan ….. Upload materi pelajaran pada sistem e-learning? Persoalan Apabila mata pelajaran dan guru pengajarnya sudah ditetapkan maka saudara dapat melakukan upload materi pelajaran pada sistem e-learning. Materi pelajaran yang dapat ditempatkan pada sistem e-learning dapat berupa teks, gambar, video dan juga animasi. Pada pembahasan ini saudara akan menempatkan materi pelajaran berupa teks. Sekarang persoalan yang kita hadapi adalah bagaimana upload materi mata pelajaran berupa teks pada sistem e-learning? Teknik Materi pelajaran sebaiknya sudah ada dalam bentuk digital hal ini mempercepat proses upload materi pelajaran. Seandainya belum ada, tidak apa-apa nanti kita lakukan cara manual dengan mengetik langsung pada halaman editor materi pelajaran. Sistem e-learning menyediakan fasilitas editor untuk memasukkan materi pelajaran baik berupa teks maupun gambar. Gambar dalam materi pelajaran online dapat insert langsung maupun di link. Insert langsung mempunyai kelemahan loading halaman tersebut berat/lama. Sehingga link gambar sangat disaran karena unjuk kerja pada waktu loading halaman lebih bagus. Tahapan Sistem pembelajaran online sudah tampil pada browser dan saudara silahkan login dengan menggunakan username dan password sebagai guru dan pilihlah mata pelajaran yang akan saudara isi materi pelajarannya (misal ILMO→MKK). Selanjutnya lakukan tahapan sebagai berikut: 1. Apabila saudara sudah masuk pada mata pelajaran maka dilayar tampil seperti gambar 8.11. Untuk melakukan upload materi pelajaran saudara harus merubah mode view menjadi mode edit dengan cara tekan tombol Hidupkan Mode Ubah (ditandai elip), maka dilayar saudara tampil halaman dengan mode edit.

Gambar 8.11 Halaman mata pelajaran kosong materi

139

Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

2. Mode edit halaman mata pelajaran dapat dilihat pada gambar 8.12. Disitu ada gambar pena menandakan untuk membuat tulisan disitu. Tanda anak panah digunakan untuk menggeser posisi sesuai yang dikehendaki. Tanda silang berguna untuk menghapus dan tanda mata untuk membuat bagian tersebut tampak atau disembunyikan.

Gambar 8.12 Halaman mata pelajaran mode edit 3. Membuat nama mata pelajaran dimulai dengan menekan icon pena (ditandai dengan elip) pada gambar 8.12. Kemudian dilayar tampil halaman teks editor seperti gambar 8.13. Kemudian tulislah nama mata pelajaran yang dimaksud dan aturlah ukuran dan warna tulisan sesuai yang dikehendaki (contoh seperti tulisan yang dibatasi elip). Selanjutnya tekan tombol Simpan perubahan.

Gambar 8.13 Teks editor nama mata pelajaran

140

Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

4. Hasil dari tahap 3 dapat dilihat pada gambar 8.14. Selanjutnya kita melakukan upload materi pelajaran berupa teks dengan cara klik Add resource dan pilih Compose a web page.

Gambar 8.14 Upload teks materi pelajaran 5. Hasil dari tahap empat adalah munculnya halaman seperti gambar 8.15. Halaman ini berguna untuk membuat/upload materi pelajaran. Pada subbab ini materi pelajaran yang dibuat berupa teks. Pembuatan materi pelajaran dimulai dengan memberi nama dari judul topik bahasan dan melengkapi teks ringkasan/potongan dari materi pelajaran. Contohnya dapat dilihat pada gambar 8.15a. Selanjutnya materi pelajaran lengkap dibuat seperti terlihat pada gambar 8.15b. Kemudian memilih penyajiannya apakah mau ditampilkan pada jendela yang sama atau pada jendela baru dan akan disembunyikan atau ditampilkan. Selanjutnya tekan tombol Save and return to course atau Save and display untuk menyimpannya.

Gambar 8.15a

141

Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

Gambar 8.15b

Gambar 8.15c Gambar 8.15 Halaman upload materi pelajaran 6. Selesai dan hasil dari seluruh proses tahapan ini dapat dilihat pada gambar 8.16.

142

Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

Gambar 8.16 Hasil upload materi teks

Bagaimana bekerjanya. Pembuatan materi pelajaran berupa teks sudah selesai. Untuk mengakses materi tersebut siswa harus login ke sistem e-learning dan masuk pada mata pelajaran yang dimaksud. Selanjutnya mereka memilih topik pelajaran yang ditawarkan oleh guru maka dilayar mereka tampil materi pelajaran seperti gambar 8.16.

143

Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

D. Bagaimana saya melakukan ….. Menyisipkan materi gambar pada sistem e-learning? Persoalan Gambar merupakan merupakan media pengajaran yang tidak dapat dipisahkan dari proses pembuatan materi pelajaran. Gambar memberi peran untuk menyampaikan pesan secara visual dan mempunyai retensi yang lebih lama dari pada materi berupa teks saja. Sekarang persoalannya adalah bagaimana menyisipkan gambar pada materi pelajaran dalam sistem e-learning? Teknik Fitur sisip gambar pada teks editor digunakan untuk memasukkan materi pelajaran berupa gambar. Posisi gambar dapat diatur pada posisi tengah, sisi kiri atau sisi kanan. Keterangan gambar diatur menyesuaikan dengan posisi gambar. Pengaturan keterangan gambar menggunakan fitur pengolahan teks. Tahapan Saudara sudah login sebagai guru dan sekarang sudah pada posisi mode edit pada suatu mata pelajaran. Materi pelajaran yang telah saudara buat pada subbab sebelumnya akan digunakan lagi pada pembahasan ini dengan menyisipkan gambar kedalamnya. Selanjutnya lakukan tahapan sebagai berikut: 1. Buka kembali materi pelajaran yang sudah saudara buat sehingga tampil seperti pada gambar 8.17. Tempatkan kursor pada posisi gambar akan diletakkan. Kemudian klik icon sisip gambar (insert image) yang ditandai dengan elip maka dilayar tampil seperti gambar 8.18.

Gambar 8.17 Memilih posisi gambar

144

Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

2. Gambar yang akan disisipkan diupload terlebih dahulu (perhatikan gambar 8.18). Caranya dengan menekan tombol Browse untuk mencari dan memilih gambar yang akan diupload. Setelah itu tekan tombol Upload maka gambar terpilih sudah diupload (file jpg ditandai elip). Kemudian klik file gambar tersebut maka sederetan teks muncul pada URL sumber dan lengkapilah pada Teks Alternatifnya (lihat pada bagian yang ditandai dengan batas persegi panjang). Selanjutnya tekan tombol Ok.

Gambar 8.18 Halaman sisip gambar 3. Penyisipan gambar pada halaman editor tampak pada gambar 8.19. Kemudian posisi gambar diatur pada posisi tengah sehingga pada waktu halaman di maksimumkan gambar tetap ditengah demikian juga ketika pada Restore Down.

Gambar 8.19a

145

Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

Gambar 8.19b Gambar 8.19 Materi gambar pada halaman editor 4. Selanjutkan saudara mengatur jendela untuk menampilkan materi pelajaran yang berisis gambar tesebut. Kemudian menekan tombol Save and display atau Save and return to course (lihat yang ditandai elip pada gambar 8.19b). Hasil akhir proses menyisipkan gambar dapat dilihat pada gambar 8.20.

Gambar 8.20 Hasil sisip gambar 5. Proses menyisipkan gambar telah selesai dan materi pelajaran dengan dilengkapi gambar siap digunakan untuk pengajaran. Bagaimana bekerjanya. Materi pelajaran dengan dilengkapi gambar telah selesai dibuat. Untuk mengakses materi tersebut siswa harus login ke sistem e-learning dan masuk pada mata pelajaran yang dimaksud. Selanjutnya mereka memilih topik pelajaran yang ditawarkan oleh guru maka dilayar mereka tampil materi pelajaran seperti gambar 8.20.

146

Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

E. Bagaimana saya melakukan ….. Menempatkan video pembelajaran pada sistem e-learning? Persoalan Video pembelajaran merupakan media pengajaran yang sangat menarik sebagai tambahan materi pelajaran. Video mengandung unsur gambar bergerak (movie) dan suara sebagai penjelasannya. Sebagai media pembelajaran, video mempunyai dapat ingatan pada siswa lebih baik, sehingga penggunaan video pembelajaran dapat meningkatkan prestasi belajar para siswa. Sekarang persoalannya adalah bagaimana menempatkan video pembelajaran pada materi pelajaran dalam sistem e-learning? Teknik Penempatan video pembelajaran menggunakan fitur link pada file html yang memanggil video. Video yang dijalankan pada sistem e-learning merupakan video streaming (FLV). Supaya video streaming tersebut dapat dipanggil disisi klien maka perlu dilengkapi player disisi server dan juga disisi client. Tahapan Saudara login sebagai guru dan masuk pada salah materi pelajaran yang telah saudara buat atau pada materi pelajaran yang baru. Selanjutnya lakukan tahapan sebagai berikut: 1. Setelah saudara masuk dalam satu materi pelajaran (lihat gambar 8.21), buatlah kalimat untuk membuat link terhadap video pembelajaran yang akan ditampilkan (misalnya: Video 1. Memulai writer). Kemudian klik icon link (gambar rantai yang ditandai elip), maka tampil pada layar saudara halaman seperti gambar 8.22.

Gambar 8.21 Menandai video teks 2. Pada gambar 8.22 dapat dilihat ada tiga format file yang harus ada yaitu html, flv dan swf (M_writer.html, Memulai_writer.flv dan palyer_flv.swf). Apabila file-file tersebut belum ada, maka harus di upload dengan menggunakan tombol Browser dan Upload. Kemudian pilih dan double klik file htmlnya, maka dilayar tampil halaman seperti gambar 8.23.

147

Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

Gambar 8.22 Halaman upload dan memilih video 3. Perhatikan gambar 8.23, kemudian lengkapi titlenya (misal dengan Memulai writer) dan targetnya (misalnya dengan memilih New window). Selanjutnya klik tombol Ok.

Gambar 8.23 Menyisipkan link video 4. Selanjutkan perhatikan gambar 8.24, saudara memilih jendela untuk menampilkan materi pelajaran yang berisi video pembelajaran. Kemudian menekan tombol Save and display atau Save and return to course (lihat yang ditandai elip). Hasil proses menempatkan link video pembelajaran dapat dilihat pada gambar 8.25.

148

Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

Gambar 8.24 Halaman memilih jendela 5. Gambar 8.25 memperlihatkan teks yang terhubung dengan video-video pembelajaran yaitu video 1. Memulai writer dan video 2. Integral. Apabila saudara klik maka dilayar tampil halaman seperti yang terlihat pada gambar 8.26.

Gambar 8.25 Teks yang terhubung dengan video pembelajaran 6. Tampilan pada gambar 8.26 menunjukkan video player telah siap digunakan dan berisi video pembelajaran. Selanjutnya klik pada tombol play (bagian yang ditandai elip) dan video pembelajaran tampil pada layar saudara (lihat gambar 8.27)

Gambar 8.26. Halaman media player video pembelajaran

149

Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

7. Gambar 8.27 menunjukkan video pembelajaran memulai writer yang telah dijalankan. Video ini memberi petunjuk dan contoh bagaimana memulai aplikasi open office writer.

Gambar 8.27. Video pembelajaran 8. Menempatan video pembelajaran pada sistem e-learning telah selesai dan siap digunakan untuk pembelajaran. Bagaimana bekerjanya. Materi pelajaran yang dilengkapi video telah selesai dibuat, siswa dapat mengakses materi tersebut dengan login dulu ke sistem e-learning dan masuk pada mata pelajaran yang dimaksud. Selanjutnya mereka memilih topik pelajaran yang ada videonya maka dilayar akan tampil seperti gambar 8.27.

150

Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

F. Bagaimana saya melakukan ….. Membuat quiz pada sistem e-learning? Persoalan Quiz merupakan bagian tak terpisahkan dari proses belajar mengajar. Quiz digunakan sebagai alat untuk mengetahui penguasaan siswa terhadap materi pelajaran. Demikian juga pada pembelajaran online dengan sistem e-learning. Sehubungan dengan itu, persoalan yang dihadapi adalah bagaimana membuat quiz pada sistem e-learning? Teknik Pada sistem e-learning mempunyai fasilitas untuk membuat quiz. Fasilitas tersebut berada dalam kelompok activity. Sehingga link gambar sangat disaran karena unjuk kerja pada waktu loading halaman lebih bagus. Tahapan Sistem pembelajaran online sudah tampil pada browser dan saudara silahkan login dengan menggunakan username dan password sebagai guru dan pilihlah mata pelajaran yang akan saudara isi materi pelajarannya (misal ILMO→MKK). Selanjutnya lakukan tahapan sebagai berikut: 1. Apabila saudara sudah masuk pada mata pelajaran maka dilayar tampil seperti gambar 8.28. Untuk melakukan upload materi pelajaran saudara harus merubah mode view menjadi mode edit dengan cara tekan tombol Hidupkan Mode Ubah (ditandai elip), maka dilayar saudara tampil halaman dengan mode edit

Gambar 8.28. Mode edit mata pelajaran 2. Perhatikan gambar 8.28, buatlah quiz dengan memilih Add a activity dan klik Quiz, maka dilayar tampil seperti gambar 8.29.

151

Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

Gambar 8.29a

Gambar 8.29b

152

Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

Gambar 8.29c Gambar 8.29. Halaman untuk mengatur quiz 3. Perhatikan gambar 8.29. Isilah isian pada halaman pengaturan quiz seperti contoh. Lakukan uji coba seperlunya untuk mendapatkan pengalaman. Setelah selesai mengisi tekanlah tompol Save and display maka dilayar saudara tampil seperti gambar 8.30

Gambar 8.30. Halaman untuk memilih tipe quiz 4. Perhatikan gambar 8.30. Halaman ini memberi saudara kesempatan untuk memilih tipe quiz. Pada kesempatan ini saudara membuat quiz bertipe multipe Choice. Klik pada kalimat tersebut dan tampil seperti pada gambar 8.31.

153

Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

Gambar 8.31a

Gambar 8.31b

Gambar 8.31c

154

Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

Gambar 8.31d Gambar 8.31. Halaman membuat pertanyaan, skor, kunci jawaban dan komentar 5. Perhatikan gambar 8.31. Halaman tersebut merupakan halaman untuk membuat pertanyaan, membuat alternatip jawaban, menentukan kunci jawaban, memberi skor yang benar dan salah, serta memberi komentar terhadap jawaban yang benar maupun yang salah. Setiap pertanyaan memerlukan isian satu halaman. Dengan demikian setelah selesai halaman maka lanjutkan dengan membuat pertanyaan lainnya. Sehingga saudara mempunyai bank soal (lihat gambar 8.32).

Gambar 8.32. Sejumlah pertanyaan yang siap digunakan untuk quiz

155

Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

Gambar 8.33. Kondisi sebelum soal ditentukan 6. Perhatikan gambar 8.33. Halaman tersebut menggambarkan soal yang siap digunakan untuk membuat quiz (ditandai elip kecil) dan kolom kiri belum ada soal yang dipilih/ditentukan oleh guru. Pilihlah beberapa soal kemudian tekan tombol Add to quiz maka dilayar saudara tampil seperti gambar 8.34.

Gambar 8.34. Soal pertanyaan sudah ditentukan 7. Tampilan quiz seperti gambar 8.35.

Gambar 8.35. Tampilan soal quiz 8. Selesai

156

Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

Bagaimana bekerjanya. Quiz selesai saudara buat dan siap digunakan untuk mengukur kemampuan siswa tentang proses belajar terhadap materi pelajaran. Tampilan soal quiz dihadapan siswa seperti tampak pada gambar 8.35. Setalah siswa selesai mengerjakan quiz maka siswa langsung dapat mengetahui nilai yang dia peroleh.

157

Pembuatan Media Pembelajaran Berbasis Komputer dan Internet

DAFTAR PUSTAKA

Fandi, 2009. After Effect CS4 Untuk Orang Awam. Jakarta: Maxikom. Hendi Hendratman,2009. The Magic Of Adobe After Effects. Jakarta: Informatika Lott,Joey and Robert Reinhardt, 2006. Flash ActionScript Bible. Indianapolis. US: Wiley Publishing,Inc. Mahir Dalam 7 Hari: Adobe After Effects CS4, Penerbit Andi, Jakarta, 2009 Panduan Praktis : Pengolahan Audio Digital Dengan Adobe Audition 3.0 Wahana Komputer, 2009. Adobe InDesign CS 4, , Jakarta: Salemba Infotek

Situs:
http://asastudio.org/ http://www.islandscript.net/ http://wikipedia.org/wiki/Flash_Player,akses 3 Desember 2009 http://adobe.com/devnet/flash/, akses 3 Desember 2009 http://w3schools.com/Flash/default.asp, akses 3 Desember 2009 http://wikipedia.org/wiki/Flash_Player,akses 3 Desember 2009 http://adobe.com/devnet/flash/, akses 3 Desember 2009 http://w3schools.com/Flash/default.asp, akses 3 Desember 2009 http://wikipedia.org/wiki/FLV,akses 4 Desember 2009 http://wikipedia.org/wiki/Video_Streaming,akses 4 Desember 2009 http://wikipedia.org/wiki/JW_Player,akses 4 Desember 2009 http://developer.longtailvideo.com/,akses 4 Desember 2009

158

Sign up to vote on this title
UsefulNot useful

Master Your Semester with Scribd & The New York Times

Special offer for students: Only $4.99/month.

Master Your Semester with a Special Offer from Scribd & The New York Times

Cancel anytime.