reklama

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
reklama
Určitě si přečtěte

UPC překopli páteřní kabel. V Brně i druhý den nejede internet ani kabelovka

UPC překopli páteřní kabel. V Brně i druhý den nejede internet ani kabelovka

** V Brně byl velký výpadek služeb UPC ** Důvodem je překopnutý páteřní kabel ** V některých lokalitách služby stále nefungují

5.  12.  2016 | Jakub Čížek | 103

17 expertek Microsoftu předpovědělo rok 2027. Splní se alespoň něco?

17 expertek Microsoftu předpovědělo rok 2027. Splní se alespoň něco?

** Zmizí klasické vyhledávače ** Budeme programovat buňky ** Kvantové počítače překonají šifry

6.  12.  2016 | Jakub Čížek | 36

11 tipů na dobrý stolní počítač: od základu po herní mašiny

11 tipů na dobrý stolní počítač: od základu po herní mašiny

** Postavte si stolní počítač! Máme pro vás 11 vzorových sestav s rozpisem komponent ** Většina tipů cílí na hráče, věnujeme se ale i základnímu PC a počítačům na střih videa ** Nadělte si nový počítač třeba pod stromeček

5.  12.  2016 | Adam Kahánek | 74

Nejlepší notebooky nad 20 tisíc: poradíme, které teď chcete

Nejlepší notebooky nad 20 tisíc: poradíme, které teď chcete

** V notebooku s cenou nad 20 tisíc nesmí chybět kvalitní displej a rychlé úložiště ** Za dalších deset tisíc můžete dostat navíc styl nebo výkonnější komponenty ** Vybírat můžete z různých velikostí i konstrukcí

8.  12.  2016 | Stanislav Janů | 85


reklama