Sehingga yang di maksud dengan multimedia interaktif adalah: Media yang terdiri beberapa elemen
(gambar, teks, suara, video, foto) dan mampu berinterkasi dengan penggunanya.
Software yang umum di gunakan untuk membuat multimedia interaktif adalah Macromedia Flash dan
Macromedia Director (sekarang macromedia berganti menjadi Adobe).
Dalam tutorial kali ini saya akan menggunakan software Adobe Flash CS3 sebagai alat untuk membuat
multimedia interaktif.
Hal yang perlu di persiapkan sebelum bita membuat media interaktif adalah:
1. Membuat site map/mapping
Site map adalah sebuah upaya pemetaan isi dari media. Contoh site map:
BIODATA
FOTO MASA
INTRO MENU KECIL
GALERI
UTAMA
FOTO FOTO
BERSAMA
TEMAN
ARTIKEL KESEHATAN
TIPS UJIAN
KELUAR/ NASIONAL
EXIT
2. Membuat layout
Layout adalah penataan ruang. Sehingga kita harus merencanakan penataan teks, gambar dan
elemen lainnya kedalam halaman flash nantinya.
Contoh layout salah satu halaman:
1|Page
Dody Priyatmono, S. Sn
Contoh layout salah satu halaman
2|Page
Dody Priyatmono, S. Sn
B. Mengenal fungsi tools (alat) di dalam Flash
Tidaklah jauh berbeda dengan Macromedia Flash MX, Software terbaru Flash yaitu Adobe Flash CS 3
memiliki tampilan yang mirip.
3|Page
Dody Priyatmono, S. Sn
Sekarang kita akan mengenal lebih dekat ke alat-alat yang ada di jendela tool
4|Page
Dody Priyatmono, S. Sn
Outline color. Keterangan warna outline yang sedang aktif
Keterangan warna. Disini kita bisa mengembalikan warna menjadi hitam-putih, atau
membalik warna (outline menjadi fill)
Propertis dari tool
5|Page
Dody Priyatmono, S. Sn
Layer merupakan lapisan-lapisan seperti layaknya lembaran kertas yang tembus
pandang. Posisi layer menjadi satu dengan timeline, yaitu di bagian atas menu flash. Semakin
tinggi posisi layer maka akan membuat objek yang ada didalamnya semakin terlihat
6|Page
Dody Priyatmono, S. Sn
C. Merancang halaman
Tahap awal ini kita akan membuat halaman untuk menu utama. Ikuti langkah-langkah berikut ini:
1. Buka Adobe Flash CS3
2. Pilih: Flash File (Action Script 02)
Untuk mengganti ukuran halaman anda bisa memilih SIZE dan mengganti ukuran
halaman menjadi 800 x 600 pixel
Warna latar belakang juga bisaa anda ganti dengan meng-klik Background lalu pilih
warna sesuai keingin anda.
4. Sesuai dengan layout yang sudah anda buat, maka mulailah menata objek rectangle yang
dibuat dari flash.
Perubahan warna juga bisa di lakukan dengan mengganti fill color pada saat anda
mengaktifkan rectangle tool
Untuk membuat teks anda bisa menggunakan TEXT TOOL . Parameter teks bisa anda lihat di
Properties
7|Page
Dody Priyatmono, S. Sn
Berikut adalah contoh layout yang sudah dibuat dengan menggunakan rectangle dan text tool.
5. Selanjutnya kita akan masukkan gambar/foto kedalam halaman. Caranya: klik FILE > IMPORT >
IMPORT TO STAGE
6. Lalu cari file gambar yang anda inginkan dan klik OPEN
8|Page
Dody Priyatmono, S. Sn
7. Letakkan gambar sesuai dengan keinginan anda. Gunakan Transform tool untuk merubah
ukuran dan melakukan rotasi
8. Untuk menambahkan jumlah halaman di dalam flash sama dengan menambah jumlah SCENE.
Caranya: Klik Insert > Scene
9. Setelah anda tambahkan satu SCENE maka akan muncul tanda/teks SCENE 2 pada bagian bawah
layer
9|Page
Dody Priyatmono, S. Sn
10. Buatlah desain untuk halaman selanjutnya
D. Membuat tombol
16. Kunci layer 1, agar pada saat kita mengolah layer 2 objek yang ada di layer 1 tidak terganggu.
Caranya: klik tanda titik di bawah icon KUNCI GEMBOK yang ada di jendela layer
10 | P a g e
Dody Priyatmono, S. Sn
17. Selanjutnya aktifkan layer 2 dengan meng-klik teks layer 2
18. Buatlah sebuah kotak untuk dirubah menjadi tombol. Caranya: Aktifkan Rectangle Tool ,
Pada jendela COLOR kurangi nilai ALPHA menjadi 30% (alpha memberikan efek transparan),
warna bisa anda cari yang sesuai
20. Aktifkan SELECTION TOOL untuk mengaktifkan kotak tersebut. Pilih objek kotak
23. Sekarang objek kotak tadi sudah menjadi tombol. Untuk membuktikannya nyalakan ENABLE
SIMPLE BUTTTONS yang ada di CONTROL
11 | P a g e
Dody Priyatmono, S. Sn
24. Lalu arahkan pointer mouse ke tombol, maka mouse akan berubah menjadi icon tangan
27. Sekarang anda bisa melihat tanda/icon tombol dibawah layer, ini sebagai bukti bahwa anda
sedang berada didalam edit tombol
28. Pada TIMELINE anda juga bisa melihat tampilan yang berbeda dengan sebelumnya. Yaitu
terdapat kolom UP-OVER-DOWN-HIT (Keterangan tentang ini akan saya sampaikan pada kolom
tersendiri)
12 | P a g e
Dody Priyatmono, S. Sn
DOWN : Berarti tampilan saat pointer mouse menekan tombol
29. Klik kolom putih dibawah OVER (lihat gambar dibawah) > lalu klik kanan > pilih INSERT
KEYFRAME
31. Ganti warna objek dengan warna yang lain, jangan lupa, kurangi nilai ALPHA (menjadi 30%) yang
ada pada Jendela COLOR
32. Aktifkan lagi kolom dibawah teks DOWN, lalu klik kanan dan pilih INSERT KEYFRAME
13 | P a g e
Dody Priyatmono, S. Sn
33. Aktifkan lagi objek kotak dengan SELECTION TOOL
34. Kita akan memperkecil ukuran objek kotak dengan menggunakan tool TRANSFORM. Buka
jendela transform di menu WINDOW > TRANSFORM
35. Nyalakan CONSTRAIN dan Isikan nilai 90%
39. Untuk melihat hasilnya anda bisa nyalakan kembali ENABLE SIMPLE BUTTON yang ada di
CONTROL menu
41. Selanjutnya kita akan copy tombol tadi untuk dijadikan beberapa tambol
42. Caranya: gunakan keybord CTRL (untuk meng-copy) dan SHIFT, lalu Klik dan Drag objek
14 | P a g e
Dody Priyatmono, S. Sn
43. Lakukan juga untuk SCENE 2
Setelah semua tombol ditempatkan pada tempatnya, sekarang kita akan memberikan perintah agar
tombol dapat berfungsi. Fungsi tombol disini adalah mengantarkan pengguna untuk pergi ke
halaman yang lain. Baiklah mari kita ikuti langkah-langkah berikut ini.
1. Pastikan kita berada di Scene 1
5. Dobel klik perintah STOP sehingga akan berpindah ke kolom di sebelah kanan
6. Tutup jendela Action
7. Sebagai tanda Keyframe sudah diberi perintah untuk stop anda bisa melihat tanda “a” pada
keyframe
15 | P a g e
Dody Priyatmono, S. Sn
8. Lakukan juga pada salah satu keyframe yang ada di SCENE 2 dan scene lain
9. Sekarang kita akan memberikan perintah pada tombol
10. Aktifkan salah satu tombol yang ada di SCENE 1, dan klik kanan > ACTIONS
11. Sama dengan perintah sebelumnya, kali ini kita akan memberikan perintah GO TO yang ada di
TIMELINE CONTROL
12. Namun sebelumnya kita akan buka SCRIPT ASSIST yang ada di jendela Actions sehingga muncul
jendela tambahan ke bawah
16 | P a g e
Dody Priyatmono, S. Sn
15. Di jendela action atas akan muncul panduan yang bisa kita gunakan untuk mengarahkan tombol.
Untuk itu pada kolom SCENE inikan scene yang akan di tuju. Misalnya scene 2 untuk
mengarahkan ke menu “tentang saya”
1. Import file suara yang berdurasi pendek. Caranya: klik File > Import > Import to Library
2. Biasanya windows sudah menyipkan file suara di C:\WINDOWS\Media. Untuk itu silahkan
memilih salah satu file suara yang anda rasa cocok untuk dimasukkan kedalam tombol
3. Aktifkan salah satu tombol
4. Klik kanan > pilh EDIT IN PLACE
5. Aktifkan Keyframe OVER
7. Pada kolom SOUND pilih file suara yang sudah anda import sebelumnya
9. Untuk mencoba hasilnya anda bisa me;akukan test movie yang ada di control > test movie
G. Action FS Command
17 | P a g e
Dody Priyatmono, S. Sn
Action FS Command disini berfungsi untuk menampilkan movie flash dalam ukuran full screen dan
untuk menutup movie (exit)
1. Aktifkan salah satu keyframe yang ada di SCENE 1 dan frame 1
6. Berikutnya kita akan membuat tombol yang akan difungsikan sebagai tombol EXIT
7. Buatlah tombol sederhana
8. Aktifkan tombol tersebut
9. Klik kanan > dan pilih Actions
10. Lakukan perintah yang sama dengan sction sebelumnya, yaitu FSCOMMAND
11. Namun pada Commands for standalone player kita pilih QUIT
H. Publish movie
1. Di tahap akhir ini kita akan melakukan publishing atau merubah file project menjadi file EXE
2. Klik FILE > PUBLISH SETTINGS
3. Pada kolom TYPE anda nyalakan WINDOWS PROJECTOR (EXE)
18 | P a g e
Dody Priyatmono, S. Sn
4. Klik PUBLISH > OK
5. Selanjutnya anda bisa buka hasil movie flash tersebut melalui windows explorer
6. Selamat mencoba, dan jangan mudah putus asa
Bila anda mengalami kesulitan bisa bertanya kepada yang lebih tahu, atau email saya di
dy_ovo@yahoo.com
19 | P a g e
Dody Priyatmono, S. Sn