MODUL PELATIHAN DASAR-DASAR MEDIA PEMBELAJARAN

Author: Dita Estu Permanen Label::

• Toolbox

• Tools
  Tool berfungsi untuk mengatur atau mengedit objek atau animasi yang sedang kita buat. Tool ini juga adalah salah satu bagian terpenting dalam macromedia flash 8.
  > Arrow Tool, digunakan untuk memilih objek. Dengan sebuah klik berarti kita memilih objek tersebut, dengan klik ganda berarti kita memilih objek dan seluruh komponen yang dimilikinya.
  > Subselect Tool, digunakan untuk memodifikasi suatu garis yang dibuat dengan Pen Tool.
  > Free Transform Tool, digunakan untuk memodifikasi bentuk dari suatu objek.
  > Fill Transform Tool, digunakan untuk memodifikasi bentuk dan posisi dari gradient fills.
  > Line Tool, digunakan untuk membuat garis. Bila kita membuat garis sembari menekan tombol SHIFT, maka akan terbentuk garis yang tepat horizontal,vertical atau miring 45 derajat.
  > Lasso Tool, digunakan untuk memilih suatu area secara tidak teratur. Semua yang termasuk areanya akan terpilih.
  > Pen Tool, digunakan untuk membuat kurva-kurva atau bentuk bebas.
  > Text Tool, digunakan untuk membuat teks box yang dapat kita isi dengan berbagai tulisan.
  > Oval Tool, digunakan untuk membuat objek elips (oval). untuk membuat lingkaran sempurna, pergunakan tool ini sembari meneka tombol SHIFT.
  > Ractangle Tool, digunakan untuk membuat bentuk persegi. Bila kita ingin membuat bentuk bujur sangkar secara sempurna, gunakan tool ini sembari menekan tombol SHIFT.
  > Pencil Tool, digunakan untuk membuat garis. Bila kita membuat garis sembari menekan tombol SHIFT, maka akan terbentuk garis yang tepat horizontal,vertical atau miring 45 derajat.
  > Brush Tool, digunakan untuk menggambar dengan kuas secara bebas, tool ini mempunyai beberapa pilihan untuk mengontrol beberapa efek dari sapuan kuas  kita.
  > Ink Bottle Tool, digunakan untuk mewarnai suatu garis.
  > Paint Bucket Tool, digunakan untuk memodifikasi warna dan gradasi warna didalam suatu objek.
  > Eyedropper Tool, digunakan untuk mengambil warna yang berasal dari suatu objek didalam stage sehingga kita bisa menyamakan warna ketika menggambar.
  Eraser Tool, digunakan untuk menghapus suatu gambar/objek.
  
       View
  > Hand Tool, digunakan untuk menggulung stage disegala arah seolah oleh anda menggunakan scroller 360 derajat.
  > Zoom Tool, digunakan untuk memperbesar atau memperkecil tampilan objek.
  
        Colors
  > Stroke Color, digunakan untuk memodifikasi outline/border warna suatu objek.
  > Fill Color, digunakan untuk memodifikasi  isi warna pada objek.
  
       Options
  bagian options menyediakan tool setting yang menyertai tool yang sedang aktif.
  
  
  • Stage
  Stage adalah area tempat kita bekerja dan membuat objek atau animasi. Ibarat kita seorang Pelukis, stage adalah kertas gambarnya.
  
  
  • Timeline
  Timeline adalah jalur/garis untuk mengatur berjalannya animasi dari frame ke frame.
  
  
  
  • Property Inspector
  Property inspector dalam Flash berisi property dari objek yang kita pilih menggunakan Selection Tool. Tiap objek yang kita pilih memilikin property yang berbeda-beda dengan objek lainnya.
  
  
  
  • Panel
  Panel  merupakan kotak dialog yang berguna untuk melihat, mengatur dan mengubah elemen-elemen atau objek didalam macromedia flash 8. Color serta Library juga termasuk kepada panel.
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  MEMBUAT TOMBOL NAVIGASI SEDERHANA
  1.   Buka program flash tentunya, setelah itu buat file baru dengan properties tertentu, saya pakai ukuran 800x600.
  
  

  Pada frame 1 buat teks dengan Teks Tool dan propertisnya teks statis bertuliskan “Home”.
  
  Klik frame 1, kemudian ganti “Frame label” dengan “home” setelah itu tekan Enter.
  
  Klik kanan frame 10 pilih Insert Blank Keyframe, kemudian buat teks statis “Materi”. Klik lagi frame 10 dan ganti “Frame label” dengan “materi” dan tekan Enter.
  
  
  
  
  
  .   Buat lagi seperti langkah no. 4 diatas pada frame 20 dengan teks statis bertuliskan “Latihan” dan “Frame label” diganti dengan “latihan”, kemudian pada frame 30 dengan teks statis bertuliskan “Contoh” dan “Frame label” diganti dengan “contoh”.
  Buat layer baru dan beri nama layer dengan nama “tutup” dengan cara klik dua kali pada tulisan “Layer 2”. Kemudian klik frame satu layer “tutup” dan buat teks statis “Tutup”.
  
  
  
  
  Kemudian klik kanan pada tulisan “Tutup” pilih Convert to Symbol pilih type button dan beri nama “tutup_btn” dan klik ok.
  
  
  
  
  1.   Buat layer baru lagi dan beri nama “tombol”.
  Klik pada frame satu layer “tombol “ kemudian import tobol dari panel Component. Caranya adalah dengan klik Windows kemudian pilih components. Dari panel Componens pilih User interface kemudian pilih button. Kemudian drag(klik tanpa dilepaskan) dan geser kedalam stage.
  
  
  
  
  
  
  
  
  
  
  kemudian tutup panel Components dan rubah Instance name dari keempat button tersebut masing masing “home_btn”, “materi_btn”, “latihan_btn”, “contoh_btn” dan lebelnya masing masing “home”, “materi”, “latihan”, “contoh” dengan cara klik satu persatu dan merubahnya pada panel parameters.
  
  
  
  1.   Buat layer baru lagi dan rubah namanya “skrip”, klik pada frame pertama dan buka jendela Actions kemudian masukan Action Script di bawah ini :
  stop()
  home_btn.onPress = function(){ 
  gotoAndStop("home"); 
  } 
  materi_btn.onPress = function(){ 
  gotoAndStop("materi");
  }
  latihan_btn.onPress = function(){ 
  gotoAndStop("latihan");
  } 
  contoh_btn.onPress = function(){ 
  gotoAndStop("contoh"); 
  }
  
  
  2. Kemudian klik kanan tombol tutup dan pilih Actions dan masukan Action Script di bawah ini :
  on(release){ 
  fscommand("quit","true");
  }
  
  
  3.  Langkah terakhir adalah menyimpan dokumen, beri nama Tombol navigasi.
  4. Kemudian Klik Ctrl+Enter. Dan lihat hasilnya pada tempat dimana kita menyimpannya, selesai.
  
  
  membuat efek suara dasar
  Berikut adalah langkah-langkah menambahkan sound pada interface dan event (kondisi) button:
  ·         Misal terdapat sebuah file flash dengan 2 layer. Layer 1 akan diisi background music, dan layer 2 diisi dengan tombol.
  
  
  
  
  
  Untuk memasukkan file sound ke library, pilih file, import, import to library
  
  
  
  
  
  Pilih file sound.. jika ingin memasukkan file sound lain, ulangi tahap sebelumnya
  
  ·         Klik ok, tunggu beberapa saat.
  
  ·         File sound yang telah berhasil di import akan disimpan pada panel library.
  ·         Klik pada layer 1, background, untuk menyisipkan background music. Perhatikan panel properties, pada bagian sound, pilih file sound yang akan dimainkan.
  
  
  
  
  
  ·         Pengaturan efek sound dapat diatur pada bagian effect.
  
  
  
  
  
  ·         Background music sudah dapat dimainkan. Tekan Ctrl+Enter.
  ·         Untuk kasus menambahkan sound pada button, double klik pada button.
  
  ·         Pilih kondisi button pada timeline (up=saat muncul, over=saat disorot, down=saat ditekan, hit=saat telah selesai ditekan).
  
  MEMBUAT KUIS SEDERHANA (+XML)
  
  
  Mari kita mulai pembuatannya.
  • Langkah awal adalah membuat layout untuk kuis, kuis ini hanya berisi multiple choice (pilihan ganda), jadi di sini saya menggunakan radio button.
  • Untuk mengambil radio button, kita cukup mengambilnya pada menu Window -> Components, atau cukup tekan Ctrl + F7.
  
  
  
  
  
  
  
  
  
  Components
  • Sekarang akan muncul panel seperti berikut ini, pilih radio button, drag (seret) ke dalam stage sebanyak 4 buah.
  
  
  
  
  
  RadioButton
  • Rapikan masing-masing radio button, kemudian berikan Instance Name untuk setiap radio button yang ada, yaitu radio1, radio2, radio3, dan radio4.
  
  
  
  
  
  
  • Instance Name
    
    
    Sekarang buat Dynamic Text dengan Text Tool, letakkan di atas radio button, dynamic text ini berguna sebagai soal. 
  
  
  
  
  
  • Soal
    
    
    • Jangan lupa untuk meng-embed-kan font, hal ini penting, karena jika tidak, maka font kita tidak akan tampil pada komputer yang tidak memiliki font tersebut
    • Sekarang kita menambahkan frame lagi, sehingga total framenya ada 2. Klik kanan pada frame 2, pilih insert blank keyframe. Sehingga hasilnya seperti ini:
  
  
  
  
  
  
  
  
  
  
  
  Insert Blank KeyFrame
  
  
  • Simpan file flash ini sekarang pada suatu folder.
  • Buat sebuah file data.xml yang berada satu folder dengan file flash kita.
  • 
    data.xml
    • Isi file data.xml dengan teks berikut :
    •  
    ·         <quiz>
    ·           <pertanyaan>
    ·                  <soal>Binatang apakah yang tidak memiliki cakar ?</soal>
    ·                  <jawaban no="1" label="Kucing" />
    ·                  <jawaban no="2" label="Tikus" />
    ·                  <jawaban no="3" label="Anjing" />
    ·                  <jawaban no="4" label="Cacing" />
    ·                  <jawabanbenar no="4" />
    ·           </pertanyaan>
    ·           <pertanyaan>
    ·                  <soal>Apakah situs flashindonesia.org bagus ?</soal>
    ·                  <jawaban no="1" label="Bagus" />
    ·                  <jawaban no="2" label="Jelek" />
    ·                  <jawaban no="3" label="Sangat Jelek" />
    ·                  <jawaban no="4" label="Parah" />
    ·                  <jawabanbenar no="4" />
    ·           </pertanyaan>
    ·           <pertanyaan>
    ·                  <soal>Kenapa bumi bulat ?</soal>
    ·                  <jawaban no="1" label="Karena dari sananya." />
    ·                  <jawaban no="2" label="Karena ciptaan tuhan" />
    ·                  <jawaban no="3" label="Karena memang bulat" />
    ·                  <jawaban no="4" label="Benar semua" />
    ·                  <jawabanbenar no="4" />
    ·           </pertanyaan>
    ·           <pertanyaan>
    ·                  <soal>Siapa bapak presiden kita sekarang ?</soal>
    ·                  <jawaban no="1" label="Soekarno" />
    ·                  <jawaban no="2" label="Susilo Bambang Yudhoyono" />
    ·                  <jawaban no="3" label="Megawati Soekarno Putri" />
    ·                  <jawaban no="4" label="Bacharuddin Jusuf Habibie" />
    ·                  <jawabanbenar no="2" />
    ·           </pertanyaan>
    ·         </quiz>
    
    
    
    
    ·         ·  Sekarang saatnya kita mengetik scriptnya klik pada frame 1, kemudian tekan F9. Ketikkan script berikut

    ·         stop();

    ·         //deklarasi objek soal

    ·         var arraySoal:Array = new Array();

    ·          

    ·         //deklarasi XML

    ·         var myXML:XML = new XML();

    ·         myXML.ignoreWhite = true;

    ·         myXML.load("data.xml");

    ·         myXML.onLoad = function(success) {

    ·           if (success) {

    ·                  var myNode = myXML.firstChild.childNodes;

    ·                  for (i=0; i<myNode.length; i++) {

    ·                          //mengambil data dari XML

    ·                          var soal = myNode[i].childNodes[0].firstChild;

    ·                          var jawaban1 = myNode[i].childNodes[1].attributes.label;

    ·                          var jawaban2 = myNode[i].childNodes[2].attributes.label;

    ·                          var jawaban3 = myNode[i].childNodes[3].attributes.label;

    ·                          var jawaban4 = myNode[i].childNodes[4].attributes.label;

    ·                          var jawabanBenar = myNode[i].childNodes[5].attributes.no;

    ·                          

    ·                          //memasukkannya ke dalam object

    ·                          var obj = new Object();

    ·                          obj.soal = soal;

    ·                          obj.jawaban1 = jawaban1;

    ·                          obj.jawaban2 = jawaban2;

    ·                          obj.jawaban3 = jawaban3;

    ·                          obj.jawaban4 = jawaban4;

    ·                          obj.jawabanBenar = jawabanBenar;

    ·          

    ·                          //memasukkan ke dalam array

    ·                          arraySoal.push(obj);

    ·                  }

    ·                  prosesSoal();

    ·           }

    ·         };

    ·         //counter digunakan sebagai nomor soal

    ·         var counter = 0;

    ·         //jawaban benar akan terisi pada proses soal

    ·         var jawabanBenar = 0;

    ·         //nilai awal

    ·         var nilai = 0;

    ·          

    ·         function prosesSoal() {

    ·           //jika soal masih ada

    ·           if (counter<arraySoal.length) {

    ·                  //mengambil soal pada nomor ke-counter

    ·                  var obj = arraySoal[counter];

    ·                  //mengubah tampilan

    ·                  pertanyaan_txt.text = obj.soal;

    ·                  radio1.label = obj.jawaban1;

    ·                  radio2.label = obj.jawaban2;

    ·                  radio3.label = obj.jawaban3;

    ·                  radio4.label = obj.jawaban4;

    ·                  jawabanBenar = obj.jawabanBenar;

    ·                  radio1.selected = false;

    ·                  radio2.selected = false;

    ·                  radio3.selected = false;

    ·                  radio4.selected = false;

    ·                  //meingkatkan counter

    ·                  counter++;

    ·           } else {

    ·                  //jika soal habis, maka menuju ke halaman 2

    ·                  gotoAndStop(2);

    ·           }

    ·         }

    ·          

    ·         function cekSoal(jawaban:Number) {

    ·           if (jawaban == jawabanBenar) {

    ·                  //menambah nilai

    ·                  nilai += 10;

    ·                  trace("benar");

    ·           }

    ·           prosesSoal();

    ·         }

    ·          

    ·         var listenerObject:Object = new Object();

    ·         listenerObject.click = function(eventObj:Object) {

    ·           //saat di-klik

    ·           if (eventObj.target == radio1) {

    ·                  cekSoal(1);

    ·           } else if (eventObj.target == radio2) {

    ·                  cekSoal(2);

    ·           } else if (eventObj.target == radio3) {

    ·                  cekSoal(3);

    ·           } else if (eventObj.target == radio4) {

    ·                  cekSoal(4);

    ·           }

    ·         };

    ·          

    ·         //memberikan event click pada radiobutton

    ·         radio1.addEventListener("click",listenerObject);

    ·         radio2.addEventListener("click",listenerObject);

    ·         radio3.addEventListener("click",listenerObject);

    ·         radio4.addEventListener("click",listenerObject);

    
    
    · 
    ·  Koding di atas menjelaskan jika soal habis, maka kita menuju frame 2. Nah, berarti sekarang klik frame 2, tambahkan sebuah dynamic text dengan nama variabel yaitu nilai. Jangan lupa untuk tidak mencentang Auto Kern. 
    
    Nilai
    ·  Kurang lengkap rasanya jika tidak kita berikan tombol kembali. Buat tombol kembali seperti di bawah ini, beri instance name berupa kembali_btn. 
    
    
    
    
    
  
  
  Tombol Kembali
  ·  Karena tombol membutuhkan script, maka kita tambahkan saja di frame 2. Klik frame 2 dan tekan F9.

  1	kembali_btn.onRelease=function(){
  2	gotoAndStop(1);

  
  

  3	counter = 0;
  4	nilai = 0;

  
  

  5	prosesSoal();
  6	}

  ·  Sekarang test movienya
  
  
  
  
  Masking
  Sekarang kita akan belajar tentang masking. Bagi yang belum tau, apa sih masking itu ? Masking adalah menampilkan suatu gambar dengan batas dari gambar lain, misal kita ingin melakukan masking antara Layer 
  1 dan Layer 2 sebagai mask, maka hasilnya akan seperti ini :
  
  
  
  
  setelah
  Jadi jelas bahwa, Layer 2 sebagai “Masker” akan menampilkan semua yang ada di bawahnya (Maksudnya semua yang warnanya hijau).
   Sekarang kita bahas cara2nya
  
  
  
  
  • Seperti biasa kita buat sebuah dokumen baru flash.
  • Kemudian kita berikan gambar background di layer 1 misal sebuah kota. 
  • 
    
  
  
  
  
  
  
  
  kota (klik untuk memperbesar)
  
  
  • Lalu kita buat satu layer lagi dengan cara insert -> Timeline -> Layer, dan otomatis namanya akan menjadi Layer 2.
  • Atur posisi layer 2 di atas layer 1 seperti gambar. 
  • 
  
  
  masking belum diatur
  • Kemudian kita klik pada Layer 2 pada frame 1 kemudian buat sebuah bola.
  • 
  
  

• Rencananya kita membuat sebuah teropong yang berjalan dari kiri ke kanan. Jadi terlebih dahulu kita ubah bolanya menjadi movieclip. Caranya yaitu, seleksi bola yang tadi kita buat dengan cara meng-klik 2 kali.
• Kemudian klik kanan bola tersebut dan pilih COnvert to Symbol. Atur seperti yang ada di gambar.
• 
• convert to symbol
  Nah, bola sudah jadi MovieClip, maka kita bisa menganimasikannya caranya klik pada frame 20 Layer 2, kemudian klik kanan dan pilih Insert Keyframe. Lakukan hal yang sama pada frame 10. 
  
  insert keyframe
  • Kemudian seleksi frame 1 sampai 20 pada layer 2 dan klik kanan dan pilih Create Motion Tween.
  • 
  • create motion tween
  • Sekarang kita menggeser bola ke kanan, caranya klik frame 10 pada layer 2 (tepat di keyframe). Kemudian geser bola dari posisi awal ke kanan. Hal ini dimaksudkan ketika frame 1, bola berada di kiri, lalu frame 10 bola berada di kanan, lalu frame 20 bola kembali berada di kiri.
  • Sekarang insert frame (sudah tau caranya kan ?) pada frame 20 layer 1. 
  • 
  • insert frame
  • Sekarang sentuhan akhirnya ya ini yang bikin bisa masking. Caranya klik pada Layer 2, kemudian klik kanan dan pilih Mask. Maka hasilnya akan seperti berikut : 
  • 
    
  
  
  
  masking selesai
  Selesai deh
  
  

0 komentar |