Pembuatan Media Pembelajaran Berbasis Komputer Dan Internet

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
1) Video Presentasi Pembelajaran ………………………………… 22
2) Video Aktivitas Pembelajaran ………………………………… 26
3) Video Streaming Pembelajaran ………………………………... 29
BAB III. MULTIMEDIA PEMBELAJARAN INTERAKTIF LEVEL 1 …… 33
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
1) Desain Antar Muka …………………………………………… 48
2) Integrasi Antar Muka dengan Video ......................................... 70
3) Setuhan Akhir Pada MPI ……………………………………… 77
BAB V. ANIMASI ....................................................................................... 86
1) Animasi Teks ............................................................................. 86
2) Animasi Objek ........................................................................... 92
BAB VI. PUBLIKASI WEB ANIMASI ........................................................ 106
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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.
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
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 :

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
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
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.
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
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
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 :

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
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
Gambar 1.35. Slide Show untuk memainkan movie
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

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

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

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

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

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).
2. Setelah saudara mengaktifkan fitur Record The Screen maka akan

muncul menu record seperti terlihat pada gambar 2.7.
26

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

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.
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

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.
29

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

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

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.
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

BAB III
MULTIMEDIA PEMBELAJARAN INTERAKTIF
LEVEL 1

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

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.
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


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

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

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.
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


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

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.
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

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

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

Gambar 3.11. Import sebuah file rekaman audio dan image
5. Hasil Import file dapat dilihat di window project Adobe After Effect seperti
Gambar 3.12. Hasil import file
6. Proses import file audio dan image telah selesai.
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

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

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

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

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

Gambar 3.20. Export project menjadi sebuah format file FLV.
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

BAB IV
MULTIMEDIA PEMBELAJARAN INTERAKTIF
LEVEL 2

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
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

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

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
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

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

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
9. Aktifkan tombol Paint Bucket Tool pada panel Tools, dan atur warna Fill
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

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
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

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
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).
Gambar 4.14. Mengatur warna teks
15. Ketikkan teks di stage bagian pojok kiri atas (lihat gambar 4.15).
54

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

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

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

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

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

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

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

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

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

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

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

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

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).
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

54. Tahap selanjutnya kita akan memasukkan bahan-bahan yang akan

ditampilkan di media pembelajaran ini, seperti materi, latihan, tes, dan lain-
lain. 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

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.
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


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

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

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

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
tombol Free Transform Tool pada panel Tools, lalu geser tepi video
yang bertanda kotak putih (lihat gambar 4.56).
Gambar 4.56. Mengatur Posisi Video
73

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

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
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

Gambar 4.63. Tes Movie
15. Untuk insert video pembelajaran materi yang lain dapat dilakukan dengan
cara yang sama.
16. Insert video pembelajaran selesai.
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


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

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

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
Gambar 4.68. Symbol Buton
6. Buka kunci pada layer text, dengan mengklik sekali gambar kunci tersebut.
Gambar 4.69. Membuka Kunci Layer
79

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
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

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

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

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.
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

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).
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

Gambar 4.83. Tampilan Frame yang Berisi File Sound
21. Seleksi layer scrip frame 1, lalu tekan tombol F9, dan masukkan scrip seperti
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.
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

BAB V
ANIMASI

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 tiap-
tiap frame. Langkah-langkahnya sebagai 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).
c. Seleksi frame 15, klik kanan, pilih Insert Frame.
86

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

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

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

ditunjukkan pada gambar 5.7.
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.
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).
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

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).
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).
90

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.
i. Lihat hasilnya, dengan menekan tombol Ctrl + Enter, seperti tampak

pada gambar 5.15.
Gambar 518. Hasil Efek Teks Mengetik
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


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, langkah-
langkahnya sebagai berikut.
a. Buka file baru, simpan dengan nama animasi kotak.fla.
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

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

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

b. Seleksi layer 2 frame 1. Aktifkan tombol Oval Tool , lukis sebuah

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 , seleksi seluruh objek lingkaran (lihat

gambar 5.26).
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

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

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.
b. Tekan tombol Add Motion Guide , yang terletak di panel Timeline,

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

Gambar 5.33. Menambahkan Motion Guide
c. Seleksi layer Guide. Aktifkan tombol Pencil Tool di panel Tools.

Lukiskan garis guide di stage (lihat gambar 5.34).
Gambar 5.34. Membuat Garis Guide
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).
Gambar 5.35. Membuat Objek Lingkaran
98

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

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

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

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

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

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

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

BAB VI
PUBLIKASI WEB ANIMASI

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

<!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="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 nama file animasi

(berakhiran *.swf) yang saudara punya.
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

Gambar 6.5. File *html berada dalam satu folder dengan file *swf
5. Selesai
Untuk mengetahui bagaimana bekerjanya, klik ganda file player-
animasi.html dan animasi saudara pun sukses dijalankan.
Gambar 6.6. Demo player animasi dari URL
108


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

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

- 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

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.
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


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

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" />
<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

<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

10. Pastikan semua file dan folder yang terkait dengan web saudara
terupload. Sekarang website animasi saudara sudah dapat dilihat
diseluruh dunia. Mudah bukan?
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

BAB VII
PUBLIKASI VIDEO STREAMING

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

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.
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


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 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/
Gambar 7.4. Website download JW Flv Player
119

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

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

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


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

}
}
// 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="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

3. Simpan file tersebut dengan nama streaming.html. Tempatkan pada

satu folder dengan file video streaming saudara.
4. Selesai
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

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

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

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

Gambar 7.20. Penerapan kode embed di editor blog
Gambar 7.21. Tampilan streaming hasil kode embed
129
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
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
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
Gambar 8.6 Hasil penempatan guru sebagai kreator mata pelajaran
7. Proses pendaftaran selesai, guru sudah dapat login pada sistem e-

learning 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
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
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
Gambar 8.9b
136
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
Gambar 8.10 Menempatkan guru pengajar mata pelajaran
5. Pengaturan mata pelajaran dan gurunya sudah selesai. Mata pelajaran

Sian diisi materi pelajaran.
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
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).
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
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
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
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
Gambar 8.16 Hasil upload materi teks
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
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
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
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.
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
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
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
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
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
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.
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
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).
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
Gambar 8.29a
Gambar 8.29b
152
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
Gambar 8.31a
Gambar 8.31b
Gambar 8.31c
154
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
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
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
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

Pembuatan Media Pembelajaran Berbasis Komputer Dan Internet

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Pembuatan Media Pembelajaran Berbasis Komputer Dan Internet

Uploaded by

Copyright:

Available Formats

Dr.

Pembuatan Media Pembelajaran Berbasis

Program Studi S1 Pendidikan Teknik Elektro

PENDIDIKAN PROFESI GURU

Buku panduan untuk Pendidikan Profesi Guru (PPG) dengan judul

A. Bagaimana saya melakukan ......

Gambar 1.1. Halaman pertama slide presentasi

Gambar 1.2. Halaman kedua dan seterusnya slide presentasi

Gambar 1.3. Halaman awal program power point

3. Hilangkan default table yang disediakan dengan cara memilih desain

Gambar 1.4. Halaman power point yang telah dikosongkan

4. Setelah slide dalam keadaan kosong kemudian sisipkan sebuah image

Gambar 1.5. Struktur menu insert picture

Gambar 1.6. Kotak dialog insert picture

Gambar 1.6. Image yang telah disisipkan pada slide

Gambar 1.7. Kotak yang telah di tambahkan pada slide

8. Untuk menjadikan kotak sebagai background berada di bagian belakang

Gambar 1.8. Kotak yang telah berada di belakang gambar

9. Langkah selanjutnya adalah menambahkan tulisan pada bagian slide

Gambar 1.9. Teks Box yang telah berada pada slide

10. Tambahkan Teks Box seperti pada langkah 9 untuk menambahkan

Gambar 1.11. Hasil akhir dari desain slide halaman pertama

Gambar 1.12. Menu Insert dan pull down New Slide

Gambar 1.13. Slide Baru

Gambar 1.14. Slide Baru yang dilengkapi dengan kotak

Gambar 1.15. Slide Baru dengan dilengkapi dengan 2 kotak

18. Langka selanjutnya adalah menggandakan (copy) gambar tersebut

Gambar 1.18. Background slide bagaian isi.

Gambar 1.19. Background slide bagaian isi yang akan di kunci

Gambar 1.20. Slide bagaian isi yang sama

B. Bagaimana saya melakukan ......

1. Jalankan program microsoft power point

Gambar 1.21. Pengaturan tipe dan ukuran font

Gambar 1.22. Menu Insert → Picture → Clip Art

Gambar 1.23.Kkotak dialog Clip Art.

Gambar 1.24. Pengaturan posisi gambar pada slide

8. Selanjutnya memasukan tulisan sebagai keterangan gambar tersebut.

Gambar 1.25. Slide yang dilengkapi dengan gambar dan teks.

C. Bagaimana saya melakukan ......

1. Jalankan program microsoft power point

Gambar 1.26. Teks Box”Judul Presentasi” yang terpilih

4. Kemudian klik menu Slide Show → Custom Animation. Hingga

Gambar 1.30. Slide hasil pengaturan pada teks box ”Penyaji”.

D. Bagaimana saya melakukan ......

1. Jalankan program microsoft power point

Gambar 1.31. Menu insert movie

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.

Gambar 1.34. Slide dengan movie

Gambar 1.35. Slide Show untuk memainkan movie

A. Bagaimana saya melakukan …….

1. Aktifkan Camtasia Studio 6 sehingga dilayar tampil seperti gambar 2.1.

Gambar 2.1. Halaman Awal Camtasia Studio 6

Gambar 2.2. Mengaktifkan fitur Record Power Point

Gambar 2.3. Menu Record

5. Setelah presentasi selesai, secara otomatis akan muncul dialog untuk

Gambar 2.4. Menyimpan hasil rekaman video

Gambar 2.5. Drag and drop hasil record ke storyboard

7. Proses record presentasi telah selesai dan siap untuk di convert ke

B. Bagaimana saya melakukan …….

Gambar 2.6. Halaman Awal Camtasia Studio 6

2. Setelah saudara mengaktifkan fitur Record The Screen maka akan