tutorial cd interactive denga flash

18
SMK Al-Huda Sadananya Membuat CD Interaktif MEMBUAT CD INTERAKTIF 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 :

Upload: heryanto-heri

Post on 08-Feb-2016

110 views

Category:

Documents


12 download

DESCRIPTION

cara membuat CD interactive menggunakan Adobe Flash Pro

TRANSCRIPT

Page 1: Tutorial CD Interactive denga flash

SMK Al-Huda Sadananya

Me

mb

ua

t C

D I

nt

er

ak

tif

MEMBUAT CD INTERAKTIF

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 :

Page 2: Tutorial CD Interactive denga flash

SMK Al-Huda Sadananya

Me

mb

ua

t C

D I

nt

er

ak

tif

Basic Setting Langkah 1 : Pengaturan Awal

Berikut langkah yang dapat dilakukan untuk membuat sebuah interaktive multimedia 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)

Page 3: Tutorial CD Interactive denga flash

SMK Al-Huda Sadananya

Me

mb

ua

t C

D I

nt

er

ak

tif

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 beberapa tombol

sesuai dengan layout yang anda buat 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.

Page 4: Tutorial CD Interactive denga flash

SMK Al-Huda Sadananya

Me

mb

ua

t C

D I

nt

er

ak

tif

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 :

Page 5: Tutorial CD Interactive denga flash

SMK Al-Huda Sadananya

Me

mb

ua

t C

D I

nt

er

ak

tif

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.

Page 6: Tutorial CD Interactive denga flash

SMK Al-Huda Sadananya

Me

mb

ua

t C

D I

nt

er

ak

tif

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.

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.

Page 7: Tutorial CD Interactive denga flash

SMK Al-Huda Sadananya

Me

mb

ua

t C

D I

nt

er

ak

tif

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.

Page 8: Tutorial CD Interactive denga flash

SMK Al-Huda Sadananya

Me

mb

ua

t C

D I

nt

er

ak

tif

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.

25. 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.

26. Pada frame 1 layer action ketikan actionscipt stop(); sehingga movie akan berhenti di

frame 1 ketika mulai dijalankan.

Page 9: Tutorial CD Interactive denga flash

SMK Al-Huda Sadananya

Me

mb

ua

t C

D I

nt

er

ak

tif

27. 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.

28. 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.

NOTE: Copy Action script diatas dan paste tanpa numbering, jika kesulitan disarankan

copy perbaris dan pastikan formatnya sama.

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.

Page 10: Tutorial CD Interactive denga flash

SMK Al-Huda Sadananya

Me

mb

ua

t C

D I

nt

er

ak

tif

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.

Page 11: Tutorial CD Interactive denga flash

SMK Al-Huda Sadananya

Me

mb

ua

t C

D I

nt

er

ak

tif

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 :

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.

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".

Page 12: Tutorial CD Interactive denga flash

SMK Al-Huda Sadananya

Me

mb

ua

t C

D I

nt

er

ak

tif

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.

Page 13: Tutorial CD Interactive denga flash

SMK Al-Huda Sadananya

Me

mb

ua

t C

D I

nt

er

ak

tif

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

dengan baik

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 nama subhalaman_portfolio.

Page 14: Tutorial CD Interactive denga flash

SMK Al-Huda Sadananya

Me

mb

ua

t C

D I

nt

er

ak

tif

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 tambahkan label pada masing-masing frame (diambil kelipatan 10), dan

pada frame 1 layer action ditambahkan actionscipt stop();

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.

Page 15: Tutorial CD Interactive denga flash

SMK Al-Huda Sadananya

Me

mb

ua

t C

D I

nt

er

ak

tif

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".

Page 16: Tutorial CD Interactive denga flash

SMK Al-Huda Sadananya

Me

mb

ua

t C

D I

nt

er

ak

tif

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(MouseEvent.CLICK,

perintah);

2. sub_portfolio.tombol_outdoor.addEventListener(MouseEvent.CLICK,

perintah);

3. sub_portfolio.tombol_even.addEventListener(MouseEvent.CLICK,

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. }

10. 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.

Setelah semua proses pembuatan interactive multimedia selesai, diperlukan sebuah proses yang

disebut sebagai publishing. Dengan mempublish project akan terbentuk sebuah file yang dapat

dijalankan secara independent disemua komputer.Untuk melakukannya perhatikan langkah

berikut:

Page 17: Tutorial CD Interactive denga flash

SMK Al-Huda Sadananya

Me

mb

ua

t C

D I

nt

er

ak

tif

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 bertipe EXE, 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 .

Page 18: Tutorial CD Interactive denga flash

SMK Al-Huda Sadananya

Me

mb

ua

t C

D I

nt

er

ak

tif

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.

2. Anda dapat menambahkan video, text dan media lain kedalam multimedia anda.

3. Penambahan intro, tombol keluar, dan beberapa pemanis tampilan seperti animasi,

kursor yang kustom dan sebagainya.

4. 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