Tutorial Navigasi Timeline Adobe Flash

NAVIGASI TIMELINE

INDIKATOR

Setelah mengikuti perkuliahan, mahasiswa diharapkan dapat:

• Membuat animasi interactive frame by frame

• Membuat navigasi dengan tombol

• Membuat koding actionscript untuk navigasi

DESKRIPSI SINGKAT

Membuat tombol yang dapat digunakan untuk navigasi frame dalam animasi multimedia dengan menggunakan actionscript 3.0. Sebagai gambaran konten yang akan kita buat dalam bab ini adalah :

- Frame 1: Animasi Intro

- Frame 2: Konten 1

- Frame 3: Konten 2

- Frame 4: Konten 3

- Frame 5: Pentutup

URAIAN

- Membuat animasi frame by frame

- Actionscript untuk navigasi frame

Frame by frame adalah jenis animasi yang dalam proses pembuatanya satu frame mewakili satu tampilan.

1. Buatlah layer pada timeline seperti gambar berikut:

2. Membuat intro pada frame 1 layer konten

Untuk intro kita akan membuat animasi tulisan “SELAMAT DATANG” selama beberapa detik dan setelah selesai akan secara otomatis berpindah ke frame nomor 2 yaitu konten 1 :

a. Buatlah symbol movieclip “intro”: Klik menu insert New Symbol Name: intro Type: movie clip OK. Setelah itu kita masuk dalam mode edit symbol intro.

b. Tambahkan text pada stage: Klik text tool Klik Stage Ketik “SELAMAT

DATANG”

c. Selanjutnya kita buat animasi tulisan tersebut berjalan :

- Klik frame nomor 1 klik kanan create motion tween

- Klik frame nomor 20 Klik kanan Insert KeyFrame All

- Klik frame nomor 40 Klik kanan insert KeyFrame All.

- Klik Frame nomor 20 Klik text “SELAMAT DATANG” Ubah posisi/

ukuran/ rotasinya, jika perlu modifikasi juga path animasinya.

d. Ketika animasi sudah selesai maka akan berpindah ke frame nomor 2 pada

scene1. Untuk menambahkan actionscript-nya kita membutuhkan layer baru dan keyframe pada akhir animasinya.

- Tambahkan layer baru

- Klik frame nomor 41 layer action klik kanan Insert Blank Keyframe.

Maka akan muncul lingkaran putih pada frame nomor 41.

e. Untuk menambahkan kode actionscript: Klik frame nomor 41 layer action

Klik Kanan Actions (F9) ketika kode berikut ini:

Keterangan :

MovieClip(this.root) : menunjuk scene1.

f. Kembali ke scene1

g. Klik frame nomor 1 layer konten Drag symbol intro dari library ke stage

h. Agar animasi di frame 1 ini berjalan sampai selesai perlu ditambahkan actionscript untuk menghentikan animasi di scene1. Klik frame nomor 1 di layer action Klik kanan actions (F9) ketik kode berikut:

3. Langkah berikutnya adalah membuat konten yang ada di frame 2, 3 dan 4 Isi konten pada masing-masing frame tersebut pada dasarnya bebas, pada kasus disini akan kita contohkan konten di frame 2 yang berisi text dan gambar, untuk frame 3 dan 4 diharapkan ana dapat membuat konten sendiri dengan prinsip yang sama dengan konten frame 2

a. Klik frame nomor 2 pada layer konten klik kanan Insert Blank Keyframe

b. Tambahkan teks paragraf menggunakan text tool.

Klik text tool properties Type: Dinamic Behavior: Multiline Klik dan Drag di area stage

i. Ketikan paragraph untuk kontennya.

j. Atur jenis huruf/ font, size, color dan yang lainnya dengan menggunakan

properties.

k. Agar lebih menarik paragraph ini akan dibuat animasi ketika pertama kali

muncul, maka paragraph ini harus di-convert dulu menjadi movieclip

- Klik tombol selection (V) Klik paragraph Menu Modify Convert to Symbol (F8) Name: konten1 Type: Movie Clip Registration: pilih tengah OK

- Klik dua kali paragraph masuk dalam mode edit konten1

- Klik frame nomor 1 klik kanan create classic tween

- Klik frame nomor 15 klik kanan insert keyframe

- Klik frame nomor 1 klik paragraph properties ubah weight=1 dan

height=1

Hal ini agar pada saat pertama kali muncul paragraph dalam ukuran yang kecil dan kemudian menjadi ukuran yang sebenarnya

- Agar animasi tidak berjalan terus menerus maka perlu ditambahkan acrtionscript untuk menghentikan animasi. Tambahkan layer baru dan beri nama “action”

- klik frame nomor 15 pada layer action (sama seperti nomor frame terakhir

yang berisi paragraph) Klik kanan insert Keyframe (F6)

- klik frame nomor 15 pada layer action klik kanan actions (F9) ketik kode

berikut:

- Kembali ke scene1: klik (Perhatikan di stage, paragraph tadi tidak kelihatan, karena di frame 1 di dalam movie clip konten1 tadi kita ubah ukurannya menjadi height=1 dan width=1).

l. Buat tombol navigasi. Kita gunakan saja tombol yang sudah disediakan di

flash

- Klik frame nomor 2 pada layer tombol klik kanan insert blank keyframe

- Klik frame nomor 2 pada layer tombol - Klik menu window common libraries buttons pilih salah satu tombol drag

ke dalam stage (usahakan jangan menutupi paragraph).

- Berikan nama instan pada tombol tersebut: Klik tombol properties

instance name: “tombol1”

- Tombol tersebut berfungsi sebagai navigasi menuju frame nomor 3, untuk menambahkan actionscript event tombol: Klik frame nomor 2 layer actions klik kanan insert keyframe.