Efektná a jednoduchá Flash galéria

V tomto návode si vytvoríme jednoduchú, ale efektnú Flash galériu pomocou ActionScript 2.

Vhodná môže byť ako foto galéria na súkromnej webovej stránke, v portfóliu alebo ako katalóg výrobkov.

Výsledná galéria bude vyzerať takto:

Jednoducha flash galeria

Takže môžeme sa hneď vrhnúť do vytvárania galérie.
(Vhodný je akýkoľvek editor. Či už Macromedia Flash alebo Adobe Flash CS3 – CS5 podporujúci ActionScript 2)

Nastavíme si rozmery a farbu pozadia Galérie – veľkosť a farbu Stage. Napríklad na panely vlastnosti (Properties panel).
Rozmery budú individálne v závislosti od umiestnenia galérie. V tomto príklade je nastavený rozmer 600 x 400 a farbu pozadia nastavíme na Tmavo sivú.

Kvôli prehľadnosti je vhodné jednotlivé prvky rozdeliť do vrstiev (layers). My budeme potrebovať tri vrstvy, tak si ich vytvoríme:

  • Actions – do tejto vrstvy budeme vpisovať príkazy v ActionScripte na obsluhu galérie
  • Tlacitka – miesto pre tlačítka – náhľady obrázkov
  • Obrazky – vrstva kde budú uložené jednotlivé obrázky

Vrstvu Actions môžeme zamknúť a do vrstvy Obrazky naimportujeme obrázky, ktoré chceme použiť. Táto ukážkova galéria pracuje so štyrmi obrázkami. Každý obrázok bude v osobitnom KeyFrame. Ak sme importovali kolekciu obrázkov označených rovnakým menom, odlišeným len číslom na konci (napr.: obr01.jpg, obr02.jpg …), tak pri importovaní Flash editor urobil rozdelenie obrázkov za nás.

Vrstvy v jednoduchej Flash galérii

[na snímke vidno, ako sú jednotlivé obrázky rozdelené do osobitných KeyFrame]

Teraz pristúpime k vytvoreniu jednotlivých tlačidiel. Tieto budú zmenšeninami (náhľadmi) jednotlivých obrázkov z galérie a po kliknutí na tlačítko (náhľad) aplikácia skočí na konkrétny Frame v ktorom sa obrázok nachádza.
Takto bude môcť uživateľ navigovať na obrázok ktorý ho zaujíma.

Na vytvorenie náhľadov máme viaceré možnosti. Jedna možnosť je v editore určenom na prácu s grafikou (napr.: PhotoShop), ku každému obrázku vytvoriť rovnaký s menšími rozmermi a následne tieto zmenšeniny naimportujeme do nášho rozpracovaného projektu.
Možnosť použitia samostaných súborov so zmenšeninami by sme využili pri robustných galériach, ktoré dynamicky načítavaju externé obrázky.
My, kedže vytvárame malú galériu v ktorej sú obrázky “na pevno”, môžeme použiť na vytvorenie náhľadov práve tie obrázky, ktoré už v galérii máme.

Umiestňujeme obrázky z knižnice (library) na stageTakže teraz si zamkneme vrstvu “obrazky”, kurzor umiestnime do vrstvy “tlacitka” a pretiahneme do tejto vrstvy všetky obrázky z panelu “knižnica.”

Keď máme všetky obrázky na ploche (stage), môžeme upraviť ich veľkosť do takej, ktorú chceme pre naše tlačidla.

Pri tomto príklade boli použité obrázky rovnakej veľkosti, takže ich môžeme označiť všetky naraz. Pomocou nástroja “Free Transform Tool” (klávesová skratka Q) všetky obrázky zmenšíme.

Rovnaký efekt dosiaheme, ak použijeme nastavenie na panely “Transform” alebo ak na pevno nastavíme šírku a výšku obrázkov na panely vlastnosti.

Na obrázku v pravo je vidieť, ako sú jednotlivé obrázky umiestnené z knižnice na stage.

Keď máme náhľady vytvorené a umiesntnené na požadované pozície,
potrebujeme ich ešte prekonvertovať na tlačítka. Presnejšie na Symbol typu tlačítko (Symbol Button). Najrýchlejší spôsob je kliknuť na náhľad a pomocou klávesovej skratky F8 otvoriť dialóg v ktorom nastavíme vlastnosti budúceho Symbolu. Do položky názov (name) symbolu vložíme ľubovoľné meno, keďže toto slúži iba na identifikovanie symbolov v knižnici. V položke typ vyberieme Button.

Keď máme náhľady skonvertované, tak až teraz dáme mená, ktoré budú pre nás dôležité (Instance Name), pretože toto sú mená konkrétnych Symbolov umiestnených na Stage. Klikneme na jednotlivé, teraz už tlačítka, a na panely vlastnosti im dáme opisné mená (“tlacitko1”, “tlacitko2”, “tlacitko3” a “tlacitko4”). Bez diakritiky a medzier.

Nazov (Instance name) symbolu button - tlacitko1

Práve cez tieto “Instance name” jednotlivých symbolov ich budeme môcť identifikovať a pracovať s nimi pri programovaní v ActionScripte.

Keď už máme jednotlivé symboly pomenované, nastavíme im pre zvýšenie grafickej prítažlivosti našej galérie priesvitnosť (vo Flash nazývana Alpha) na 50%. Týmto dosiahneme, že všetky náhľady budú priesvitne a iba náhľad aktuálne zobrazeného obrázku zvýraznime tým, že mu zrušíme priesvitnosť. K tomu sa dostaneme až o chvíľu, pretože toto budeme robiť už pomocou zápisu v ActionScripte (čiže momentálne máme všetky tlačítka priesvitne)

Ak by sme teraz našu aplikáciu otestovali, tak uvidíme, že Galéria strieda v rýchlom slede jednotlivé obrázky.
Pristúpime preto k samotnému programovaniu v ActionScripte a prvé čo urobíme bude, že hneď na začiatku Galériu zastavíme, takže zostane zobrazený iba prvý obrázok.

Označíme prvý Frame vo vrstve Actions a zapneme editor jazyka ActionScript. Najrýchlejšie je použiť klávesovu skratku F9.

Keďže zapisujeme príkazy do konkrétneho KeyFrame a nie do symbolu, môžeme rovno písať príkazy.

Prvé čo napíšeme bude: Stop();

Náhľad na editor ActionScriptu s príkazom StopVeľmi jednoduchý príkaz (nezabudnime ho zapísať s prázdnymi zátvorkami a podľa správnosti by sme mali každý príkaz ukončiť bodkočiarkou). Týmto príkazom zastavíme prehrávanie aplikácie na prvom KeyFrame.

Pri otvorení galérie bude prvý obrázok aktívnym obrázkom a preto chceme, aby aj jeho náhľad – tlačítko bolo zvýraznené.  Zistíme si meno (instance name) korešpondujúceho tlačítka. V mojom prípade je to “tlacitko1” a pod príkaz Stop() zapíšeme:

tlacitko1._alpha = 100;

Týmto zápisom sme tlačítku s názvom “tlacitko1” nastavili jeho priesvitnosť pomocou vlastnosti _alpha na 100 percent.

Teraz už len pre každé tlačidlo vytvoríme obsluhu udalosti (Event handler), ktorá pri stlačení daného tlačidla spustí funkciu s nami požadovanými úlohami. Samozrejme obsluha udalosti môže sledovať aj iné udalosti, ale my sa zameriame na stlačenie jednotlivých tlačidiel. Existuje množstvo možnosti, ako sa to dá pomocou ActionScriptu naprogramovať. My si zvolíme jednu z najjednoduchších.

Vieme už, že prvé tlačítko (tlacitko1) zobrazuje náhľad obrázku z Frame 1 takže od teraz keď niekto toto tlačítko stlačí, galéria skočí a zastane na Frame 1, aby zobrazila daný obrázok. Zároveň “tlacitko1” znepriehľadnime.
Pretože väčšinou už bude stlačené aj iné tlačidlo, ktorému sa tiež nastavovala Alpha na 100 percent, ošetríme to tak, že všetkým tlačidlam okrem “tlacidla1” nastavíme vlastnosť Alpha na 50 percent.  Pod predchádzajúci kód zapíšeme:

tlacitko1.onRelease = function()
{
tlacitko1._alpha = 100; //zvýrazni (znepriesvitni) aktuálne tlačítko 1

gotoAndStop(1); //skoc na konkretny Frame (1) a nepokracuj - stop
tlacitko2._alpha = 50;
tlacitko3._alpha = 50;
tlacitko4._alpha = 50;
}

Rovnako pokračujeme aj s ďalšími náhľadmi. Zmeníme len Frame, na ktorý odkazujeme a tlačítka, ktorým nastavujme vlastnosť Alpha. Napríklad pre posledné tlačítko (tlacitko4) by mohol byť kód nasledovný:

tlacitko4.onRelease = function()
{
tlacitko4._alpha = 100; //zvýrazni (znepriesvitni) aktuálne tlačítko 4

gotoAndStop(4); //skoc na konkretny Frame (1) a nepokracuj - stop
tlacitko1._alpha = 50; //teraz nastavujeme Alpha na 50 pre tlacitko1
tlacitko2._alpha = 50;
tlacitko3._alpha = 50;
}

Jedna zo situácii, ktoré môžu nastať je, že z niektorého náhľadu neodkazujeme na odpovedajúci obrázok. Väčšinou sa stane, že napríklad z tlačítka s názvom “tlacitko1” nebudeme odkazovat na Frame 1, ale konkrétny obrázok nájdeme napríklad na Frame 3. Takže použijeme zápis gotoAndStop(3).

Kompletný kód tejto jednoduchej flash galérie:

Stop();
tlacitko1._alpha = 100;

tlacitko1.onRelease = function()
{
tlacitko1._alpha = 100;
gotoAndStop(1);
tlacitko2._alpha = 50;
tlacitko3._alpha = 50;
tlacitko4._alpha = 50;
}

tlacitko2.onRelease = function()
{
tlacitko2._alpha = 100;
gotoAndStop(2);
tlacitko1._alpha = 50;
tlacitko3._alpha = 50;
tlacitko4._alpha = 50;
}

tlacitko3.onRelease = function()
{
tlacitko3._alpha = 100;
gotoAndStop(3);
tlacitko2._alpha = 50;
tlacitko1._alpha = 50;
tlacitko4._alpha = 50;
}

tlacitko4.onRelease = function()
{
tlacitko4._alpha = 100;
gotoAndStop(4);
tlacitko2._alpha = 50;
tlacitko3._alpha = 50;
tlacitko1._alpha = 50;
}

Galériu je možné ďalej vylepšovať a pridávať rôzne detaily. Napríklad popisky k obrázkom a podobne.

Stiahni súborZdrojový súbor s celou Galériou (Flash CS4)
Zdrojový súbor s celou Galériou (Flash CS3)

Reklamy

Pridaj komentár

Zadajte svoje údaje, alebo kliknite na ikonu pre prihlásenie:

WordPress.com Logo

Na komentovanie používate váš WordPress.com účet. Odhlásiť sa / Zmeniť )

Twitter picture

Na komentovanie používate váš Twitter účet. Odhlásiť sa / Zmeniť )

Facebook photo

Na komentovanie používate váš Facebook účet. Odhlásiť sa / Zmeniť )

Google+ photo

Na komentovanie používate váš Google+ účet. Odhlásiť sa / Zmeniť )

Connecting to %s

%d bloggers like this: