Archív

Flash – ActionScript 2.0

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.

Hotove analogove hodiny

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.

Pozadie pre analogove hodiny

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

Pozadie ako MovieClip

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.

Vycentrovanie ručičiek

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

Zamknutie vrstvy

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

Ručička analogových hodín

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

MovieClip 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“

Ručičky hodiniek

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.

Stred hodiniek

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:

Vrstvy pre Flashové analógové hodinky

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.

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

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:

Ukazka roznych typov preloaderov

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

Vrstvy v nasom Flash preloadery

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

Nastavenie Dynamic textu

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

Pripojenie (Embed) znakov do Flash aplikácie

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.

Preloader pred a po úprave vlastnostiOznačí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).

Vrátenie na hlavnú scénu

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.

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

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...");
}

–        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:

Flash formulár kalkulačka

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.

Flash formulár - popisky

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

Formular vo Flash - Input a Dynamic text

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):

Tlačítko vo Flash formulári

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");
}

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

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:
Ukážka kurzora vo Flash

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é:

Nastavenie Registration pointu kurzora

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.

Instance name kurzora

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.

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)

Hotové Flash menu pre webovú stránku

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ť:

Obrázkove pozadie pre flash menu

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!

Umiestnenie tlačítka vo vrstve (layer)
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”.

Instance Name hlavné tlačítko

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

Instance Name pre tlačítka sub menu

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

Aktuálny vzhľad Flash menu

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.

Vzhľad time line po úprave

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

Time line s vrstvou záložkyi

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

Náhľad na editor ActionScriptu s príkazom Stop

Ď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”.

Vytvorene tlačítka - spät

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.

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

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)