Membuat Multimedia Interaktif

Oleh: Dody Priyatmono, S. Sn

A. Tahapan membuat media interaktif

Multimedia interaktif berasal dari 2 kata, yaitu: Interkatif dan Multimedia.
Interaktif adalah: Tindakan interaksi antara dua atau lebih objek atau orang
Multimedia adalah: kumpulan beberapa media yang menjadi 1 media komunikasi
public

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:

BIODAT
A
FOTO
INTRO MENU MASA
UTAMA GALERI KECIL
FOTO FOTO
BERSAMA
TEMAN

ARTIKE KESEHAT
L AN

TIPS
KELUAR UJIAN
/ EXIT NASIONA

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

3. Mengaplikasikan layout kedalam flash

Setelah semua layout di rancang, sekarang kita pindahkan desain tadi
kedalam software Adobe Flash.

4. Memberikan Action Script/perintah

Action Script adalah istilah bahasa pemrograman yang ada didalam flash.
Funsinya bervariasi. Yang nanti akan kita gunakan pada dasarnya adalah action
script untuk berpindah halaman, atau istilahnya “Go To”, serta ada beberapa action
sederhana seperti “Stop”, “FS Command Full screen dan Quit” untuk.

5. Mempublish file menjadi file EXE

Dibagian akhir ini kita akan merubah format file. Yang semula masih berupa
project (file flash), agar bisa di buka di semua PC maka kita perlu merubahnya
menjadi format EXE. Sehingga file flash kita tidak akan mengalami kendala saat di
jalankan di komputer manapun.

2 |Page
Dody Priyatmono, S. Sn
 B. Mengenal fungsi tools (alat) di dalam
Flash
Berikut adalah gambar tampilan Software Macromedia Flash MX
beserta istilah istilahnya. Didalam handout ini saya akan selalu
menggunakan nama-nama tersebut untuk mengistilahkan setiap tool. Untuk
itu nama tersebut wajib di hapalkan.

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

Selection tool. Berfungsi untuk memilih/mengaktifkan objek

Sub Selection tool. Berfungsi untuk mengaktifkan node edit objek

vector
Free Transform tool. Untuk merubah ukuran /skala, rotasi dan
perpindahan posisi objek
Lasso tool. Berfungsi untuk memilih area tertentu yang akan di
seleksi
Pen tool. Berfungsi untuk membuat objek/gambar dengan metode
bolpoint
Text tool. Berfungsi untuk membuat karakter teks/huruf
Line tool. Berfungsi untuk membuat garis lurus
Rectangle, oval, polystar. Adalah objek berbentuk kotak, bundar
dan prisma
Pencil tool. Berfungsi untuk membentuk objek dengan bentuk
bebas
Brush Tool. Fungsinya hamper sama dengan pencil. Namun bruh
memiliki bentuk dan ketebalan yang lebih bervariasi
Ink Bottle tool. Berfungsi untuk memeberikan warna pada garis
pinggir(outline)
Paint Bucket tool. Berfungsi untuk memberi warna pada bagian
dalam (fill) objek
Eye Dropper tool. Berfungsi untuk mengambil contoh warna dari
objek lain
Ereaser tool. Berfungsi untuk menghapus objek

4 |Page
Dody Priyatmono, S. Sn
Hand tool. Berfungsi untuk menggeser stage/lembar kerja
Zoom tool. Berfungsi untuk melakukan zoom/ mendekat dan
menjauh dari objek
Outline color. Keterangan warna outline yang sedang aktif

Fill Color. Keterangan warna dalam 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

Begini cara kerja layer:

6 |Page
Dody Priyatmono, S. Sn
 7 |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)

3. Buka properties yang ada di bawah halaman

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

8 |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

9 |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

10 | P a g e
Dody Priyatmono, S. Sn
10.Buatlah desain untuk halaman selanjutnya

11.Lanjutkan dengan menambah halaman yang lain

12.Untuk melihat/memperbaiki halaman sebelumnya anda bisa menggunkan
tombol SCENE yang ada di sebelah kanan

13.Selanjutnya kita akan membuat tombol

D. Membuat tombol
14.Kembali ke SCENE 1 atau halaman menu utama
15.Tambahkan layer baru dengan meng-klik NEW LAYER

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

11 | 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

19.Posisikan Rectangle/kotak tersebut pada teks (menimpa teks)

20.Aktifkan SELECTION TOOL untuk mengaktifkan kotak tersebut. Pilih

objek kotak

21.Klik MODIFY > CONVERT TO SYMBOL

22.Pilih BUTTON, beri nama objek, lalu klik OK

12 | P a g e
Dody Priyatmono, S. Sn
23.Sekarang objek kotak tadi sudah menjadi tombol. Untuk membuktikannya
nyalakan ENABLE SIMPLE BUTTTONS yang ada di CONTROL

24.Lalu arahkan pointer mouse ke tombol, maka mouse akan berubah menjadi
icon tangan

25.Matikan lagi ENABLE SIMPE BUTTONS pada CONTROL menu

26.Sekarang kita akan melakukan modifikasi untuk tombol agar terlihat lebih
menarik. Caranya: aktifkan Tombol, lalu klik kanan dan pilih EDIT IN PLACE,
atau bisa juga anda doble klik

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)

UP : Berarti tampilan saat pointer mouse berada di

luar tombol

13 | P a g e
Dody Priyatmono, S. Sn
OVER : Berarti tampilan saat pointer mouse berada di
atas tombol

DOWN : Berarti tampilan saat pointer mouse

menekan tombol

HIT : Merupakan area tekan tombol

29.Klik kolom putih dibawah OVER (lihat gambar dibawah) > lalu klik kanan >
pilih INSERT KEYFRAME

30.Gunakan Selection Tool , aktifkan objek kotak

31.Ganti warna objek dengan warna yang lain, jangan lupa, kurangi nilai ALPHA
(menjadi 30%) yang ada pada Jendela COLOR

14 | P a g e
Dody Priyatmono, S. Sn
32.Aktifkan lagi kolom dibawah teks DOWN, lalu klik kanan dan pilih INSERT
KEYFRAME

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%

36.Maka ukuran objek sudah berubah menjadi 90%

37.Untuk sementara kita tidak perlu menambahkan keyframe untuk HIT karena
objek kotak sudah cukup mudah untuk di KLIK. Biasanya kita menambahkan
HIT untuk objek tombol yang berbentuk teks
38.Klik Scene 1 untuk kembali ke tampilan awal

39.Untuk melihat hasilnya anda bisa nyalakan kembali ENABLE SIMPLE BUTTON
yang ada di CONTROL menu

40.Ini adalah hasilnya

41.Selanjutnya kita akan copy tombol tadi untuk dijadikan beberapa tambol

15 | P a g e
Dody Priyatmono, S. Sn
42.Caranya: gunakan keybord CTRL (untuk meng-copy) dan SHIFT, lalu Klik dan
Drag objek

43. Lakukan juga untuk SCENE 2

E. Memberikan Perintah (Action Script)

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

2. Aktifkan salah satu keyframe (bisa keyframe layer 1 atau layer 2)

3. Klik kanan dan pilih ACTIONS

4. Pada jendela Action buka GLOBAL FUNCTION > TIMELINE CONTROL >

5. Dobel klik perintah STOP sehingga akan berpindah ke kolom di sebelah kanan

16 | P a g e
Dody Priyatmono, S. Sn
6. Tutup jendela Action
7. Sebagai tanda Keyframe sudah diberi perintah untuk stop anda bisa melihat
tanda “a” pada keyframe

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

13.Pindahkan Go To ke jendela sebelah kanan

14.Aktifkan gotoAndPlay(1);

17 | 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”

16.Berikan juga perintah go to untuk tombol yang lain

F. Memasukan suara untuk tombol

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

6. Buka jendela Properties

7. Pada kolom SOUND pilih file suara yang sudah anda import sebelumnya

18 | P a g e
Dody Priyatmono, S. Sn
8. Klik kembali icon SCENE 1 untuk kembali ke awal

9. Untuk mencoba hasilnya anda bisa me;akukan test movie yang ada di
control > test movie

G. Action FS Command
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

2. Klik kanan dan pilih > ACTIONS

3. Pilih action FS COMMAND yang ada di BROWSER/NETWORK

4. Dobel klik FSCOMMAND sehingga akan berpindah ke kolom sebelah kanan

5. Pada kolom Commands for standalone player kita pilih FULLSCREEN

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

19 | P a g e
Dody Priyatmono, S. Sn
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)

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

20 | P a g e
Dody Priyatmono, S. Sn