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

Pojďme programovat elektroniku: Sestavíme si mobil a pošleme SMS

Pojďme programovat elektroniku: Sestavíme si mobil a pošleme SMS

** Kolik stál váš mobilní telefon? ** Základní GSM modem koupíte za stovku ** Umí telefonovat, posílat SMS a zvládne i GPRS

13.  1.  2017 | Jakub Čížek | 27

Microsoft: Zbavte se už konečně zastaralých a děravých Windows 7

Microsoft: Zbavte se už konečně zastaralých a děravých Windows 7

** Microsoft pomalu začíná kritizovat svůj nejpopulárnější OS ** Chce konečně dostat podniky na Desítky ** Bezpečnostní podpora Sedmiček vydrží ještě necelé tři roky

Včera | Jakub Čížek | 243

Český státní blacklist už funguje. Ministerstvo financí se pochlubilo s detaily

Český státní blacklist už funguje. Ministerstvo financí se pochlubilo s detaily

** Dva týdny po Novém roce zajím zeje prázdnotou ** Ministerstvo vydalo metodický pokyn ** Takhle to bude fungovat v praxi

16.  1.  2017 | Jakub Čížek | 47

Auta budoucnosti: V tomto se budete za pár let vozit

Auta budoucnosti: V tomto se budete za pár let vozit

** Velký prostor patřil na letošním veletrhu CES automobilům ** Automobilová budoucnost je elektrická a inteligentní ** Podívejte se, jak je vývoj futuristických autonomních aut daleko

12.  1.  2017 | David Polesný | 34


Aktuální číslo časopisu Computer

99 nejlepších programů pro váš počítač

Zvykejte si na umělou inteligenci

Velké testy PC zdrojů a gamepadů

Alternativní zdroje energie

reklama
reklama