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.
Umíme ve Flashi - 27.díl – fotogalerie

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

Jak rozšířit signál Wi-Fi: Extender je nejlevnější a snadná cesta

Jak rozšířit signál Wi-Fi: Extender je nejlevnější a snadná cesta

** Wi-Fi extendery dobře poslouží k rozšíření signálu ** Jsou to malé krabičky do zásuvky s triviálním nastavením ** Zvolte raději výkonnější modely, svůj účel splní lépe

Včera | David Polesný | 24

11 tipů, jak efektivně a přesně sledovat počasí pomocí internetu

11 tipů, jak efektivně a přesně sledovat počasí pomocí internetu

** Sledujte počasí z více zdrojů a podrobněji, přesněji tak určíte, jaké počasí vás potká na dovolené ** Na webu najdete hromadu pokročilých předpovědí počasí, ale i specializované meteorologické služby ** Vybrali jsme 14 služeb na počasí, které se vám můžou hodit

23.  6.  2017 | Jakub Čížek | 19

Nejlepší program pro střih videa na doma: 9 video editorů, ze kterých si vyberete

Nejlepší program pro střih videa na doma: 9 video editorů, ze kterých si vyberete

** Pokročilé střihové programy pro neprofesionální využití stojí do 3 000 Kč, jsou ale i zdarma ** Podpora 4K, hromada editačních funkcí a efektové filtry jsou samozřejmostí ** Vybrali jsme 9 nejzajímavějších programů pro nejrozšířenější operační systém Windows

25.  6.  2017 | Stanislav Janů | 34


Aktuální číslo časopisu Computer

Bojujeme proti Fake News

Dva velké testy: fotoaparáty a NASy

Co musíte vědět o změně evropského roamingu

Radíme s výběrem základní desky