      Martin Hozφk
      hozikm@seznam.cz
      ICQ: 323756613

Fotogalerie

Poslednφ dobou si hodn∞ ₧ßdßte o Fotogalerii, tak si dnes jednu takovou vytvo°φme. Obrßzky (ve formßtu JPEG) samoz°ejm∞ nejsou souΦßstφ samotnΘ SWF animace, ale naΦφtajφ se z vn∞jÜku.

Nejprve si vysv∞tlφme p°φkaz, kter² bude pro naΦφtßnφ fotek klφΦov²:

Pokud umφstφme na scΘnu instanci prßzdnΘho MovieClipu s nßzvem t°eba "photo", je mo₧nΘ pou₧φt metodu objektu MovieClip LoadMovie, kterß nahrazuje instanci externφm SWF nebo JPG souborem:

loadMovie("krajinka.jpg", "photo");

Tento p°φkaz by nahradil instanci externφm obrßzkem (v naÜem p°φpad∞ "krajinka.jpg").

A te∩ k samotnΘ galerii:

Nejprve zaΦneme s preloaderem. Pou₧ijeme stejn², jako uvßdφm v p°φkladech.
Tak₧e si vytvo°φme MovieClip s obdΘlnφkem, kter² bude zobrazovat naΦφtanΘ procenta, vlo₧φme jeho instanci na scΘnu a pojmenujeme "preloader".
Snφmek roztßhneme na velikost 2 snφmk∙ a do druhΘho vlo₧φme p°φkazy:
```
loading = Math.round(getBytesLoaded()/getBytesTotal()*100);
       setProperty("preloader", _xscale, loading);
if (loading == 100) {
       play();
} else {
       gotoAndPlay(1);
}
```
Pokud vßm nenφ jasnß funkce preloaderu, p°eΦt∞te si v²Üe zmi≥ovanou kapitolu.
Nynφ umφstφme do 3. kl. snφmku instanci UI komponentu ListBox a pojmenujeme "selector". Tento seznam bude umo₧≥ovat volbu fotky. Vyplnφme parametr komponentu ChangeHandler jako "showphoto" (je to nßzev funkce zavolanΘ po zm∞n∞ v²b∞ru)
Dßle vytvo°φme prßzdn² MovieClip, umφstφme instanci na scΘnu a pojmenujeme "photo". Na pozici tohoto MC se prßv∞ budou naΦφtat fotky.
Do t°etφho snφmku definujte tyto akce:
```
photos = new Array("01.jpg", "02.jpg", "03.jpg",
"04.jpg", "05.jpg", "06.jpg");

names = new Array("Carrera Coupe 2000", "911 GT1 Coupe 1997",
"911 Turbo Coupe 3.6 2000", "Boxster 2.5 1997", "911 GT3 Coupe 2000",
"Boxster 3.2 S 2000");
```
Tyto 2 pole obsahujφ jmΘna soubor∙ a jejich popisky.
```
selector.setDataProvider(names);
selector.setAutoHideScrollBar(true);
```
Nejprve je seznam Listbox s nßzvem "selector" vypln∞n nßzvy fotek ulo₧en²ch v poli "names" Dßle je nastaveno skrytφ posuvnφku seznamu v p°φpad∞, ₧e nenφ pot°eba.
```
function showphoto() {
      loadMovie(photos[selector.getSelectedIndex()], "photo");
}
Stop();
```
Tato funkce bude zavolßna p°i v²b∞ru polo₧ky v ListBoxu. Je zde naΦten obrßzek na pozici MC "photo". Mφsto nßzvu je hodnota pole "photos". V hranat²ch zßvorkßch je uvedena metoda selector.getSelectedIndex(), kterß vracφ index vybranΘ polo₧ky ListBoxu.

Pokud by byla vybrßna polo₧ka s indexem 3, m∞l by v²raz hodnotu photos[3] a tedy "04.jpg"
Dßle m∙₧eme do vrstvy pod MovieClip umφstit dalÜφ preloader, kter² bude kontrolovat naΦφtßnφ obsahu MovieClipu. Syntaxe je obdobnß, jen s tφm rozdφlem, ₧e tentokrßt bude preloader ukazovat mφru naΦtenφ neustßle. P°φkazy tedy definujeme samotnΘmu preloaderu po udßlosti EnterFrame:
```
onClipEvent (enterFrame) {
    loading = Math.round(_root.photo.getBytesLoaded()/
    _root.photo.getBytesTotal()*100);
    setProperty(this, _xscale, loading);
}
```
Op∞t stejn² princip: Preloader kontroluje procentußlnφ hodnotu naΦtenφ MC "photo" a podle toho m∞nφ Üφ°ku sebe sama (this).

Jak jsem ji₧ zmi≥oval, preloader je na mφst∞ neustßle (po naΦtenφ ho ale p°ekryje obrßzek).
Nakonec umφstφme na scΘnu tlaΦφtko, kterΘ bude spouÜt∞t prezentaci (SlideShow). Jß jsem pou₧il tlaΦφtko z UI komponent∙, ale je mo₧nΘ pou₧φt i normßlnφ. Jeho samotnß funkce je spuÜt∞nφ p°ehrßvßnφ animace.

SlideShow

Nynφ mßme hotovou galerii. Ale aby to nebylo tak jednoduchΘ, p°idßme jeÜt∞ mo₧nost zobrazit snφmky v Φasov²ch intervalech jako prezentaci.

Tak₧e tlaΦφtko, kterΘ jsem popisoval p°ed chvφlφ posunulo animaci na snφmek 4. Zde se tedy bude odehrßvat ona prezentace.
Na scΘnu umφstφme 2 instance naÜeho prßzdnΘho MC a pojmenujeme "controller" a "slide". Prvnφ bude kontrolovat zobrazovßnφ fotek ve druhΘ. Do t°etice jeÜt∞ umφstφme n∞kde DynamicText, kter² bude zobrazovat prom∞nnou "name".
MC "controller" tedy definujeme:
```
onClipEvent (load) {
   i = 0;
   loadMovie(_root.photos[i], "_root.slide");
   _root.name = _root.names[i];
   startcount = false;
}
```
Nejprve je pot°eba ud∞lat pßr v∞cφ po naΦtenφ MC.

Tak₧e jako prvnφ je deklarovßna prom∞nnß i jako nula. Tato prom∞nnß bude charakterizovat aktußln∞ zobrazovanou fotku.

Dßle je naΦtena prvnφ fotka - jejφ jmΘno je nata₧eno z pole "photos".
Zmi≥ovanΘ prom∞nnΘ "name" urΦφme aktußlnφ hodnotu z pole "names"

Nakonec je deklarovßna prom∞nnß startcount = false, kterß indikuje spuÜt∞nφ odpoΦtu (viz dßle)

onClipEvent (enterFrame) {

// Pokud je fotka naΦtena
if (_root.slide.getBytesLoaded() == _root.slide.getBytesTotal() && startcount == false)
{

// nastavit odpoΦet
countdown = getTimer()+5000;
startcount = true;
}

// Pokud odpoΦet vyprÜel
if (startcount == true && countdown<=getTimer()) {

     if (_root.photos.length != i+1) {
            i++;
     } else {
           i = 0;
     }

     // naΦφst dalÜφ fotku
    loadMovie(_root.photos[i], "_root.slide");
    _root.name = _root.names[i];
    startcount = false;

    }
}

Tak₧e jen struΦn∞:

V ka₧dΘm snφmku (enterFrame), dokonΦeno naΦφtßnφ fotky a pokud ji₧ nebylo spouÜt∞no odpoΦφtßvßnφ (startcount == false), nastavit toto odpoΦφtßvßnφ na 5sekund.
(getTimer() udßvß poΦet ms od zaΦßtku p°ehrßvßnφ animace)

Pokud odpoΦet vyprÜel, zv²Üφ se prom∞nnß "i" o jednu - pokud ji₧ vÜak nebylo dosa₧eno konce pole "names" - v takovΘm p°φpad∞ by se zaΦalo zase od nuly.

Nakonec se naΦte p°φsluÜnß fotka mφsto instance MC "slide" a provede se op∞t zobrazenφ jejφho nßzvu.
Poslednφ krok je p°idßnφ preloaderu se stejnou funkcφ jako v p°edchozφm p°φpad∞, tlaΦφtka pro nßvrat na snφmek 3 (nebo Play() - vyjde to nastejno) a samoz°ejm∞ p°φkazu
Stop() do 4. snφmku

Pfffff.... no sna₧il jsem se o co nejv∞tÜφ jednoduchost - nezada°ilo se. Proto bych doporuΦil stßhnout ukßzkov² FLA soubor.

prohlΘdnout

stßhnout [240 kB]