Tutorial ActionScript

Didik Wijaya

Bagian: 2—Navigasi

Abstrak: Action play, stop, goToAndPlay, goToAndStop. Berbagai opsi action goTo. Even dan berbagai even mouse.

Prasyarat: Dasar-dasar ActionScript (lihat Bagian 1)

Salah satu fungsi mendasar dari ActionScript adalah untuk membuat navigasi movie Flash. Yang dimaksud navigasi ini adalah bagaimana membantu user untuk masuk ke bagian-bagian movie tertentu misalnya frame atau scene tertentu. Navigasi ini erat kaitannya dengan sistem menu dan struktur konten suatu movie Flash.

Untuk navigasi standar, action yang paling banyak digunakan adalah action yang terdapat dalam kategori Basic Actions, yaitu: Stop, Play, dan GoTo. Stop digunakan untuk menghentikan movie, Play digunakan untuk menjalankan movie. Sedangkan GoTo memiliki dua variasi, yaitu gotoAndPlay dan gotoAndStop. Sesuai dengan namanya gotoAndPlay memerintahkan Flash untuk masuk ke frame atau scene tertentu dan memainkannya. Action gotoAndStop adalah kebalikannya.

Menghentikan Movie

Buka file yang disertakan di dalam CD, Navigasi project.fla (dapat juga didownload dari mwmag.com). Lakukan Test Movie (Ctrl+Enter). Anda akan melihat suatu animasi yang cukup panjang terdiri dari 96 frame. Lihat Gambar 1.

Anda akan melihat bahwa movie dimainkan terus menerus (loop). Anda sama sekali tidak memiliki kontrol terhadap animasi tersebut. Kita akan mengontrol movie dengan skrip sederhana berisi action stop, play, dan goto. Buat layer baru dengan nama action. Anda akan menempatkan action di frame di layer tersebut. Biasakanlah untuk membuat action di layer tersendiri supaya memudahkan revisi.

Seleksi frame terakhir, yaitu frame 96. Kemudian klik kanan dan dari menu pulldown pilih Insert Blank Keyframe.

Klik dua kali frame terakhir, yaitu frame 96 untuk membuka Frame Action Panel. Masukkan skrip sederhana berikut:

stop();
// Tekan + > Basic Actions > Stop

Tutup Action Panel. Perhatikan keyframe 96, Anda akan melihat terdapat simbol huruf alfa. Ini berarti frame tersebut sudah memiliki action di dalamnya.

Lakukan Test Movie. Movie akan berhenti di frame terakhir.

Menambahkan Action goto

Sekarang Anda akan menambahkan action goto ke dalam movie. Dobel klik frame terakhir di layer (96) untuk membuka kembali Action Panel.

Pilih baris pertama yang mengandung action stop, kemudian klik tanda minus (-) untuk menghapus action tersebut. Kemudian tambahkan action goto:

gotoAndPlay(66);
// Tekan + > Basic Action > Go To
// pada isian Frame masukkan angka 66

Lakukan Test Movie. Anda akan melihat movie dimainkan pertama kali sampai frame terakhir kemudian kembali ke frame 66.

Lebih Lanjut Mengenai Action Goto

Action gotoAndPlay ataupun gotoAndStop memiliki beberapa parameter yang penting untuk diperhatikan. Dengan mengubah parameter Anda dapat memerintahkan Flash untuk menuju frame, scene, atau label frame tertentu. Lihat opsi action goto di Gambar 2. Beberapa parameter dan keterangannya dapat dilihat di Tabel 1.

Menggunakan Tombol untuk Navigasi Movie Flash

Selama ini Anda tidak dapat secara interaktif mengontrol jalannya movie. Anda menggunakan tombol untuk navigasi movie Flash. Untuk itu digunakan mouve event. Movue event sebenarnya hanya salah satu dari beberapa event handler. Ada beberapa macam event handler, yaitu Mouse Event, Key Event, dan Clip Event. Untuk saat ini kita hanya membahas Mouse Event. Event menandakan suatu kejadian yang terjadi, kalau dinamakan mouse event, secara sederhana dapat dikatakan mouse event tersebut adalah segala kejadian yang berkaitan dengan mouse, baik itu penekanan tombol mouse, pergerakan mouse, dll.

Buka file Navigasi project.fla.

Buat layer baru dengan nama action kemudian klik dua kali frame 1 dan berikan action stop untuk frame 1.

Buatlah sebuah instans tombol di layer baru.

Seleksi instans tombol tersebut kemudian buka Action Panel (dari menu bar Window > Actions). Masukkan skrip berikut untuk tombol:

on (release) {
    gotoAndPlay(2);
}
// Tekan + > Basic Actions > Go To
// Di pilihan Frame masukkan frame yang dituju yaitu 2

Saat action goto dipilih maka Flash otomatis memunculkan salah satu even mouse, yaitu on (release), di mana even ini merupakan default Flash, sebab sering digunakan. Even on (release) menerangkan apa yang akan terjadi saat tombol mouse diangkat. Dalam contoh di atas Anda memerintahkan untuk memainkan movie mulai dari frame 2.

Lakukan Test Movie. Sekarang Anda perlu menekan tombol untuk memainkan movie.

Buat 2 buah instans tombol lagi di stage. Seleksi salah satu tombol dan buka Action Panel. Masukkan skrip berikut:

on (release) {
    stop();
}
// Tekan + > Basic Actions > On Mouse Event
// Tekan + > Basic Actions > Stop

Seleksi tombol yang lain, kemudian masukkan skrip berikut:

on (release) {
    play();
}
// Tekan + > Basic Actions > On Mouse Event
// Tekan + > Basic Actions > Stop

Lakukan Test Movie. Anda akan melihat, bahwa Anda dapat menghentikan atau memainkan movie pada titik di mana Anda inginkan dengan menekan dua tombol terakhir. Lihat Gambar 3.

Lebih Lanjut Mengenai Even

Even mouse adalah satu dari beberapa jenis even yang diberikan Flash. Yang lainnya yaitu even Key dan even Clip. Even Key mengacu pada apa yang terjadi dengan keyboard, sementara even Clip mengacu pada apa yang terjadi di klip movie. Untuk even mouse sendiri, selain release, terdapat pula even lain yang dapat dimonitor. Lihat Gambar 4 dan Tabel 2.

Anda dapat mencoba sendiri bereksperimen dengan berbagai even mouse tersebut. Sebagai catatan, tidak hanya satu buah even mouse saja yang dapat diterapkan pada tombol. Anda dapat menerapkan berbagai even untuk satu instans tombol. Misalnya:

on (rollOver) {
    play();
}

on (rollOut) {
    stop();
}

on (release) {
    gotoAndPlay(2);
}

Pada contoh di atas, dengan instans tombol yang sama Anda menerapkan tiga buah handler even yang berbeda. Pada saat pointer mouse bergerak di atas area hit tombol maka movie dimainkan, sedangkan saat pointer bergerak menjauhi area hit maka movie klip dihentikan. Dan pada saat tombol mouse dilepas—setelah tombol ditekan tentunya—movie akan dimainkan kembali dari frame 2.

Selain itu Anda juga dapat menggunakan beberapa even untuk masuk ke perintah berikutnya yang sama, seperti ini:

on (release, rollOut) {
    gotoAndPlay(2);
}

Uraian di atas merupakan dasar dari sebuah navigasi movie Flash. Di edisi berikutnya Anda akan diajak untuk membuat sistem menu yang lebih kompleks. Salah satunya adalah menu pulldown, yaitu dengan menggabungkan animasi dan beberapa buah even mouse sekaligus. Selamat mencoba dan sampai jumpa di kesempatan mendatang.

Membuat benda bergerak

onClipEvent(enterFrame)
{
this._x += 1
}

TUTORIAL

Pada prinsipnya, menu-menu di atas dianimasi dengan teknik tween easing bertingkat, plus blur.

Ada beberapa tingkat tween easing.

easing 1
Menu tutorial muncul stlh preloading, kemudian stickman kanan kiri muncul

easing 2
ketika easing1 selesai, lalu menu enter dan info muncul.

easing 3
semua menu hilang ketika klik menu "enter"

easing 4
setelah menu hilang akan muncul menu utama dengan submenu...

dst...

Dalam actionscript, easing bertingkat seperti itu diterjemahkan spt ini

fungsi easing 1
... menu totorial muncul dari atas dg blur dg tween
... stickman muncul dari kiri dan kanan dg tween
... ketika fungsi easing 1 selesai
......jalankan munculkan menu enter dg tween (easing 2)

fungsi easing 2
... menu enter dan info muncul dg tween

fungsi klik menu enter
... jalankan fungsi tiga

fungsi easing 3
... hilangkan semua menu dg tween
........ ketika semua menu hilang, munculkan menu utama dg submenu (easing 4)

fungsi easing 4
... munculkan menu dan submeny dg tween


tween dan easing adalah class yg built in di flash mx
kita harus mengimpornya

import mx.transitions.Tween;
import mx.transitions.easing.*;
import flash.filters.BlurFilter;

untuk menggunakan tween kita memakai actionscript seperti ini
nama-nama variable dibuat unik agar tdk konflik
var teksTutorialy:Tween = new Tween(mt, "_y", Regular.easeOut, -40, 60, 16, false);


itu menggerakkan mc bernama "mt" pada properti "x" dg tipe easing "Regular" dimulai pada x =-40 dan diakhiri pada x=60 sebanyak 16 frame (time duration is false)

alpha seperti itu juga. dari alpha "0" (invisible) ke alpha "100"
var teksTutorialxalpha:Tween = new Tween(mt, "_alpha", Regular.easeOut, 0, 100, 16, false);


Bagaimana dengan blur?
Ini blur x 50 ke 0
var teksTutorialxBlur:Tween = new Tween(teksBlur, "blurX", Strong.easeOut, 50, 0, 16, false);


Karena menu contoh adalah tween easing bertingkat, kita harus menggunakannya dalam fungsi agar mudah dipakai ulang.

cara membuat fungsinya spt ini:

Code:

function easingsatu() {

//Teks tutorial easing & blur

var teksTutorialy:Tween = new Tween(mt, "_y", Regular.easeOut, -40, 60, 16, false);

var teksTutorialxalpha:Tween = new Tween(mt, "_alpha", Regular.easeOut, 0, 100, 16, false);

var teksTutorialxBlur:Tween = new Tween(teksBlur, "blurX", Strong.easeOut, 50, 0, 16, false);

//Stickman easing

var stik1:Tween = new Tween(stik1, "_x", Back.easeOut, -80, 70, 16, false);

var stik2:Tween = new Tween(stik2, "_x", Back.easeOut, 560, 440, 16, false);

}

Seperti skema di atas, kita harus menjalankan easing2 saat easing1 selesai. Gunakan
onMotionFinished = function()

sehingga actionscriptnya menjadi'

Code:

function easingsatu() {

//Teks tutorial easing & blur

var teksTutorialy:Tween = new Tween(mt, "_y", Regular.easeOut, -40, 60, 18, false);

var teksTutorialxalpha:Tween = new Tween(mt, "_alpha", Regular.easeOut, 0, 100, 16, false);

var teksTutorialxBlur:Tween = new Tween(teksBlur, "blurX", Strong.easeOut, 50, 0, 16, false);

//Stickman easing

var stik1:Tween = new Tween(stik1, "_x", Back.easeOut, -80, 70, 16, false);

var stik2:Tween = new Tween(stik2, "_x", Back.easeOut, 560, 440, 16, false);

//saat easing 1 selesai jalankan easing dua

teksTutorialy.onMotionFinished = function() {

//Info easing

easingdua()

mt._alpha=100;

}

}

mt alpha itu untuk membuat menu yg awalnya tdk kelihatan, menjadi kelihatan di akhir tween.

Khusus untuk tween blur, kita perlu membuatnya blur hanya saat bergerak dan membuatnya tidak blur ketika tidak bergerak.
Untuk itu kita bisa gunakan onMotionChanged = function()
sehingga actionscriptnya menjadi'

Code:

function easingsatu() {

//Teks tutorial easing & blur

var teksTutorialy:Tween = new Tween(mt, "_y", Regular.easeOut, -40, 60, 18, false);

var teksTutorialxalpha:Tween = new Tween(mt, "_alpha", Regular.easeOut, 0, 100, 16, false);

var teksTutorialxBlur:Tween = new Tween(teksBlur, "blurX", Strong.easeOut, 50, 0, 16, false);

//Stickman easing

var stik1:Tween = new Tween(stik1, "_x", Back.easeOut, -80, 70, 16, false);

var stik2:Tween = new Tween(stik2, "_x", Back.easeOut, 560, 440, 16, false);

//kembalikan ke no blur

teksTutorialxBlur.onMotionChanged = function() {

mt.filters = [teksBlur];

};

//saat easing 1 selesai jalankan easing dua

teksTutorialy.onMotionFinished = function() {

//Info easing

easingdua()

mt._alpha=100;

}

}

apa itu "teksBlur"? Ini adalah variable akhir mc "mt".

var teksBlur:BlurFilter = new BlurFilter(0, 0, 3);

Artinya, no blur di X dan Y, serta quality=3

Coba ganti dengan new BlurFilter(10, 10, 3);
akan kelihatan mc "mt" tetap sedikit blur saat easing selesai.

Membuat loading:

onClipEvent(load){

this._xscale = 0;

}

onClipEvent(enterFrame){

this._xscale += 2;

if(this._xscale>=100){

_root.gotoAndStop(3);

}

}