Membuat media interaktif tata surya, adobe flash

Penjelasan media interaktif 


Media interaktif menjadi salah satu media pembalajaran anak untuk memudahkan dalam memahami isi pada materi belajar. Banyak penggunaan gadget membuat para orang tua sedikit resah tentang kebiasaan anak di jaman now lebih banyak menggunakan Hp/ponsel untuk bermain. Setidaknya dengan adanya media interaktif yang menarik keresahan itu dapat terbayarkan dengan adanya media interaktif ini, karena selain bermain dengan Hp/ponsel, anak sekaligus dapat belajar mengenal tata surya kita.

Software pembuatan media interaktif


Software (perangkat lunak) yang digunakan untuk membuat media interaktif adalah Adobe Flash cs 6, dan bahasa pemrograman yang digunakan adalah actioncript 3.0.


Mengapa menggunakan adobe flash cs 6 actionscript 3.0 ?


Alasan menggunakan adobe flash cs 6, karena mendukung platform seperti android namun harus menggunakan actionscript 3.0. Versi sebelumya actionscript 2.0 tidak dapat melakukan hal ini beda dengan versi barunya.

Proses pembuatan media interaktif

Adapun proses pembuatannya :

1. Buka Adobe flash cs 6 actionscript 3.0.
2. Membuat tampilan media sebagai intro seperti pada gambar di bawah ini :

Gambar 1. Halaman intro

Pada gambar diatas adalah halaman intro dari media interaktif. Disini dapat Anda lihat bahwa terdapat teks bertuliskan ALAM SEMESTA dan bar panjang di bawahnya. Bar tersebut adalah animasi "Loading" yang akan bergerak dari sisi kiri ke sisi kanan.

Dan pada timeline juga terdapat 3 buah layer, diantaranya layer 1, layer 3, dan layer 4.
Pada layer 3 di timeline terdapat motion shape.

Gambar 2. Intro, tween shape
Dan di akhir timeline terdapat script stop(), dan script gotoAndStop(1, "Scene 1");.

3. Lanjukan dengan membuat scene baru, dengan memilih Insert --> Scene. Buatlah menu utama dengan tombol play di tengahnya serta teks bertuliskan Alam Semesta.

Gambar 3. Menu utama
Pada tombol play terdapat script :

import flash.events.MouseEvent;

stop();


bt_play.addEventListener(MouseEvent.CLICK,btplay);

function btplay(e:MouseEvent):void{

  gotoAndStop(2);

}

Script tersebut sebagai navigasi yang akan mengarahkan ke frame ke 2.

4. Kemudian lanjutkan dengan membuat menu alam semesta di frame ke 2. Pada menu terdapat tombol tata surya, evaluasi, fenomena alam, dan tombol home.

Gambar 4. Menu alam semesta
Masing-masing tombol memiliki fungsi :
1. tombol tata surya mengarah ke animasi tata surya
2. tombol evaluasi mengarah ke halaman soal quiz evaluasi
3. tombol fenomena alam akan mengarah ke hal-hal yang terjadi pada alam.
4. tombol home berfungsi untuk kembali ke halaman utama

Jika kita lihat script pada halaman ini adalah sebagai berikut :

import flash.events.MouseEvent;



stop();



btnHome.addEventListener(MouseEvent.CLICK,btnhome_1);

function btnhome_1(e:MouseEvent):void{

 gotoAndStop("home");

}



bt_tata_surya.addEventListener(MouseEvent.CLICK,bttatasurya);

function bttatasurya(e:MouseEvent):void{

 gotoAndStop("tata_surya");

}

bt_evaluasi.addEventListener(MouseEvent.CLICK,btevaluasi);

function btevaluasi(e:MouseEvent):void{

 gotoAndStop("menu_evaluasi");

}

bt_gejala_alam.addEventListener(MouseEvent.CLICK,btgejalaalam);

function btgejalaalam(e:MouseEvent):void{

 gotoAndStop("gejala_alam");

}

5. Lanjut ke frame 3, terdapat halaman evaluasi.

Gambar 5. Halaman evaluasi
Pada evaluasi terdapat tombol soal, puzzle dan tombol kembali. 
Adapun fungsi dari masing-masing tombol sebagia berikut :
1. tombol soal mengarah ke halaman soal quiz
2. tombol puzzle mengarah ke halaman susun puzzle tata surya
3. tombol kembali mengarahkan Anda ke halaman menu alam semesta

script yang digunakan pada frame ini adalah :


import flash.events.MouseEvent;



stop();

bt_back.addEventListener(MouseEvent.CLICK,btback);

function btback(e:MouseEvent):void{

 prevFrame();

}



bt_soal.addEventListener(MouseEvent.CLICK,btsoal);

function btsoal(e:MouseEvent):void{

 gotoAndStop("soal");

}

bt_puzzle.addEventListener(MouseEvent.CLICK,btpuzzle);

function btpuzzle(e:MouseEvent):void{

 gotoAndStop("puzzle");

}

6. Lanjutkan dengan membuat tampilan evaluasi di frame berikutnya. Pada media ini saya membuat tampilan soal evaluasi seperti yang terlihat pada gambar di bawah ini :

Gambar 6. Halaman depan evuluasi

Pada halaman depan evaluasi terdapat seorang anak menjelaskan bagaimana banyak soal di kuis ini. Dan juga terdapat tombol :
1. tombol home
2. tombol kembali

Adapun script pada halaman depan evaluasi :

import flash.events.MouseEvent;

stop();



// acak soal ---------

 var soal:Array = new Array(2,3,4,5,6,7,8,9,10,11,12);

 var sudah:Array = new Array(0,0,0,0,0,0,0,0,0,0);

 var hasil:Array = new Array(0,0,0,0,0,0,0,0,0,0);



//kuis.bt_next.visible=false;



var jawabanBenar:Boolean=false;

var nosoal:Number=0;

var naik:int=-1;



function nextSoal():void{

 nosoal+=1;

}



btnHome2.addEventListener(MouseEvent.CLICK,btnhome_2);

function btnhome_2(e:MouseEvent):void{

 gotoAndStop("menu_evaluasi");

}


Halaman depan di convert ke bentuk movie clip dengan menekan F8

Gambar 7. Convert ke movie clip
Kemudian pilih OK.

Lanjutkan dengan membuat banyak key frame di dalam mode edit evaluasi untuk membuat soal-soal evaluasi.

Gambar 8. Mode edit evaluasi
Pada frame 1 di mode edit evaluasi terdapat script berikut ini :

var _root:MovieClip = MovieClip(root);

var score:Number;

score=0;

import flash.display.MovieClip;

import flash.events.MouseEvent;

import flash.events.Event;

trace("score anda adalah "+score);

no_soal_txt.visible=false;



function noSoalKuis():void{

 no_soal_txt.text=""+_root.nosoal;

}

noSoalKuis();

var t:int;

var kosong:int;

var item:int;

var acakfor:int;



function acak_soal() {

 for (t=0; t<10; t++) {

  acakfor=t;

  kosong = 0;

  trace(kosong);

  while (kosong == 0) {

   item = Math.floor(Math.random()*10);

   if(_root.sudah[item]==0){

    kosong = 1;

    _root.sudah[item] = 1;

    _root.hasil[acakfor] = _root.soal[item];

   }

  }

 }

}

//trace(hasil);

acak_soal();



stage.addEventListener(Event.ENTER_FRAME,pHasil);

function pHasil(e:Event):void{

 if(_root.nosoal>=11){

  gotoAndStop("hasil");

 }

}



bt_next.addEventListener(MouseEvent.CLICK,btnext);

function btnext(e:MouseEvent):void{

 no_soal_txt.visible=true;

 _root.nosoal+=1;

 no_soal_txt.text=""+_root.nosoal;

 _root.naik+=1;

 if(_root.nosoal<=10){

  gotoAndStop(_root.hasil[_root.naik]);

 }

}


Penjelasan :

Nah, pada frame 1 adalah halaman depan sebelum masuk kuis. pada frame 2 sudah terdapat soal kuis sampai dengan frame 12. Pada fame 13 adalah hasil akhir kuis. Berikut bentuk dari frame 2 :

Gambar 9. Halaman soal kuis di frame 2
Pada gambar diatas terdapat tombol pilihan jawaban, tombol jupiter, venus, mars, dan bumi. Dan ada juga tombol next untuk kesoal berikutnya.
script pada halaman ini adalah sebagai berikut :

// jupiter



import flash.events.MouseEvent;

bt_next.visible=false;

stop();

select_txt.text=". . ."; // select_txt adalah sebuah kolom yang akan menampilkan pilihan Anda

jupiter.addEventListener(MouseEvent.CLICK,btjupiter);

venus.addEventListener(MouseEvent.CLICK,btvenus);

mars.addEventListener(MouseEvent.CLICK,btmars);

bumi.addEventListener(MouseEvent.CLICK,btbumi);



function btjupiter(e:MouseEvent):void{

 score+=10;

 bt_next.visible=true;

 select_txt.text="jupiter";

}

function btvenus(e:MouseEvent):void{

 trace("salah");

 score+=0;

 bt_next.visible=true;

 select_txt.text="venus";

}

function btmars(e:MouseEvent):void{

 score+=0;

 trace("salah");

 bt_next.visible=true;

 select_txt.text="mars";

}

function btbumi(e:MouseEvent):void{

 score+=0;

 trace("salah");

 bt_next.visible=true;

 select_txt.text="bumi";

}

10. Script soal dibuat sama, tetapi perbedaannya hanya pada nama pilihan jawabannya. Buatlah soal berikut adalah sama serta script yang digunakan sama namun penamaan button pada kuis dibuat berbeda.

11. Pada frame 13 di akhir kuis dibuat seperti pada gambar dibawah ini :

Gambar 10. Halaman akhir kuis

Terdapat kolom skor serta tombol kembali dan tombol main lagi. Fungsi masing-masing tombol adalah :
1.  tombol kembali untuk mengarahkan ke halaman menu evaluasi
2.  tombol main lagi mengarahkan Anda ke halaman kuis.

Adapun script pada skor adalah :

stop();

score_txt.text=""+score;

bt_mainlagi.addEventListener(MouseEvent.CLICK,mainlagi);

function mainlagi(e:MouseEvent):void{

 _root.gotoAndStop("main_lagi");

}

bt_kembali.addEventListener(MouseEvent.CLICK,keluarmain);

function keluarmain(e:MouseEvent):void{

 _root.gotoAndStop("halaman1");

 trace("keluar dari game");

}

12. Lanjutkan dengan membuat halaman animasi tata surya, tampilannya dapat Anda lihat seperti pada gambar di bawah ini :

Gambar 11. Animasi tata surya
Pada gambar terdapat sususan tata surya yang bergerak sesuai dengan rute-nya. Dari banyaknya planet-planet ini Anda dapat memilihnya (klik) untuk menampilkan informasi dari planet tersebut. Misalkan memilih matahari, makan akan mengarah ke halaman nama planet :

Gambar 12. Halaman nama planet

Untuk mengarahkan anda ke halaman nama planet menggunakan script gotoAndStop("nama_planet") atau ke frame nama planet tujuan.

13. Berikut dengan membuat halaman fenomena alam di frame berikutnya :

Gambar 13. Halaman fenomena alam

Pada halaman ini terdapat gambar dari fenomena alam dan terdapat tombol next dan prev, serta tombol home. Script yang akan digunakan disini untuk mengarahkan ke halaman fenomena berikutnya adalah gotoAndStop() atau nextFrame, dan prevFrame(), Anda dapat menggunakan salah satunya.

14. Lanjutkan dengan membuat halaman puzzle. Halaman ini melatih kemampuan otak kita untuk mengingat letak/posisi planet-planet yang telah diacak. Seperti pada gambar di bawah, Anda diminta untuk menyusunnya dan jika berhasil akan menampilkan sebuah notifikasi "BERHASIL" dengan tulisan "Puzzle tersusun sempurna" serta terdapat tombol kembali, dan tombol main lagi.

Bisa Anda temukan proses lengkapnya pembuatan game puzzle di game puzzle tata surya.

Gambar 14. Puzzle tata surya
Adapun script pada game puzzle ini adalah sebagai berikut :

import flash.events.MouseEvent;

import flash.events.Event;



stop();

berhasil_puzzle.visible=false;

var poin_matahari:Boolean=false;

var poin_markurius:Boolean=false;

var poin_venus:Boolean=false;

var poin_bumi:Boolean=false;

var poin_mars:Boolean=false;

var poin_jupiter:Boolean=false;

var poin_saturnus:Boolean=false;

var poin_uranus:Boolean=false;

var poin_neptunus:Boolean=false;

var poin_pluto:Boolean=false;



// matahari

p_matahari.addEventListener(MouseEvent.MOUSE_DOWN,pmatahari_drag);

function pmatahari_drag(e:MouseEvent):void{

 p_matahari.startDrag();

}

p_matahari.addEventListener(MouseEvent.MOUSE_UP,pmatahari_drop);

function pmatahari_drop(e:MouseEvent):void{

 stopDrag();

 if(p_matahari.hitTestObject(mark_matahari)){

  p_matahari.mouseEnabled=false;

  p_matahari.x=mark_matahari.x;

  p_matahari.y=mark_matahari.y;

  poin_matahari=true;

 }

}



// markurius

p_markurius.addEventListener(MouseEvent.MOUSE_DOWN,pmarkurius_drag);

function pmarkurius_drag(e:MouseEvent):void{

 p_markurius.startDrag();

}

p_markurius.addEventListener(MouseEvent.MOUSE_UP,pmarkurius_drop);

function pmarkurius_drop(e:MouseEvent):void{

 stopDrag();

 if(this.hitTestObject(mark_markurius)){

  p_markurius.mouseEnabled=false;

  p_markurius.x=mark_markurius.x;

  p_markurius.y=mark_markurius.y;

  poin_markurius=true;

 }

}



// venus

p_venus.addEventListener(MouseEvent.MOUSE_DOWN,pvenus_drag);

function pvenus_drag(e:MouseEvent):void{

 p_venus.startDrag();

}

p_venus.addEventListener(MouseEvent.MOUSE_UP,pvenus_drop);

function pvenus_drop(e:MouseEvent):void{

 stopDrag();

 if(p_venus.hitTestObject(mark_venus)){

  p_venus.mouseEnabled=false;

  p_venus.x=mark_venus.x;

  p_venus.y=mark_venus.y;

  poin_venus=true;

 }

}



// bumi

p_bumi.addEventListener(MouseEvent.MOUSE_DOWN,pbumi_drag);

function pbumi_drag(e:MouseEvent):void{

 p_bumi.startDrag();

}

p_bumi.addEventListener(MouseEvent.MOUSE_UP,pbumi_drop);

function pbumi_drop(e:MouseEvent):void{

 stopDrag();

 if(p_bumi.hitTestObject(mark_bumi)){

  p_bumi.mouseEnabled=false;

  p_bumi.x=mark_bumi.x;

  p_bumi.y=mark_bumi.y;

  poin_bumi=true;

 }

}



// mars

p_mars.addEventListener(MouseEvent.MOUSE_DOWN,pmars_drag);

function pmars_drag(e:MouseEvent):void{

 p_mars.startDrag();

}

p_mars.addEventListener(MouseEvent.MOUSE_UP,pmars_drop);

function pmars_drop(e:MouseEvent):void{

 stopDrag();

 if(p_mars.hitTestObject(mark_mars)){

  p_mars.mouseEnabled=false;

  p_mars.x=mark_mars.x;

  p_mars.y=mark_mars.y;

  poin_mars=true;

 }

}



// jupiter

p_jupiter.addEventListener(MouseEvent.MOUSE_DOWN,pjupiter_drag);

function pjupiter_drag(e:MouseEvent):void{

 p_jupiter.startDrag();

}

p_jupiter.addEventListener(MouseEvent.MOUSE_UP,pjupiter_drop);

function pjupiter_drop(e:MouseEvent):void{

 stopDrag();

 if(p_jupiter.hitTestObject(mark_jupiter)){

  p_jupiter.mouseEnabled=false;

  p_jupiter.x=mark_jupiter.x;

  p_jupiter.y=mark_jupiter.y;

  poin_jupiter=true;

 }

}



// saturnus

p_saturnus.addEventListener(MouseEvent.MOUSE_DOWN,psaturnus_drag);

function psaturnus_drag(e:MouseEvent):void{

 p_saturnus.startDrag();

}

p_saturnus.addEventListener(MouseEvent.MOUSE_UP,psaturnus_drop);

function psaturnus_drop(e:MouseEvent):void{

 stopDrag();

 if(p_saturnus.hitTestObject(mark_saturnus)){

  p_saturnus.mouseEnabled=false;

  p_saturnus.x=mark_saturnus.x;

  p_saturnus.y=mark_saturnus.y;

  poin_saturnus=true;

 }

}





// neptunus

p_neptunus.addEventListener(MouseEvent.MOUSE_DOWN,pneptunus_drag);

function pneptunus_drag(e:MouseEvent):void{

 p_neptunus.startDrag();

}

p_neptunus.addEventListener(MouseEvent.MOUSE_UP,pneptunus_drop);

function pneptunus_drop(e:MouseEvent):void{

 stopDrag();

 if(p_neptunus.hitTestObject(mark_neptunus)){

  p_neptunus.mouseEnabled=false;

  p_neptunus.x=mark_neptunus.x;

  p_neptunus.y=mark_neptunus.y;

  poin_neptunus=true;

 }

}



// uranus

p_uranus.addEventListener(MouseEvent.MOUSE_DOWN,puranus_drag);

function puranus_drag(e:MouseEvent):void{

 p_uranus.startDrag();

}

p_uranus.addEventListener(MouseEvent.MOUSE_UP,puranus_drop);

function puranus_drop(e:MouseEvent):void{

 stopDrag();

 if(p_uranus.hitTestObject(mark_uranus)){

  p_uranus.mouseEnabled=false;

  p_uranus.x=mark_uranus.x;

  p_uranus.y=mark_uranus.y;

  poin_uranus=true;

 }

}



// pluto

p_pluto.addEventListener(MouseEvent.MOUSE_DOWN,ppluto_drag);

function ppluto_drag(e:MouseEvent):void{

 p_pluto.startDrag();

}

p_pluto.addEventListener(MouseEvent.MOUSE_UP,ppluto_drop);

function ppluto_drop(e:MouseEvent):void{

 stopDrag();

 if(p_pluto.hitTestObject(mark_pluto)){

  p_pluto.mouseEnabled=false;

  p_pluto.x=mark_pluto.x;

  p_pluto.y=mark_pluto.y;

  poin_pluto=true;

 }

}



// button di dalam berhasil puzzle



berhasil_puzzle.bt_mainlagi_2.addEventListener(MouseEvent.CLICK,mainlagi_2);

berhasil_puzzle.bt_kembali_2.addEventListener(MouseEvent.CLICK,kembali_2);



function mainlagi_2(e:MouseEvent):void{

 stage.removeEventListener(Event.ENTER_FRAME, stagecomplete);

 gotoAndStop("main_lagi_puzzle");

}

function kembali_2(e:MouseEvent):void{

 stage.removeEventListener(Event.ENTER_FRAME, stagecomplete);

 gotoAndStop("menu_evaluasi");

}



stage.addEventListener(Event.ENTER_FRAME, stagecomplete);

function stagecomplete(e:Event):void{

 if(poin_matahari && poin_markurius && poin_venus && poin_bumi && poin_mars

    && poin_jupiter && poin_saturnus && poin_uranus && poin_neptunus && poin_pluto){

  berhasil_puzzle.visible=true;

 }

}

Jika keseluruhan langkah diatas dapat diikuti dengan benar, maka media dapat berjalan dengan lancar.

Note : Tutorial ini untuk tingkat menegah.



Membuat media interaktif tata surya, adobe flash Membuat media interaktif tata surya, adobe flash Reviewed by Ardy S on December 29, 2017 Rating: 5

No comments:

Powered by Blogger.