Umíme ve Flashi - 27.díl – fotogalerie

V dnešním díle se podíváme na užitečný doplněk našich prezentací, kterým je fotogalerie. Naše galerie bude umět načítat a dynamicky zobrazovat externí obrázky díky snadno editovatelnému řídícímu XML dokumentu.

Fotogalerie

Jak je z úvodníku zřejmé, dnešním úkolem bude vytvoření jednoduché fotogalerie, která bude načítat obrázky, umístěné mimo samotný SWF soubor. Tyto obrázky se budou zobrazovat vzájemným prolínáním a pokud možno v nepřetržité smyčce.

Abychom měli do budoucna snadnou práci, vyčleníme nejdůležitější informace o galerii do externího XML dokumentu, pomocí kterého tak budeme mít množnost snadno měnit vybrané parametry naší fotogalerie.

Popis funkce

Samotná struktura celé galerie bude velmi jednoduchá. Nejdříve si ale musíme stanovit pravidlo, že veškeré obrázky, načítané do galerie, budou mít stejné rozměry. Bylo by samozřejmě možné vytvořit funkce pro automatickou změnu velikosti načítaných obrázků. Výsledné obrázky ale nebudou přesně vyhlazené a vykreslené. Proto, pokud načítáme externí obrázky v rastrovém formátu, je lepší si j předem upravit a sjednotit do jedné velikosti.

Na hlavní scéně budou vždy dva Movie Clipy, kde spodní klip bude představovat předchozí obrázek a klip umístěný nad tímto, budeme postupně zobrazovat změnou průhlednosti. P dokončení efektu prolínání nového snímku původní snímek vymažeme a přes tento nový začneme zobrazovat další obrázek.

Abychom nemuseli složitě vytvářet prolínací efekt, využijeme transition třídy, která obsahuje několik velmi zajímavých efektů prolínání MC:

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í náhodně 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

Z uvedených přechodů využijeme přechod Fade.

Vytvoření fotogalerie

Nejdříve si připravíme externí XMl dokument, ve kterém vypíšeme nejdůležitější parametry naší fotogalerie:

<?xml version="1.0"?>
<galerie pauza="3" pozadi="0x000000" xpoz="50" ypoz ="50" vyska="155" sirka="240">
<obr>pic1.jpg</obr>
<obr>pic2.jpg</obr>
<obr>pic3.jpg</obr>
</galerie>

V prvním elementu „galerie“ máme několik vlastností, které budou ovlivňovat celý chod fotogalerie. Jedná se o dobu zobrazení jednotlivých snímků (pauza), následuje barva rámečku celé fotogalerie (pozadi), x-ová a y-ová souřadnice fotogalerie a nakonec určíme výšku a šířku zobrazovaných obrázků. Následují už jen elementy s přesnou cestou k externím obrázkům.

Tento soubor uložíme pod názvem „data.xml“ v UTF-8 kódování. Otevřeme si nyní nový dokument ve Flashi a do prvního snímku vložíme skript:

textData = new XML();
textData.ignoreWhite = true;
textData.load("data.xml");
textData.onLoad = function() {
 node1 = textData.firstChild;
 node1Name = node1.nodeName;
 pauza = node1.attributes.pauza;
 barvaPozadi = node1.attributes.pozadi;
 xpoz = new Number(node1.attributes.xpoz);
 ypoz = new Number(node1.attributes.ypoz);
 vyskaPict = new Number(node1.attributes.vyska);
 sirkaPict = new Number(node1.attributes.sirka);
 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);
  }
 }
 play();
};
stop();

Nejdříve načteme a zpracujeme XML dokument, kde máme uložená potřebná data. Kromě vlastností z hlavního elementu navíc zpracujeme cesty k obrázkům a vložíme je do pole. Nyní vytvoříme druhý klíčový snímek, do kterého vložíme hlavní část kódu:

import mx.transitions.*;
import mx.transitions.easing.*;
count = 0;
num = nodArray.length;
maxNum = nodArray.length;
clInt = function () {
 eval("obr"+befNum).unloadMovie();
 cas = 0;
 this.onEnterFrame = function() {
  cas++;
  if (cas>pauza*12) {
   fadeIn();
   delete this.onEnterFrame;
  }
 };
};
var myListener:Object = new Object();
myListener.allTransitionsInDone = function(eventObj:Object) {
 clInt();
};
fadeIn = function () {
 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);
};
this.createEmptyMovieClip("pozadi", 0);
pozadi.beginFill(barvaPozadi);
pozadi.moveTo(xpoz-vyskaPict*0.1, ypoz-vyskaPict*0.1);
pozadi.lineTo(xpoz+sirkaPict+vyskaPict*0.1, ypoz-vyskaPict*0.1);
pozadi.lineTo(xpoz+sirkaPict+vyskaPict*0.1, ypoz+vyskaPict*1.1);
pozadi.lineTo(xpoz-vyskaPict*0.1, ypoz+vyskaPict*1.1);
pozadi.lineTo(xpoz-vyskaPict*0.1, ypoz-vyskaPict*0.1);
pozadi.endFill();
fadeIn();
stop();

Funkce „clInt()“ slouží pro načasování dalšího přechodu, který je zajištěn funkcí „fadeIn()“. Nakonec už jenom stačí vygenerovat pozadí celé fotogalerie prvotním spuštěním funkce „fadeIn()“ spustit celou smyčku fotogalerie.

Výsledná fotogalerie tak může vypadat takto. Zdrojové soubory této fotogalerie jsou k dispozici zde. Ukázka i zdrojový soubor jsou exportovány a uloženy pro Flash 8.

Témata článku: Software, Programování, Fotky, Iris

6 komentářů

Nejnovější komentáře

  • JUMBO 7. 2. 2007 7:56:26
    Ahoj chtěl jsem se zeptat proč mi galerie nepokračuje ve smyčce. POprvý...
  • Petr 1. 12. 2006 13:38:12
    Poraďte, jak by se nechal načítací kód upravit tak, aby se obrázky...
  • gully, gully 18. 4. 2006 9:19:26
    http://diskuse-zaciname-s-flash-mx-2004.wz.cz
Určitě si přečtěte

Špičkoví hackeři útočili na prohlížeče. Chrome odolal, ale Edge je tragédie

Špičkoví hackeři útočili na prohlížeče. Chrome odolal, ale Edge je tragédie

** Do Vancouveru se sjeli hackeři ** Soutěžili v útocích na prohlížeče ** Chrome odolal, ale Edge to projel na celé čáře

22.  3.  2017 | Jakub Čížek | 79

Pojďme programovat elektroniku: Meteostanice, která bude díky Sigfoxu posílat stav počasí třeba z vrcholu Sněžky

Pojďme programovat elektroniku: Meteostanice, která bude díky Sigfoxu posílat stav počasí třeba z vrcholu Sněžky

** Příští roky budou ve znamení internetu věcí ** Podívali jsme se podrobně na síť Sigfox ** Takhle s ní komunikují krabičky z celé Evropy

19.  3.  2017 | Jakub Čížek | 18

Kde nejlevněji uložit 1 TB dat: Srovnali jsme aktuální ceny cloudových úložišť

Kde nejlevněji uložit 1 TB dat: Srovnali jsme aktuální ceny cloudových úložišť

** Srovnali jsme známá cloudová úložiště podle toho, kolik měsíčně zaplatíte za 1TB ** Ceny se pohybují od dvou stovek až po tisíc korun ** Google umožní uložit až 30 TB dat

18.  3.  2017 | Stanislav Janů | 115

Obří Mechroboti jsou realitou, měří čtyři metry a mají hmotnost přes 1,5 tuny

Obří Mechroboti jsou realitou, měří čtyři metry a mají hmotnost přes 1,5 tuny

** Jihokorejská společnost Hankook Mirae Technology vyrábí obří Mechroboty ** Jsou určené pro ovládání člověkem uvnitř ** V prodeji se objeví koncem tohoto roku za 200 milionů korun

20.  3.  2017 | Karel Javůrek | 18


Aktuální číslo časopisu Computer

Supertéma o počítačové bezpečnosti

AMD Ryzen přichází

Velké testy kinoprojektorů a levných sluchátek

Příslušenství do USB-C