Analógové hodiny vytvorené v Adobe Flash

Nedávno som vytvoril návod na to, ako jednoducho vytvoriť digitálne hodiny pomocou Adobe Flash.
Dnes som sa rozhodol rozšíriť kolekciu návodov a napísať postup na vytvorenie analógových hodín.

Vytvoríme si nový súbor (budeme používať ActionScript 2).

Vrstvu ktorá je v novovytvorenej aplikácii premenujeme na „pozadie“ a nakreslíme tvar našich hodín.

Označíme celé nakreslene pozadie hodín a skonvertujeme ho na symbol MovieClip (klávesova skratka [F8])

Teraz necháme MovieClip s pozadím vycentrovať na Stage. Najjednoduchšie je zobraziť si panel Align (klávesova skratka Ctrl + K alebo cez menu Window -> Align)

Označíme na paneli Align, že chceme centrovať ku Stage a necháme MovieClip vycentrovať horizontálne aj vertikálne.

Teraz môžeme vrstvu pozadie zamknúť, aby sme do nej náhodou nezačali kresliť.

Vytvoríme si novú vrstvu s názvom „hodiny“ a nakreslíme hodinovú ručičku. Dôležité je aby každá hodinová ručička ktorú nakreslíme bola nakreslená zvyslo (tak ako je na obrázku).

Pri kreslení rovných čiar si môžeme pomôcť tým že pred ťahaním čiary alebo štetca držíme stlačenú klávesu [Shift] a pustíme až keď je čiara hotová.

Označíme si túto ručičku, skonvertujeme ju na MovieClip [F8], ale veľmi dôležité je označiť „Registration point“, tak ako na obrázku. Týmto Flashku povieme, kde je „aktívny“ bod podľa ktorého ručička bude rotovať.

Označíme práve vytvorený symbol a na paneli vlastnosti mu nastavíme Instance Name na „hodin_mc“.

Rovnakým spôsobom vytvoríme novú vrstvu „minuty“ do ktorej nakreslíme horizontálnu čiaru (minútovu ručičku), označíme ju. Skonvertujeme na MovieClip [F8] a pamätajúc na „registration point“ potvrdíme vytvorenie. Následne priradíme Instance Name „minut_mc“

Rovnako aj pre ručičku sekundovú. Nová vrstva s názvom „sekundy“. Horizontálna čiara skonvertovaná na MovieClip s „registration pointom“ umiestneným dole (ako na predchádzajúcom obrázku). Pridáme Instance Name „sekund_mc“

Označíme všetky tri ručičky a necháme ich zarovnať vertikálne a zarovnať podľa spodku [ctrl] + [k]. Tentoraz ale neoznačíme že chceme zarovnávať v rámci stage.

Keď sú ručičky zarovnané, pretiahneme ich do stredu pozadia.

Teraz už môžeme pridať vrstvu s názvom „actions“. Nad prvým Framom v tejto vrstve stlačíme [F9] a v editore pre ActionScript, ktorý sa otvorí, vložíme nasledujúci kód.

var cas:Date=new Date;
var hours, minut, sekund;

//zisti aktualny cas
hodin=cas.getHours();
sekund=cas.getSeconds();
minut=cas.getMinutes();

hodin = hodin + (minut/60);
minut=minut*6 +(sekund/60);
hodin=hodin*30;
sekund=sekund*6;

//natocenie ruciciek
hodin_mc._rotation = hodin;
sekund_mc._rotation = sekund;
minut_mc._rotation = minut;

Už iba potrebujeme roztiahnuť aplikáciu na dĺžku dvoch Framov – označiť prvý frame a stlačiť [F5]
Vo výsledku budú vrstvy a časová os vyzerať nasledovne:

Pridanie druhého Framu zabezpečí, že aplikácia sa bude vracať na prvý Frame, kde sa vždy spustí náš kód, ktorý nastaví ručičky na aktuálny čas.
Otestovať aplikáciu môžeme skratkou [ctrl]+[enter]. Podľa chuti pridáme na pozadie označenie hodín, prípadne firemné logo.

Zdrojový súbor s analógovými hodinami (Flash CS4)
Zdrojový súbor s analógovými hodinami (Flash CS5)

Ako vytvoriť Flash preloader v ActionScript 2

Pri tvrobe Flash aplikácí sa často stretneme s tým, že uživateľ pri načítaní našej stránky čaká niekoľko sekúnd kým mu nabehne Flash aplikácia ktorú sme na stránku vložili. Počas týchto pár sekúnd uživateľ mnoho krát vôbec netuší, že sa na stránku načítava nejaká aplikácia (prípadne animácia) a už vôbec netuší, ako dlho načítavanie potrvá.

Z tohto dôvodu sa pri aplikáciach väčších než pár desiatok kilobajtov odporúča použiť preloader. Preloader informuje uživateľa nielen o tom, že má čakať na načítanie našej aplikácie, ale aj o tom koľko to bude trvať.

Preloader môžeme vytvoriť s ľubovoľným vzhľadom a určite sme sa s nimi už stretli:

V tomto príklade si vytvoríme veľmi jednoduchý preloader, ale nič nám nebráni jeho vzhľad zmeniť.

Začneme s novým súborom (programovať budeme v ActionScript 2), ale jednoducho môžeme preloader pridať aj k už existujúcej aplikácii.

Vytvoríme si vrstvu, ktorú nazveme „Actions“.
Na tejto vrstve pridáme na prvom a druhom Frame prázdny KeyFrame [F7].

Pod túto vrstvu pridáme novú vrstvu. Nazveme ju napríklad „obsah“. Poslúži nám na vloženie obsahu, aby sme mohli nasimulovať načítavanie reálnej aplikácie. Rovnako ako pri vrstve Actions, aj tu vložíme na prvý a druhý Frame nový prázdny KeyFrame [F7].

Označíme prvý Frame na vrstve Actions a stlačíme klávesu [F9]. Týmto otvoríme editor na vkladanie príkazov ActionScript na prvý Frame. Vložíme tu jediný príkaz: stop(); ktorý zabezpečí, že aplikácia zostane stáť na prvom Frame (kde bude iba náš preloader).

Na druhom Frame vo vrstve „obsah“ vložíme obrázok. Čím väčší, tým lepšie, pretože budeme mať možnosť vidieť ako preloader zobrazuje načítanie aplikácie až kým sa tento obrázok nenačíta.

Pod vrstvou Actions vložíme novú vrstvu. Nazveme ju „preloader“  a na prvom Frame vložíme nový KeyFrame [F6].

Do tohto KeyFrame vložíme text (typu Static text) s textom „Načítavam…“. Frame dva zostane prázdny.

Označíme práve vložený text a konvertujeme ho na Symbol typu MovieClip, klávesa [F8] a potvrdíme tlačítkom OK.

Vôjdeme do tohto Symbolu (dvojklik myšou nad symbolom) a uvidíme časovú os Symbolu.

Momentálne je tu iba vrstva s našim „Načítavam…“ textom. Tak si ju pomenujme „text“.

Vytvorme si ďalšie tri vrstvy: „Actions“, „Percenta“ a „Posuvnik“.

Na prvom Frame vo vrstve Actions stlačíme [F9] a v editore zapíšeme známy príkaz stop();

Do vrstvy percenta vložíme text. Na paneli vlastnosti nastavíme že pôjde o „Dynamic text“ a Instance name mu dáme rovnako ako na obrázku „percentaz“.

Keďže ide o dynamic text, tak potrebujeme špecifikovať, ktoré znaky majú byť pripojené k nášej Flash aplikácií. Týmto spôsobom zabezpečíme, že každý uživateľ uvidí znaky v tom fonte v ktorom sme chceli.

Klikneme na tlačítko Embed a vyberieme, že chceme pripojiť  čísla (Numbers [0..9]) a taktiež znak %.

Do vrstvy „posuvník“ nakreslíme štvoruholník bez obrysovej čiary a na paneli nástrojov mu nastavíme šírku (width) na 1px a výšku (height) na 10px. Toto bude ukazovateľ, ktorý bude s pribúdajúcimi precentami načítania aplikácie rásť tak, že mu zväčšíme šírku.

Označíme náš „posuvník“ a zkonvertujeme ho na symbol MovieClip [F8]. Tento MovieClip nazveme (dáme mu Instance Name) „ukazovatel“.

Opustíme editovanie Preloadaru a vrátime sa späť na hlavnu scénu (v hornej časti klikneme na odkaz Scene1).

Označíme Symbol „preloader“ v ktorom je celý náš preloader umiestnený a stlačíme klávesu [F9]. Teraz sa nám otvoril editor cez ktorý vložíme nasledovný kód ActionScriptu priamo do Symbolu.

onClipEvent(enterFrame) {

nacitane = _parent.getBytesLoaded();
spolu = _parent.getBytesTotal();

if (percent == undefined) percent = 0;

percent -= (percent – ((nacitane/spolu)*100)) * 0.25;
kolko = int(percent);

percentaz.text = kolko + “%”;
ukazovatel._width = kolko;

if (percent > 99)
{
_parent.gotoAndStop(2);
}

}

Ak aplikáciu otestujeme [Ctrl]+[Enter], tak uvidíme že sa pred načítaním aplikácie skutočne zobrazuje preloader.

Ako tento preloader funguje?

Prejdime si predchádzajúci kód riadok po riadku:

onClipEvent(enterFrame) zabezpečí, že sa kód ktorý nasleduje v zložených zátvorkach vykoná vždy keď sa preloader ocitne na Frame. V tomto prípade to zabezpečí, že kód  sa spúšťa stále.

Do premennej „nacitane“ ukladáme koľko bytov z našej aplikácie sa už načítalo.

V premennej „spolu“ je  uložená celková veľkosť našej aplikácie v bytoch.

Podmienkou overíme, či už bola premenná „percent“ definovaná. Ak nie , čiže ak premenná percent = undefined, tak ju nastavíme na nulu.

Podľa celkovej veľkosti aplikácie a množstva načítaných bytov zistíme koľko percent už bolo načítaných.

Do premennej „kolko“ vložíme počet načítaných percent zaokrúhlený funkciou int() na celé čísla.

Množstvo načítaných percent („kolko“) vypíšeme v textovom poli „percentaz“  a pripojíme aj znak %.

Podľa toho koľko percent je načítaných, nastavíme šírku „posuvníka“. Takže ak je načítaných 50% aplikácie, tak šírka bude 50px.

Nakoniec ešte podmienkou skontrolujeme, či nebolo načítaných viac ako 99% a ak áno, skočíme na frame dva a necháme nabehnúť našu aplikáciu.

Zdrojový súbor s preloaderom (Flash CS4)
Zdrojový súbor s preloaderom (Flash CS5)

NaN a funkcia isNaN pri programovaní v AS

V poslednej dobe mnohí ľudia na internete vyhľadávajú, čo vo Flash znamená NaN. Rozhodol som sa preto napísať krátky opis.

Pri programovaní aplikácií pomocou ActionScriptu (2 aj 3) sa nám môže stať, najmä ak načítavame údaje od uživateľa alebo z externých súborov, že výsledok matematických operácií nám vráti hodnotu NaN.

Skratka NaN znamená “Not a Number”, čiže “nie je číslo”.

Ak by sme mali vytvorené tri premenné:

var cislo1 = 10;
var cislo2 = "3.15"
var cislo3 = "osem";

Môžeme vidieť, že nezmyselný výpočet (3 * osem) nám vráti hodnotu NaN – vo výpočte je slovo namiesto čísla 8

trace(3 * cislo3); //vypise NaN

Samozrejme ak počítame normálne hodnoty, tak vrátena hodnota je výsledok výpočtu:

trace(cislo1 * cislo2); //31.5

Vidíme, že ak je číslo v úvodzovkách, nerobí to žiaden problém…

Výborné je, že nemusíme čakať či nám Flash vyhodí chybové hlásenie, ale pomocou funkcie isNaN() môžeme v ActionScripte overiť, či hodnota je alebo nieje číslo.

Ak overovaná hodnota je číslo, vráti funkcia isNaN() hodnotu false
Ak overovaná hodnota nie je číslo, vráti funkcia isNaN() hodnotu true

trace (isNaN(cislo1)); //vracia false
trace (isNaN(cislo2)); //vracia false
trace (isNaN(cislo3)); //vracia true, pretoze je pravda ze toto nieje cislo

Túto funkciu môžeme teda použiť v podmienkach a ak hodnota načítaná napríklad od uživateľa nieje číslo, môžeme ho na to nejakým spôsobom upozorniť:

if (isNaN(cislo3))
{
trace("Hodnota cislo3 (" + cislo3 + ") nieje cislo...");
}

A naopak, ak chceme aby sa podmienka vykonala iba ak je hodnota číselná, tak to zapíšeme takto:

if (!isNaN(cislo2))
{
trace("Hodnota v cislo2 (" + cislo2 + ") je cislo...");
}

Flash a tvorba formulárov

–        Static Text – text ktorý sa nebude počas behu aplikácie meniť (neumožňuje priradiť Instance Name).

Flash ponúka úžasne možnosti tvorby aplikácií, ktoré v nejakej forme využívajú formuláre.
Či už budeme vytvárať jednoduché kalkulačky, emailové formuláre alebo zložité aplikácie prijímajúce vstupy od uživateľa, princíp bude väčšinou rovnaký ako si ukážeme ďalej.

Cenová kalkulačka

Vytvoríme si jednoduchý formulár, ktorý po zadaní ceny tovaru a počtu kusov prepočíta ostatné hodnoty  a zobrazí ich užívateľovi. Výsledný formulár bude podobný tomuto:

Najprv na Stage vložíme popisky jednotlivých polí. Vytvoríme ich ako Static Text.
Flash umožnuje pracovať s troma typmi textu (verzia CS5 rozširuje, pri použití ActionScript 3.0,  možnosti práce s textom)

• Static Text – text ktorý sa nebude počas behu aplikácie meniť (neumožňuje priradiť Instance Name).
• Dynamic Text – tomuto objektu môžeme priradiť jeho vlastné meno (Instance Name), takže počas behu aplikácie možeme meniť vypisovaný text.
• Input Text – slúži ako textové pole na vkladanie textu. Pomocou Instance Name tento text môžeme čítať.

Takže si vytvoríme popisky. Každý popisok môžeme vložiť ako samostatný Static Text pripádne ich vložíme všetky v jednom textovom objekte.

Následne vložíme dve textové polia typu Inpnut Box, do ktorých uživateľ vpíše cenu tovaru a počet kusov. Prvému dáme Instance Name „cena“, druhému „kusy“.

Ďalšie tri vložené textové polia budu typu Dynamic Text, keďže v nich budeme vypisovať výsledok.
Pomenujme si ich (dajme im Instance Name) napríklad: „spolu“, „dph“ a „vysledok“.

Vytvoríme si objekt, ktorý bude reprezentovať tlačítko. (čokoľvek nakreslíme, označíme, stlačíme F8 a skonverujeme na typ objektu/symbolu – Symbol Button). Tlačítku tiež dáme Instance Name, napríklad „pocitaj_btn“.

Naša aplikácia teraz môže vyzerať nasledovne: (Môžeme stlačiť Ctrl + Enter na otestovanie aplikácie):

Pridáme ActionScript

Teraz už len potrebujeme našu kalkulačku oživiť.

Vytvoríme si novú vrstvu, do ktorej vložíme príkazy jazyka ActionScript. Najvhodnejšie bude pomenovať si túto vrstvu Actions a umiestniť ju ako prvú.

Označíme prvý Frame (prvé políčko) vo vrstve Actions a stlačíme F9. Týmto otvoríme editor pre ActionScript.

Ako prvé potrebujeme vyprázdniť textové polia, aby boli pred zápisom čísel prázdne:

cena.text = "";
kusy.text = "";

Zápis cena.kusy umožňuje prístup k obsahu textového poľa (či už Dynamic alebo Input text).

Keďže do týchto polí chceme vkladať iba čísla, tak máme niekoľko možnosti ako to ošetriť. Nemôžeme očakávať, že každý uživateľ bude naozaj vkladať čísla a nie ľubovoľné znaky, ošetríme si to pomocou vlastnosti Input Textu (mohli by sme to samozrejme riešiť aj pomocou podmienok).

cena.restrict = "0-9";

Okrem čísel ale chceme vkladať aj desatinnú čiarku. Pri počítaní sa musíme držať amerického/britského štandardu a používať namiesto desatinnej čiarky bodku. Takže zoznam dovolených znakov rozšírime o bodku. Jednotlivé znaky oddeľujeme čiarkou.

cena.restrict = "0-9,.";
kusy.restrict = "0-9,.";

Aby sme predišli tomu, že uživateľ zadá priveľa znakov, môžeme nastaviť maximálny počet povolených znakov.

cena.maxChars = 5;
kusy.maxChars = 5;

Takže textové polia máme vyčistené, a nastavené, tak pokračujeme vytvorením funkcie pre sledovanie stlačenia tlačítka:

btn_pocitaj.onRelease = function() {

}

Medzi zložené zátvorky budeme teraz vpisovať všetko, čo chceme aby táto funkcia vykonala. Čiže všetko čo sa má stať po tom, ako uživateľ stlačí tlačítko „Počítaj“.
Chceme nechať načítať hodnotu z prvého textového poľa (cena) a vynásobiť to obsahom druhého poľa (kusy). Túto hodnotu necháme uložiť do premennej ktorú si vytvoríme a nazveme „medziSucet“.

var medziSucet:Number = cena.text * kusy.text;

Hodnotu vypíšeme do Dynamic Text s Instance Name „spolu“:

spolu.text = medziSucet;

Do poľa s DPH necháme vypočítať DPHčku (zatiaľ je 19% ):

dph.text = medziSucet * 0.19;

DPHčku spolu s medzisúčtom použijeme na zistenie výslednej ceny, ktorú vypíšeme do Dynamic Text u s Instance Name „vysledok“.

vysledok.text = medziSucet + Number(dph.text

Hodnotu z poľa „dph“ sme previedli pomocou funkcie Number() na číslo, inak by sa s touto hodnotou pracovalo ako s textovým reťazcom. V prípade problémov môžeme túto funkciu použiť aj pri načítavaní hodnoty z ostatných polí, v predchádzajúcich riadkoch.
Ak aplikáciu otestujeme (Ctrl + Enter), tak môžeme byť celkom spokojní, ale poďme dotiahnuť ešte niekoľko detailov.

Po vypočítaní výsledkov, chceme vyčistiť textové polia (Input Boxy):

cena.text = "";
kusy.text = "";

A tiež chceme aby sa nastavil kurzor do prvého poľa s menom „spolu“, aby uživateľ mohol pokračovať vo výpočtoch. Vo väčšine programovacích jazykov toto dosiahneme pomocou nejakej formy funkcie SetFocus. Podobne to je aj pomocou ActinScriptu a objektu Selection:

Selection.setFocus("_root.cena");

Teraz aplikácia pracuje podľa našich predstáv. Existuje samozrejme množstvo ďalších možnosti a funkcií o ktoré by sme aplikáciu mohli rozšíriť.

Výsledný kód:

var btn_pocitaj:Button;

cena.text = "";
kusy.text = "";

cena.restrict = "0-9,.";
kusy.restrict = "0-9,.";

cena.maxChars = 5;
kusy.maxChars = 5;

btn_pocitaj.onRelease = function() {

var medziSucet:Number = cena.text * kusy.text;
spolu.text = medziSucet;
dph.text = medziSucet * 0.19;
vysledok.text = medziSucet + Number(dph.text);

cena.text = "";
kusy.text = "";
Selection.setFocus("_root.cena");
}


Zdrojový súbor s kalkulačkou – formulárom (Flash CS4)
Zdrojový súbor s kalkulačkou – formulárom (Flash CS3)

Tvorba vlastného kurzora vo Flash

V mnohých prípadoch potrebujeme vylepšiť Flash aplikáciu vytvorením vlastného kurzora. Pri použití ActionScript 2 ide o veľmi jednoduchú záležitosť.

Najprv si vytvoríme dizajn nášho nového kurzora, napríklad taký ako je tento:

Keď máme dizajn hotový, skonvertujeme ho na MovieClip [F8] a pomenujeme napríklad “kurzor”.

Náš MovieClip zostal na Stage a preto možeme dvojklikom vojsť priamo do módu v ktorom náš MovieClip môžeme editovať.

To čo potrebujeme je nastaviť, aby sa “vrchol” kurzora prekrýval s “Registration point” (krížikom), tak ako je to zobrazené:

Toto je dôležité, pretože ak by bol “Registration point” kurzora napríklad na zobrazenom mieste, reagovali by na tento kurzor napríklad tlačítka už vo chvíli, ako by sme nad ne vošli “krížikom”, lenže mi chceme aby bol hlavný bod na ktorý bude aplikácia reagovať tam, kde náš kurzor začína.

Keď sme vrchol kurzora správne umiestnili, može sa dvojklikom mimo kurzora vrátiť naspäť do módu v ktorom editujeme Stage a dať nášmu MovieClipu (kurzoru) jeho unikátne meno (InstanceName).

Nazvime si ho napríklad “kurzor_mc”. To že názov končí “_mc” zabezečí, že pri písani v ActionScript nám editor bude pri pristupovaní k vlastnostiam a metódam tohto MovieClipu poskytovať pomôcky, pretože táto prípona editoru povie že ide o MovieClip.

Teraz si vytvoríme novú vrstvu, ktorú nazveme “Actions” (aj keď môžeme ju nazvať aj akokoľvek inak).
Označíme prvý Frame na vrstve Actions a otvoríme editor pre ActionScript [F9].

Kód ktorý zapíšeme je veľmi jednoduchý:

kurzor_mc.startDrag("true");
Mouse.hide();

Teraz môžeme aplikáciu otestovať [Ctrl]+[Enter] a vidíme, že kedykoľvek vojdeme myšou do priestoru našej Flash aplikácie, zmení sa kurzor myši na ten, ktorý sme si vytvorili.

Príklad použitia tlačítok a vytvorenie menu

Jedným z najčastejších využití Flashových doplnkov na webových stránkach sú rôzne animované a interaktívne menu.
Nasledujúc tento trend, predstavíme si v tomto návode jednu z možnosti vytvorenia menu pomocou Flash. Pôjde o jednoduché menu zložené z hlavného tlačítka, nad ktoré keď uživateľ vojde myšou, zobrazí sa menu s podkategóriami.

Výsledkom bude toto: (zobrazený je klikací brázok s odkazom na funkčné menu)

Povedzme, že naše menu chceme umiestniť do hlavičky stránky, kde bude zaberať priestor veľkosti 600x 200px.

Tak si najprv nastavme veľkosť Stage (cez panel vlastnosti).

Pripravíme si prostredie aplikácie

S najväčšou pravdepodobnosťou budeme chcieť pod takéto menu umiestniť nejaký obrázok, preto si pomenujme prvú vrstvu ako “pozadie” a buď do nej niečo nakreslíme, vložíme fotografiu alebo len štvoruholník s prechodom farieb, tak aby sme zabrali celú plochu budúceho menu. V tomto príklade som “vystrihol” pozadie stránky, na ktorú bude menu vložené a obrázok som umiestnil ako pozadie Flash aplikáce.
[chystám sa začať publikovať návody, ktoré už nebudú využívať iba časovú os (TimeLine), ale pôjde o dynamicky – kódom vytvárané aplikácie. Potom budeme môcť do pozadia umiestniť aj animáciu.]

Ukážka jednoduchého pozadia s ktorým budeme pracovať:

Vrstvu “pozadie” môžeme zamknúť (prípadne aj skryť) a vytvoríme si ďalšiu vrstvu s názvom “tlacitko”.

Vytvárame jednotlivé tlačidla

Do tejto vrstvy nakreslíme tvar nášho hlávného tlačítka. Keď sme hotoví, označíme všetky časti tlačítka a skonvertujeme na Symbol typu Button (klávesova skratka F8).
Ak do tlačítka vkladáme text, tak použijeme typ textu static!

Keď máme tlačitko pripravené, dáme mu na panely vlastnosti jeho jedinečné meno (Instance Name), cez ktoré sa budeme môcť na toto tlačítko odvolávať pri písani kódu v ActionScripte.

Pomenujme si ho “hlavneTlacitko”.

Kvôli prehľadnosti natiahnime dĺžku scény z jedného Frame na pätnásť.
Vytvorme si ďalšiu vrstvu, s názvom “pod_menu”. Do tejto vrstvy vložíme tlačítka ktoré sa zobrazia po tom, ako kurzorom myši vojdeme nad Hlavné tlačítko. V tomto príklade si tlačítka sub-menu vytvoríme tri.
Každému rovnako ako hlavnému tlačítku dáme “Instance Name”. Napríklad: Tlacitko1, Tlacitko2 a Tlacitko3

Teraz by sme mali mať vo Flash editore nasledujúce rozloženie prostredia.

Pridáme vrstvu, do ktorej budeme zapisovať príkazy ActionScript. Nazveme si ju, podobne ako v ostatných príkladoch, Actions. Túto vrstvu umiestnime ako prvú v poradí.

Zabezpečenie toho, aby sa nám zobrazilo sub-menu ošetríme tým, že na jednom Frame bude scéna iba s hlavným tlačítkom a na ďalšom Frame bude scéna, na ktorej sú viditeľné aj tlačítka sub-menu.

Prehľadnejšie bude ak obe scény natiahneme na spomínaných pätnásť Framov.

Ak aplikáciu vyskúšame, tak vidíme, že sub-menu sa zjaví až na pätnástom Frame.

Flash ponúka možnosť vkladať záložky

Teraz by sme mohli skákať medzi oboma časťami aplikácie, ale Flash umožňuje zprehľadniť a zjednodušiť si prácu a my to využijeme.
Týmto “zlepšovákom” je vloženie “záložiek” do úsekov časovej osi. Koncept záložiek je rovnaký ako pri Instance Name Symbolov – ktorýkoľvek KeyFrame môže mať svoje meno (Name). Toto meno ktoré slúži ako záložka použijeme tak, že namiesto volania gotoAndPlay(16); môžeme použiť gotoAndPlay("menoZalozky");

Dobrá prax je, vytvoriť si na takéto záložky samostatnú vrstvu. Nazvime si ju “zalozky”.
Na vrstve “zalozky” označíme prvý KeyFrame a na panely Vlastnosti vložíme meno (Name), napríklad “zaciatok”.

Vidíme, že teraz sa na mieste, kde sme vložili záložku, zobrazuje vlajočka a meno záložky. Celkom užitočné.
Vložíme na 16 Frame nový KeyFrame (klávesova skratka F6) a dajme mu meno “podMenu”.

Nezabudnime pridať KeyFrame (klávesová skratka F6) aj vo vrstve Actions, na Frame 16 a na konci na Frame 30.

Začíname s písaním ActionScriptov

Teraz začneme s tou akčnejšou časťou, a to oživovaním aplikácie pomocou ActionScript.

Ako vo väčšine prípadov, budeme chcieť najprv celú aplikáciu zastaviť. Označíme prvý Frame vo vrstve Actions a vyvoláme okno editora ActionScriptu (klávesová skratka F9).

Zapíšeme jednoduchý príkaz Stop(); a zastavenie aplikácie máme vybavené.

Ďalej chceme, zapísať kód, ktorý sa spustí po nájazde nad hlavné tlačítko. Zabezpečí nám to obsluha udalosti (Event Handler), ktorá pri udianí sa zvolenej udalosti vyvolá funkciu so zadanými príkazmi.

hlavneTlacitko.onRollOver = function ()
{
// ... príkazy, ktoré sa majú vykonať ...
}
My chceme, aby aplikácia skočila na Frame kde máme záložku, takže kód bude vyzerať nasledovne:

hlavneTlacitko.onRollOver = function ()
{
gotoAndStop("podMenu");
}

Kľudne by sme mohli použiť príkaz gotoAndPlay(); ktorý by skočil na danú záložku a aplikáciu ďalej prehrával. Takto by sme získali lepšie efekty.
Na konci návodu je zdrojový súbor s galériou v ktorej je menu animované. Treba pamätať na to, že pri animácií musí byť v každej animovanej vrstve len jeden Symbol.

Teraz umiestnime kurzor na 16 Frame vrstvy Actions a budeme vkladať príkazy tu. Pôjde o obsluhu stlačenia jednotlivých tlačidiel sub-menu. Po stlační tlačidla sa načíta zadaná stránka.

tlacitko1.onRelease = function()
{
getURL("http://www.cuil.com"); //po stlační načítaj danú web stránku
}

tlacitko2.onRelease = function()
{
getURL("http://www.wolframalpha.com/");
}

tlacitko3.onRelease = function()
{
getURL("http://www.wikipedia.org/");
}

Teraz už menu perfektne funguje, ale k dokonalosti chýba ešte detail – keď uživateľ odtiahne myš z oblasti sub-menu, očakáva, že sa sub-menu skryje.

Z množstva možnosti ako to ošetriť, použijeme možnosť, kedy sa mimo tlačidiel bude nachádzať neviditeľné tlačidlo. Ak nad neho vôjdeme kurzorom, preskočí aplikácia na prvý Frame (záložku “zaciatok”).

Neviditeľné tlačidlo

Vytvoríme si novú vrstvu a nazvime ju “spat”. Ostatné vrstvy zamknime. Vo vrstve “spat” vytvoríme štvoruholník výraznej farby, ktorý prekryje celú plochu aplikácie (600×200). Najlepšie keď táto vrstva prekrýva ostatné tlačítka.

Keď sme hotový, skonvertujme štvoruholník na Symbol Button (klávesa F8). Dajme mu Instance Name “tlacitkoSpat”

Dvojklikneme na vytvorený Symbol, čím doň “vojdeme” a môžeme editovať jeho vzľad.

Na časovej osi tohto tlačítka označíme Frame s názvom Hit. Vložíme tu KeyFrame (F6). Klikneme na predchádzajúcci KeyFrame a stlačíme Delete, čím vymažeme obsah troch Framov.

Takto sme zabezpečili, že tlačidlo nebude byditeľné, keďže nemá žiaden vzhľad, ale bude stále aktívne, keďže na Frame “Hit” máme definovanú plochu tlačítka.

Označíme Frame “hit” a z plochy tlačidla “vyrežeme” pomocou gumy (Eraser  – klávesova skratka E) miesta kde sa nachádzajú tlačidla menu.

Vďaka tomu určíme aktívnu  plochu tlačidla “tlacitkoSpat” tak, že keď sa vzdialime od menu, dostaneme sa nad toto tlačidlo a obsluha udalosti ktorú hneď napíšeme nás vráti na záložku “zaciatok”.

Otestovaním aplikácie (Ctrl + Enter) si môžeme overiť, že tlačidlo “tlacitkoSpat” je neviditeľné, ale kurzor reaguje v miestach kde sme ponechali aktívnu plochu tlačítka.

Teraz sa môžeme vrátiť na Stage (dvojklik mimo plochy Symbolu) a na Frame 16 k predchádzajúcemu kódu vložíme obsluhu tlačítka.

tlacitkoSpat.onRollOver = function()
{
gotoAndStop("zaciatok"); //po prejdení nad tlacitkospat aplikácia skočí na záložku zaciatok
}

Hotovo. Po niekoľkých doladeniach može byť toto menu kvalitným doplnkom webovej stránky.

Zdrojový súbor s Flash menu (Adobe Flash CS4)
Zdrojový súbor s Flash menu (Adobe Flash CS3)

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:

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.

[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.

Takž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.

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();

Veľ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.

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

Ovládanie pohybu objektu šípkami

V tomto príklade budeme veľmi jednoduchým spôsobom vo Flash aplikácií overovať, či uživateľ stlačil na klávesnici šípku na udanie smeru, a keď áno, pohneme daným smerom náš objekt (symbol).

Najprv si nakreslíme objekt, ktorým budeme pohybovať. V mojom prípade autíčko.

Keď sme hotoví, skonvertujeme si kresbu na Symbol typu MovieClip (klávesová skratka F8).

Keďže pri použití ActionScript 2 môžeme príkazy vkladať nielen do Framov, ale aj do Symbolov (typu Button a MovieClip), využijeme túto možnosť. Pri použití ActionScript 3 táto možnosť zaniká.

Označíme náš Symbol (MovieClip) s autíčkom a otvoríme ActionScript editor (F9).

Teraz zapisujeme príkazy priamo pre tento symbol a preto ich nemôžeme písať len tak “na voľno”, ako pri zápise na Frame. Musíme určiť v akej situácií sa má daný kód spustiť (napríklad pri načítani symbolu, po kliknutí naň, atď…)

My chceme aby sa po načítaní nášho symbolu nastavila premenná, ktorá bude určovať “Rýchlosť” – to znamená počet pixelov o ktoré autíčko poskočí.  Kedy bol symbol načítaný pre nás odsleduje Event-Handler (oblsuha události) onClipEvent(load).

onClipEvent(load)
{
rychlostPohybu = 10;
}

Máme nastavené, že autíčko sa bude pohybovať o 10 pixelov (samozrejme je možné hodnotu zväčšiť alebo zmenšiť).

Pridáme kód, ktorý sa spustí po zobrazení autíčka na Stage. Tento kód bude sledovať či bola stlačená klávesa (na klávesnici) a pokiaľ áno, tak ktorá.
Následne pomocou podmienok určíme, čo sa má v prípade stlačenia tej ktorej klávesy stať.

onClipEvent(enterFrame) //nasledujúci kód sa vykoná pri zobrazení symbolu na Stage
{

takže keď sa autíčko zobrazí na stage, a bola stlačená šípka vpravo zmení sa pozícia autíčka. Zároveň ho necháme otočiť o 90 stupňov, aby bolo nasmerované správnym smerom.

if(Key.isDown(Key.RIGHT))
{
this._x +=  rychlostPohybu; //pripočítaj k aktuálnej pozíci X hodnotu rychlostPohybu
this._rotation = 90; //otoč autíčko o 90 stupňov
}

Stlačnie klávesy pre nás odlsedoval objekt (knižnica) Key, konkrétne metóda isDown. Metóda isDown má následne argument (parameter) určujúci stlačenie ktorej klávesy má sledovať. Rovnako vytvoríme Event-Handler aj pre ďalšie klávesy:

if(Key.isDown(Key.LEFT))
{
this._x -=  rychlostPohybu; //od pozície X odpočítaj hodnotu rychlostPohybu
this._rotation = -90; //otoč autíčko o -90 stupňov
}

if(Key.isDown(Key.UP))
{
this._y -=  rychlostPohybu; //od pozície Y odpočítaj hodnotu rychlostPohybu
this._rotation = 0; //otoč autíčko na 0 stupňov - pôvodná poloha
}

if(Key.isDown(Key.DOWN))
{
this._y +=  rychlostPohybu; //k pozícii Y opripočítaj hodnotu rychlostPohybu
this._rotation = 180; //otoč autíčko na 180 stupňov
}
}

Po spustení aplikácie (Ctrl + Enter) môžeme autíčkom pohybovať. Samozrejme existujú efektívnejšie metódy ktoré by sme použili, ale na začiatok môže postačovať.

Kompletný kód pre pohyb autíčka (MovieClip symbol)


onClipEvent(load)
{
rychlostPohybu = 10;
trace(rychlostPohybu)
}

onClipEvent(enterFrame)
{
if(Key.isDown(Key.RIGHT))
{
this._x +=  rychlostPohybu;
this._rotation = 90;
}

if(Key.isDown(Key.LEFT))
{
this._x -=  rychlostPohybu;
this._rotation = -90;
}

if(Key.isDown(Key.UP))
{
this._y -=  rychlostPohybu;
this._rotation = 0;
}

if(Key.isDown(Key.DOWN))
{
this._y +=  rychlostPohybu;
this._rotation = 180;
}
}

Digitálne hodiny – práca s objektom Date()

Tento jednoduchý príklad ukazuje vytvorenie digitálnych hodín v Adobe Flash (tieto môžu byť zaujímavým doplnkom web stránky) a využitie objektu/knižnice Date().
Knižnica Date() patrí medzi štandardné knižnice funkcií ActionScript, podobne ako napríklad knižnica Math().

Objekt/Knižnica Date() slúži na to, aby sme pomocou ActionScript získali prístup k systémovemu času (zahŕňa čas, dátum…)

Tento príklad funguje na princípe načítania a následného zobrazenia času pri návrate na Frame 1. Aby táto mini aplikácia fungovala budeme potrebovať Framy dva (nestačí mať jeden frame pretože potom hodiny nefungujú).

[Update] Kvôli množstvu dotazov som pridal aj návod na vytvorenie analógových hodín.

Kvôli prehľadnosti si umiestnime jednotlivé prvky aplikácie do osobitných vrstiev (Layers)

• Actions – tu vložíme kód jazyka ActionScript (dobrá prax je túto vrstvu zamykať)
• Text – do tejto vrsty vložíme textové pole – bude slúžiť na zobrazenie času
• Hodiny – toto je vrstva v ktorej nakreslíme grafický dizajn našich hodin

Ako vidieť na obrázku, tak v každej vrstve sú spominané dva Framy (ďalší Frame je vložený klávesovou skratkou F5)

Keďže digitálne hodiny sú aplikáciou malých rozmerov, môžeme zmenšiť veľkosť Stage povedzme na 200x100px.
Vo vrstve “Hodiny” nakreslíme vzhľad hodin, napríklad:

Teraz do vrstvy “text” vložíme textové pole, ktoré bude tvoriť display hodin. Prednastavený typ textového poľa je “Static text”. Zmeníme ho na “Dynamic text”, pretože typ textového poľa “Dynamic text” môžeme označiť špecifickým menom (instance name) a podobne ako pri Symboloch následne odkazovať na toto pole cez jeho meno (či už z neho čítať alebo zapisovať).
My použijeme Instance name “mojText”.

Odporúčam vpísať do textového poľa nejaký text, aby bolo možné nastaviť najvhodnejšie parametre textu (veľkosť, farbu..)

Teraz pristúpime k samotnému kódu, ktorý zabezpečí fungovanie aplikácie.

Klikneme na niektorý Frame vo vrstve “Actions” a stlačíme F9. Otvorí sa editor pre ActionScript.

Najprv si nadeklarujeme niekoľko premenných.

var cas = new Date();

Premenná “cas” bude odteraz vystupovať ako objekt reprezentujúci knižnicu Date() takže bude mať všetky vlastnosti a metódy tejto knižnice.

Nadeklarujeme ďalšie premenné, do ktorých budú načítané časové hodnoty vrátené funkciami (metódami) knižnice Date() – tú teraz zastupuje náš objekt “cas”.

var sekundy = cas.getSeconds(); //do premennej sekundy načítame aktuálne sekundy
var minuty = cas.getMinutes(); //do premennej minuty načítame aktuálne minuty
var hodiny = cas.getHours(); //do premennej hodiny načítame aktuálnu hodinu


Do premenných sekundy, minuty a hodiny máme načítané hodnoty a tie vpíšeme cez vlastnosť “.text” do textového poľa mojText.

mojText.text = hodiny + ":" + minuty + ":" + sekundy;

A vrátime sa späť na prvý Frame.

gotoAndPlay(1);

Ak aplikáciu spustíme (Ctrl + Enter) tak máme digitálne hodiny s presným časom hotové.

Kompletný kód:

var cas = new Date();

var sekundy = cas.getSeconds();
var minuty = cas.getMinutes();
var hodiny = cas.getHours();

mojText.text = hodiny + ":" + minuty + ":" + sekundy;

gotoAndPlay(1);

Jednoduchá Flash galéria

Využitie príkazov “nextFrame” a “prevFrame” na obsluhu galérie (ActionScript 2.0)

V tomto príklade si vytvoríme galériu, v ktorej budeme pomocou dvoch tlačitiel prechádzať jednotlivé obrázky.
Takto bude vyzerať výsledok návodu:

Na začiatok si po otvorení nového súboru vo Flash editore vytvoríme tri vrstvy:

• Actions – tu zapíšeme naš ActionScript na obsluhu správania aplikácie a tlačitiel
• Tlacitka – v tejto vrstve vytvoríme tlačítka
• Obrazky – tu budú jednotlivé obrázky

Pozadie galérie môžeme nastaviť na tmavo sivú (kvôli lepšiemu vzhľadu) na panely Vlastnosti (Properties panel).

Do Galérie si naimportujeme jednotlivé obrázky a na vrstve “Obrazky” uložíme každý obrázok do osobitného KeyFrame.
(ak naimportujeme kolekciu obrázkov – obrázky s rovnakým menom napr.: obr01.jpg … obr50.jpg – tak toto za nás urobí Flash editor a my len premenujeme vrstvu)

Vo vrstve “Tlacitka” vytvoríme použitím štandardných nástrojov grafický návrh tlačítka. Keď sme hotoví, tak po stlačení klávesy F8 skonvertujeme náš dizajn na Symbol typu Button.

Takto vytvorené tlačítko označíme a vytvoríme duplikát (Ctrl + D).
Duplikát prevrátime, napríklad cez: Menu > Modify > Transform > Flip Horizontal

Teraz máme vo vrstve Tlacitka dve tlačítka. Každému z nich dáme “Instance name” – konkrétne meno symbolu – na panely Vlastnosti. Nazveme si ich “lavo” a “pravo”.

Máme teraz na Stage dve tlačítka a všetky obrázky, ktoré použijeme v Galérii (niečo ako je na obrázku dole), takže môžeme pristúpiť k samotnému “kódovaniu”.

Ak teraz galériu otestujeme (Ctrl + Enter), tak sa budú jednotlivé obrázky striedať jeden za druhým.
Toto bude prvá vec, ktorú ošetríme a aplikáciu hneď na začiatku zastavíme.

Vo vrstve “actions” klikneme na prvy Frame a stlačením klávesy F9 otvoríme editor pre ActionScript.

Teraz môžeme začať písať. Prvé čo spravíme je, že zastavíme animáciu. Stačí napísať príkaz:
stop();

Ak galériu otestujeme teraz (Ctrl + Enter), tak zostane stáť na prvom obrázku.

V ďalšom riadku začneme písať kód, ktorý sa uloží ako funkcia do pamäte a počas behu aplikácie čaká či nieje stlačené dané tlačidlo.  Ide o takzvaný Event-hanler (obsluhu udalostí). Keď je tlačidlo “pravo” stlačené, tak sa vykonajú zadané príkazy – aplikácia skočí na ďalší Frame.

pravo.onRelease = function()
{
nextFrame();
}

Ak aplikácu otestujeme, tak teraz po stlačení tlačidla s “Instance name” pravo galéria skáče na ďalší obrázok, až kým nedojde na posledný. Tu sa animácia zastaví, pretože za posledným už nieje ďalší Frame. Musíme preto zabezpečiť, že ak je aktuálny Frame posledný, tak po stlačí tlačidla aplikácia skočí na Frame prvý a zastaví sa.
Rozšírime preto kód o podmienku.

pravo.onRelease = function()
{
if(_root._currentframe == 4)
{
//ak je aktuálny frame posledný v tomto prípade 4tý tak skoč na začiatok
gotoAndStop(1);
}
else
{
//inak - čiže ak niesme na poslednom Frame, tak skoč na ďalší Frame
nextFrame();
}
}

To isté teraz urobíme pre druhé tlačidlo, len namiesto nextFrame(); použijeme príkaz prevFrame(); ktorý skáče na predchádzajúci Frame.
V podmienke otestujeme či aktuálny Frame je prvý, a ak áno, tak aplikácia skočí na Frame posledný (momentálne 4).

lavo.onRelease = function()
{
if(_root._currentframe == 1)
{
//ak je aktuálny Frame prvý, tak skoč na koniec, v tomto prípade je to 4
gotoAndStop(4);
}
else
{
//inak - čiže ak niesme na prvom Frame, tak skoč na prechádzajúci Frame
prevFrame();
}
}

Kompletný kód galérie:

stop();

pravo.onRelease = function()
{
if(_root._currentframe == 4) {
gotoAndStop(1);
}
else
{
nextFrame();
}
}

lavo.onRelease = function()
{
if(_root._currentframe == 1)
{
gotoAndStop(4);
}
else
{
prevFrame();
}

Teraz už naša galéria funguje presne tak, ako by sme očakávali a na tomto základe môžete galériu ďalej vylepšovať.

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