Membuat Media Interaktif

MEMBUAT CD INTERAKTIF PEMBELAJARAN

CD Pembelajaran Interaktif dalam modul ini akan membahas materi Matematika, Pokok Bahasan Trapesium.Untuk memulai membuat CD Pembelajaran Interaktif, langkah-langkahnya adalah sebagai berikut :

1.    Membuat folder tersendiri untuk menyimpan file-file yang akan dibuat sehingga pengorganisasian filenya akan lebih mudah dilakukan.

2.    Buatlah folder dengan nama Trapesium. Folder ini digunakan untuk menyimpan file-file depan dari cd interaktif.

3.    Buatlah folder TUTORIAL dan SIMULASI dalam folder Trapesium. Folder Tutorial dan Simulasi digunakan untuk menyimpan file-file materi dari CD Interaktif. Sehingga susunan folder akan tampak seperti Gambar 8.1

Gambar 8.1. Folder

Setelah semua file dalam CD pembelajaran interaktif ini di buat maka organisasi filenya terlihat seperti dalam Gambar 8.2

TRAPESIUM

SIFAT

LUAS

LATIHAN

DEFINISI

SIMULASI

TUTORIAL

SIFAT

SIFAT

LUAS

LUAS

LATIHAN

FOLDER

FILE

DEFINISI

Gambar 8.2. Organisasi File

Berdasarkan Gambar 8.2 terdapat 3 folder, yaitu folder Trapesium (folder utama), folder Tutorial dan folder Simulasi. File Sifat, Luas, Latihan dan Definisi dalam folder Trapesium (folder utama) adalah file-file window (jendela) utama.

Folder Tutorial berisi file Sifat, Luas, Latihan dan Definisi adalah file-file yang berisi materi yang akan dibahas. Folder simulasi yang berisi file Sifat dan Luas adalah file-file yang berisi animasi untuk memperjelas materi yang ada di folder Tutorial. Jadi walaupun nama filenya sama tetapi isinya berbeda dalam setiap folder.

A.    Halaman Utama Definisi

1.    Buka file movie flash Definisi yang ada di CD.

2.    Simpan dengan nama Definisi di folder Trapesium.

3.    Terdapat 4 buah layer, yaitu layer Mask, layer 3 (isi layer mask), layer tambahan dan layer Template. Jumlah frame yang digunakan dalam setiap layer adalah 100 frame.

4.    Buat layer baru di atas layer Mask, beri nama layer Action.

5.    Klik frame 1 layer action. Buka action panel dan berikan script berikut

Mouse.show(); fscommand("fullscreen", "true");

loadMovieNum("Tutorial/Definisi.swf",1);

6.    Klik frame 100. Buka action panel dan berikan script stop ( );

7.    Buat 4 buah layer baru di bawah layer 3. Beri nama layer-layer tersebut dengan

nama Sifat, Latihan, Definisi, Luas. (Layer ini berdiri sendiri, tidak ikut dalam layer masking).

8.    Klik frame 30 layer Sifat. Beri keyframe/insert keyframe di frame ini (Klik Insert > Keyframe).

9.    Ulangi langkah 7 untuk layer Latihan, Definisi, dan layer Luas.

10. Kembali ke layer sifat. Klik frame 30.

11. Buka Library Panel (Windows > Library). Klik and drag button sifat (symbol) ke stage.

12. Klik button sifat. Atur propertiesnya di properties panel dengan ketentuan W = 119.0, H = 30.5, X =329.0, Y = 630.5 dan Color = Alpha = 30%.

13. Klik frame 30 layer Latihan. Klik and drag button latihan ke stage.

14. Klik button latihan. Atur propertiesnya di properties panel dengan ketentuan W = 125.8, H = 75.0, X = 510.9, Y = 631.0 dan Color = Alpha = 30%.

15.   Klik frame 30 layer Definisi. Klik and drag button definisi ke stage.

16. Klik button definisi. Atur propertiesnya di properties panel dengan ketentuan W = 83.3, H = 72.4, X = 435.2, Y = 632.6 dan Color = Alpha = 30%.

17. Klik frame 30 layer Luas. Klik and drag button luas ke stage.

18. Klik button Luas. Atur propertiesnya di properties panel dengan ketentuan W = 118.0, H = 32.0, X =329.0, Y = 673.5 dan Color = Alpha = 30%.

19. Klik frame 70 layer Sifat. Klik Insert > Insert Keyframe.

20. Klik button Sifat dan ganti alphanya menjadi 100%.

21. Klik frame 30 layer sifat. Klik Insert > Create Motion Tween.

22. Ulangi langkah 19 sampai 21 untuk layer Latihan, Definisi, Luas.

23. Buat layer baru dibawah layer template. Beri nama layer Jurusan. Klik frame 1 layer jurusan dan klik and drag button jurusan dari library panel ke stage.

24. Klik button jurusan. Buka Properties panel dan ubah behaviornya menjadi Graphic.

25. Buat layer baru di bawah layer jurusan beri nama layer Musik.

26. Klik frame 1.Klik and drag sound music1 dari library panel ke stage.

27. Buat layer baru dibawah layer music beri nama Exit. Klik frame 1 dan klik and drag button exit dari library panel ke stage.

28. Klik button exit dan atur propertiesnya dengan ketentuan W = 131.0, H = 31.0, X = 782.0, Y = 63.0.

29. Klik frame 70 layer sifat. Kemudian klik button sifat di stage. Buka action panel dan berikan script berikut :

on (release) { loadMovieNum("Sifat.swf",0);

}

30. Lakukan langkah 29 untuk button Definisi, Latihan dan Luas dengan ActionScript sebagai berikut :

Button Definisi

on (release) { loadMovieNum("Definisi.swf",0);

}

Button Latihan

on (release) { loadMovieNum("Latihan.swf",0);

}

Button Luas

on (release) { loadMovieNum("Luas.swf",0);

}

31. Lakukan Test Movie, klik Control > Test Movie atau tekan Control + Enter.

B. Halaman Utama Sifat

1.    Buka file movie flash Definisi.

2.    Klik File > Save As. Beri nama Sifat dan simpan di folder Trapesium, sama seperti file Definisi.

3.    Klik frame 1 layer Action. Ganti ActionScriptnya dengan

Mouse.show();

fscommand("fullscreen", "true");

loadMovieNum("Tutorial/Sifat.swf",1);

4.    Buat dua buah layer baru di bawah layer Action, beri nama layer tersebut Tutorial dan Simulasi.

5.    Klik frame 60 layer Tutorial, klik Insert > Keyframe.

6.    Buka Library Panel (tekan F11). Klik and drag button Tutorial ke stage.

7.    Atur propertiesnya di properties panel dengan ketentuan W = 139.8, H = 24.4, X = 161.1, Y = 599.8, color = alpha = 30%.

8.    Klik frame 70 tambahkan keyframe. Ubah Alpha = 100%.

9.    Klik frame antara frame 60 samapai 70, klik Insert > Create Motion Tween atau klik kanan tombol mouse dan pilih Create Motion Tween.

10. Ulangi langkah 5 sampai 9 untuk layer Simulasi dengan properties button Simulasinya adalah W = 119.6, H = 20.9, X = 591.7, Y = 603.5.

11. Klik button Tutorial di stage. Buka Action Panel dan tambahkan script berikut

on (release) { loadMovieNum("Tutorial/Sifat.swf",1);

}

12. Klik button Simulasi di stage. Buka action panel dan tambahkan script berikut

on (release) { loadMovieNum("Simulasi/Sifat.swf",1);

}

13. Lakukan test movie, tekan Ctrl + Enter.

C. Halaman Utama Luas

1.    Buka file movie flash Sifat.

2.    Klik File > Save As, beri nama Luas dan simpan di folder Trapesium.

3.    Klik frame 1 layer Action dan ubah ActionScriptnya menjadi

Mouse.show();

fscommand("fullscreen", "true");

loadMovieNum("Tutorial/Luas.swf",1);

4.    Klik button Tutorial dan ganti actionScriptnya menjadi

on (release) { loadMovieNum("Tutorial/Luas.swf",1);

}

5.    Klik button simulasi dan ganti ActionScriptnya menjadi

on (release) {

loadMovieNum("Simulasi/Luas.swf",1);

}

6.    Lakukan Test Movie

D.   Halaman Utama Latihan

1.    Buka file movie flash Luas.

2.    Klik File > Save As, beri nama Latihan dan simpan di folder Trapesium.

3.    Klik frame 1 layer action, ganti ActionScriptnya menjadi

Mouse.show(); fscommand("fullscreen", "true"); loadMovieNum("Tutorial/Latihan.swf",1);

4.    Klik kanan layer Tutorial, pilih Delete Layer.

5.    Klik kanan layer Simulasi, pilih Delete Layer.

6.    Lakukan test movie

E.    Halaman Tutorial Definisi

1.    Buka file movie flash Definisi di folder Tutorial. Dalam file ini terdapat Layer action. Layer ini menggunakan 40 frame. Frame 30 sampai frame 40 di bagi menjadi dua buah frame number, yaitu frame number satu dan frame number dua

Gambar 8.3 Layer Action

2.    Simpan file ini di folder Tutorial dengan nama Definisi.

3.    Buat layer baru di bawah layer action, beri nama materi.

4.    Buka Library panel. Klik and drag simbol Tulisan yang mempunyai behavior Graphic ke stage. Atur propertiesnya dengan ketentuan W = 602.8, H = 333.9, X = 286.1, Y = 227.7

Gambar 8.4. Library Panel

5.    Klik frame 8 layer Materi, tambahkan keyframe Insert > Keyframe. Atur propertiesnya W = 602.9, H = 333.9, X = 225.0, Y = 227.7.

6.    Kili frame 1, klik Insert > Create Motion Tween

7.    Klik frame 31 layer materi. Klik Insert > Blank Keyframe.

8.    Klik frame 35 layer materi, klik Insert > Keyframe.

9.    Buka Library panel, klik and drag simbol Hal dua ke stage dan atur propertiesnya W = 634.0, H = 310.4, X = 286.0, Y = 226.9.

10. Klik frame 40 layer Materi, klik Insert > Keyframe. Atur propertiesnya menjadi W = 634.1, H = 310.4, X = 228.0, Y = 226.9.

11. Klik frame 35, klik Insert > Create Motion Tween.

12. Tambahkan layer baru di bawah layer materi beri nama “link”.

13. Klik and darag button gel Right di library panel ke stage dan atrur propertiesnya

W = 32.3, H = 31.1, X = 816.1, Y = 577.1.

14. Klik button gel Right buka action panel dan berikan script berikut

on (release) {

gotoAndPlay("dua");

}

15. Klik frame 35 layer link, klik Insert > Keyframe. Klik and drag button gel Left ke stage dan atur propertiesnya W = 32.3, H = 31.1, X = 780.3, Y = 577.0.

16. Klik button gel Left buka action panel dan berikan script berikut

on (release) { gotoAndPlay("satu");

}

17. Tambahkan layer baru di bawah layer link, beri nama graph. Klik frame satu, buka Library panel, klik and drag button gel Left ke stage. Atur propertiesnya

W = 32.3, H = 31.1, X = 780.0, Y = 577.5 color = Alpha 30% dan ganti behaviornya = Graphic.

18. Klik frame 35, klik Insert > Keyframe.

19. Klik and drag button gel Right ke stage dan atur propertiesnya W = 32.3, H = 31.1, X = 815.7, Y = 578.1 color = Alpha 30% dan ganti behaviornya = Graphic.

20. Lakukan Test Movie, Ctrl + Enter.

Gambar 8.5. Layer-layer File Definisi

F.    Halaman Tutorial Sifat

1.    Buka file Sifat di folder Tutorial. Dalam file ini sudah terdapat layer action yang menggunakan 74 frame.

2.    Buat layer baru di bawah layer action, beri nama layer materi.

3.    Klik and drag simbol Tulisan yang ada di Labrary Panel ke stage dan atur propertiesnya W = 575.6, H =350.1, X = 284.1, Y = 223.7.

4.    Klik frame 30, klik Insert > Keyframe, dan atur propertiesnya W = 575.6, H =350.1, X = 225.0, Y = 223.7.

5.      Klik File > Save.

6.    Lakukan Test Movie.

G.   Halaman Tutorial Luas

1.    Buka file Definisi yang ada di folder Tutorial.

2.    Klik File > Save As, beri nama Luas.

3.    Klik kanan layer Materi, pilih Delete Layer.

4.    Buat Layer baru di bawah layer Action beri nama Luas.

5.    Buka Library panel. Klik and drag simbol Luas1 yang mempunyai behavior Graphic ke stage. Atur propertiesnya dengan ketentuan W = 592.9, H = 319.9, X

=  284.1, Y = 219.7

6.    Klik frame 5 layer Luas, tambahkan keyframe Insert > Keyframe. Atur propertiesnya W = 592.9, H = 319.9, X = 225.0, Y = 219.7

7.    Klik frame 1, klik Insert > Create Motion Tween

8.    Klik frame 31 layer Luas. Klik Insert > Blank Keyframe.

9.    Klik frame 35 layer Luas, klik Insert > Keyframe.

10. Buka Library panel, klik and drag simbol Luas2 dua ke stage dan atur propertiesnya W = 625.6, H = 300.2, X = 284.3, Y = 221.8.

11. Klik frame 40 layer Materi, klik Insert > Keyframe. Atur propertiesnya menjadi W

=  625.6, H = 300.2, X = 226.3, Y = 221.8.

12. Klik frame 35, klik Insert > Create Motion Tween.

13. Lakukan Test Movie.

H.   Halaman Tutorial Latihan

1.    Buka file movie flash latihan yang ada di folder Tutorial.

2.    Buat layer abru di bawah layer Action beri nama LatSoal.

3.    Buka Library Panel, klik and drag simbol LATSOAL ke stage, atur propertiesnya

W = 151.8, H = 26.4, X = 614.0, Y = 200.1, Color = Alpha = 30%.

4.    Klik frame 5, klik Insert > Keyframe. Atur propertiesnya W = 151.8, H = 26.4, X

=  436.1, Y = 199.9, Color = Alpha = 100%.

5.    Klik frame 1, klik Insert > Create Motion Tween.

6.    Klik frame 10, klik Insert > Blank Keyframe.

7.    Buat layer baru di bawah layer LatSoal, beri nama SOAL.

8.    Klik frame 5, klik Insert > Keyframe.

9.    Klik and drag simbol Pilih ke stage, atur propertiesnya W = 517.5, H = 39.5, X = 197.0, Y = 270.9.

10. Klik and drag simbol soal1, trap 1, button pilihan ke stage dan atur posisinya sehingga terlihat seperti berikut

Gambar 8.6. Soal 1

11. Klik frame 5 layer Soal, buka Action panel dan masukkan script berikut

correct="0";

stop();

12. Klik button pilihan 50, buka Action panel dan berikan script berikut

on (release) {

correct=Number(correct)+1;

nextFrame();

}

13. Untuk button yang lain berikan scipt berikut

on (release) { nextFrame();

}

14. Klik frame 5 layer Soal, klik Edit > Copy Frame.

15. klik frame 6, klik Edit > Paste Frame.

16. Buka Action panel dan ganti scriptnya menjadi stop();

17. Klik and drag simbol soal2 ke stage, dan atur posisi dan propertinya sehingga seperti Gambar 8.7

18. Klik button pilihan 115, ganti scriptnya menjadi

on (release) {

correct=Number(correct)+1;

nextFrame();

}

19. Untuk button pilihan yang lain berikan action script sebagai berikut

on (release) { nextFrame();

}

Gambar 8.7. Soal 2

20. Klik frame 6, klik Edit > Copy Frame.

21. Klik frame 7, klik Edit > Paste Frame.

22. Klik and drag simbol soal3, Trap 2 ke stage.

23. Atur properties simbol soal3 dan ganti opsi pilihan jawaban seperti gambar 8.8.

Gambar 8.8. Soal 3.

24. Klik button pilihan 132, buka Action panel dan berikan script berikut

on (release) { correct=Number(correct)+1; nextFrame();

}

25. Untuk button pilihan yang lain, berikan script berikut

on (release) {

nextFrame();

}

26. Klik frame 7, klik Edit > Copy Frame.

27. Klik frame 8, klik Edit > Paste Frame.

28. Klik and drag simbol soal4, Trap 3 ke stage.

29. Atur properties simbol soal4 dan ganti opsi pilihan jawaban seperti gambar 8.9.

Gambar 8.9. Soal 4

30.       Klik button pilihan 65, buka Action panel dan berikan script berikut on (release) {

correct=Number(correct)+1;

nextFrame();

}

31. Untuk button pilihan yang lain, berikan script berikut

on (release) { nextFrame();

}

32. Klik frame 7, klik Edit > Copy Frame.

33. Klik frame 8, klik Edit > Paste Frame.

34. Klik and drag simbol soal5, Trap 3 ke stage.

35. Atur properties simbol soal5 dan ganti opsi pilihan jawaban seperti gambar 8.10.

Gambar 8.10. Soal 5

36. Klik button pilihan 115, buka Action panel dan berikan script berikut

on (release) { correct=Number(correct)+1; nextFrame();

}

37. Untuk button pilihan yang lain, berikan script berikut

on (release) {

nextFrame();

}

38. Klik frame 10, klik Insert > Key Frame.

39. Klik and drag simbol hasil dan simbol Anda dari Library panel ke stage. Atur posisisnya seperti Gambar 8.11.

40. Klik button Coba ke stage, atur posisinya seperti gambar 8.11.

41. Klik Text Tool pada Toolbox. Buat teks dengan jenis Input Text disamping tulisan ANDA BENAR :

Untuk membuat Input Text, setelah memilih Text Tool, buka Properties Panel dan ganti jenis teksnya menjadi Input Text. (pojok kiri atas)

42. Klik Input Text, buka Properties panel, klik kotak Variabel dan ketikkan correct. (correct = nama variabel untuk Input Text).

43. Buat Input Text lagi tempatkan di bawah Input Text yang pertama.

44. Buka Properties panel, klik kotak Variabel dan ketikkan comment.

Gambar 8.11. Frame Hasil

45. Klik button COBA LAGI, buka Action panel, berikan script berikut

on (release) { gotoAndPlay(5);

}

46. Klik frame 10 layer Soal, buka Action panel dan berikan scitp berikut stop();

if (Number(correct)==5){

comment = "PERTAHANKAN PRESTASIMU...."; }else if ((Number (correct)<=4) and (Number (correct)>=3)){

comment = "BAGUS, TERUS BELAJAR DAN BERLATIH....!!!!";

} else if ((Number (correct)<=2) and (Number (correct)>=1)){ comment = "TINGKATKAN PRESTASIMU...!!!!";

} else if ((Number (correct)==0)) {

comment = "KAMU HARUS LEBIH GIAT LAGI BELAJAR...!!!!";

}

47. Klik File > Save.

48. Lakukan Test Movie.

I.      Halaman Simulasi Sifat

1.    Buka file Sifat yang ada di folder Simulasi. Terdapat layer trapesium yang menggunakan 140 frame.

2.    Buka Library Panel. Klik and drag Simbol Tulisan dan Trapesium ke stage. Atur propertiesnya, untuk simbol Tulisan X = 306.1, Y = 198.8. Untuk simbol Trapesium X =419.1, Y = 264.3.

3.    Buat layer baru di bawah layer Trapesium, beri nama Sudut A.

4.    Klik and drag Simbol sudut A ke stage. Atur propertiesnya X = 392.8, Y = 392.1.

5.    Klik frame 20 , klik Insert > Keyframe. Klik simbol sudut A di stage pada posisi frame 20, tekan tombol Delete pada keyboard.

6.    Klik and drag Simbol A ke stage. Atur propertiesnya X = 392.8, Y = 392.1.

7.    Klik frame 40, Insert > Keyframe. Klik simbol A dan ubah propertiesnya menjadi

X = 357.8, Y = 392.1.

8.    Klik frame 20, Insert > Create Motion Tween.

9.    Klik frame 60, Insert > Keyframe. Klik simbol A dan ubah propertiesnya menjadi X = 358.8, Y = 245.1.

10. Klik frame 40, Insert > Create Motion Tween.

11. Klik frame 80, Insert > Keyframe. Klik simbol A dan ubah propertiesnya menjadi

X = 461.8, Y = 245.1.

12. Buat layer baru di bawah layer sudut A, beri nama sudut C.

13. Klik and drag Simbol sudut C ke stage. Atur propertiesnya X = 546.4, Y = 259.6.

14. Klik frame 81 , klik Insert > Keyframe. Klik simbol sudut A di stage pada posisi frame 81, tekan tombol Delete pada keyboard.

15. Klik and drag Simbol C ke stage. Atur propertiesnya X = 546.4, Y = 259.6.

16. Klik frame 99, Insert > Keyframe. Klik simbol C dan ubah propertiesnya menjadi X = 646.4, Y = 259.6.

17. Klik frame 81, Insert > Create Motion Tween.

18. Klik frame 119, Insert > Keyframe. Klik simbol C dan ubah propertiesnya menjadi X = 646.4, Y = 406.6.

19. Klik frame 99, Insert > Create Motion Tween.

20. Klik frame 140, Insert > Keyframe. Klik simbol C dan ubah propertiesnya menjadi X = 581.4, Y = 406.6.

21. Klik frame 119, Insert > Create Motion Tween.

22. Klik frame 140, buka Action panel, beri script stop();.

23. Buat layer baru di bawah layer sudut C, beri nama Kesimpulan.

24. Klik frame 140, Insert > Keyframe.

25. Klik and drag Simbol Kesimpulan ke stage. Atur propertiesnya X = 242.4, Y = 467.0.

26. Klik File > Save.

27. Lakukan Test Movie.

J. Halaman Simulasi Luas.

1.    Buka file simulasi Luas yang ada di folder simulasi. Terdapat layer Judul yang menggunakan 75 frame. Frame 1 berisi simbol judul.

2.    Buat layer baru di bawah layer Judul, beri nama layer Trapesium.

3.    Klik and drag Simbol Trapesium ke stage, atur propertiesnya X = 225.1, Y = 272.6.

4.    Buat layer baru di bawah layer Trapesium, beri nama segitiga.

5.    Klik and drag Simbol segitiga ke stage. Atur propertiesnya X = 286.6, Y = 286.1.

6.    Klik frame 25, Insert > Keyframe.

7.    Klik frame 50, Insert > Keyframe. Ubah propertiesnya menjadi X = 322.6, Y = 286.1.

8.    Klik frame 25, Insert > Create Motion Tween.

9.    Buat layer baru di bawah layer Segitiga, beri nama Rumus.

10. Klik frame 75, Insert > Keyframe.

11. Klik and drag Simbol Rumus dan Simbol Kesimpulan ke stage. Atur properties simbol Rumus X = 463.0, Y = 299.3, properties simbol Kesimpulan X = 203.1, Y = 485.1.

12. klik frame 75, buka Action panel dan berikan script stop();.

13. Klik File > Save.

14. Lakukan Test Movie.

K.   Publish Movie.

1.    Buka file Definisi yang ada di folder Trapesium (halaman utama definisi).

2.    Klik File > Publish Setting.

3.    Klik kotak Windows Projector (.exe).

4.    Klik Publish.

5.    Klik OK.

6.    Buka Windows Explorer. Buka folder Trapesium, terdapat tiga file dengan nama definisi, yaitu Definisi.fla, Definisi.swf, dan Definisi.exe.

File Definisi.exe digunakan dalam membuat CD autorun, file Definisi .exe merupakan file yang terlihat pertama kali setelah CD dimasukkan ke CD Drive

Gambar 8.12. Publish Setting

DAFTAR PUSTAKA

Andreas Andi S (2003). Menguasai Pembuatan Animasi dengan Flash MX. Jakarta, PT Elex Media Komputindo.

Nur Hadi W (2004). Tutorial Komputer Multimedia. Jurusan Pendidikan Matematika FMIPA Universitas Negeri Yogyakarta.

Home Page Macromedia (www.macromedia.com) Home Page Baba (www.babaflash.com) Home Page Situs Flash (www.flashkit.com).