AS3 fotogalerie – dokončení
3.8.2009· Autor: Ondřej Brichta·
Počet komentářů: 5
V dnešním závěrečném článku doplníme k fotogalerii propojení na zobrazení velkých náhledů včetně zajímavých efektů zobrazení načtených obrázků.
Velké náhledy
Posledním krokem k dokončení obrázkového menu je jeho propojení s velkými obrázky, tedy jejich zobrazení po kliknutí na malé náhledy menu. Pro tento krok stačí využít stávající vlastní třídy ImgLoader, která zajišťuje načítání externích obrázků do konkrétního objektu.
Připravená třída však trpí nepříjemným neduhem, který se projevuje v okamžiku, kdy se snažíme několikrát po sobě načíst do stejného cílového objektu další obrázky. Protože se tato třída při zmenšování obrázků řídí kratší stranou cílového objektu, může se stát, že při rozdílném poměru stran se sice konečný obrázek kratší straně přizpůsobí, ovšem delší strana přesáhne délku cílového obrázku. Při dalším novém načtení obrázku jsou už brány ve výpočtech jiné rozměry cílového obrázku a dochází k nepřesnostem.
Abychom tomuto jevu částečně zamezili, upravíme například třídu ImgLoader tak, že bude coby další nepovinné parametry požadovat cílovou velikost obrázku:
private var cont_w:Number;
private var cont_h:Number;
private var animate:Boolean;
public function ImgLoader(_tg:DisplayObjectContainer,anim:Boolean = false,_w:Number=0,_h:Number=0) {
animate = anim;
img_target = _tg;
img_loader = new Loader();
img_loader.contentLoaderInfo.addEventListener(Event.COMPLETE,dataLoaded);
if (_w==0) {
cont_w = _tg.width;
} else {
cont_w = _w;
}
if (_h==0) {
cont_h = _tg.height;
} else {
cont_h = _h;
}
}
Doplnili jsme si i další pomocnou proměnnou „animate", kterou si určíme jestli budeme konečný obrázek zobrazovat s nějakým přechodovým efektem.
Aplikaci efektu umístíme do metody dataLoaded naší třídy:
private function dataLoaded(evt:Event):void {
var ln:Number = 0;
var scaling:Number=0;
if (cont_w>cont_h) {
scaling = cont_h/img_loader.content.height;
} else {
scaling = cont_w/img_loader.content.width;
}
var matr:Matrix = new Matrix();
matr.scale(scaling,scaling);
var bitmap:BitmapData = new BitmapData(img_loader.content.width*scaling,img_loader.content.height*scaling,false);
bitmap.draw(img_loader.content,matr);
var bmp:Bitmap = new Bitmap(bitmap,"auto",true);
bmp.x = (cont_w-bmp.width)/2;
bmp.y = (cont_h-bmp.height)/2;
bmp.name = "_img";
if (img_target.getChildByName("_img")) {
img_target.removeChild(img_target.getChildByName("_img"));
}
img_target.addChild(bmp);
if(animate){
TransitionManager.start(img_target as MovieClip, {type:Fade, direction:Transition.IN, duration:3, easing:Regular.easeOut});
}
}
Přičemž v tomto konkrétním případě jsme zvolili nejjednodušší efekt prolnutí - Fade. Pro spustění efektu nám poslouží třída TransitionManager jejíž metoda start spustí požadovaný Fade efekt.
Po drobném doplnění XML dokumentu o tag „big":
<data>
<img>
<src>01.jpg</src>
<big>01.jpg</big>
<txt>Obrázek 1</txt>
</img>
<img>
<src>02.jpg</src>
<big>02.jpg</big>
<txt>Obrázek 2</txt>
</img>
...
Můžeme přistoupit k doplnění hlavní skriptu. Nejprve si vložíme při generování obrázkového menu do pomocné proměnné každého náhledu cestu k velkému obrázku galerie:
function parseXML():void {
var ln:uint = xmlData.img.length();
if (ln>0) {
for (var i:uint=0; i<ln; i++) {
var obj:MovieClip = new nahled();
obj.x = i*obj.width;
itemL = obj.width;
obj["big_src"] = xmlData.img[i].big;
obj.popis_txt.text = xmlData.img[i].txt;
var ldr:ImgLoader = new ImgLoader(obj.pozadi_mc as DisplayObjectContainer);
ldr.loadImg(xmlData.img[i].src);
content_spr.addChild(obj);
obj.addEventListener(MouseEvent.CLICK,showBig);
///
if ((obj.x+obj.width)>mask_spr.width&&maxX==0) {
maxX = i;
}
}
}
}
Jedná se o tento řádek:
obj["big_src"] = xmlData.img[i].big;
Protože je MovieClip třídou dynamickou, můžeme k ní i za běhu aplikace doplňovat proměnné. Protože by ale přímý zápis „obj.big_src =" skončil přinejmenším chybou kompilátoru, provedeme její vytvoření pomocí hranatých závorek.
Doplnili jsme také listener CLICK události, jehož funkce vypadá následovně:
var activeMC:MovieClip = null;
function showBig(evt:Event):void {
if (activeMC==null) {
activeMC = tg;
}else{
activeMC.okraj_mc.gotoAndStop(1);
}
var tg:MovieClip = evt.currentTarget as MovieClip;
var ldr:ImgLoader = new ImgLoader(big_mc as DisplayObjectContainer,true,500,400);
ldr.loadImg(tg["big_src"]);
activeMC = tg;
activeMC["okraj_mc"].gotoAndStop(2);
}
Ve funkci figuruje vedle příkazů pro načítání velkého obrázku i pomocná proměnná „activeMC", která slouží pro uchování reference na aktuálně vybranou položku z obrázkového menu. Pokud doplníme MovieClip náhledů o MovieClip okraje o dvou snímcích označujících stavy vybrání/nevybrání, funkce showBig bude zobrazovat i aktuálně vybraný náhled.
Zdrojové soubory menu jsou k dispozici zde: menuAS3.zip
Ondřej Brichta Vývojář flashových a mobilních AIR aplikací, šéfredaktor Flash.cz, školitel produktů Flash, Flex, Flash Media Server
E-mail: ob(zavinac)obria.cz |
Web:
http://www.obria.cz
|
Motto: <°))))><