Flash

Flash - skrypt animowane menu wActionScript 3

Animowane menu w ActionScript 3 korzystające z danych HTML (FlashVars)

Przykład pokazuje jak stworzyć menu w ActionScript za pomocą biblioteki Tween Lite Basics

Skrypt bazuje na wartościach z FlashVars, które mogą być ręcznie wprowadzane przez kod HTML, kod generuj na tej podstawie animacje menu.
Plik zapisz pod nazwą menu.swf.

KOD HTML:

Pierwsyz parametr to ilość elementów, men1, men2 to nazwy zmiennych oraz ich wartości tekstowe. id1, id2 to linki do adresów.

UWAGA: Adres będzie wyglądał następująco: kategoria-(wartość id).html

czyli np. dla pierwszego id będzie: kategoria-1.html

Kod ActionScript:

//Importuje biblioteke
import gs.*;
import gs.plugins.*;
TweenPlugin.activate([AutoAlphaPlugin,TintPlugin]);

//maska
var MASK_HEIGHT:Number = myMask.height;

//obiekt Sprite do przetrzymywania menu
var menuHolder:Sprite = new Sprite();

//pozycja maski
menuHolder.x = myMask.x;
menuHolder.y = myMask.y;

//dodanie Sprite do sceny
addChild(menuHolder);

var mouseIsOver:Boolean = false;

//starsza pozycja Y
var oldY:Number = menuHolder.y;

//ustawienie maski
menuHolder.mask = myMask;

var paramObj:Object = LoaderInfo(this.root.loaderInfo).parameters;
//tablica przetrzymująca id
var ids:Array = new Array();
//pętla do ilosci danych
for (var i=0; i < LoaderInfo(this.root.loaderInfo).parameters.ilosc; i++) {
//adres www
var element:String = LoaderInfo(this.root.loaderInfo).parameters["id"+(i+1)];
ids.push(element);
var j:int = 1+i;
//tworzenie pojedynczego elementu
var menuItem:MenuItem = new MenuItem();
menuItem.num = element;
//ustawianie pozycji elementów
menuItem.x = 0;
menuItem.y = i * menuItem.height;

//ustawienie tekstu menu
var link:String = LoaderInfo(this.root.loaderInfo).parameters["men"+(i+1)];
menuItem.itemText.text = link;

menuItem.mouseChildren = false;

menuItem.buttonMode = true;

//nasłuchiwanie na akcje
menuItem.addEventListener(MouseEvent.MOUSE_OVER, mouseOverItem);
menuItem.addEventListener(MouseEvent.MOUSE_OUT, mouseOutItem);
menuItem.addEventListener(MouseEvent.CLICK, mouse_click);

//Add the menuItem to the menuHolder
menuHolder.addChild(menuItem);
}

var HOLDER_HEIGHT:Number = menuHolder.height;

//animacja menu
menuHolder.addEventListener(MouseEvent.MOUSE_OVER, mouseOverMenu);
menuHolder.addEventListener(MouseEvent.MOUSE_OUT, mouseOutMenu);

//na wejscie klatki nasłuchiwacz
addEventListener(Event.ENTER_FRAME, enterFrameHandler);

function mouse_click(e:MouseEvent):void {
var url:String = "kategoria-"+e.currentTarget.num+".html";
var request:URLRequest = new URLRequest(url);
try {
navigateToURL(request, "_self");
} catch (e:Error) {
trace("Error occurred!");
}

}

//funkcja na najechanie menu
function mouseOverMenu(e:Event):void {
mouseIsOver = true;
}

//funkcja na zjechaniu z menu
function mouseOutMenu(e:Event):void {
mouseIsOver = false;
}

//funkcja na najechanie konkretnego elementu
function mouseOverItem(e:Event):void {

var item:MenuItem = e.target as MenuItem;

TweenMax.to(item.itemFill, 0.01, {tint: 0xff8800});
}

//funkcja na zjechanie myszki z elementu
function mouseOutItem(e:Event):void {

var item:MenuItem = e.target as MenuItem;

TweenMax.to(item.itemFill, 0.5, {tint: 0x16222E});
}

//funkcja na wejściu klatki
function enterFrameHandler(e:Event):void {

//jeśli myszka jest nad menu
if (mouseIsOver) {

//oblicz dystans do maski
var distance:Number = mouseY - myMask.y;

//oblicz dystans w procentach
var percentage:Number = distance / MASK_HEIGHT;

//zapisz stary punkt y
oldY = menuHolder.y;

//oblicz nowy punkt y w celu koordynacji
//odejmujemy wysokosc maski od Sprite, w innym przypadku menu by poszło zbyt do góry
var targetY:Number = -((HOLDER_HEIGHT - MASK_HEIGHT) * percentage) + myMask.y;

//animacja przesuwania się menu
TweenMax.to(menuHolder, 0.4, {y: Math.round(targetY)});

tweenLiteBasics.zip

Popularne Artykuly

Najnowsze Artykuły