MEMBUAT CD INTERAKTIF

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 :

 
BASIC SETTING 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 kolomFrame 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.

LANGKAH 4 : PENAMBAHAN ACTION SCRIPT

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

1. konten.tombol_1.addEventListener(MouseEvent.CLICK,
perintah);
2. konten.tombol_2.addEventListener(MouseEvent.CLICK,
perintah);
3. konten.tombol_3.addEventListener(MouseEvent.CLICK,
perintah);
4. konten.tombol_4.addEventListener(MouseEvent.CLICK,
perintah);
5. function perintah(e:MouseEvent){
6. var nama = e.currentTarget.name.substr(7);
7. if (nama == "1"){
8. konten.gotoAndStop("hal_1");
9. }
 10. if (nama == "2"){
11. konten.gotoAndStop("hal_2");
12. }
13. if (nama == "3"){
14. konten.gotoAndStop("hal_3");
15. }
16. if (nama == "4"){
17. konten.gotoAndStop("hal_4");
18. }
19. }
20.

26. 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.
LANGKAH 5 : 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 linkageklik kanan simbol suara pada library lalu
pilih linkage. Setelah panel linkage properties muncul, centang opsiExport 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 dansound_tombol), klik frame 1 layer action,
buka panel action dan tambahkan script menjadi :

1. include "load_out.as"
2. play_sound("bgm", 100, 99);
3. konten.tombol_1.addEventListener(MouseEvent.CLICK,
perintah);
4. konten.tombol_2.addEventListener(MouseEvent.CLICK,
perintah);
5. konten.tombol_3.addEventListener(MouseEvent.CLICK,
perintah);
6. konten.tombol_4.addEventListener(MouseEvent.CLICK,
perintah);
7. function perintah(e:MouseEvent){
8. var nama = e.currentTarget.name.substr(7);
9. play_sound("tombol", 100, 1);
10. if (nama == "1"){
11. konten.gotoAndStop("hal_1");
12. }
13. if (nama == "2"){
14. konten.gotoAndStop("hal_2");
 15. }
16. if (nama == "3"){
17. konten.gotoAndStop("hal_3");
18. }
19. if (nama == "4"){
20. konten.gotoAndStop("hal_4");
21. }
22. }
23.

31. Script play_sound memiliki parameter (nama linkage sound, volume suara (0-

100), jumlah loop/pengulangan suara);
32. Jalankan movie dengan menekan tombol Ctrl+Enter. Jika proses penambahan
suara benar, maka akan terdengar suara background dan suara tombol ketika
ditekan
33. 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 :

1. include "load_out.as"
2. play_sound("bgm", 100, 99);
3. konten.tombol_1.addEventListener(MouseEvent.CLICK,
perintah);
4. konten.tombol_2.addEventListener(MouseEvent.CLICK,
perintah);
5. konten.tombol_3.addEventListener(MouseEvent.CLICK,
perintah);
6. konten.tombol_4.addEventListener(MouseEvent.CLICK,
perintah);
7.  
8. konten.tombol_mute.addEventListener(MouseEvent.CLICK,
perintah);
9. konten.tombol_play.addEventListener(MouseEvent.CLICK,
perintah);
10.  
11. function perintah(e:MouseEvent){
12. var nama = e.currentTarget.name.substr(7);
13. play_sound("tombol", 100, 1);
14. if (nama == "1"){
15. konten.gotoAndStop("hal_1");
16. }
17. if (nama == "2"){
18. konten.gotoAndStop("hal_2");
19. }
20. if (nama == "3"){
21. konten.gotoAndStop("hal_3");
22. }
23. if (nama == "4"){
24. konten.gotoAndStop("hal_4");
25. }
26.
27. if (nama == "mute"){
28. SoundMixer.stopAll();
29. }
30. if (nama == "play"){
31. play_sound("bgm", 100, 99);
32. }
33. }
 34.

31. Jalankan movie dengan menekan tombol Ctrl+Enter. Pastikan semua tombol

bekerja dengan baik

MENAMBAHKAN SUB HALAMAN / PHOTO GALLERY

Untuk membuat sub halaman pada dasarnya sama dengan membuat MC konten.
Sebagai contoh dalam IMM ini pada menu Portfolio terdapat 3 submenu
yaitu Wedding, Outdoor dan Even. Untuk membuatnya lakukan proses sebagai
berikut:

1. Edit movieclip konten. Kita akan menambahkan 1 buah subhalaman yang

memiliki 3 buah tombol menu.
2. Buatlah sebuah layer baru di atas layer halaman isi. Ubah nama layer tersebut
menjadi layer subhalaman
3. Klik kanan frame 20 layer sub halaman (frame yang memiliki sub halaman yaitu
frame Portfolio / hal_3), kemudian pilih Insert Blank Keyframe. Kemudian
kanan frame 30 layer sub halaman dan pilih Insert Blank Keyframe (langkah
ini dimaksudkan agar tampilan sub halaman hanya muncul di bagian portfolio
bukan di halaman yang lain. Sekarang susunan layer akan terlihat seperti pada
gambar berikut.
4. Klik frame 20 layer sub halaman kemudian buatlah 3 buah tombol yaitu
tombol Wedding, Outdoor dan tombol Even. Seleksi ke 3 tombol tersebut
kemudian convert to symbol menjadi movieclip dengan
namasubhalaman_portfolio.
5. Double klik moviclip subhalaman_portfolio, untuk mengeditnya. Sama seperti
halnya ketika kita membuat movieclip konten pada langkah 1 di atas, buatlah
beberapa layer baru dan rename layer untuk mempermudah proses. Dalam
kasus ini dibuat 4 buah layer yaitu layer action, layer label, layer tombol dan
layer photo.
6. Dengan cara yang sama seperti membuat movieclip konten, tambahkan foto-
foto pada layer isi dan tambahkanlabel pada masing-masing frame (diambil
kelipatan 10), dan pada frame 1 layer action ditambahkan actionsciptstop();
7. Seleksi masing-masing tombol dan berikan instance name pada masing-masing
tombol sesuai dengan namanya, yaitu "tombol_wedding", "tombol_outdoor"
dan "tombol_even". Sehingga susunan layer dari moviclip
subhalaman_portfolio kurang lebih seperti pada gambar berikut.
8. Keluar dari mode edit moviclip subhalaman_portfolio, sehingga kita berada
pada mode edit movieclip konten. Klik
movieclip subhalaman_portfolio kemudian buka panel properties dan
tambahkan instance name "sub_portfolio".
9. Klik kanan frame 20 layer action kemudian pilih insert blank keyframe. Buka
panel action dan ketikan script berikut :

1. sub_portfolio.tombol_wedding.addEventListener(MouseEven
t.CLICK, perintah);
2. sub_portfolio.tombol_outdoor.addEventListener(MouseEven
t.CLICK, perintah);
3. sub_portfolio.tombol_even.addEventListener(MouseEvent.C
LICK, perintah);
4.  
5. function perintah(e:MouseEvent){
6. var nama = e.currentTarget.name.substr(7);
7. if (nama == "wedding"){
8. sub_portfolio.gotoAndStop("hal_1");
9. }
10. if (nama == "outdoor"){
11. sub_portfolio.gotoAndStop("hal_2");
12. }
13. if (nama == "even"){
14. sub_portfolio.gotoAndStop("hal_3");
15. }
16. }
17.

2. Jalankan movie dengan menekan tombol Ctrl+Enter. Jika proses yang anda

lakukan benar, ketika anda menekan tombol Portfolio akan muncul subhalaman
yang memiliki 3 tombol aktif yang masing-masing dapat diklik dan menampilkan
 konten yang berbeda

Dengan konsep yang sama anda dapat membuat sistem photo gallery atau
subhalaman sebanyak mungkin. Yang terpenting adalah lakukan proses kerja sesimpel
dan seefisien mungkin untuk menghemat waktu dan ukuran files. 
Masih banyak materi yang bisa ditambahkan pada IMM anda seperti video,
scrolling text ataupun bentuk multi media yang lain yang akan dijelaskan pada post
selanjutnya.

LANGKAH 6 : FINISHING

Setelah semua proses pembuatan interactive multi media selesai, diperlukan sebuah
proses yang disebut sebagaipublishing. Dengan mempublish project akan terbentuk
sebuah file yang dapat dijalankan secara independent disemua komputer.Untuk
melakukannya perhatikan langkah berikut:

1. Pilih menu FILE>PUBLISH SETTING. Agar menghasilkan file bertipe EXE,

centang opsi Windows Projector (.exe). Kemudian klik sub option FLASH lalu
naikkan opsi JPEG quality menjadi 100.
 2. Tekan tombol Publish, setelah proses publishing selesai, maka akan
menghasilkan 3 buah file yaitu file bertipeEXE, SWF dan HTML. Buka Windows
explorer anda dan jalankan file yang bertipe EXE (Aplication). Jika proses
yang anda lakukan benar, saat ini movie anda sudah menjadi
sebuah Interactive Multi Media yang bisa dijalankan di sebagian besar
komputer .

Pada dasarnya proses finishing tidak berhenti sampai disini, terdapat beberapa
hal yang harus ditambahkan dan diperhatikan, diantaranya adalah
 1. Tampilan IMM / CD Interaktif yang baik adalah tampil fullscreen. Pada flash
player 9 kebawah dengan menggunakan AS2 terdapat opsi untuk
menampilkan aplikasi secara fullscreen yaitu dengan script
fscommand("fullscreen", "true");. Akan tetapi script tersebut tidak bekerja
pada AS3 dan Flash Player 10 keatas, sehingga diperlukan Aplikasi
Pembantu untuk mempublish file SWF anda agar dapat bekerja dengan
baik, fullscreen dan sebagainya. Salah satu software yang saya
rekomendasikan adalah MDM Zinc.

Anda dapat menambahkan video, text dan media lain kedalam multi media
anda. Pembahasan akan dibahasa pada tutorial yang akan datang

2. Penambahan intro, tombol keluar, dan beberapa pemanis tampilan seperti

animasi, kursor yang kustom dan sebagainya.
3. Tidak ada batasan dalam membuat CD Interaktif / Interactive Multi Media.
Anda dapat menggunakan cara apapun dan sofware apapun, yang
terpenting adalah semuanya dikerjakan secara profesional untuk mencapai
hasil sebaik mungkin

Semoga tutorial ini bermanfaat, silahkan bila mau copas untuk share selama
sumber tetap ditulis dan tinggalkan pesan, komentar atau pertanyaan. Terimakasi
;)