Anda di halaman 1dari 34

MEMBUAT CD PEMBELAJARAN INTERAKTIF

Membuat CD pembelajaran interaktif bukanlah hal yang sulit tetapi tentu saja kita harus melakukan banyak latihan agar memperoleh hasil yang memuaskan. Di sini kita akan

membuat CD pembelajaran interaktif dengan menggunakan software

Misalkan kita akan membuat sebuah CD pembelajaran interaktif tentang materi

sejarah sistem periodik berisi materi, video, soal latihan dan evaluasi, maka sebaiknya dilakukan dalam tiga tahap. Tahap-tahapnya adalah sebagai berikut:

Macromedia Flash

MX 2004.

A. TAHAP PERSIAPAN

Untuk membuat CD pembelajaran interaktif sesuai dengan kriteria di atas, maka yang harus dipersiapkan adalah:

1. Materi tentang sejarah sistem periodik.

2. Video yang berisi sejarah sistem periodik. Film ini bisa berupa film animasi sederhana agar materi yang akan disampaikan bisa lebih nyata dan lebih dipahami oleh siswa.

3. Contoh Soal dan pembahasan untuk bekal siswa sebelum mengukur kemampuan mereka.

4. Soal Evaluasi untuk mengukur kemampuan mereka. Mereka bisa mengerjakan soal dan langsung mengetahui kemampuan mereka karena nilai akan diketahui setelah mereka selesai mengerjakan semua soal.

5. Keping CD sebagai alat penyimpanan program aplikasi yang telah kita buat.

6. Skema isi CD pembelajaran bisa digambarkan sebagai berikut.

Menu Utama Soal dan Materi Video Evaluasi Help Pembahasan 1
Menu Utama
Soal dan
Materi
Video
Evaluasi
Help
Pembahasan
1

B. TAHAP PEMBUATAN

1. Mengatur Tampilan Flash

Langkah ini kita lakukan dengan tujuan agar kita lebih mudah bekerja. Pada contoh ini digunakan sistem operasi Windows XP. Komputer yang menggunakan Sistem Operasi versi lain dapat disesuaikan.

Pertama kali kita buka Flash lewat Start > All Programs > Macromedia > Flash MX 2004.

Pilih kolom Create New > Flash Document.

8 7 2 1 3 4 12 5 6 9 10 11
8
7
2
1
3
4
12
5
6
9
10
11

Gambar 1. Interface Macromedia Flash MX Professional 2004

Keterangan singkat dari gambar tersebut adalah sebagai berikut.

1. Nama file.

2. Menubar.

3. Toolbar

4. Menunjukkan tempat stage.

5. Stage, tempat meletakkan objek.

Flash memiliki panel-panel untuk mengedit dokumen flash, misalnya Nomor 9 menunjukkan Panel Properties. Selain panel properties, ada panel-panel lainnya misalnya Panel Actions, Panel Help dan lain-lain.

2
2

a. Untuk mengatur tampilan, panel-panel yang tidak diperlukan dapat ditutup untuk sementara atau mengatur posisinya pada bidang kerja sehingga tidak mengganggu.

Pertama kita akan memindahkan Panel Actions.

Klik bagian Nomor 6 pada Gambar 1, tahan mouse, geser tepat ke bagian No 7, jika ada garis tebal seperti ditunjukkan oleh No 8, lepas mouse.

Kita sudah memindahkan Panel Actions ke samping.

b. Kita akan menutup panel yang tidak kita gunakan. Ada tiga cara.

Cara pertama adalah dengan mengklik kanan bagian yang ditunjukkan No 9, pilih Close Panel.

Cara kedua klik kiri bagian yang ditunjukkan No 10, pilih Close Panel.

Cara ketiga melalui menu Window > Properties.

Panel properties akan hilang.

Untuk memunculkan panel yang tidak nampak, pilih menu Window, lalu pilih panel yang akan ditampilkan.

Misal kita akan menampilkan panel properties, pilih menu Window >

Properties.

c. Jika bagian No 9 diklik maka panel akan disembunyikan (bukan ditutup).

Aturlah agar Panel Properties, Timeline dan Panel Actions tetap ada, sementara panel lainnya ditutup. Panah kecil seperti yang ditunjukkan No 12 berfungsi untuk mengatur tampilan panel.

2. Pembuatan Halaman Materi dan Halaman Soal Latihan serta Pembahasan.

Selanjutnya akan ditambahkan halaman materi pelajaran. Materi yang akan digunakan sebaiknya disiapkan sebelumnya. Untuk membuat halaman ini, lakukan langkah-langkah sebagai berikut.

Buat sebuah file baru melalui menu File > New > Flash Document.

Atur properties layar (stage) pada panel properties. (Jika panel properties belum nampak, pilih menu Window > Properties atau tekan tombol Ctrl + F3).

Atur panjang dan lebar stage sesuai ukuran resolusi monitor (1024x768) dengan cara mengklik size pada panel properties. Atur juga latar belakangnya. Misal kita pilih warna ungu. Untuk lebih jelasnya perhatikan Gambar 2a ambar 2b di bawah ini.

3
3
Gambar 2a. Panel Properties Tinggi/lebar Panjang Latar belakang Size Gambar 2 Document Properties dalam Panel

Gambar 2a. Panel Properties

Tinggi/lebar Panjang Latar belakang Size
Tinggi/lebar
Panjang
Latar belakang
Size

Gambar 2 Document Properties dalam Panel Properties

Agar seluruh stage terlihat, kita atur tampilan dengan memilih yang berada di boks sudut kanan atas.

Fit in Windows

memilih yang berada di boks sudut kanan atas. Fit in Windows Gambar 3. Zoom Box 

Gambar 3. Zoom Box

Simpan file dengan nama file materi.fla.

4
4
Gambar 4  Misalkan materi pelajaran Sistem Periodik terdiri dari Oktaf, SP Mendeleev dan SP

Gambar 4

Misalkan materi pelajaran Sistem Periodik terdiri dari

Oktaf, SP Mendeleev dan SP Modern

.

Sistem Triade, Sistem

Buat tombol keempat materi tersebut di sisi kiri

Ketika tombol diklik, penjelasan materi yang bersesuaian akan ditampilkan di sebelah kanannya.

Gunakan Text Tool untuk membuat tampilan seperti Gambar 4.

Buat tombol baru lewat menu

Isi name:

Buat layer baru.

Insert > New Symbol

.

button.

 Buat layer baru. Insert > New Symbol . button . dobereiner dan behavior: Gambar 5

dobereiner dan behavior:

> New Symbol . button . dobereiner dan behavior: Gambar 5  Ubah nama layer 1

Gambar 5

Ubah nama layer 1 menjadi latar dan layer 2 menjadi teks. Lihat Gambar 5.

Klik frame Up layer latar.

Gunakan Rectangle Tool untuk membuat latar belakang tulisan (misal kita pilih warna pink).

Klik kanan frame Over, pilih Insert Keyframe, ubah warnanya (biru misalnya).

Lakukan hal yang sama untuk frame Down (misal kita pilih warnanya merah).

5
5

Klik frame Up layer teks, gunakan Text Tool dan buat tulisan Triade Dobereiner, ubah menjadi warna (putih misalnya).

Klik kanan frame Down, pilih Insert Frame.

 

Kita kembali ke Scene1

, lalu masukkan symbol dobereiner dari library ke stage.

Buatlah tiga duplikat symbol dobereiner dengan cara klik kanan symbol pada panel library, pilih Duplicate, beri nama masing-masing oktaf, mendeleev dan modern. Lihat Gambar 6.

 
 
 

Gambar 6

 

Edit symbol oktaf tersebut dengan cara klik kanan symbol pada panel library, pilih Edit.

Ganti tulisannya menjadi Sistem Oktaf.

 

Lakukan hal yang sama untuk simbol mendeleev dan modern.

Kembali ke Scene1

.

Masukkan ketiga symbol ke dalam stage.

 

Atur letak dan ukurannya melalui panel properties

Jika tombol-tombol itu diklik kita akan membuat isi materi muncul di sebelah

kanannya, maka kita buat sebuah

simbol Movieclip

dengan menggunakan

Rectangle Tool

.

Atur posisinya dan propertiesnya (misalnya lebar 600 dan tinggi 500).

Ubah menjadi movieclip melalui menu Modify > Convert to Symbol.

Beri name: isi dan

behavior: movieclip

.

Pada panel properties beri nama instance isi_mc. Lihat Gambar 8.

isi dan behavior: movieclip .  Pada panel properties beri nama instance isi_mc. Lihat Gambar 8.
6
6

Gambar 7

Gambar 8 Sebelum membuat isi materi, kita terlebih dulu memberikan tombol kembali ke menu utama

Gambar 8

Sebelum membuat isi materi, kita terlebih dulu memberikan tombol kembali ke menu utama dan tombol keluar. Gunakan tombol dari library dan gunakan Text Tool untuk membuat tulisannya. Lihat Gambar 9.

gunakan Text Tool untuk membuat tulisannya. Lihat Gambar 9. 7 Gambar 9  Buat file baru
7
7

Gambar 9

Buat file baru yang nanti akan dipanggil dan diletakkan pada

isi_mc .
isi_mc
.

movieclip

Pilih menu File > New > Flash Document.

Atur ukuran stage dengan lebar dan tinggi sesuai dengan ukuran movieclip isi_mc yaitu 600 x 500.

Buat sebuah

Copy paste materi dari teks yang telah dipersiapkan. Lihat Gambar 10.

dengan

Simpan file dengan nama file

dynamic text multiline

.

dobereiner.fla

. Buat

file swf-nya

menekan tombol Ctrl + Enter

.

cara

Gambar 10  Buat tiga file lainnya (oktaf.swf, mendeleev.swf dan modern.swf) dengan cara seperti langkah

Gambar 10

Buat tiga file lainnya (oktaf.swf, mendeleev.swf dan modern.swf) dengan cara seperti langkah j.

Selanjutnya kita akan menghubungkan file-file tersebut dengan file materi.

Buka kembali file materi.fla.

Aktifkan panel behavior melaluui menu Window > Development Panels > Behaviors. Lihat Gambar 11.

Klik tombol dobereiner,

tambahkan behavior dengan mengklik tanda + > Movieclip > Load External Movieclip.

tanda + > Movieclip > Load External Movieclip. Gambar 11  Pada kotak dialog, isikan URL:

Gambar 11

Pada kotak dialog, isikan URL: dobereiner.swf, atur level pada isi_mc. Lihat Gambar 12.

8
8
Gambar 12  Lakukan langkah m untuk ketiga tombol lainnya dengan mengganti URL sesuai dengan

Gambar 12

Lakukan langkah m untuk ketiga tombol lainnya dengan mengganti URL sesuai dengan nama file swf-nya. Untuk tombol kembali ke menu utama lihat Gambar 13, URL-nya adalah menu.swf dan levelnya adalah root.

Gambar 13, URL-nya adalah menu.swf dan levelnya adalah root. Gambar 13  Untuk tombol keluar, tambahkan

Gambar 13

Untuk tombol keluar, tambahkan script berikut pada panel actions.

9
9

on (press, release)

{

fscommand("quit");

}

Tekan Ctrl + Enter dan lihatlah hasil kerja Anda. Pembuatan halaman materi telah selesai.

Pada halaman materi ini kita telah membuat 5 file. 1). File materi.swf, berisi:

Tombol dobereiner >>> memanggil file dobereiner.swf dan meletakannya pada movieclip isi.mc.

Tombol oktaf >>> memanggil file oktaf.swf dan meletakannya pada movieclip isi.mc.

Tombol mendeleev >>> memanggil file mendeleev.swf dan meletakannya pada movieclip isi.mc.

Tombol modern>>> memanggil file modern.swf dan meletakannya pada movieclip isi.mc.

Movieclip isi.mc untuk meletakkan file swf yang dipanggil.

Tombol kembali ke menu utama dan tombol keluar. 2). File dobereiner.swf 3). File oktaf.swf 4). File mendeleev.swf 5). File modern.swf

File oktaf.swf 4). File mendeleev.swf 5). File modern.swf Gambar 14  Pembuatan halaman contoh soal dan

Gambar 14

Pembuatan halaman contoh soal dan pembahasan dilakukan dengan cara yang sama seperti pembuatan halaman materi. Gunakan nama file csp.fla sehingga file flashnya berupa csp.swf. Untuk latihan, buat 5 soal dan pembahasannya sehingga tampilannya seperti Gambar 14.

10
10

Pada halaman contoh soal dan pembahasan ini kita telah membuat 6 file. 1). File csp.swf, berisi:

Tombol Contoh Soal 1 >>> memanggil file csp1.swf dan meletakannya pada movieclip isi.mc.

Tombol Contoh Soal 2 >>> memanggil file csp2.swf dan meletakannya pada movieclip isi.mc.

Tombol Contoh Soal 3 >>> memanggil file csp3.swf dan meletakannya pada movieclip isi.mc.

Tombol Contoh Soal 4 >>> memanggil file csp4.swf dan meletakannya pada movieclip isi.mc.

Tombol Contoh Soal 5 >>> memanggil file csp5.swf dan meletakannya pada movieclip isi.mc.

Movieclip isi.mc untuk meletakkan file swf yang dipanggil.

Tombol kembali ke menu utama dan tombol keluar.

2). File csp1.swf 3). File csp2.swf 4). File csp3.swf 5). File csp4.swf 6). File csp5.swf

3. Pembuatan Halaman Film Kali ini kita akan membuat halaman film. Untuk membuat halaman ini, lakukan langkah-langkah sebagai berikut.

a. Buka file dobereiner.fla, simpan menjadi file baru lewat menu File > Save As. Beri nama file video.fla. Hapus semua isinya dengan cara klik kanan layer 1 frame 1, pilih Clear Keyframe.

b. Masukkan film lewat menu File > Import > Import to Stage. Pilih File, klik Open, klik Next, Klik Finish. Tunggu proses import, setelah selesai muncul kotak dialog, tekan Yes. Beri nama instance video_mc.

c. Buka Library-Buttons.fla lewat menu Window > Other Panels > Common Libraries > Buttons. Expand foldel playback. Masukkan button gel Right, gel Pause dan gel Stop ke dalam stage. Beri nama di sebelah kanannya seperti terlihat pada Gambar 15.

11
11
Gambar 15 d. Pada tombol play tambahkan behavior Embedded Video > Play. Untuk tombol pause

Gambar 15

d. Pada tombol play tambahkan behavior Embedded Video > Play. Untuk tombol pause gunakan Embedded Video > Pause dan untuk tombol stop gunakan Embedded Video > Stop. Lihat Gambar 16 dan 17.

gunakan Embedded Video > Stop. Lihat Gambar 16 dan 17. Gambar 16 Gambar 17 e. Beri

Gambar 16

Embedded Video > Stop. Lihat Gambar 16 dan 17. Gambar 16 Gambar 17 e. Beri script

Gambar 17

e. Beri script stop di bawah ini pada frame 1. stop();

f. Simpan file dan uji hasil kerja Anda dengan menekan tombol Ctrl + Enter.

g. Buka file materi.fla, simpan lewat menu File > Save As. Beri nama file film.fla.

h. Pada panel Library-Materi.fla hapus simbol mendeleev, modern dan oktaf. Klik kanan pada simbol dobereiner, pilih Rename. Ganti namanya menjadi tampil. Klik kanan simbol tampil, pilih edit. Ganti Tulisan menjadi Tunjukkan Film.

i. Ganti tulisan Materi di pojok kiri atas dengan tulisan Film. Tambahkan behavior Movieclip > Load External Movieclip. Isi URL: video.swf dan level: isi_mc. Lihat Gambar 18.

12
12
Gambar 18 j. Tampilan yang telah dibuat akan terlihat seperti Gambar 19. Simpan file Anda

Gambar 18

j. Tampilan yang telah dibuat akan terlihat seperti Gambar 19. Simpan file Anda dan test movie dengan menekan Ctrl + Enter.

Simpan file Anda dan test movie dengan menekan Ctrl + Enter. Gambar 19 4. Pembuatan Halaman

Gambar 19

4. Pembuatan Halaman Evaluasi Kita hanya akan membuat model soal evaluasi dari template yang sudah disediakan oleh Flash. Kelemahannya kita akan sulit memberi Gambar pada soal maupun jawaban. Tetapi dengan mengedit setiap frame, kita juga bisa memberi objek Gambar. Di sini, baik pertanyaan maupun jawaban hanya merupakan tulisan biasa, tanpa subscript sama sekali. Kita bisa memberi sedikit perubahan dengan memberikan fasilitas untuk menuliskan nama dan memberi batas waktu untuk mengerjakan semua soal. Untuk membuat halaman evaluasi langkah-langkahnya sebagai berikut.

13
13

a.

Pilih menu File > New. Pilih tab Template > Quiz > Quiz_style1.

20.

Lihat Gambar

tab Template > Quiz > Quiz_style1. 20. Lihat Gambar b. c. Gambar 20 Atur tampilan menjadi

b.

c.

Gambar 20

Atur tampilan menjadi Show All. Lihat Gambar 21. Simpan file dengan nama evaluasi.fla.

All. Lihat Gambar 21. Simpan file dengan nama evaluasi.fla. Gambar 21 Ada 6 model soal di

Gambar 21

Ada 6 model soal di sini, bisa dilihat dari frame 2 sampai frame 7, tetapi kita akan menggunakan model pada frame 6. Kita akan membuang model lainnya. Klik kanan layer Interactions frame 2, pilih Clear Keyframe. Lakukan hal yang sama untuk frame 3,4,5 dan 7. Ingat, pada layer Interactions. Lihat Gambar 22.

Keyframe. Lakukan hal yang sama untuk frame 3,4,5 dan 7. Ingat, pada layer Interactions. Lihat Gambar
14
14

Gambar 22

d. Berapa soal yang akan kita buat? Misalkan kita mau membuat 10 soal, kita harus menambahkan 4 frame pada setiap layer di antara frame pertama dan terakhir. Klik kiri layer Actions frame 2, tekan tombol Shift, tahan, klik kiri layer Background frame 5 sampai timeline berwarna hitam seperti Gambar 23. Klik kanan, pilih Insert Frame.

hitam seperti Gambar 23. Klik kanan, pilih Insert Frame. Gambar 23 e. Klik objek Quiz Option

Gambar 23

e. Klik objek Quiz Option di sebelah kiri stage, pada panel properties klik Launch Component Inspector. Lihat Gambar 24.

properties klik Launch Component Inspector. Lihat Gambar 24. Gambar 24 f. Setelah menekan tombol Launch Component

Gambar 24

f. Setelah menekan tombol Launch Component Inspector, muncul panel Component Inspector. Kita akan mengatur kuis/evaluasi yang kita buat. Pada Quiz Options terdapat beberapa opsi. Randomize digunakan jika soal akan dikeluarkan secara acak. Sebaiknya opsi ini tidak kita gunakan karena terkadang soal yang telah keluar akan muncul kembali. Opsi Question to Ask menunjukkan jumlah pertanyaan yang harus dijawab. Meski kita membuat

15
15

sebanyak 10 soal kita bisa mengisinya dengan angka 5. Artinya, soal yang akan muncul hanya 5. Lebih baik kita mengisi sesuai dengan jumlah soal yang dibuat karena kita tidak menggunakan opsi Randomized. Opsi lainnya tidak usah kita edit. Untuk lebih jelasnya lihat Gambar 25.

tidak usah kita edit. Untuk lebih jelasnya lihat Gambar 25. Gambar 25 g. Klik layer Interactions

Gambar 25

g. Klik layer Interactions frame 10, pilih objek Multiple Choice Interactions dengan cara klik kiri pada objek. Klik kanan, pilih Break Apart. Lihat Gambar 26.

pada objek. Klik kanan, pilih Break Apart. Lihat Gambar 26. Gambar 26 Deselect objek lewat menu

Gambar 26

Deselect objek lewat menu Edit > Deselect All. Klik objek Multiple Choice Interactions, maka panel Component Inspector akan tampak mengacu pada soal pilihan ganda. Kita akan membahas opsi-opsinya. Perhatiakan Gambar 27. Interaction ID menunjukkan identitas, beri nama sesuai urutan nomor soal untuk memudahkan. Question merupakan soal yang kita buat. Label pada Checkbox1 Checkbox5 merupakan jawabannya, sedangkan Correct merupakan pilihan jawaban yang benar. Kotak yang dicentang adalah jawaban

16
16

yang benar. Di situ ada tiga kotak yang dicentang karena ada tiga jawaban yang benar. Kita hanya akan memberikan satu jawaban yang benar, maka kita hanya akan memberi centang pada salah satu kotak saja. Hal ini akan lebih jelas nanti.

pada salah satu kotak saja. Hal ini akan lebih jelas nanti. Gambar 27 Masih pada panel

Gambar 27 Masih pada panel Component Inspector, klik Option pada bagian bawah. Lihat Gambar 26. Editlah tulisannya seperti Gambar 28.

Lihat Gambar 26. Editlah tulisannya seperti Gambar 28. Gambar 28 Masih pada panel Component Inspector, klik

Gambar 28

Masih pada panel Component Inspector, klik Assets pada bagian bawah. Lihat Gambar 27. Editlah tulisannya seperti Gambar 29.

17
17
Gambar 29 h. Sembunyikan panel Component Inspector. Jangan ditutup, hanya disembunyikan. Klik kanan layer Interactions

Gambar 29

h. Sembunyikan panel Component Inspector. Jangan ditutup, hanya disembunyikan. Klik kanan layer Interactions frame 10, pilih Copy Frame (Gambar 30). Klik kanan layer Interactions frame 2, pilih Paste Frame (Gambar 31). Kita telah menggandakan soal di frame 10 ke frame 2. Agar kita mempunyai 10 soal, gandakan soal dengan cara klik kanan, paste frame untuk frame 3,4,5,6,7,8,9 dan 11. Artinya, kita menempatkan soal pada layer Interactions frame 2-11. Tentu isi soal frame-frame tersebut sama. Langkah selanjutnya kita akan mengedit soal itu.

sama. Langkah selanjutnya kita akan mengedit soal itu. 18 i. Gambar 30 Gambar 31 Klik frame
18
18

i.

Gambar 30

Gambar 31

Klik frame 2, hilangkan seleksi lewat menu Edit > Deselect All. Seleksilah objek Multiple Choice Interactions, maka panel Component Inspector merupakan milik Multiple Choice Interactions frame 2. Lalu editlah beberapa bagian dalam

panel Component Inspector seperti terlihat pada Gambar 32. Usahakan mengisi Interaction ID sesuai urutan nomor soal, seperti pada Gambar diisi Interaction_01 karena merupakan soal nomor 1. Kotak Questions diisi pertanyaan. Dan di bawahnya Label merupakan jawabannya. Sedangkan Correct menunjukkan jawaban yang benar. Misal pada soal ini jawaban yang benar adalah pada Label nomor 4, maka yang dicentang hanya pada Correct nomor 4.

nomor 4, maka yang dicentang hanya pada Correct nomor 4. Gambar 32 Lakukan langkah i untuk

Gambar 32

Lakukan langkah i untuk frame 3-11. Jika langkah ini selesai, maka kita sudah mempunyai 10 soal beserta jawabannya. Simpan dulu hasil kerja Anda.

j. Kemudian kita akan merubah tulisan yang berbau bahasa Inggris. Tutup panel Component Inspector untuk memudahkan. Klik layer Interactions frame 1, Ubah tulisan “Welcome” menjadi “Selamat Datang”. Ubah juga tulisan “Click the next button to continue” menjadi “ Tuliskan nama Anda, lalu klik tombol di kanan bawah untuk memulai”. Kita akan menampilkan nama pada evaluasi ini.

19
19
Gambar 33 Di bawah tulisan tadi buatlah sebuah Input Text. Klik Text Tool. Atur dulu

Gambar 33

Di bawah tulisan tadi buatlah sebuah Input Text. Klik Text Tool. Atur dulu propertiesnya. Pastikan merupakan Input Text (Gambar 33), font 16, klik Show Border Around Text di sebelah var. Lalu buatlah Input Text di stage. Dengan menggunakan Selection Tool, seleksi Input Text tadi, lalu isikan variabelnya (var) dengan “nama”. Lihat Gambar 33.

k. Klik layer Title frame 1. Kita akan mengubah tulisan “Quiz Practice”. Karena layer terkunci, agar bisa diedit, kita harus melepaskan kuncinya dengan mengklik tanda gembok di kiri layer sampai hilang tandanya (Gambar 34). Lalu ubah tulisannya menjadi "Evaluasi: Sejarah Sistem Periodik” (Gambar 35).

"Evaluasi: Sejarah Sistem Periodik” (Gambar 35). Gambar 34 Gambar 35 l. Kita akan menampilkan nama sekaligus

Gambar 34

Sejarah Sistem Periodik” (Gambar 35). Gambar 34 Gambar 35 l. Kita akan menampilkan nama sekaligus waktu

Gambar 35

l. Kita akan menampilkan nama sekaligus waktu ketika soal mulai dikerjakan. Masih pada layer Title, klik kanan frame 2, pilih Insert keyframe. Dengan menggunakan text Tool buatlah sebuah Dynamic text pada stage di kanan atas. Atur fontnya 12, text direction Right, isi var nama_waktu. Jangan lupa hilangkan Show Border Around Text. Lihat Gambar 36.

20
20
Gambar 36 m. Klik layer Actions frame 2. Tuliskan script di bawah ini pada panel

Gambar 36

m. Klik layer Actions frame 2. Tuliskan script di bawah ini pada panel actions.

stop(); mulai=getTimer(); var TOTALTIME=1200; function checkTimer(){ var tmp_num=getTimer(); tmp_num=(tmp_num - mulai)/1000; display_timer= TOTALTIME-Math.ceil(tmp_num); return display_timer;

}

_root.onEnterFrame=function(){ sisa=checkTimer(); if(sisa >= 0) { nama_waktu=sisa; nama_waktu=nama+", waktumu tinggal "+nama_waktu+" detik

lagi.";

}

if(sisa == 0) { gotoAndStop("Results Page");

21
21

pesan="waktu habis";

}

}

Penjelasan dari script tersebut adalah sbb:

stop(); >>>menyuruh movieclip berhenti pada frame 2<<<

mulai=getTimer(); >>>penghitungan waktu dimulai<<<

var TOTALTIME=1200; >>>waktu untuk mengerjakan soal (dalam detik)<<<

function checkTimer(){ var tmp_num=getTimer(); tmp_num=(tmp_num - mulai)/1000; display_timer= TOTALTIME-Math.ceil(tmp_num); return display_timer;

}

TOTALTIME-Math.ceil(tmp_num); return display_timer; } >>>fungsi untuk menghitung waktu

>>>fungsi untuk menghitung waktu mundur<<< _root.onEnterFrame=function(){ sisa=checkTimer(); if(sisa >= 0) { nama_waktu=sisa; nama_waktu=nama+", waktumu tinggal "+nama_waktu+" detik

lagi.";

}

if(sisa == 0) { gotoAndStop("Results Page"); pesan="waktu habis";

}

}

>>>ketika memasuki frame, waktu akan diperiksa apakah sudah habis atau belum. Jika belum maka script nama_waktu=nama+", waktumu tinggal "+nama_waktu+" detik lagi."; akan menunjukkan waktu yang tersisa. Kita juga memunculkan nama di situ. Misal jika kita mengisi nama Ari pada kotak input dan waktu yang tersisa adalah x detik, maka sesuai script, tampilan yang nampak adalah “Ari, waktumu tinggal x detik” dengan x adalah waktu yang tersisa. Nilai x akan selalu berubah menjadi berkurang setiap detik sampai habis. Jika waktu habis, kita langsung menuju Results Page. Di situ akan muncul pesan “waktu habis”<<<

22
22

n. Selanjutnya kita akan mengedit halaman terakhir. Klik kanan layer Title frame 12, pilih Insert Keyframe. Hapus Dynamic Text tadi. Kita hanya menghapus Dynamic Text pada frame 12, artinya ketika movieclip belum sampai pada frame 12, nama dan sisa waktu tetap ditampilkan. Buat Dynamic Text dengan font 14, var: pesan. Ini merupakan tempat ditampilkannya pesan yang tadi kita tulis pada actionscript. Tempatkan di atas tulisan Quiz Result. Editlah tulisan di layar menjadi bahasa Indonesia. Jangan lupa atur pula posisinya. Khusus untuk tulisan “Quiz Results” ubahlah menjadi Dynamic Text, font 16, beri var: hasil, jangan diberi tulisan apa-apa. Paling bawah, buat Static Text bertuliskan nilai dan Dynamic Text, beri nama var: hasil. Klik kanan layer actions frame 12, pilih Insert Keyframe. Pada panel actions tambahkan script berikut:

hasil=nama+", inilah hasil test kamu.";

nilai_akhir=QuizTrack.total_correct*10;

test kamu."; nilai_akhir=QuizTrack.total_correct*10; Gambar 38 Simpan hasil kerja Anda lewat menu File >

Gambar 38

Simpan hasil kerja Anda lewat menu File > Save. Anda sudah selesai membuat halaman evaluasi. Tes hasil kerja Anda dengan menekan tombol Ctrl + Enter. Kelemahannya di sini adalah kita kesulitan untuk membuat soal atau jawaban berGambar. Tetapi, kita bisa mengatur posisinya dengan menyiasati posisi tulisan dan mengaturnya agar pas dengan objek gambar.

5. Pembuatan Halaman Tentang Pembuat

a. Buka file materi.fla yang telah kita buat sebelumnya. Pilih menu File > Save As.

Beri nama file about.fla. Hapus semua tulisan di stage kecuali tombol kembali ke menu utama dan tombol keluar. Untuk memperkecil kecil ukuran file, kita buang tombol yang tidak digunakan di panel library. Tampilkan library lewat

23
23

menu Window > Library. Pada panel library hapuslah tombol dobereiner, isi, mendeleev, modern dan oktaf. Buat sebuah Static Text untuk memberi judul. Halaman ini kini menjadi seperti Gambar 39 di bawah ini.

Halaman ini kini menjadi seperti Gambar 39 di bawah ini. Gambar 39 b. Kita akan mencoba

Gambar 39

b. Kita akan mencoba bermain script. Buat movieclip baru lewat menu Insert > New Symbol. Beri name: foto, behavior: movieclip, linkage Export for ActionScript diberi tanda centang. Maka otomatis Identifier terisi: foto. Identifier ini akan kita gunakan untuk mmembuat animasi menggunakan actionscript. Lihat Gambar 40.

mmembuat animasi menggunakan actionscript. Lihat Gambar 40. Gambar 40 c. Kita akan memasukkan foto lewat menu

Gambar 40

c. Kita akan memasukkan foto lewat menu File > Import > Import to Stage. Atur propertiesnya dengan X=0 dan Y=0, catat H (kita akan menggunakan nilai H dalam actionscript nanti. Beri Static Text berisi data pembuat seperti contoh pada Gambar 41.

24
24
Gambar 41 Kita kembali ke scene 1 dengan cara klik tulisan Scene 1 di atas

Gambar 41

Kita kembali ke scene 1 dengan cara klik tulisan Scene 1 di atas panel timeline.

d. Klik frame 1, pada panel actions, tulis actionscript berikut:

var fotoku:MovieClip=attachMovie("foto","fotoku",1); fotoku x=1024; fotoku y=(768-250)/2; fotoku alpha=0; onEnterFrame= function(){ fotoku x=fotoku x-10; fotoku alpha=fotoku alpha+1; fotoku y=fotoku y; if (fotoku x<=50){ fotoku x=50;

}

if (fotoku alpha>=100){

fotoku alpha=100;

}

}

Penjelasannya adalah sebagai berikut:

var fotoku:MovieClip=attachMovie("foto","fotoku",1);

>>>menjadikan movieclip foto menjadi sebuah movieclip swf di stage<<<

fotoku

x=1024;

>>>posisi fotoku berada pada jarak x = 1024 (dari kiri)<<<

fotoku

y=(768-250)/2;

>>>posisi fotoku berada pada jarak y = (768-H)/2 (dari

atas). Mengapa posisi y dari atas sejauh (768-H)/2? Ukuran tinggi stage adalah 768 dan H adalah ukuran tinggi (height/H) foto. Kita bagi 2 agar terletak di tengah<<<

25
25

fotoku

maksimalnya adalah 100. onEnterFrame= function(){ >>>ketika memasuki frame fungsi di bawahnya akan dijalankan<<<

>>>jarak dari x kita kurangi 10, hal ini dilakukan

terus menerus, maka foto bergerak ke kiri<<<

>>>besar alpha ditambah 1, hal ini juga

dilakukan berulang-ulang<<<

>>>jarak y tidak kita ubah agar posisi y (dari atas

>>>nilai alpha = 0 berarti Gambar tidak terlihat. Nilai

alpha=0;

fotoku

fotoku

fotoku

x=fotoku

x-10;

alpha+1; alpha=fotoku

y=fotoku

y;

tetap berada di tengah<<< if (fotoku x<=50){

fotoku x=50;

}

>>>jika jarak x ≤ 50, maka x dihitung 50. Ingat, posisi x berkurang terus

menerus. Untuk mencegah foto keluar dan menghilang, maka kita batasi pergerakan foto sampai posisi x = 50<<< if (fotoku alpha>=100){ fotoku alpha=100;

}

>>>ini membatasi alpha jika ≥ 100, maka alpha dihitung 100<<<

}

e. Simpan hasil kerja Anda, lalu jalankan dengan menggunakan Ctrl + Enter. Anda

telah selesai membuat halaman tentang pembuat.

6. Pembuatan Menu Utama

a. Kita atur dulu properties layar (stage) pada panel properties. (Jika panel properties belum nampak, pilih menu Window > Properties atau tekan tombol Ctrl + F3). Lalu atur panjang dan lebar stage sesuai ukuran resolusi monitor (1024x768) dengan cara mengklik size pada panel properties. Atur juga latar belakangnya. Misal kita pilih warna ungu. Untuk lebih jelasnya perhatikan Gambar di bawah ini.

26
26
Tinggi/lebar Panjang Latar belakang Size
Tinggi/lebar
Panjang
Latar belakang
Size

Gambar 42

b. Agar seluruh stage terlihat, kita atur tampilan dengan memilih Fit in Windows. Lihat Gambar 43

atur tampilan dengan memilih Fit in Windows. Lihat Gambar 43 Gambar 43 c. Simpan file melalui

Gambar 43

c. Simpan file melalui menu File > Save As. Beri nama file menu.fla.

d. Buat dua layer baru melalui menu Insert > Timeline > Layer atau mengklik tool Insert Layer pada panel timeline. Ubah ketiga nama layer menjadi layer actions, judul dan menu. Lihat Gambar 44

Tool Insert New Layer
Tool Insert New Layer
27
27

Gambar 44

e. Klik frame 1 layer judul pada timeline.

Frame 1 layer judul
Frame 1 layer judul

Gambar 45

Klik Rectangle Tool, atur warnaya (stroke color: none, fill color: kuning). Buatlah kotak segi empat lalu seleksi kotak tadi dan atur propertiesnya (lebar:1024 sesuai lebar stage, tinggi: 200, posisi x: 0 dan posisi y: 75). Lihat Gambar 47

tinggi: 200, posisi x: 0 dan posisi y: 75). Lihat Gambar 47 Rectangle Tool Gambar 47

Rectangle Tool

x: 0 dan posisi y: 75). Lihat Gambar 47 Rectangle Tool Gambar 47 Stroke Color: None
x: 0 dan posisi y: 75). Lihat Gambar 47 Rectangle Tool Gambar 47 Stroke Color: None

Gambar 47

Stroke Color: None

Fill Color: Kuning

Gambar 46

f. Masih pada layer judul frame 1, buat sebuah movieclip lewat menu Insert > New Symbol. Beri nama symbol title_mc dan pastikan behavior pada pilihan movieclip.

title_mc dan pastikan behavior pada pilihan movieclip. Gambar 48 g. Buatlah tulisan seperti pada Gambar menggunakan

Gambar 48

g. Buatlah tulisan seperti pada Gambar menggunakan Text Tool. Agar terletak di tengah, gunakan menu Edit > Cut, lalu menu Edit > Paste in Center.

28
28
Gambar 49 Agar tidak terlihat terlalu statis, kita akan membuat animasi tulisan tersebut dari tidak

Gambar 49

Agar tidak terlihat terlalu statis, kita akan membuat animasi tulisan tersebut dari tidak kelihatan menjadi kelihatan dengan memberi tween animasi. Kita di sini tidak menggunakan actionscript seperti pada pembuatan halaman tentang pembuat. Anggap saja kita berlatih membuat tween animasi.

h.

Pastikan objek tulisan tadi terseleksi. Gunakan menu Modify > Convert to Symbol. Beri nama: titleani_mc dan behavior movieclip. Klik pada frame 30 layer 1, klik kanan, pilih Insert Keyframe. Klik pada sembarang frame antara frame 1 dan 30 (frame 2-29), klik kanan, pilih Create Motion Tween.

dan 30 (frame 2-29), klik kanan, pilih Create Motion Tween. Gambar 50 Klik frame 1. Klik

Gambar 50

Klik frame 1. Klik objek. Aturlah properties Color: Alpha 0%. Lakukan hal yang sama untuk frame 30 dengan mengganti nilai Alpha 100%.

yang sama untuk frame 30 dengan mengganti nilai Alpha 100%. Gambar 51 Kita telah selesai membuat

Gambar 51

Kita telah selesai membuat sebuah movieclip bernama title_mc berisi sebuah movieclip titleani_mc. Buka panel library, jika belum tampak bukalah melalui menu Window > Library. Berikutnya kita kembali ke Scene1 dengan mengklik Scene1 seperti terlihat pada Gambar.

29
29
Gambar 52 i. Masukkan symbol title_mc ke stage dengan cara menggesernya dari library. Lalu atur

Gambar 52

i. Masukkan symbol title_mc ke stage dengan cara menggesernya dari library. Lalu atur posisinya agar berada di tengah latar judul berwarna kuning.

Geser
Geser

Gambar 53

j. Tekan Ctrl + Enter untuk mengetes hasil kerja Anda.Tulisan judul akan semula tak terlihat dan perlahan muncul. Lalu hilang, muncul lagi dst. Ini terjadi karena movieclip title_mc berjalan berulang-ulang. Agar setelah tulisan muncul animasi berhenti, kita akan berikan script pada movieclip title_mc. Klik kanan title_mc pada panel library, pilih Edit. Klik frame 30 layer 1. Pindahlah ke panel Actions. Jika belum nampak gunakan menu Window > Development Panel > Actions. Ketikkan actionscript sederhana berikut:

stop();

Maka pada timeline di frame 30 muncul huruf a kecil menandakan bahwa frame tersebut berisi actionscript.

a kecil menandakan bahwa frame tersebut berisi actionscript. Gambar 54 k. Kemudian kita kembali ke Scene1,

Gambar 54

k. Kemudian kita kembali ke Scene1, caranya seperti tahap terakhir langkah nomor 7. Tekan Ctrl + Enter dan lihatlah hasil kerja Anda.

30
30

l.

Kita sudah selesai membuat judulnya, sekarang klik layer menu frame 1. Kita

akan membuat tombol menu untuk menghubungkan menu dengan movieclip lainnya.Aktifkan panel Library-Button melalui menu Window > Other Panels > Common Libraries > Buttons. Klik kanan folder Key Buttons pada panel Library Buttons. Lakukan hal yang sama untuk folder Arcade Buttons. Lihat Gambar

55.

hal yang sama untuk folder Arcade Buttons. Lihat Gambar 55. Gambar 55 m. Seperti langkah i,

Gambar 55

m. Seperti langkah i, masukkan 5 buah button Key Right dan 1 buah button Arcade Button Red ke dalam stage. Atur posisi dan ukurannya lewat panel properties. Di sebelah kanan tombol-tombol tersebut, tuliskan menu-menunya sehingga terlihat seperti Gambar di bawah ini.

Di sebelah kanan tombol-tombol tersebut, tuliskan menu-menunya sehingga terlihat seperti Gambar di bawah ini. 31 Gambar
31
31

Gambar 56

n. Gunakan behavior untuk memanggil file swf yang telah kita buat. Langkah

menggunakan behavior bisa dilihat pada pembuatan halaman materi langkah n dan langkah o. Gunakan parameter berikut:

Tombol materi : URL materi.swf, level root

Tombol film

Tombol contoh soal dan pembahasan : URL csp.swf, level root

Tombol evaluasi

Tombol tentang pembuat : URL about.swf, level root

o. Agar ketika kita jalankan dari windows explorer tampilannnya terlihat fullscreen,

: URL film.swf, level root

: URL evaluasi.swf, level root

kita akan tambahkan script. Klik layer actions frame 1 (Gambar 57). Pada panel Actions tambahkan script berikut:

fscommand("fullscreen", "true");

berikut: fscommand("fullscreen", "true"); Gambar 57 p. Simpan hasil kerja Anda melalui menu File >

Gambar 57

p. Simpan hasil kerja Anda melalui menu File > Save. Tes movieclip dengan menekan tombol Ctrl + Enter. Kita telah selesai membuat halaman menu utama.Kita telah selesai membuat sebuah media pembelajaran interaktif.

C. Tahap Penyelesaian

1. Membuat file menu.exe. Kita perlu membuat file menu.exe agar CD yang kita buat bisa dijalankan pada komputer yang tidak mempunyai flash player (file berekstensi .swf hanya bisa dijalankan pada komputer yang memiliki flash player). Untuk membuatnya, buka

file materi.fla, pilih menu File > Publish Settings. Atur seperti Gambar 58, lalu klik

Publish.

32
32
Gambar 58 2. Membuat autorun. Ketika CD dimasukkan ke CD-Room, maka dengan autorun ini, program

Gambar 58

2. Membuat autorun. Ketika CD dimasukkan ke CD-Room, maka dengan autorun ini, program yang kita buat akan dijalankan secara otomatis. Untuk membuat autorun ini langkah- langkahnya adalah sebagai berikut:

a. Buka notepad lewat Start > All Program > Accessories > Notepad. Ketikkan:

[autorun] open=menu.exe

b. Simpan file lewat menu File > Save As. Pastikan filename: autorun.inf dan Save as type: All files. Lihat Gambar 59

lewat menu File > Save As. Pastikan filename: autorun.inf dan Save as type: All files. Lihat
33
33

Gambar 59

3. Menempatkan file File-file yang telah kita buat kita simpan dalam satu folder. Buatlah folder baru, misal di My Documents, beri nama folder CD Pembelajaran. File- file tersebut adalah:

Autorun.inf

Menu.exe

menu.swf

materi.swf

dobereiner.swf

oktaf.swf

mendeleev.swf modern.swf film.swf csp.swf

csp1.swf

csp2.swf

csp3.swf

csp4.swf

csp5.swf

evaluasi.swf about.swf

4. Langkah terakhir adalah mentransfer file-file yang telah kita buat ke dalam sebuah CD. Untuk melakukan langkah ini kita harus menggunakan perangkat tambahan pada komputer berupa CD RW. Jika menggunakan Windows XP, caranya sangat mudah. Bukalah windows explorer dengan mengklik kanan start di sisi kiri bawah komputer Anda, pilih explore. Kopilah semua file ke drive CD RW (misalnya drive

Jangan lupa masukkan CD kosong. Untuk

menggandakannya ke CD, pilih menu File > Write This File to CD. Ikuti petunjuknya sampai selesai. Maka, CD pembelajaran yang Anda buat sudah jadi. Anda juga

bisa menggandakannya ke CD menggunakan software tambahan seperti Nero Burning Room.

D).

Pindahlah

ke

drive

D.

Setelah melakukan langkah terakhir, kita sudah selesai membuat sebuah CD Pembelajaran Interaktif. Tentu saja ini masih jauh dari sempurna. Penulis mempersilahkan pengembangan agar CD yang dibuat lebuh interaktif, artistik dan menyenangkan.

34
34