Modul Pemrograman Multimedia | 4 SKS

PERTEMUAN 15-16
NAVIGASI HALAMAN INTERAKTIF MULTIMEDIA

Pada pertemuan kali ini, kita akan membuat navigasi halaman interaktif multimedia, misalkan dengan
perencanaan sbb :

Berikut Rancangan Layar Media Pembelajaran yang akan kita buat :

MENU UTAMA

STMIK WIDYA PRATAMA | DICKE JSH SIREGAR 1

Modul Pemrograman Multimedia | 4 SKS

TUTORIAL PEMBUATANNYA DENGAN FLASH & AS 3.0

1. Membuat Menu Utama

a. Buka lembar kerja Flash dengan Action Script 3.0
b. Siapkan 3 Layer sbb :

c. Atur Stage di properties dengan ukuran (ukuran standart untuk aplikasi Mobile) :
W : 800
H : 480
FPS : 30

d. Aktifkan Frame 1 di layer Konten lalu buatlah Segiempat dengan Rectangle Tool dengan ukuran
di properties sbb :

STMIK WIDYA PRATAMA | DICKE JSH SIREGAR 2

Modul Pemrograman Multimedia | 4 SKS

e. Seleksi Gambar tsb (fill dan stroke nya) lalu Convert To Symbol menjadi Movie Clips dengan
nama “konten” dan beri instance name : “konten”, perhatikan pilihan titik registrasinya di
bawah ini :

f. Masih aktif di Layer Konten, Double Klik Movie Clips konten untuk masuk ke Mode Edit

g. Rubahlah Layer 1 di Mode edit Konten dengan nama “background”

h. Lalu tambahkan 5 layer baru diatas layer background dan rubah namanya seperti tampak pada
gambar :

STMIK WIDYA PRATAMA | DICKE JSH SIREGAR 3

Modul Pemrograman Multimedia | 4 SKS

i. Klik frame 1 layer tombol, lalu buatlah tombol dengan rectangle tool, lalu tambahkan static text
diatasnya (teks “HOME”) sbb :

j. Seleksi tombol tersebut beserta teksnya, lalu klik kanan, pilih Convert to Symbol menjadi button
dengan nama “tombol_home” dengan titik registrasi di tengah
k. Masih di Layer Tombol, buat 3 tombol berikutnya dengan cara :
 Klik kanan “tombol_home” lalu Copy dan Paste kan di sebelah kanannya.
 Selanjutnya klik kanan “tombol_home” hasil copy-paste, lalu pilih Duplicate Symbol,
Ketikan nama baru, yaitu “tombol_materi” dan klik OK.
 Kemudian dobel klik tombol_materi tsb untuk masuk ke mode edit tombol_materi untuk
mengedit teksnya menjadi “MATERI”. Lalu keluar dari mode edit tombol_materi dan
kembali lagi ke Mode edit Konten.
 Ulangi cara tersebut untuk membuat “tombol_animasi” dan “tombol_kuis”.
l. Setelah itu masing-masing tombol di beri instance name masing –masing “tombol_home”,
“tombol_materi”, “tombol_animasi” dan “tombol_kuis”
 Hasilnya sbb :

STMIK WIDYA PRATAMA | DICKE JSH SIREGAR 4

Modul Pemrograman Multimedia | 4 SKS

2. Membuat Layar Materi

m. Masih di mode edit konten, Klik kanan frame 40 layer tombol kemudian pilih Insert Frame,
sehingga tombol akan tampil sampai dengan frame 40 tanpa perubahan apapun. Hal ini
dikarenakan tombol yang ada akan selalu muncul di seluruh halaman.
n. Kemudian klik kanan frame 10 layer background dan pilih Insert Keyframe. Selanjutnya
buatlah sebuah persegi panjang dengan rectangle tool sebagai backround materi (stroke hitam,
fill putih). Selanjutnya klik kanan frame 40 layer background dan pilih Insert frame agar
background tersebut muncul sampai dengan frame 40.

o. Klik kanan frame 10 layer halaman_isi kemudian pilih Insert Blank Keyframe. Pada frame ini
ditujukan untuk meletakkan materi. Pada frame ini dapat ditambahkan text, animasi movieclip,
maupun video sesuai dengan konsep yang telah dibuat sebelumnya. Untuk sementara,
tambahkan sebuah static text "Tempat Teks Materinya”. Pada penjelasan selanjutnya teks
tersebut akan diganti dengan materi yang lebih kompleks.

STMIK WIDYA PRATAMA | DICKE JSH SIREGAR 5

Modul Pemrograman Multimedia | 4 SKS

p. Klik kanan frame 20 layer halaman_isi kemudian pilih Insert Keyframe. Kemudian edit teksnya
menjadi "Tempat Animasinya" pada stage.
q. Klik kanan frame 30 layer halaman_isi kemudian pilih Insert Keyframe. Kemudian edit teksnya
menjadi "Tempat Kuisnya " pada stage.
r. Klik kanan frame 40 layer halaman_isi kemudian pilih insert frame

s. Penggunaan kelipatan 10 setiap Keyframe dimaksudkan untuk mempermudah dalam

menambahkan efek transisi dan memudahkan proses editing di kemudian hari.
t. Jangan lupa Simpan filenya. 

MEMBUAT LABEL
Label dalam flash adalah sebuah tanda dalam bentuk teks (String) yang digunakan untuk
mengidentifikasi frame. Sebagai contoh apabila terdapat animasi berdurasi 200 detik, kemudian
pada frame 100 ditambahkan label “tengah”, maka untuk melompat ke frame tersebut cukup
dengan menggunakan perintah gotoAndPlay(“tengah”).
Label berfungsi untuk mempermudah dalam mengidentifikasi frame, sehingga ketika struktur
keyframe suatu file berubah akibat penambahan atau pengurangan frame, kode tidak perlu diubah.
Untuk lebih jelasnya, lanjutkan file di atas dengan langkah sebagai berikut :

u. Untuk menambahkan label klik frame 1 layer label kemudian buka panel properties. Ketikan
hal_1 pada kolom Frame label.

STMIK WIDYA PRATAMA | DICKE JSH SIREGAR 6

Modul Pemrograman Multimedia | 4 SKS

v. 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 hal_3 dan
hal_4. Setelah label hal_4, klik kanan frame 40 layer label, pilih insert frame.

STMIK WIDYA PRATAMA | DICKE JSH SIREGAR 7

Modul Pemrograman Multimedia | 4 SKS

PENAMBAHAN ACTIONSCRIPT UNTUK NAVIGASI

Setelah masing-masing elemen tersusun dengan baik dan memiliki instance name, tahapan
berikutnya adalah menambahkan kode action script. Kenapa seluruh halaman diletakkan di dalam
movieclip “konten”?, hal tersebut dikarenakan pengaturan objek dalam sebuah movieclip akan lebih
mudah dilakukan, dan kode akan dijalankan satu kali saja sehingga tidak membutuhkan memori
yang banyak.
Dalam pemrograman terdapat istilah garbage collector, dimana listener-listener yang sudah tidak
digunakan harus dihapus. Apabila seluruh konten ditampilkan ke dalam timeline utama (Scene),
maka akan muncul peluang kode yang ada di frame 1 (halaman depan) berulang beberapa kali,
sehingga akan menambah kebutuhan memori dan memperlambat kerja aplikasi. Dengan
memasukkan seluruh konten ke dalam movieclip kode akan lebih mudah diatur, diaktivasi dan
dihapus.

Untuk menambahkan kode navigasi, perhatikan langkah-langkah berikut :

w. Keluar dari Mode edit Konten, kembali ke Scene 1
x. Pada Frame 1 Layer as3, klik kanan pilih Action
y. Ketikan script berikut di editor action :

z. Jalankan aplikasi dengan menekan Ctrl+Enter. Uji coba tombol dan navigasinya, pastikan semua
bekerja dengan baik. Apabila tidak ada langkah yang salah, maka sistem navigasi dari media
pembelajaran interaktif akan berfungsi dengan baik.

STMIK WIDYA PRATAMA | DICKE JSH SIREGAR 8

Modul Pemrograman Multimedia | 4 SKS

MEMBUAT TRANSISI HALAMAN

a. Lock Layer Konten terlebih dahulu agar tidak terganggu saat proses membuat transisi

b. Masih di scene 1, aktifkan frame 1 layer transisi, buatlah di stage persegi panjang (tanpa stroke)
menggunakan rectangle tool dengan letak dan ukuran sbb :

c. Masih aktif di frame 1 layer transisi, buatlah garis menggunakan line tool membelah
persegipanjang tsb :

d. Seleksi gambar di layer transisi tersebut, kemudian Convert to Symbol menjadi movieclip
“transisi”. Setelah itu beri Instance Name : “transisi”

STMIK WIDYA PRATAMA | DICKE JSH SIREGAR 9

Modul Pemrograman Multimedia | 4 SKS

e. Selanjutnya dobel klik untuk masuk ke mode edit transisi

f. Pada mode edit, seleksi hanya bagian atas dari kotak yang terbelah, kemudian Convert to
Symbol menjadi movieclip “tutup_atas”. Jangan lupa beri instance name : “tutup_atas”.
g. Seleksi bagian bawah dari kotak yang terbelah, kemudian Convert to Symbol menjadi
movieclip “tutup_bawah”. Jangan lupa beri instance name : “tutup_bawah”.
h. Hapus outline yang tersisa dari stage, sehingga hanya menyisakan 2 movieclip “tutup_atas” dan
“tutup_bawah”.
i. Seleksi kedua movieclip tersebut, kemudian klik kanan dan pilih Distribute to Layer. Sehingga
movie clip “tutup_atas” akan diletakan pada layer tutup_atas, movie clip “tutup_bawah” akan
diletakan pada layer tutup_bawah.

j. Selanjutnya buatlah sebuah animasi tween membuka dan menutup dengan durasi 30 frame.
Pada keyframe 1 dan keyframe 30, posisi penutup sama yaitu membuka penuh. Sedangkan pada
keyframe 15 posisi penutup, menutupi layar secara penuh.

STMIK WIDYA PRATAMA | DICKE JSH SIREGAR 10

Modul Pemrograman Multimedia | 4 SKS

1. Pada layer tutup_bawah, klik kanan frame 15 pilih insert keyframe, kemudian klik kanan
frame 30 pilih insert keyframe (pilihan insert keyframe akan mencopy isi keyframe
sebelumnya pada layer yang sama)
2. Pada layer tutup_atas, klik kanan frame 15 pilih insert keyframe, kemudian klik kanan
frame 30 pilih insert keyframe.
3. Hasilnya sbb :

4. Kemudian geserlah movie clip tutup atas dan bawah untuk frame1 dan 30, seperti tampak di
bawah ini :

5. Lalu create classic tween antar frame 1 dan 15, dan antara frame 15 dan 30.

STMIK WIDYA PRATAMA | DICKE JSH SIREGAR 11

Modul Pemrograman Multimedia | 4 SKS

k. Keluarlah dari Mode edit Transisi, kembali ke Scene 1

l. Klik kanan frame 1 layer as3, pilih Action, lalu rubahlah script yang ada menjadi :

m. Simpanlah, lalu jalankan dengan Ctrl+Enter

STMIK WIDYA PRATAMA | DICKE JSH SIREGAR 12

Modul Pemrograman Multimedia | 4 SKS

MENGISI SUB HALAMAN

n. Aktif di Scene 1, double klik movie clip konten (JANGAN LUPA BUKA TERLEBIH DAHULU LOCK
LAYERNYA agar bisa di double klik)untuk masuk ke mode edit konten
o. Klik kanan frame 10 layer sub_halaman, pilih insert blank keyframe.
p. Selanjutnya buatlah sebuah kotak dan teks “materi 1”. Seleksi kotak dan teks tersebut
kemudian Convert to Symbol menjadi movieclip “materi” dan diberi instance name : “materi”
q. Selanjutnya buatlah 2 buah button “panah_kanan” dan “panah_kiri”
r. Jangan lupa beri instance name untuk button “panah_kanan” instance name-nya =
“tombol_next” dan untuk button “panah_kiri” instance name-nya = “tombol_prev”.

s. Dobel klik movieclip materi untuk mengeditnya (masuk ke mode edit materi).
t. Klik kanan frame 2 dan pilih insert KeyFrame. Edit konten (materi yang ada) menjadi materi
selanjutnya. Pada tahapan ini materi yang dimasukkan dapat berupa teks, gambar, animasi
movieclip, dan video.

Frame 1 Layer1 Frame 2 Layer1 Frame 3 Layer1 Frame 4 Layer1

Frame 5 Layer1

STMIK WIDYA PRATAMA | DICKE JSH SIREGAR 13

Modul Pemrograman Multimedia | 4 SKS

u. Kemudian masuk ke Mode edit Konten

v. Klik kanan frame 10 layer as3, pilih insert blank keyframe
w. Klik kanan frame 10 tsb, pilih Action, lalu ketikan script berikut :

x. Kemudian kembali ke scene 1, jalankan program dengan Ctrl+Enter

y. Jangan lupa simpan filenya….sampai disini dulu…

STMIK WIDYA PRATAMA | DICKE JSH SIREGAR 14