Flash tiptrik – fotogalerie
16.7.2007· Autor: Ondřej Brichta·
Počet komentářů: 12
V dnešním článku si ukážeme tvorbu jednoduché fotogalerie, která bude řízená externím XML dokumentem.
Dynamická fotogalerie
Při tvorbě slideshow fotek bychom měli využívat možnost načítání externích konfiguračních souborů. V případě fotogalerií totiž nejčastěji nastanou případy, kdy potřebujeme rychle vyměnit, doplnit a nebo odstranit konkrétní obrázek. Než mít celou fotogalerii „napevno" v SWF dokumentu, použijeme externí konfigurační soubor. Tímto souborem není nic jiného než XML v této podobě:
<?xml version="1.0"?>
<galerie pauza="3" xpoz="50" ypoz ="50">
<obr>pic1.jpg</obr>
<obr>pic2.jpg</obr>
...
</galerie>
Hlavní element „galerie" obsahuje dva atributy, pomocí kterých budeme mít možnost nastavit délku trvání zobrazení jednotlivých snímků a umístění fotogalerie na scéně. Subelementy pak tvoří jednotlivé obrázky, které budeme chtít ve fotogalerii zobrazovat.
ActionScript
Fotogalerie bude kompletně vytvořená pomocí ActionScriptu. Prakticky v ní není ani co bychom měli vytvářet „ručně". Budeme pouze zobrazovat načítané obrázky. Dnes začneme verzí pro ActionScript 2.0, následující tutoriál bude pojednávat o verzi pro ActionScript 3.0
Začneme tedy skriptem v prvním snímku hlavní časové osy:
import mx.transitions.*;
//proměnná aktuálního čísla snímku
num = 0;
//maximální počet snímků
maxNum = 0;
//počítadlo pro účely generování nových snímků
count = 0;
Nejprve si nastavíme pomocné proměnné a importujeme třídu transitions, kterou využijeme pro tvorbu přechodových efektů mez jednotlivými obrázky. Pro vytvoření efektů využijeme objekt TransitionManager, kterým lze ovládat tyto přechodové efekty:
Blinds transition - efekt zobrazení/schování MC pomocí několika náhodných čtverců
Fade transition - efekt zobrazení/schování MC s využitím průhlednosti objektu
Fly transition - MC přijede/odjede ze scény z určeného místa
Iris transition - MC se zobrazí/schová pomocí animované masky čtverce nebo kruhu, který se zvětší nebo zmenší
Photo transition - zobrazení/odkrytí MC s probliknutím
PixelDissolve transition - zobrazení/odkrytí MC pomocí nahodně generovaných pixelů
Rotate transition - zobrazení/skrytí MC pomocí rotace tohoto klipu
Squeeze transition - zobrazení/schování objektu změnou šířky nebo výšky
Zoom transition - zobrazení/schování MC pomocí přiblížení/oddálení objektu
Nejprve ale musíme načíst a zpracovat XML soubor pomocí objektu třídy XML:
imgData = new XML();
imgData.ignoreWhite = true;
imgData.load("data.xml");
imgData.onLoad = function(succ:Boolean):Void {
if (succ) {
node1 = imgData.firstChild;
node1Name = node1.nodeName;
pauza = node1.attributes.pauza;
xpoz = new Number(node1.attributes.xpoz);
ypoz = new Number(node1.attributes.ypoz);
if (node1Name == "galerie") {
nodArray = node1.childNodes;
if (nodArray.length != 0) {
x = 0;
a = 0;
img = new Array();
do {
if (nodArray[x].nodeName.indexOf("obr") != -1) {
img.push(nodArray[x].firstChild);
}
x++;
} while (x<nodArray.length);
}
}
num = nodArray.length;
maxNum = nodArray.length;
fadeIn();
}
};
Nejprve zjistíme atributy hlavního elementu, abychom mohli nastavit pomocné proměnné pauzy a umístění fotogalerie. Dále při procházení strukturou XML dokumentu vytvoříme pole „img", do kterého postupně vkládáme odkazy na jednotlivé obrázky fotogalerie. Po projití celého XML dokumentu nastavíme nové hodnoty proměnných „num" a „maxNum" a spustíme funkci „fadeIn", která se stará o zobrazení fotografie. Tato funkce vypadá následovně:
fadeIn = function ():Void {
befNum = count;
count++;
num++;
if (num>maxNum) {
num = 1;
}
this.createEmptyMovieClip("obr"+count, count);
eval("obr"+count)._x = xpoz;
eval("obr"+count)._y = ypoz;
ldPict = new MovieClipLoader();
ldPict.loadClip(img[num-1].toString(), eval("obr"+count));
ldListen = new Object();
ldListen.onLoadComplete = function() {
var myTransitionManager:TransitionManager = new TransitionManager(eval("obr"+count));
myTransitionManager.startTransition({type:Fade, direction:Transition.IN, duration:2, easing:None.easeNone});
myTransitionManager.addEventListener("allTransitionsInDone", myListener);
};
ldPict.addListener(ldListen);
};
Všimneme si, že s každým zavoláním funkce vytvoříme nový prázdný MovieClip („obr" + aktuální stav počítadla) a připravíme si objekt třídy MovieClipLoader, který využijeme pro načtení obrázku d nově vytvořeného MovieClipu.
Musíme totiž mít zaručeno, že nový obrázek se zobrazí až v okamžiku kompletního načtení. Až po načtení můžeme teprve spouštět přechodové efekty pomocí objektu třídy TransitionManager. Při instancování tohoto objektu je jeho parametrem MovieCLip, na který budeme chtít efekt aplikovat:
var myTransitionManager:TransitionManager = new TransitionManager(eval("obr"+count));
Následuje spuštění přechodového efektu pomocí metody „startTransition". Nesmíme zapomenout na odstranění předchozího obrázku, aby se nám na scéně zbytečně nehromadily MovieClipy. Odstranění starého obrázku můžeme provést až po dokončení přechodového efektu, k čemuž využijeme listener, který bude detekovat událost „allTransitionsInDone", tedy dokončení všech efektů pro zobrazení objektu.
Samotný detektor vypadá takto:
var myListener:Object = new Object();
myListener.allTransitionsInDone = function(eventObj:Object) {
clInt();
};
O odstranění původního obrázku se stará funkce „clInt", která má navíc za úkol spustit načítání dalšího obrázku po skončení časového intervalu pauzy, který jsme nastavili v XML dokumentu:
clInt = function ():Void {
eval("obr"+befNum).unloadMovie();
cas = 0;
this.onEnterFrame = function() {
cas++;
if (cas>pauza*12) {
fadeIn();
delete this.onEnterFrame;
}
};
};
Výsledná aplikace pak může vypadat jnásledovně: fotogalerie.swf
Zdrojové soubory jsou k dispozici zde: data.zip
Hned v příštím díle si ukážeme tuto fotogalerii ve verzi pro ActionScript 3.0
Ondřej Brichta Vývojář multimediálních aplikací, šéfredaktor Flash.cz, školitel produktů Flash, Flex, Flash Media Server
Web:
http://www.obria.cz
|
Motto: <°))))><
Seriál:
Tipy a triky
Tipy a triky je seriál zaměřený na zajímavá řešení a vylepšení flashových aplikací