Professional Documents
Culture Documents
Djuniadi, MT
Feddy Setyo Pribadi, MT
ii
TINJAUAN UMUM
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
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.
1
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet
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.
2
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet
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.
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.
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
5
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet
Kemudian tuliskan judul presentasi pada Teks Box tersebut (lihat gambar
1.9).
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
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.
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
14. Setelah slide dalam keadaan kosong, tambahkan sebuah kotak pada
bagian atas slide yang terlihat seperti Gambar 1.14.
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
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
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
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.
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
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 :
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
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.
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
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
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 :
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.
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
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 :
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
20
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet
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
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:
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).
3. Setelah file presentasi aktif, maka tampak menu pada tab add-ins pada
Ms Microsoft Power Point, lihat gambar 2.3 yang ditandai elip.
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
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
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
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).
26
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet
Gambar 2.7. Menu record setelah fitur record the screen aktif
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
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
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:
29
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet
2. Perhatikan gambar 2.11, kemudian pilih file project yang akan dikonversi
menjadi video streaming.
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.
30
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet
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.
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
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:
33
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet
Berikut ini contoh naskah video pembelajaran untuk mata pelajaran kimia tentang
“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.
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
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:
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
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
5. Menyimpan hasil rekam suara kedalam folder dan memberi nama file
sekaligus format file yang misalnya *.wav seperti yang diperlihatkan pada
gambar 3.5.
Bagaimana bekerjanya
Audio hasil rekam yang berupa format suara digital selanjutnya disimpan dalam
format *.wav hal ini disebabkan file *.wav banyak didukung oleh software-
software 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
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:
38
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet
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).
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
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.
40
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet
a. Nama composition
41
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet
5. Hasil Import file dapat dilihat di window project Adobe After Effect seperti
terlihat pada gambar 3.12.
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
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).
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
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.
45
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet
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.
46
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet
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
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.
48
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet
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.
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).
5. Selanjutnya, seleksi frame 1 Layer 1 pada panel Timeline (lihat gambar 4.5).
6. Buat dua buah lingkaran/elips dengan ukuran melebihi lebar stage, seperti
ditunjukkan gambar 4.6. Caranya, aktifkan tombol Oval Tool pada panel
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
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.
9. Aktifkan tombol Paint Bucket Tool pada panel Tools, dan atur warna Fill
menjadi Orange (#FFCC33), lewat Fill Color (lihat gambar 4.9).
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
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).
12. Tambahkan satu layer baru, dengan menekan tombol Insert Layer pada
panel Timeline. Layer 2 pun akan ditambahkan di bagian atas layer 1 (lihat
gambar 4.12).
53
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet
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).
14. Masukkan teks judul media pembelajaran, dengan menekan tombol Text
Tool pada panel Tools. Pada panel Properties, pilih kategori Static Text,
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).
15. Ketikkan teks di stage bagian pojok kiri atas (lihat gambar 4.15).
54
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet
16. Dengan pengaturan teks berbeda, ketikkan teks tentang hak cipta di bagian
pojok kanan bawah. Hasilnya dapat dilihat pada gambar 4.16.
55
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet
18. Atur warna fill menjadi coklat (#CC6600), dan buat sebuah kotak serta
diletakkan di sebelah kiri stage (lihat gambar 4.18).
19. Beri teks bertuliskan HOME di atas kotak menu tersebut, dengan jenis font
Arial dan warna kuning (#FFFF00) seperti gambar 4.19.
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
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.
22. Ganti teks tombol kedua, ketiga dan keempat menjadi MATERI, LATIHAN,
TES (lihat gambar 4.22).
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).
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).
25. Dobel klik tombol HOME, sehingga masuk ke symbol button (lihat gambar
4.25).
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).
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).
28. Pada bagian Down, klik kanan dan pilih Insert Keyframe (lihat gambar 4.28).
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.
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).
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
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).
35. Berikan instance name pada movie clip materi dengan nama materi (lihat
gambar 4.33).
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
37. Tambahkan layer baru, kunci layer 1. Lantas seleksi layer 2 frame 1(lihat
gambar 4.35).
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.
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.
63
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet
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).
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).
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
46. Sorot frame 3 milik layer 1, 2, dan 3, lalu klik kanan, dan pilih Insert
Keyframe (lihat gambar 4.44).
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
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).
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.
52. Kembali ke scane awal, dengan menekan tombol Scene 1. Tambahkan satu
layer baru, untuk memasukkan action script (lihat gambar 4.48).
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
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.
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
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.
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
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).
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
5. Akan ditampilkan bagian Skinning (lihat gambar 4.54). Pada bagian Skin,
pilih SteelOverAll.swf, lalu tekan tombol Next, kemudian tombol Finish.
72
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet
6. Video yang telah diimport tersebut akan tampil di stage (lihat gambar 4.55).
7. Atur lebar tampilan video, agar tidak menutupi bidang lain. Caranya, aktifkan
tombol Free Transform Tool pada panel Tools, lalu geser tepi video
yang bertanda kotak putih (lihat gambar 4.56).
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).
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.
74
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet
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.
13. Selanjutnya tambahkan layer baru, lalu masukkan script di frame 1 layer 2
(lihat gambar 4.62).
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
15. Untuk insert video pembelajaran materi yang lain dapat dilakukan dengan
cara yang sama.
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
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).
77
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet
3. Pada panel Library Buttons, klik dobel folder buttons bubble 2, lalu seleksi
Bubble 2 red (lihat gambar 4.66).
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
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).
6. Buka kunci pada layer text, dengan mengklik sekali gambar kunci tersebut.
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).
8. Kembali ke scene awal, dengan cara klik tombol Scene 1 yang sejajar
dengan Timeline (lihat gambar 4.71).
9. Aktifkan panel Action yang terletak di atas panel Properties, dengan cara
menekan tombol Action atau tekan tombol F9. Lalu aktifkan tombol
Selection Tool pada panel Tools. Klik sekali tombol EXIT, untuk
memastikan bahwa tombol inilah yang akan diberi scrip. Lantas ketikkan
script yang terlihat pada gambar 4.72 di dalam panel Action.
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
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).
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).
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.
14. Kembali ke scene awal, dengan menekan tombol Scene 1. Dari panel
Library, seleksi movie clip soundonoff_mc (lihat gambar 4.77).
82
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet
15. Drag ke stage, letakkan di sudut kiri bawah seperti terlihat dalam gambar
4.78.
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.
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
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.
19. Tambahkan 2 layer baru, ganti nama layer 2 menjadi sound, dan layer 3
menjadi scrip (lihat gambar 4.82).
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
21. Seleksi layer scrip frame 1, lalu tekan tombol F9, dan masukkan scrip seperti
terlihat pada gambar 4.84.
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).
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
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:
a. Buat file baru, dengan menekan tombol Ctrl + N. Simpan dengan nama
file animasi teks.fla.
b. Pada panel Tools, tekan tombol Text Tool . Atur di panel properties,
pilih tipe Static Text, dan rata kiri. Ketikkan di stage “SELAMAT
DATANG” (lihat gambar 5.1).
86
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet
d. Seleksi frame 1, klik dobel, hingga frame ter-blok hitam, lalu tekan tombol
F6. Hasil tampilan layer 1 seperti gambar 5.2.
87
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet
f. Klik frame 2, hapus semua karakter, dan ketikkan “S_” (lihat gambar 5.4).
g. Klik frame 3, hapus semua karakter, dan ketikkan “SE_” (lihat gambar
5.5).
h. Klik frame 4, hapus semua karakter, dan ketikkan “SEL_” (lihat gambar
5.6).
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.
b. Pada panel Tools, klik tombol Text Tool . Atur properties dengan
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).
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
d. Seleksi layer 1 frame 4, klik kanan pilih Insert Frame. Tambah layer baru
di atas layer 1 (lihat gambar 5.10).
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).
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.
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.
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
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:.
b. Seleksi Rectangle Tool di panel Tools. Atur warna fill dengan biru
(#0000FF) dan stroke berwarna merah (#FF0000). Lalu gambar bidang
kotak di stage (lihat gambar 5.19).
92
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet
d. Seleksi seluruh objek kotak dengan tombol Selection Tool, geser objek
ke sebelah kanan (lihat gambar 5.20).
93
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet
g. Lihat hasil animasi ini (gambar 5.23), yang menunjukkan objek bergerak
dari posisi frame 1 ke posisi frame 20.
a. Buat layer baru pada file sebelumnya (lihat gambar 5.24). Kunci layer 1.
94
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet
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
e. Objek lingkaran kini telah berubah menjadi symbol movie clip, dengan
tampilan seperti gambar 5.28.
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).
g. Kembali seleksi frame 1, lalu buka panel Properties. Pada bagian Tween,
pilih Motion (lihat gambar 5.30).
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.
97
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet
d. Seleksi layer 1. Di stage, buat sebuah objek lingkaran kecil dengan Oval
Tool . Warna fill oranye (#FF9900) dan stroke hitam (lihat gambar
5.35).
98
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet
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).
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
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).
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.
b. Buat objek bintang. Caranya, aktifkan tombol Polystar Tool yang ada di
panel Tool (lihat gambar 5.42).
c. Buka panel Properties, lalu tekan tombol Options. Atur Style Star,
Number of Side = 5, dan Star Point Size = 1 (lihat gambar 5.43).
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).
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.
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).
102
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet
b. Buat objek kotak di stage dengan Rectangle Tool, atur warna fill biru
(#0000FF) dan stroke hitam seperti tampak pada gambar 5.50.
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
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).
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
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.
106
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet
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 player-
animasi.html dan animasi saudara pun sukses dijalankan.
108
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet
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).
109
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet
110
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet
111
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet
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.
112
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet
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).
113
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet
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
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.
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
alamat saudara di Internet, seperti http://elektro.com atau
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
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.
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.
4. Klik Show details jika saudara tertarik mengetahui apa saja yang
dilakukan oleh Installer ini (lihat gambar 7.3).
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
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 non-
komersial/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/
119
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet
120
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet
<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>
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.
122
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet
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>
124
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet
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).
125
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet
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/
http://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
127
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet
6. Salin kode untuk embedded streaming dengan menyalin pada isi box
Embed (lihat gambar 7.18).
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>
128
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet
129
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet
Bab VIII
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:
130
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet
131
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet
132
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet
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
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.
134
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet
Gambar 8.9a
135
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet
Gambar 8.9b
136
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet
Gambar 8.9c
137
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet
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
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.
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.
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.
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
6. Selesai dan hasil dari seluruh proses tahapan ini dapat dilihat pada
gambar 8.16.
142
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet
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
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:
144
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet
Gambar 8.19a
145
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet
Gambar 8.19b
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
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:
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
148
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet
149
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet
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
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
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
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
155
Pembuatan Media Pembelajaran Berbasis Komputer dan Internet
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.
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
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