MODUL MULTIMEDIA INTERAKTIF MACROMEDIA D (2)

MODUL MULTIMEDIA INTERAKTIF
MACROMEDIA DIRECTOR

Disusun Oleh:
Agus Purwanto, S.Kom

SEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN
KOMPUTER
AMIKOM YOGYAKARTA

MODUL INTERAKTIVE
Macromedia director
Macromedia director adalah software pembuat aplikasi multimedia.
Software ini merupakan software yang dapat mengabungkan 5 unsur multimedia
yaitu : teks, gambar, animasi, suara dan video menjadi suatu sajian informasi yang
interkatif. Dalam perkembangannya sampai saat ini, macromedia director telah
dapat mebuat game, spesial effect, simulasi, screen saver, web, internet browser,
aplikasi chating, teleconference dan lain – lain.
Adapun tampilan dari macromedia director adalah seperti gambar
dibawah, dengan beberpa jendela pentingnya.

2

1. Stage : tampilan untuk menunjukkan hasil dari pengaturan objek pada
waktu (frame) yang ditunjukkan. Bisa diibaratkan ini merupakan layar
atau panggung dalam sebuah pertunjukan.
2. Cast : merupakann tempat untuk menampung bahan atau objek yang kan
ditampilkan di layar.
3. Score : Merupakan tempat untuk mengatur urutan objek sesuai dengan
naskah ataupun untuk mengatur aksi aksi objek distage.
4. Property Inpector : merupakan panel yang berisi informasi suatu objek
yang sedang aktif. Di sini biasanya dilakukan pengaturan posisi, rotasi,
ink, panjang frame dan lain sebagainya.
5. Tools : Merupakan tempat peralatan yang digunakan unutk membantu
mengatur objek.
A. Persiapan awal
Sebelum kita memulai pekerjaan ada
beberapa hal perlu kita persiapkan sesuai
dengan ketentuan dari story board ataupuan
naskah

yang

ada.

Adapun

yang

bisa

dipersiapkan di awal pekerjaan antar lain :
1. Mengatur stage
Stage atau layar harus ditentuan
ukuranya

sesai

dengan

storyboard,

kebutuhan dan sasaran user. Mengatur
ukuran stage wajib dilakukan pada awal
pekerjaan, jika dilakukan pada akhir maka
tidak hanya stage saja tapi semua objek
yang sudah ada di stage harus kita atur
juga ukuranya, pada akhirnya hanya
manambah beban pekerjaan saja. Untuk
mengatur stage ini bisa dilakukan melalui
property inspector.

3

2. Mengimport bahan
Setelah layar siap maka selanjutnya adalah mengambil atau
mengimport bahan yang sudah disiapkan, caranya :
a. File – Import atau dengan meng klik kanan area kosong pada
jendela internal cast
b. Cari tempat dimana file bahan berada kemudian tampung dulu
dalam file list dengan cara pilih file yang diinginkan kemudian

tekan add, setelah semua file terkumpul baru tekan import

c. Akan muncul jendela image option. Ini merupakan pengaturan
properties gambar antara lain
-

color depth 32 bits : untuk kedalaman warna asli gambar
16 bit : kedalaman warna sesuai stage

4

-

palette merupakan sistem pewarnaan yang digunakan
biasanya menggunakan sistem windows (System Win)

-

Image
-

trim white space : jika ada area transparacy kosong
maka akan dijadikan warna putih

-

dither : jika dipilih maka warna gradasi akan terlihat
halus

-

Same setting for remaining images : pengaturan ini
akan dterapkan pada gambar lainya. (jika ini tidak
dipilih maka kita harus mengatur properties ini
sebnayak gambar yang kita import)

B. Membuat Animasi dasar
Di macromedia director kita bisa membuat animasi dasar meskipun
director sendiri bisa mngimport file animasi yang sudah jadi (animasi flash,
gif, sequence). Animasi ini biasanya digunkan untuk membuat intro atau

membuat tampilan menjadi lebih menarik. Adapun langkah - langkahnya
adalah sebagai berikut :
1. Membuat sprite
a. Pilih salah satu gambar kemudian drag kearah jendela score
tepatnya di channel 1 frame 1.Jika benar maka dilayar akan terlihat

5

gambar yang di drag tadi dan di score akan tercipta sebuah persegi
panjang berwarna biru.

b. Persegi panjang inilah yang dinamakan sprite. Jadi boleh dikatakan
bahan semua bahan yang berada di jendela score dinamakan sprite.
c. Panjang sprite kurang lebih secara default 28 frame, ini bisa
dipanjangkan sendiri dengan cara mandrag kekanan ujung sprite.
Panjangnya sprite ini merupaka jatah panjangnya animasi yang
bisa dilakukan.
d. Drag sebuah gambar lagi yang ukurannya lebih kecil dari gambar
pertama kemudian posisikan di score pada channel 2 frame 1,
kemudian samakan panjangnya dengan sprite pertama. Jika gambar

6

masih terasa besar bisa dekecilkan lagi dengan cara mendrag ujung
gambar yang ada di layar kearah dalam.
2. Membuat keyframe
a. Seblum mambuat animasi ada baiknya kita mempunyai gambaran
akan animasi yang dikerjakan (waktu dan animasi). Sebagai contoh
: panjang frame 30, posisi A B C D. Pada frame 10 objek bergerak
ke posisi B, frame 20 ke posisi C dan 30 ke posisi D, yang
dianimasikan adalah sprite cahnnel 2.

7

b. Maka pada frame ke 10 klik sprite
2 kemuadian klik kanan – pilih
insert keyframe. Perhatikan pada
spritenya tercipta sebuah bulatan
kecil tepat pada frame 10, bulatan
kecil tersebut yang dinamakan

keyframe.

c. Selanjutnya geser objek yang ada dilayar ke posisi B. kemudian
klik kanan lagi pada frame 30 – insert keyframe - kemudian geser
objek di layar ke posisi C, dan terakhir klik kanan pada frame 30
insert keyframe lagi dan geser objek ke posisi D.
3.

Menjalankan Movie
Untuk

melihat

hasil

animasi, bisa dengan menekan
rewind kemudian tekan play
pada menu bar diatas.

8

C. Membuat Interaktive Movie
Interaktive merupakan spesialisasi macromedia direktor, yang mana
nantinya diwujudkan dalam sebuah penyajian informasi yang bisa ber
interaksi ( imbal balik) dengan user. Sebagai latihan kita akan membuat
profile pribadi sederhana dengan 1 halaman utama dan tiga halaman sub
menu. Untuk langkanya adalah sebagai berikut :
1. Menyiapkan stage dan mengimpor bahan
a. Untuk latihan kali ini ukuran stage dibuat 800 X 600 dengan warna
hitam.
b. Kemudian import beberpa gambar yang sudah disiapkan. Dengan
color depth 32 bit, trim white space, dither dan same setting for
remaining images aktif.
2. Mengatur halaman
a. Pilih gambar “hal01” di cast kemudian drag ke score channel 1
frame 1. atur panjang sprite menjadi 30 frame
b. Pilih gambar “hal02” di cast kemudian drag ke score channel 1
frame 35 atur panjangnya menjadi 30 frame sehingga sprite ini
berakhir pada frame 65.
c. Untuk gambar “hal03” dan “hal04” lakukan hal yang sama dengan

menempatkanya masih pada channel 1 kemudian panjangnya
sprite 30

dan antar sprite diberi jarak 5 frame. Untuk lebih

jelasnya bisa dilihat pada gambar.

9

Kalu dilihat sekrang kita anggap sudah mempunyai 4 halaman

yang

masing masing diwakili oleh gambar yang sudah diatur tadi. Coba kita play.
Apa yang terjadi? Ternyata playhead terus berjalan tanpa henti, ini tidak sesaui
dengan konsep interaktif dimana seharusnya playhead berhenti pada satu
halaman dan playhead akan berpindah halaman jika kita beri perintah. Untuk
itu kita lanjutkan tahap berikutnya.
3. Membuat marker dan stop script
a. Marker bisa dibilang sebuah penanda halaman atau judul halaman.

Untuk tingkatan lebih lanjut kita bisa gunakan lebih dari sekedar
penanda halaman. Cara membuatnya adalah : cari sebuah baris
kosong pada jendela score yang memanjang kekanan.
b. Tepat pada frame pertama baris
kosong tadi, klik sekali maka
akan muncul sebuah segitiga dan
disampingnya

muncul tulisan

new marker.

c. Ganti tulisan new marker tersbut dengan nama “menu”. Untuk
menghapus marker tinggal drag segitiga marker keatas.
d. Kemudian klik lagi pada frame 35 masih dibaris tadi, kemudian
namai marker tersebut dengan “biodata”. Frame 35 merupakan
awal dari sprite ke 2 (halaman 2) sehingga harus diberi tanda
(marker).
e. Lakukan hal yang sama pada sprite selanjutnya, kali ini beri nama
“CV” untuk halaman 3 dan “gallery” untuk halaman 4.
f. Untuk membuat play head berhenti pada akhir setiap halamn maka
kita perlu membuat stop script. Caranya adalah, cari channel script
yang tempatnya tepat berada diatas baris angka frame.

10

g. Tepat diakhir setiap sprite (halaman) doble klik pada channel
script, maka akan muncul jendela behaviours script. Tepat diantara
on exit frame me dan end ketikan “ go to the frame”, klik tanda
petir untuk men cek apakah script sudah benar kemudian close
jendela tersebut. Maka tepat diman kita men “double klik” tadi
tercipta sebuah frame baru.

h. Lakukan hal yang sama pada setiap akhir Sprite atau halaman
lainnya. Untuk lebih mudah copy frame yang baru saja tercipta tadi
kemudian paste ke setiap akhir sprite.

Kalau kita jalankan sekarang, play head tidak lagi berjalan terus akan
tetapi berhenti pada frame 35 tepat diman kita memberikan stop script
tadi. Tetapi dengan begini bagaiman kita memrintahkan untuk pindah

11

ke halaman lainya? Untuk itu maka kita perlu membuat tombol
navigasi.
4. Membuat tombol navigasi
Macromedia director telah menyediakan sendiri fasilitas untuk
membuat tombol sederhana, meskipun kita bisa mengimport tombol
dari software lain. Untuk membuatnya cukup mudah
a. Tempatkan playhead pada frame 1 kemudian masuk menu Insert –
control – Push Button.
b. Maka di layar akan terlihat sebuah persegi panjang yang menunggu
untuk diinputkan nama, masukkan nama tombol “biodata” yang
nantinya tombol ini akan menghubungkan (link) ke halaman
biodata.

c. Untuk mengedit nama tombol bisa double klik pada tombol
kemudian blok tulisannya, klik kanan pilih font (yang bawah).
Maka akan muncul jendela untuk mengatur teks, atur teks
kemudian OK.

12

d. Lihat pada score tercipta sebuah
sprite baru pada channel 2,
panjangkan sprite tersbut sampai
sama

panjang

dengan

sprite

gambar “hal01”.

e. Jika dilihat Sprite tersebut
masih memilki nama default,
hal ini akan menyulitkan kita
jika project sudah berjalan
jauh

karena

membingungkan

akan
untuk

pengeditan. Untuk itu kia bisa
memberikan nama pada sprite
tersebut dengan cara : double klik pada sprite tersebut kemudian
pada cast member name beri nama biodata, kemudian close. Lihat
apa yang terjadi pada sprite, terdapat nama biodata.

f. Dengan keadaan playhead masih pada frame 1 lakukan pembuatan
tombol untuk menghubungkan ke halaman CV dan gallery.

13

Coba jalankan Movie, apa yang terjadi? Ternyata meskipun tombol
sudah di klik halaman tidak berpindah. Ini disebabkan karena belum
adanya perintah pada tombol tersebut.
5. Scripting pada Tombol
Scripting pada director dinamakan lingo. Untuk memberkan script
pada tombol tidaklah sulit karena direktor memberkan fasilitas dengan
nama behaviour. Caranya adalah sebagai berikut.
a. Klik

kanan

pada

tombol biodata, boleh
dari

score

maupun

stage, kemudian pilih
behaviours.

Maka

akan muncul jendela
behaviours pada panel
kanan

dibawah

property inpector.

b. Pada jendela behaviour terbagi mejadi 3 bagian. Bagian atas
merupakan untuk memebuat judul behaviours, sedang yang kiri
bawah merupakan “events” atau kejadian yang berlangsung

14

sedangkan sebelahnya merupakan “action” atau tindakan atas
kejadian yang ada.
c. Untuk awal klik pada bagian
atas pilih tanda + - new
behaviour. Beri nama sesuai
dengan tombol yang sedang
kita kerjakan “biodata”, takan
ok.

d. Pada events klik tanda + maka akan mucul bermacam pilihan kan
sebuah kejadian eksekusi mouse dan keyboard. Yang akan kita
pakai adalah eksekusi mouse yang diantaranya ada :
-

Mouse up : suatu kejadian jika
mouse ditekan kemudian dilepas

-

Mouse Down : suatu kejadian
jika

mouse

ditekan

tanpa

menunggu dilepas
-

Mouse Within : suatu keadaan
dimana mouse di berada diantara

-

Mouse enter
dimana

: suatu keadaan

kursor

masuk

area

tombol
-

Mouse leave
dimana

kursor

: suatu keadaan
meninggalkan

tombol
Untuk kali ini kita pilih mouse up
karena

kita

akan

menekan

dan

melepas mouse untuk mengeksekusi
tombol

15

e. Pada Action

pilih

tanda

+

kemudian pilih navigation - go
to marker, karena tombol ini
adalah tombol “biodata” maka
kita pilih marker “biodata”

f. Rewind kemudian play. Coba klik pada tombol biodata, apa yang
terjadi? Halaman berpindah. Lakukan scripting behaviour ini untuk
tombol yang lain dengan catatan, nama behaviour dan navigasi
marker sesuaikan dengan nama tombol.
6. Variasi Tombol
Ada kalanya kita harus menggunakan variasi tombol agar lebih
menarik. Masih dengan menggunakan behaviour ini kita bisa melakukan
hal ini dengan cara :
a. Masuk

ke

behaviour

tombol

“biodata” kemudian aktifkan nama
behaviournya.

Pada

event,

tambahkan mouse enter kemudian
pada actionnya pilih sprite, change
ink pilih reverse, ok.

b. Kemudian masih di event yang
sama, pada actionnya tambahkan
cursor – change cursor pilih
finger

16

c. Kemudian tambahkan event baru mouse leave kemudian pada
action pilih sprite, change ink pilih copy, ok
d. Masih di event yang sama, pada actionnya tambahkan cursor –
restore cursor. Coba jalankan movienya dan klik pada tombol.
7. Membuat tombol Back
Jika kita sudah masuk ke halam yang diinginkan bagaimana kita
kembali ke menu awal, untuk itu kita perlu membuat tombol “back”. Jika
tidak maka aplikasi ini akan mengalami dead link.
a. Buat tombol baru beri nama, kemudian panjangkan spritenya mulai
halaman ke 2 sampai halaman terakhir.

b. Berikan behaviour dengan navigasi go marker “menu” jalankan
aplikasi.
D. Media element
1. Teks
Teks merupakan komponen penting
terutama dalam penyampaian isi informasi
dalam aplikasi. Untuk membuat teks sangat
mudah, hanya dengan masuk ke insert –
media elemet – teks, atau tinggal mengklik
icon teks pada tool bar atas, maka akan
muncul jendela teks. Tinggal ketikan teks
kemudian jika ingin diatur klik kanan pilih
font, dan atur.

17

2. Bitmap
Fasilitas bitmap memudahkan
kita untuk membuat gambar - gambar
sederhana. Untuk memunculkan teks
tinggal masuk ke insert - media
element – bitmap maka akan muncul
jendela image paint. Pada dasrnya
fasilitas ini hampir sama dengan
aplikasi paint pada windows dan
penggunaanya hampir sama.
E. Menambahkan Sound
Sound merupakan komponen pendukung yang sangat penting. Adapun file
yang bisa dimasukkan natar lain mp3 dan wav. Untuk import file sound sama
dengan file gambar, cuma penempatan pada score yang berbeda. Drag file
sound ke sound channel pada score, tempatkan pada channel 1 atau channel 2.
sedangkan jika ingin sound tersebut bermain berulang - ulang maka pada
property inspector pilih sound kemudian checklist pda option loop.

18

Jika sound ingin digunakan sebagai effek ketika tombol disentuh
atau di klik maka ada beberapa lagkah yang harus dilakukan. Import sound
yang berjenis effek bukan musik, biasanya berdurasi pendek karena hanya
berupa 1 atau 2 nada saja. Setelah itu masuk ke behaviour salah satu tombol,
kemudian pilih eventnya, jika ingin ketika disentuh berbunyi maka pilih event
mouse enter, akan tetapi jika ingin ketika diklik berbunyi maka pilih mouse up
atau mouse down. Kemudian pada actionya pilih sound – play cast member –
pilih nama sound yang ingin dijadika efek. Tentu saja yang terdaftar disini
hanya sound yang berada di cast member.

F. Creating Projector
Creating Projector merupakan langkah terakhir dalam membuat aplikasi.
Langkah ini akan menjadikan file project (*.dir) menjadi file *.exe. Caranya
adalah
a. Simpan movie yang telah dibuat, kemudian masuk file – create
projector
b.

Akan muncul jendela create projector, cari file yang sudah disimpan
tadi kemudian add

c. Tekan option kemudian atur parameter yang ada
-

Untuk Play back pilih semua option play every movie dan
animate and background

-

Untuk Option pilih full screen atau in a window

19

-

Untuk stage size pilih use movie setting dan checklist center

-

Untuk media jangan dikompres dan untuk player gunakan
standart

d. Tekan Ok , kemudian tekan create
e. Beri nama file aplikasi ini dan usahakan simpan 1 folder dengan file
bahan bahan direktor ini.
f. Cari file lewat windows eksplorer kemudian jalankan.

20