Carousel menu pro AS3

26.10.2009· Autor: Ondřej Brichta· Přidat komentář

V dnešním článku si představíme rotační menu pro ActionScript 3.0 bez nutnosti spolupráce s některým z 3D enginů.

Carousel menu

Rotační menu jsme si již několikrát představili, dnes si představíme variantu pro ActionScript 3.0, která ale nebude vyžadovat spolupráci s některým z 3D enginů (například Papervision), ale bude vycházet z již zveřejněné verze pro AS2.0 (http://www.flash.cz/portal/clanek.aspx?id=1065)

Pokud se podíváme na původní článek (http://www.flash.cz/portal/clanek.aspx?id=1065), který byl sestaven pro ActionScript 2.0, můžeme většinu z jeho příkazů převzít i pro ActionScript 3.0. Z valné většiny se totiž přepisování AS2.0 do AS3.0 příkazů odehrává v těchto změnách:

Připojení sledování událostí pomocí addEventListener metod
Úprava názvů vlastností objektů - z valné většiny se jedná o odstranění znaku podtržítka „_"
Přesnější deklarace proměnných - určení typů proměnných

V našem případě ještě přistoupíme k jedné změně. V AS2.0 jsme pro vkládání objektů z knihovny symbolů používali metodu attachMovie. Verze pro AS3.0 pak místo toho obsahuje klasickou konstrukci: var objekt:trida = new trida();

Pokud využijeme zdrojový soubor ze zmiňovaného článku, nejprve musíme nastavit export animace pro flashplayer 9 a verzi ActionScriptu na 3.0:

export

Následně potřebujeme nastavit export (položka Linkage) MovieClipu náhledu (item_mc) z knihovny symbolů pod stejným názvem třídy „item_mc" :

linkage

Samotný MovieClip náhledu pak v sobě obsahuje grafiku rámečku, vrstvu masky která dovolí zobrazení pouze části z obrázku, který načteme do maskovaného MovieClipu s názvem instance „blank:

item_mc

Pojďme k samotnému ActionScriptu. Pokud budeme pokračovat v úpravách zdrojového kódu z původní aplikace, přejdeme do MovieClipu „carousel_mc" kde začneme upravovat příkazy do této podoby:

//pole náhledů
var img_array:Array = new Array("1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg", "6.jpg", "7.jpg", "8.jpg");
//pole odkazů
var path_array:Array = new Array("1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg", "6.jpg", "7.jpg", "8.jpg");
//poloměr rotace
var _radius_:uint = 200;
//minimální velikost nhledu při zmenšení
var _min_proc_:uint = 50;
//maximální výchylka ve vertikálním směru
var _max_h_:uint = 20;
//posun v x-ovém směru
var _dif_x_:Number = 10;
//indikace přetahování - rotace
var _dragging_:Boolean = false;

Nejprve si připravíme potřebné pomocné proměnné, ve kterých si především sestavíme pole náhledů, kde jsou uloženy cesty k náhledům obrázků menu. Druhé pole pak může sloužit k uložením cest k obrázkům, které se mají zobrazit po kliknutí na náhledy. V našem případě jsme pro zjednodušení použili stejné odkazy.

Následuje funkce pro sestavení menu:

var obj_list:Array = new Array();
//celkový počet náhledů
var _total_:uint = img_array.length;
//vytvoření menu
for (var a:uint = 0; a<_total_; a++) {
 var new_item:MovieClip = new item_mc();
 new_item.al = a*360/_total_;
 new_item.path = path_array[a];
 new_item.addEventListener(MouseEvent.CLICK,clickMe);
 obj_list.push(new_item);
 var image:Loader = new Loader();
 var req:URLRequest = new URLRequest(img_array[a]);
 new_item.blank.addChild(image);
 image.load(req);
 this.addChild(new_item);
}

Protože je MovieClip dynamickou třídou, lze v jejích objektech za běhu kódu vytvářet nové proměnné i když nejsou předem definované. Tímto si připravíme pomocné proměnné „al" - rotace náhledu po kruhu a „path" - cesta k obrázku, který se objeví po kliknutí. Pro načtení náhledu pak použijeme Loader třídu, kde objekt této třídy vložíme do MovieClipu „blank", který je maskovaný v rámci samotného MovieClipu náhledu.

Pokud budeme chtít reagovat na kliknutí na položku menu, připojíme následující funkci:

//funkce listeneru kliknutí na náhled
function clickMe(evt:Event):void {
 var mc:MovieClip = evt.currentTarget as MovieClip;
 var req:URLRequest = mc.path;
 navigateToURL(req);
}

V rámci této funkce si sestavíme příkazy, které se provedou po kliknutí na položku menu. V našem případě získáme odkaz na objekt na který jsme kliknuli a následně podle hodnoty proměnné „path" provedeme příkaz pro zobrazení nové URL.

Nesmíme zapomenou na obměněnou funkci renderování scény:

//funkce renderování scény
function renderScene(evt:Event):void {
 if (!_dragging_) {
 _dif_x_ /= 1.2;
 if (Math.abs(_dif_x_)<0.3) {
 _dif_x_ = 0;
 }
 }
 var ln:uint = obj_list.length;
 for (var i:uint = 0; i<ln; i++) {
 var item_mc:MovieClip = obj_list[i];
 item_mc.al += _dif_x_;
 var rad:Number = item_mc.al*(Math.PI/180);
 item_mc.x = _radius_*Math.cos(rad);
 item_mc.z = _radius_*Math.sin(rad);
 var proc = (item_mc.z+_radius_)/(2*_radius_);
 var scale:Number = (100-_min_proc_)+proc*_min_proc_;
 item_mc.scaleX = scale/100;
 item_mc.scaleY = scale/100;
 item_mc.y = proc*_max_h_;
 }
 sortAll();
}
//roztřídění objektů scény podle y-pozice
function sortAll():void {
 //var objs:Array = 
 obj_list.sort(sortFunction);
 for (var i:uint=0; i<obj_list.length; i++) {
 this.setChildIndex(obj_list[i],i);
 }
}
function sortFunction(a:Object, b:Object):Number {
 if (a.y>b.y) {
 return 1;
 } else if (a.y<b.y) {
 return -1;
 } else {
 return 0;
 }
}

A nakonec sestavíme ovládácí funkce pro spouštění a zastavení rotace celého menu:

var _start_x_:Number = 0;
function downMouse(evt:Event):void {
 _start_x_ = stage.mouseX;
 _dragging_ = true;
}
function upMouse(evt:Event):void {
 _dragging_ = false;
}
function moveMouse(evt:Event):void {
 if (_dragging_) {
 _dif_x_ = (stage.mouseX-_start_x_)/4;
 }
}
stage.addEventListener(Event.ENTER_FRAME,renderScene);
stage.addEventListener(MouseEvent.MOUSE_DOWN,downMouse);
stage.addEventListener(MouseEvent.MOUSE_UP,upMouse);
stage.addEventListener(MouseEvent.MOUSE_MOVE,moveMouse);

aplikace