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)

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)

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: