Tutorial

Navigasi Sederhana

Tutorial

Navigasi Sederhana dengan Actionsript 3.0

Membuat transisi navigasi bertujuan untuk mempercantik tampilan project Flash kita bisa untuk membuat Game Flash, Aplikasi Flash, maupun Aplikasi Interaktif. navigasi merupakan tombol penting yang bertujuan untuk membantu kita untuk berpindah scene, layer maupun untuk navigasi musik dan video player.

Langsung saja Cekidot.

file - new document (membuat dokumen baru)
type : ActionScript 3.0 (width: 350 px, Height 80 px, frame rate 12,00 fps, Background color putih) klik OK

Membuat symbol baru
klik insert - New Symbol (Ctrl + F8) membuat movie clip dengan nama txtButton

buat 2 layer
layer paling atas kamu buat teks (isi teks nya HOME) dan layer bawah kamu buat shape kotak (shape kotak warna biru, warnanya terserah kalian)

membuat symbol baru lagi
klik insert - New Symbol (Ctrl + F8) membuat movie clip dengan nama mainButton

buat 4 layer
layer 1 rename (mask)
layer 2 rename (text1)
layer 3 rename (shadow)
layer 4 rename (txtButton)

oke tahap selanjutnya minum kopi dulu, kalau gak suka kopi minum Aq*a biar fokuss

tetap di mainButton klik layer 1 yang bernama 'mask' tadi posisi paling atas kamu buat shape kotak lagi ukurannya harus sesuai kayak shape kotak di step 2 tadi.

layer Text tulis kata 'HOME' ukurannya sama dengan yang di symbol 'txtbutton' tadi

selanjutnya klik layer shadow , kamu buatkan shape kotak, posisi dibawah shape di layer mask tadi, beri jarak sedikit, (ukurannya, lebarnya sama, tapi tingginya lebih kecil, kira kira 10% dari shape dari layer mask

klik layer txtbutton, drop/serett/tarikk symbol txtButton dari library tempat kan tepat di bawah shape shadow. otomatis dibawah shape mask

klik scane 1 di bawah judul flash mu,

okee sekarang waktunya memasukkan actionscript 3.0

buat 1 layer terus klik F9 atau klik kanan terus klik 'actions'

import fl.transitions.easing.*;
import fl.transitions.*;

var home = new mainButton();
this.addChild(home);

home.x= 80;
home.y=40;

var portfolio = new mainButton();
this.addChild(portfolio);

portfolio.txt1.text = "PORTFOLIO";
portfolio.txtButtom.txt2.text = "PORTFOLIO";
portfolio.x= home.x + home.width;
portfolio.y=home.y;

var contact = new mainButton();
this.addChild(contact);

contact.txt1.text = "CONTACT";
contact.txtButtom.txt2.text = "CONTACT";
contact.x= portfolio.x + portfolio.width;
contact.y=home.y;

home.buttonMode = true;
home.useHandCursor = true;
home.mouseChildren = false;

portfolio.buttonMode = true;
portfolio.useHandCursor = true;
portfolio.mouseChildren = false;

contact.buttonMode = true;
contact.useHandCursor = true;
contact.mouseChildren = false;

home.addEventListener("mouseOver", mouseRollOver);
portfolio.addEventListener("mouseOver", mouseRollOver);
contact.addEventListener("mouseOver", mouseRollOver);

home.addEventListener("mouseOut", mouseRollOut);
portfolio.addEventListener("mouseOut", mouseRollOut);
contact.addEventListener("mouseOut", mouseRollOut);

function mouseRollOver(e:MouseEvent) {

var easingFunc = Back.easeOut;
var ysa = 30;
var yfa =-5;
var duration =0.5;
var myTween:Tween = new Tween(e.target.txtButtom, "y", easingFunc, ysa, yfa, duration, true);

var easingFunc2 = Regular.easeOut;
var ysa2 = -16.3;
var yfa2 = -46;
var duration2 =0.5;
var myTween2:Tween = new Tween(e.target.txt1, "y", easingFunc2, ysa2, yfa2, duration2, true);

}

function mouseRollOut(e:MouseEvent) {

var easingFunc3 = Regular.easeOut;
var ysa3 = -5;
var yfa3 =30;
var duration3 = 0.5;
new Tween(e.target.txtButtom, "y", easingFunc3, ysa3, yfa3, duration3, true);

var easingFunc4 = Regular.easeOut;
var ysa4 = -46;
var yfa4 = -16.3;
var duration4 = 0.5;
new Tween(e.target.txt1, "y", easingFunc4, ysa4, yfa4, duration4, true);
}

Multimedia Indonesia