Loading:


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, którą można pobrać z tutaj: [ pobierz ]

 

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.

 

Przykład ON-LINE:

 

Kod HTML:

 

<object type="application/x-shockwave-flash" data="menu.swf" width="197" height="300">

<param name="movie" value="menu.swf" />

<param name="FlashVars" value="ilosc=3&men1=men1&men2=men2&men3=men3&id1=1&id2=222&id3=30" />

</object>

 

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 AS:

 

//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)});
        }
}


Napisz Artyku³

Listing

niema




Dodano przez: divix
Ranga: Administrator serwisu Punktów: 38523
Komentarze użytkowników
    • Tre¶æ komentarza
      Kod do komentarza (opcjonalnie)
      PHP JavaScript MySQL Smarty SQL HTML CSS ActionScript
      Autor
      Token
      token

       

       








funkcje.net
Wszelkie prawa zastrzeżone©. | Funkcje.net 2008-2024 v.1.5 | design: diviXdesign & rainbowcolors