Materi Uji Kompetensi

Konsep Dasar

Segala bentuk hubungan antara pengguna (end user) dan media disebut sebagai interaktif. Interaktif media tidak terbatas pada media elektronik atau media digital, akan tetapi permainan papan (contoh :ular tangga, monopoli), buku popup, flip book, juga dapat disebut sebagai interaktif media.

Multimedia merupakan proses komunikasi interaktif menggunakan teknologi komputer dengan menggabungkan penggunaan unsur media digital seperti teks, audio, grafik, animasi dan video untuk menyampaikan sebuah pesan tertentu.

Definisi Interactive Multimedia adalah sebuah produk berbasis komputer digital yang merespon input dari penggunanya dengan menampilkan konten berupa teks, grafis, animasi, video, suara dan sejenisnya.

Layouting dan Mapping

Untuk membuat multimedia interaktif diperlukan konsep dasar media yang akan dibuat (meliputi materi dan pesan yang ingin disampaikan), layout atau desain dan sistem navigasi (mapping).

Sebagai contoh akan dibuat sebuah IMM tentang sebuah studio foto bernama Planet Foto. IMM ini nantinya digunakan sebagai media promosi, sehingga selain informasi terkait dengan penjelasan tentang studio foto Planet Foto, juga ditampilkan produk-produk service yang diberikan dan contoh portfolio yang pernah dikerjakan. Dengan konsep sederhana diatas dapat dibuat sistem navigasi (mapping) sebagai berikut :


Langkah 1: Pengaturan Awal
Berikut langkah yang dapat dilakukan untuk membuat sebuah interaktive multi media sederhana :

1. Buatlah sebuah file baru ( File > New ), Pilih opsi Flash File (ActionScript 3.x)
2. Atur dokumen anda dengan membuka properties, sehingga dokumen anda memiliki ukuran standard 800 x 600 pixel dan 30 FPS
   
   
3. Import Background yang anda pakai sebagai landing page dan atur posisinya di stage sehingga memiliki ukuran 800x600 dan posisi align tepat berada di ujung kiri atas (x:0, y:0)
   
   
4. Seleksi background tersebut kemudian convet to symbol menjadi MovieClip dengan nama konten.
   
   
5. Dobel klik moviclip konten untuk masuk ke mode edit
   
   
6. Rename nama layer menjadi background , kemudian buatlah buatlah 5 buah layer baru dan ubah nama masing-masing layer sesuai dengan urutannya mulai dari atas yaitu layer : action, label, tombol, sub_halaman dan halaman isi.
   
   
7. Klik frame 1 layer tombol kemudian buatlah symbol tombol sebanyak dan sesuai dengan desain layout yang telah anda buat sebelumnya. Letakkan di posisi yang benar.
   
   
8. Klik kanan frame 40 layer tombol kemudian insert frame, sehingga tombol akan tampil sampai dengan frame 40 tanpa perubahan apapun.
   
   
9. Dengan cara yang sama insert frame di frame 40 layer background.
10. Klik kanan frame 10 layer halaman isi kemudian pilih insert black Keyframe. Lalu buatlah konten halaman pertama (dalam contoh ini adalah halaman about us )..
    
    Anda dapat menampilkan text, animasi movieclip, maupun video dalam frame ini, sesuai dengan layout dan konsep yang anda buat sebelumnya. Untuk menambahkan text cukup dengan menggunakan text tool , untuk menambahkan animasi anda buat terlebih dahulu sebuah movieclip di file lain, lalu anda copypaste (dengan catatan nama symbol yang anda buat spesifik dan berbeda dengan semua nama symbol yang pernah anda buat sebelumnya). Sehingga pada frame 10 akan terlihat seperti gambar berikut :
    
    
11. Klik kanan frame 20 layer halaman isi kemudian pilih insert blank Keyframe. Lalu buatlah konten halaman kedua (dalam contoh ini adalah halaman service ), sehingga pada frame 20 akan terlihat seperti gambar berikut.
    
    
12. Untuk halaman berikutnya anda bisa melakukan cara yang sama. Disini kelipatan 10 setiap frame dimaksudkan untuk mempermudah anda untuk menambahkan efek transisi dan memudahkan proses editing di kemudian hari.
13. Setelah semua halaman sudah anda tambahkan, kita lanjutkan ke proses berikutnya.

 Langkah 2: Penambahan Label

14. Penambahan label dimaksudkan untuk mempermudah anda dalam mengakses IMM anda menggunakan actionscript (akan dijelaskan pada tahap selanjutnya).
15. Untuk menambahkan label klik frame 1 layer label kemudian buka panel properties. Ketikan hal_1 pada kolom Frame label.
    
    
16. Klik kanan frame 10 layer label kemudian insert blank keyframe. Lalu buka properties dan tambahkan Frame Label hal_2. Lakukan hal yang sama pada frame 20 dan 30 untuk halaman 3 dan halaman 4.
    
    
17. Setelah tahapan pemberian label selesai, anda dapat memproses tahapan selanjutnya.

Langkah 3: Penambahan Instance Name

18. Penambahan instance name diperlukan agar beberapa object bisa diakses oleh actionscipt. Objek utama yang harus memiliki instance name adalah tombol-tombol dan movieclip konten.
19. 19.Klik tombol about us kemudian buka panel properties dan ketikkan tombol_1 pada kolom < instance name >.
    
    
20. Dengan cara yang sama lakukan untuk semua tombol sehingga akan ada 4 instance name yaitu "tombol_1", "tombol_2","tombol_3" dan "tombol_4".
21. Jika anda memiliki tombol lebih dari 4, maka sesuaikan nama instance masing-masing tombol.
22. Keluar dari mode edit movieclip konten.
    
    
23. Klik moviclip konten, buka panel properties, lalu tambahkan instance name konten.
24. Setelah itu anda dapat melanjutkan ke tahapan berikutnya.
25. Simpan project tersebut lalu jalankan movie dengan menekan tombol Ctr+Enter, maka akan terlihat halaman demi halaman yang tampil secara bergantian dan berulang (looping). Hal ini dikarenakan belum adanya "rambu-rambu" yang mengatur movie anda. Untuk itu perlu ditambahkan action script agar movie dapat kita kontrol.
26. Double click movieclip konten, pilih frame 1 layer action lalu buka panel Action (tekan F9). Pastikan tombol script assist dalam keadaan mati, agar anda dapat mengetikan script dengan mudah.
    
    
27. Pada frame 1 layer action ketikan actionscipt stop(); sehingga movie akan berhenti di frame 1 ketika mulai dijalankan.
28. Keluar dari mode edit movieclip (kembali ke scene utama). Lalu buatlah sebuah layer baru diatas layer 1 dan ubah namanya menjadi layer action. Klik frame 1 layer action lalu buka panel action dan ketikan script berikut:

    
    konten.tombol_1.addEventListener(MouseEvent.CLICK, perintah);
    konten.tombol_2.addEventListener(MouseEvent.CLICK, perintah);
    konten.tombol_3.addEventListener(MouseEvent.CLICK, perintah);
    konten.tombol_4.addEventListener(MouseEvent.CLICK, perintah);
    function perintah(e:MouseEvent){
    var nama = e.currentTarget.name.substr(7);
     if (nama == "1"){
      konten.gotoAndStop("hal_1");
     }
     if (nama == "2"){
      konten.gotoAndStop("hal_2");
     }
     if (nama == "3"){
      konten.gotoAndStop("hal_3");
     }
     if (nama == "4"){
      konten.gotoAndStop("hal_4");
     }
    }
         
    
    

29. Jalankan movie dengan menekan tombol Ctrl+Enter. Apabila anda menemukan kesalahan akan muncul di panel compiler error/ output panel. Perhatikan lagi dan cek ulang langkah 1 sampai dengan langkah 4.

Kesalahan-kesalahan yang sering muncul saat kita belajar script untuk pertama kali antara lain :

• TypeError: Error #1010: A term is undefined and has no properties. Pada umumnya dikarenakan penulisan instance name yang masih keliru. Cek sekali lagi masing-masing object yang memiliki instance name.
• ReferenceError: Error #1069: Property adEventListener not found on flash.display.SimpleButton and there is no default value. Dikarenakan kesalahan penulisan script yang salah sehngga tidak bisa dipahami oleh komputer. AS3 sangat membutuhkan ketelitian, ketika anda menuliskan addeventListener padahal yang benar adalah addEventListener, maka pesan error akan muncul. Jadi telitilah dengan jeli baris demi baris apabila terdapat pesan error.
• 1084: Syntax error: expecting rightparen before semicolon. Karena kurang teliti dalam menuliskan tanda baca seperti titik, kurung kurawa atau kurung buka / tutup.
  
  

 Penambahan suara

30. Penambahan suara memerlukan beberapa file yaitu load_out.as yang harus berada dalam satu folder dengan file IMM yang anda buat. File suara harus berformat WAV atau MP3.
31. Import semua file suara ke library dengan cara memilih menu FILE > IMPORT TO LIBRARY. File suara akan ditampilkan dalam bentuk gelombang.
32. Agar dapat diakses oleh action script, symbol suara perlu ditambahkan linkage. Untuk menambahkan linkage klik kanan simbol suara pada library lalu pilih linkage. Setelah panel linkage properties muncul, centang opsi Export for Actionscipt. Secara otomatis opsi Export in first frame akan ikut tercentang dan kolom Class akan terisi dengan nama simbol dalam contoh ini adalah sound_bgm. Nama inilah yang nantinya dapat diakses oleh actionscipt.
    
    
33. Setelah menambahkan linkage pada suara BGM dan suara untuk tombol (dengan linkage sound_bgm dan sound_tombol), klik frame 1 layer action, buka panel action dan tambahkan script menjadi :

    
    include "load_out.as"
    play_sound("bgm", 100, 99);
    konten.tombol_1.addEventListener(MouseEvent.CLICK, perintah);
    konten.tombol_2.addEventListener(MouseEvent.CLICK, perintah);
    konten.tombol_3.addEventListener(MouseEvent.CLICK, perintah);
    konten.tombol_4.addEventListener(MouseEvent.CLICK, perintah);
    function perintah(e:MouseEvent){
    var nama = e.currentTarget.name.substr(7);
     play_sound("tombol", 100, 1);
     if (nama == "1"){
      konten.gotoAndStop("hal_1");
     }
     if (nama == "2"){
      konten.gotoAndStop("hal_2");
     }
     if (nama == "3"){
      konten.gotoAndStop("hal_3");
     }
     if (nama == "4"){
      konten.gotoAndStop("hal_4");
     }
    }
         
    
    

34. Script play_sound memiliki parameter (nama linkage sound, volume suara (0-100), jumlah loop/pengulangan suara);
35. Jalankan movie dengan menekan tombol Ctrl+Enter. Jika proses penambahan suara benar, maka akan terdengar suara background dan suara tombol ketika ditekan
36. Untuk menambahkan tombol mute sound, edit movieclip konten. Pada layer tombol buatlah 2 buah tombol untuk mengontrol suara yaitu tombol "mute" dan tombol "play". Tambahkan juga instance name pada kedua tombol tersebut yaitu "tombol_mute" dan "tombol_play".
Keluar dari mode edit, lalu klik frame 1 layer action, buka panel action dan tambahkan script menjadi :

include "load_out.as"
play_sound("bgm", 100, 99);
konten.tombol_1.addEventListener(MouseEvent.CLICK, perintah);
konten.tombol_2.addEventListener(MouseEvent.CLICK, perintah);
konten.tombol_3.addEventListener(MouseEvent.CLICK, perintah);
konten.tombol_4.addEventListener(MouseEvent.CLICK, perintah);
 
konten.tombol_mute.addEventListener(MouseEvent.CLICK, perintah);
konten.tombol_play.addEventListener(MouseEvent.CLICK, perintah);
 
function perintah(e:MouseEvent){
var nama = e.currentTarget.name.substr(7);
 play_sound("tombol", 100, 1);
 if (nama == "1"){
  konten.gotoAndStop("hal_1");
 }
 if (nama == "2"){
  konten.gotoAndStop("hal_2");
 }
 if (nama == "3"){
  konten.gotoAndStop("hal_3");
 }
 if (nama == "4"){
  konten.gotoAndStop("hal_4");
 }
 
 if (nama == "mute"){
  SoundMixer.stopAll();
 }
 if (nama == "play"){
  play_sound("bgm", 100, 99);
 } 
}
     

37. Jalankan movie dengan menekan tombol Ctrl+Enter. Pastikan semua tombol bekerja dengan baik