MEMBUAT CD PEMBELAJARAN INTERAKTIF by YiCi8Jm

VIEWS: 608 PAGES: 30

									                                                                                         1



                    MEMBUAT CD PEMBELAJARAN INTERAKTIF
                             Oleh: Ari Hendriayana




Sesuai dengan perkembangan teknologi komputer dan kemajuan bidang pendidikan di
sekolah terutama dalam hal sarana laboratorium komputer, maka pembelajaran berbantuan
komputer bisa menjadi pilihan yang tepat. Membuat CD pembelajaran interaktif sebenarnya
bukanlah hal yang sulit, hanya saja si pembuat harus melakukan banyak latihan agar
mendapatkan hasil yang diinginkan. Di sini kita akan mencoba membuat sebuah CD
pembelajaran kimia interaktif menggunakan software Macromedia Flash MX 2004.

Andaikan kita akan membuat sebuah CD pembelajaran kimia interaktif tentang materi sejarah
sistem periodik berisi materi, film, soal latihan dan evaluasi, maka kita sebaiknya
melakukannya dalam tiga tahap. Usahakan simpan setiap nama file sesuai dengan yang ditulis
di sini. Tahap-tahapnya adalah sebagai berikut:

A. Tahap Persiapan
   Untuk membuat CD pembelajaran interaktif sesuai dengan kriteria di atas, maka hal-hal
   yang harus dipersiapkan adalah:
   1. Materi tentang sejarah sistem periodik.
   2. Film 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. Selain itu kita membutuhkan CD sebagai alat penyimpanan program aplikasi yang
      telah kita buat. Agar pekerjaan kita lancar, disarankan untuk menggunakan komputer
      berprosessor Pentium III dengan memory 256MB.
   6. Skema isi CD pembelajaran bisa digambarkan sebagai berikut.

                                       Menu Utama




       Materi           Film        Contoh Soal dan     Evaluasi        Tentang
                                     Pembahasan                         Pembuat
B. Tahap Pembuatan
   1. Mengatur Tampilan Flash
      Langkah ini kita lakukan dengan tujuan agar kita lebih mudah bekerja. Penulis
      menggunakan sistem operasi Windows XP, untuk sistem operasi vwersi lain bisa
      menyesuaikan. Pertama kali kita buka Flash lewat Start > All Programs >
      Macromedia > Flash MX 2004. Pilih kolom Create New > Flash Document. Lalu kita
      mulai bekerja sesuai langkah-langkah berikut.
                                                                                    2



a. Kita akan berkenalan dengan muka Flash. Perhatikan gambar 1.
                                                                             8
                                                                         7
                                          2

                    1
          3             4




                                     5                       12




                6


                                 9                      10

                                     11




                                       Gambar 1
   Keterangan singkat dari gambar tersebut adalah sebagai berikut.
   1. Nama file.
   2. Menu.
   3. Tool, terutama digunakan untuk menggambar. Contoh: Rectangle Tool untuk
       membuat segi empat, Text Tool untuk membuat tulisan teks dan lain-lain.
   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.
b. Untuk mengatur tampilan, kita akan menyembunyikan panel-panel yang tidak
   dibutuhkan. Kita juga akan mengatur letak-letaknya. Pertama kita akan
   memindahkan panel actions. Klik bagian no 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.
c. 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. Tentu 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.
d. Jika bagian no 9 diklik maka panel akan disembunyikan. Ingat, disembunyikan,
   bukan ditutup. Sekarang, aturlah agar panel properties , timeline dan panel actions
   tetap ada, sementara panel lainnya ditutup semua. Panah kecil seperti yang
   ditunjukkan no 12 berfungsi untuk mengatur tampilan panel. Cobalah berlatih
   untuk menyembunyikan dan menampilkan panel dengan panah kecil ini.
                                                                                        3



2. Pembuatan Halaman Materi dan Halaman Soal Latihan dan Pembahasan.
   Kali ini kita akan membuat halaman materi. Tentu saja kita persiapkan lebih dulu
   materi yang akan kita gunakan. Untuk membuat halaman ini, lakukan langkah-langkah
   sebagai berikut.
   a. Buat sebuah file baru melalui menu File > New > Flash Document. 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.

                      Tinggi/lebar
                      Panjang

                      Latar belakang




                       Size




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




                                      Gambar 3
   c. Simpan file dengan nama file materi.fla.




                          Gambar 4
                                                                                     4



d. Misalkan materi kita tentukan terdiri dari Sistem Triade, Sistem Oktaf, SP
   Mendeleev dan SP Modern. Kita akan buat tombol keempat materi tersebut di sisi
   kiri dan ketika tombol diklik, isi materi akan ditampilkan di sebelah kanannya.
   Gunakan Text Tool untuk membuat tampilan seperti gambar 4.
e. Buat tombol baru lewat menu Insert > New Symbol. Isi name: dobereiner dan
   behavior: button. Buat layer baru.




                                         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). 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.
f. Kita kembali ke Scene1, lalu masukkan symbol dobereiner dari library ke stage.
g. 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
h. 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.
i. Kembali ke Scene1. Masukkan ketiga symbol ke dalam stage. Atur letak dan
   ukurannya melalui panel properties
j. 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, atur pula propertiesnya (misalnya lebar 600 dan
   tinggi 500). Ubah menjadi movieclip melalui menu Modify > Convert to Symbol.
                                                                                 5



   Beri name: isi dan behavior: movieclip. Pada panel properties beri nama instance
   isi_mc. Lihat gambar 8.




                     Gambar 7




               Gambar 8
k. 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.



                                            Gambar 9
l. Kita akan buat isi materi. Kita buat file baru yang nanti akan dipanggil dan
   diletakkan pada movieclip isi_mc. 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 dynamic text multiline. Lalu copy paste materi dari teks
   yang telah dipersiapkan. Lihat gambar 10. Simpan file dengan nama file
   dobereiner.fla. Buat file swf-nya dengan cara menekan tombol Ctrl + Enter.
                                                                                6




                                  Gambar 10

m. Buat tiga file lainnya (oktaf.swf, mendeleev.swf dan modern.swf) dengan cara
   seperti langkah j.
n. 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.




                                  Gambar 11

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




                            Gambar 12

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

q. Untuk tombol keluar, tambahkan script berikut pada panel actions.
             on (press, release)
             {
             fscommand("quit");
             }
                                                                                 8



r. Tekan Ctrl + Enter dan lihatlah hasil kerja Anda. Pembuatan halaman materi telah
   selesai.
s. 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




                            Gambar 14

t. 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.
u. 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.
                                                                                       9



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




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




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




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




                                                  Gambar 19
                                                                                   11



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.
   a. Pilih menu File > New. Pilih tab Template > Quiz > Quiz_style1. Lihat gambar 20.




                         Gambar 20

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


                                                            Gambar 21
   c. 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.
                                                       Gambar 22
                                                                                 12



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.




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




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



   menggunakan opsi Randomized. Opsi lainnya tidak usah kita edit. Untuk lebih
   jelasnya lihat gambar 25.




                              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.




              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
                                                                            14



jawaban yang benar. Kotak yang dicentang adalah jawaban 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.




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




                                Gambar 28
                                                                                 15



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




                                     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.




               Gambar 30                                  Gambar 31
i. 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
                                                                             16



   jawaban yang benar. Misal pada soal ini jawaban yang benar adalah pada Label
   nomor 4, maka yang dicentang hanya pada Correct nomor 4.




                                    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.




                                    Gambar 33
                                                                                  17



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




              Gambar 34

                                                    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.

                                                    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;
   }
                                                                18



_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";
    }
}

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;           Gambar 37
   display_timer= TOTALTIME-Math.ceil(tmp_num);
   return display_timer;
}

>>>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");
                                                                                    19



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




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



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




                        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.




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




                             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<<<
   fotoku._alpha=0; >>>nilai alpha = 0 berarti gambar tidak terlihat. Nilai
   maksimalnya adalah 100.
                                                                                        22



      onEnterFrame= function(){ >>>ketika memasuki frame fungsi di bawahnya
      akan dijalankan<<<
          fotoku._x=fotoku._x-10; >>>jarak dari x kita kurangi 10, hal ini dilakukan
      terus menerus, maka foto bergerak ke kiri<<<
          fotoku._alpha=fotoku._alpha+1; >>>besar alpha ditambah 1, hal ini juga
      dilakukan berulang-ulang<<<
          fotoku._y=fotoku._y; >>>jarak y tidak kita ubah agar posisi y (dari atas
      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.

                       Tinggi/lebar
                       Panjang

                       Latar belakang




                       Size




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




                                    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



                                    Gambar 44
e. Klik frame 1 layer judul pada timeline.



                                           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

                                 Rectangle Tool




                                                          Gambar 47
                                 Stroke Color: None
                                 Fill Color: Kuning


          Gambar 46
                                                                                   24



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.




                     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.




                      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.




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




                                       Gambar 51
                                                                                  25



   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.




                             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




                                      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.




                             Gambar 54
k. Kemudian kita kembali ke Scene1, caranya seperti tahap terakhir langkah nomor 7.
   Tekan Ctrl + Enter dan lihatlah hasil kerja Anda.
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.
                                                                                 26




              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.




                                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                            : URL film.swf, level root
   Tombol contoh soal dan pembahasan      : URL csp.swf, level root
   Tombol evaluasi                        : URL evaluasi.swf, level root
   Tombol tentang pembuat                 : URL about.swf, level root
                                                                                       27



      o. Agar ketika kita jalankan dari windows explorer tampilannnya terlihat fullscreen,
         kita akan tambahkan script. Klik layer actions frame 1 (gambar 57). Pada panel
         Actions tambahkan script berikut:
             fscommand("fullscreen", "true");




                                           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.




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



   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




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



      Bukalah windows explorer dengan mengklik kanan start di sisi kiri bawah komputer
      Anda, pilih explore. Kopilah semua file ke drive CD RW (misalnya drive D).
      Pindahlah ke drive D. 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.

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. Penulis menerima
pertanyaan, kritik, masukan dan saran melalui email arhie_hend@yahoo.com.
                                                            30



  Jika Anda ingin membuat media pembelajaran interaktif
   maka buku inilah jawabannnya. Media yang Anda buat
   menggunakan Macromedia Flash MX 2004, salah satu
      software canggih yang teruji dan andal di bidang
   multimedia. Anda bisa menaruh materi pelajaran, film,
soal latihan juga soal evaluasi dengan pembatas waktu dan
   identifikasi nama pengguna. Disajikan dengan metode
 tutorial akan membuat Anda lebih mudah melakukannya.
    Bahkan bagi Anda yang belum pernah menggunakan
                      Flash sekalipun.

								
To top