Štýlové menu vo Flashi

0
283

Je tolik kolik je a vaše oblíbená -grafika.sk- uvádí… ďalšiu časť zo seriálu Flash tutoriálov. Ukážeme si ako vytvoriť pomerne jednoduché, ale moderné Flash menu za pomoci cyklu, ktorý nám veľmi uľahčí prácu. Tak lets go do toho.

Prejdime rovno k veci.

Vytvoríme si dokument cez File>New. Parametre Flash Movie upravíme pomocou Modify>Document alebo skratkou CTRL+J. FPS (framy za sekundy) môžeme nastaviť na 30, kto chce aj na 40. Ja chcem :-) Určite nie na základných 12. Pohyb menu by vyzeral neprirodzene a trhavo. Pozadie dajme sivé, aby biele tlačidlá boli pri editovaní ľahšie viditeľné. Ak to máme hotové importujeme obrázok „obr1.jpg“ na scénu. Buď použijeme File>Import>Import to stage alebo klávesovú skratku CTRL+R. Ďalej si premenujeme layer (vrstvu) na „pozadie“ a to tak, že 2x klikneme na jeho názov. Vytvoríme si novú vrstvu, pomenujeme ju „tlacidla“ a to kliknutím na túto ikonku ikona

 

Ďalšou časťou je vytvorenie samotného tlačidla. Vezmeme nástroj Rectangle Tool (obdĺžník) a nakreslíme na vrstve „tlacidla“ biely obdĺžník s rozmermi: šírka (width) 300px a výška (height) 30px. Je to jedno kde ho nakreslíte, pretože ho na koniec aj tak zmažeme  Skonvertujeme tento nový štvorec na Movie Clip (ďalej len ako MC) tak, že stlačíme F8, alebo Modify>Convert to symbol. Nazveme ho „bielyObdlznik“. ARegistration nastavíme na ľavý horný roh. V paneli Properities mu tak isto meno dáme „bielyObdlznik“. Po skonvertovaní stlačíme CTRL+E, aby sme mohli MC editovať na mieste. Vrstvu s bielym obdĺžnikom môžeme nazvať napríklad „obdlznik“.

Teraz môžeme prejsť k samotnému vytvoreniu efektu. Táto časť bude asi najzložitejšia. Takže vytvoríme si novú vrstvu a nazveme ju „textovePole“. Tu sa bude nachádzať Dynamic text field (dynamické textové pole), do ktorého sa budú načítavať a zobrazovať názvy tlačidiel. Klikneme na ikonku Text tool a zo spodnej lišty vyberieme Dynamic Text. Je to typ textového poľa ktorého obsah môžeme meniť na rozdiel od Static text, kde je napevno zadaný text. Nezabúdajte, že stále editujeme MC „bielyObdlznik“. Vytvoríme textové pole so súradnicami X: 190, Y: 50, šírkou 100px a výškou 20px a nazveme ho “textTlacidla“ a odškrtneme Selectable, aby sa nedalo označiť. Ešte ho skonvertujeme na Movie Clip a nazveme ho „textovePole“, také isté meno mu dáme aj v záložke Properties.

Teraz sa vrátime späť k editovaniu MC „obdlznik“. Klikneme na 5. frame vo vrstve „obdlzik“ a stlačíme F6. Tým sa nám vytvorí novy Key Frame. Zmeníme šírku obdĺžníka na 220, ale tak aby sa pravá strana nezmenila. Tj. x-ová a y-ová súradnica musí ostať na 0. Klikneme pravým tlačidlom myši medzi 1. a 5. frame a zo spodnej lišty vyberieme Shape tween . Tým sa nám vytvoril plynulý prechod medzi 1. a 5. framom. V spodnej lište Properties zmenime Ease z 0 na 100. Aby pohyb bol realistickejší a nebol na konci seknutý. Pokračujeme kliknutím na 10. frame a F6. Šírku zmeníme na 215 a ease opäť na 100, a tak isto Shape tween. Tým sme vytvorili ten zmieňovaný „štýlový“ RollOver efekt.

Teraz máme na pláne vytvoriť RollOut efekt, to jest po odchode kurzora z tlačidla. Klikneme na 11. frame, stlačíme F6. 15. frame, stlačíme F6 a šírku zmeníme na 295. A na koniec 20. frame, F6 a šírka pôvodných 300px. Nezabudnime na Shape tweening medzi framami s ease 100. Takže obdĺžník máme za sebou. Teraz prejdime na textové pole.

Kliknime späť na prvý frame kde máme textové pole. Key framy budú na tých istých miestach ako key framy obdĺžnika. Čiže 1,5,10,11,15,20. Ale na miesto Shape tweeningu použijeme Motion Tween. Buď z menu (ako pri shape), alebo klikneme medzi jednotlivé keyframy pravým tlačidlom a vyberieme Create Motion Tween.

Pozn. Shape tweening sa používa pri animácii ešte neskonvertovaného vektorového objektu. Motion tween pri Buttonoch, Movie Clipoch a Graphic objektoch.

Ale vráťme sa späť ku animácii textového poľa. Vytvoríme key frame na piatom frame a posuneme MC na x=197px. Na 10. keyframe ho posunieme na x=110px. Ďalej na 15. keyframe ho posunieme na x=105px a na koniec späť na x=190px. Označíme všetky framy v tejto vrstve tak, že klikneme na nápis vrstvy v tomto prípade „textovePole“. Klikneme pravým tlačidlom na keyframy a zvolíme Create Motion Tween.

Po zanimovaní textového poľa nasleduje animácia červeného prúžku. Toto je len na efekt, komu sa už nechce toto robiť môže túto časť kľudne preskočiť.

Vytvoríme si novú vrstvu, nazveme ju „pruzok“ a key frame dáme až na 5.frame, pretože nepotrebujeme aby sa prúžok zobrazoval hneď od začiatku. Nakreslíme obdĺžnik s rozmermi: šírka 2px, výška 1px RGB #DA2842 a umiestnime ho na pravý spodný kraj bieleho obdĺžnika. Mali by to byť tieto súradnice: x=218, y=29. Na 10. frame vytvoríme keyframe a posunieme ho na x=213 a zväčšíme na výšku 30px. Na 15-tom frame vytvoríme keyframe, červený prúžok opäť zmenšíme na 1px a v Color Mixer mu nastavíme Alpha 0. Teraz už len stačí vytvoriť medzi framami Shape Tweening s easingom 100 a to už vieme ako :-). A ešte celkom na záver si urobíme jednu vrstvu, ktorá bude úplne na spodku pod ostatnými, nazveme ju „neviditelnyPruh“ a vytvoríme na nej taký istý biely obdĺžník, ale dáme mu alpha 0. Je to kvôli tomu, že keď prídeme s kurzorom na tlačidlo, obdĺžník sa zmenší, a tým sa aj zmenší klikacia oblasť. Čiže flash si myslí, že už tam tlačidlo nie je, a správa sa tak, ako keby sme s kurzorom odišli preč, takže posunie hraciu hlavu na 11. frame kde sa obdĺžník opäť zväčšuje. Ale keďže my sme s kurzorom vôbec nepohli, ostal na svojom mieste. Obdĺžník sa opäť zväčšil, Flash sa začal správať tak ako to má definované vo funkcii onRollOver (nižšie) a opäť posunul hlavu na časť animácie, kde sa obdĺžnik zmenšuje. A znova nastane a situácia, že Flash si myslí, že už sme s kurzorom preč. Tak by sa to opakovalo donekonečna. A toto my nechceme :-)

Animáciu už máme za sebou, teraz prichádza na rad Action Script. Klikneme na 1. frame napríklad na vrstve „obdlznik“, stlačíme F9, alebo klikneme pásik Actions – Frame a napíšeme kód:

  1. stop;

To isté urobíme aj na frame číslo 10. Ďalej si vytvoríme novú vrstvu, ktorú nazveme „actions“. Do nej vložíme tento kód:

  1. onRollOver = function(){
  2. gotoAndPlay(2);
  3. }
  4. onRollOut = function(){
  5. gotoAndPlay(11);
  6. }

Vysvetlenie:

onRollOver = function(){gotoAndPlay(2);} funkcia, ktorá pri nájazde myšou posunie „hraciu hlavu“ na frame č. 2.

onRollOut = function(){gotoAndPlay(11); } funkcia, ktorá pri odsune myši posunie „hraciu hlavu“ na frame č. 11.

[b]onRelease = function(){getURL(odkaz + “.html”);} [/b]funkcia, ktorá pri kliknutí a pustení tlačidla myši (release) vykoná príkaz, ktorý načíta URL do prehliadača. Premennú odkaz jej posiela cyklus z hlavnej časovej osi. Flash túto premennú spojí pomocou „+“ s textom, ktorý predstavuje príponu .html. Toto je len príklad. Môže tam byť aj napríklad php, ale aj hocičo iné.

Editovanie tlačidla je na konci. Môžeme sa vrátiť na hlavnú scénu, tak že klikneme na Scene1 v hornej lište. Teraz prejdime ku sľúbenému cyklu, ktorý poukladá tlačidlá pod seba a každému priradí text a ten sa potom zobrazí na buttone. Ešte pred samotným písaním kódu musíme Flashu zadať, čo má načítať z knižnice. Preto z knižnice, lebo tlačidla vôbec nebudú na scéne, ale sa dynamicky na ňu načítajú a zobrazia.

Klikneme pravým tlačidlom myši na „tlacidlo“ v knižnici (Library), zaškrtneme Export for action script a tak isto aj Export in first frame. Teraz už môžeme prejsť ku písaniu kódu. Klikneme na prvý frame na hlavnej scéne a vložíme tento kód:

  1. var nazvy:Array = [“O NÁS,REFERENCIE,GALÉRIA,KONTAKT];
  2. var odkazy:Array = [o_nas,preferencie,galeria,kontakt];
  3. for(i=0;i<=3;i++){
  4. attachMovie(tlacidlo,tlacidlo+i,i,{_x:0,_y:16});
  5. this[tlacidlo+i]._y += i*32;
  6. this[tlacidlo+i].textovePole. textTlacidla.text = nazvy[i];
  7. this[tlacidlo+i].odkaz = odkazy[i];
  8. }

1. – variable-premenná, názov poľa a určenie že ide o variable typu pole (array)

2. – pole, ktoré obsahuje texty s názvami odkazov, ktoré sa majú zobraziť v prehliadači

3. – cyklus, ktorý sa vykonáva pokial premenná i nenadobudne hodnotu 3. čiže sa vykoná 4 krát. 0,1,2,3 čiže 4 čísla. Preto som začal nulou, lebo pretože aj prvý prvok poľa začína stále nulou. A my potrebujeme aby tie prvky boli načítavané z poľa

4. – načíta objekt z knižnice z názvom „tlacidlo“, po načítaní mu dá názov „tlacidlo+i“, čiže ak je i = 2, tak názov bude „tlacidlo2“.

5. – každému jednému tlačidlu sa priradí y-ová pozícia a pri každom novom cykle sa pripočíta 32 a teda každé nové načítané tlačidlo sa posunie o 32 pixelov

6. – pri každom novom cykle sa načíta z poľa položka podľa hodnoty premennej i (nazvy[i];) a priradí sa textovému poľu textTlacidla. To .text znamená, že ide o textové pole. Ak by tam nebolo, Flash by si myslel, že je to movie clip

7. – každému novému tlačidlu je priradený odkaz v závislosti na hodnote premennej i

Teraz tlačidlo, môžeme zmazať zo scény, aby nezavadzalo :-) Ale pozor, len zo scény. V knižnici ho musíme nechať. Teraz už len stačí dať Test movie stlačením CTRL+ENTER.

Tak a to je koniec tohto tutoriálu. Dúfam, že vám aspoň trochu pomohol, možno niektorí sa aj niečo nové naučili.

Autor:  Ondrej “ftakgabo” Lechan