Tutoriál FLASH: Ako vytvoriť menu pomocou ActionScript 3

Tutoriál FLASH: Ako vytvoriť menu pomocou ActionScript 3

Tento tutoriál vás naučí vytvoriť jednoduché navigačné menu využívané predovšetkým v interaktívnych animáciách. Pomocou odkazov je možné sa preklikávať medzi jednotlivými kľúčovými snímkami alebo scénami. Tutoriál obsahuje aj základnú teóriu o odkazoch a o vytvorení obsluhy udalosti pre odkaz.



VYTVORENIE OBSLUHY UDALOSTI PRE TLAČIDLO

Udalosť je situácia, ku ktorej dochádza v prostredí Flash, ktorý ju dokáže identifikovať a reagovať na ňu.
Medzi základné udalosti Flashu patrí:
• kliknutie myši
• pohyb myši
• stlačenie klávesy na klávesnici
Tieto udalosti produkuje používateľ, existujú však udalosti, ku ktorým dochádza nezávisle na používateľovi, ako je úspešné načítanie dát alebo dokončenie prehrávania zvuku.
Pomocou jazyka ActionScript môžeme písať kód, ktorý udalosti identifikuje a prostredníctvom obsluhy udalosti na ňu reaguje.
Prvým krokom pri obsluhe udalosti je vytvorenie poslucháča, ktorý bude identifikovať udalosť. Poslucháč môže vyzerať napr. takto:

kde_počúvať.addEventListener(akú_udalosť, reakcia_na_udalosť);

jediným konkrétnym príkazom je tu addEventListener( ). Ostatné slová sú zástupcami symbolov pre objekty a parametre.
Výraz kde_počúvať , v ktorom dochádza k udalosti (obvykle je to tlačidlo), akú_udalosť je určitý druh udalosti (napr. kliknutie myšou) a reakcia_na_udalosť je názov funkcie, ktorá sa spustí, ak dôjde k danej udalosti.
Čiže, môžeme tento príkaz vysvetliť trošku názornejšie. Pokiaľ by sme chceli počúvať udalosť pomocou kliknutia myšou na tlačidlo s názvom „zastav“ a výsledná reakcia vy malo byť spustenie funkcie s názvom „stopka“, výsledný kód by vyzeral takto:
zastav.addEventListener(MouseEvent.CLICK,
stopka);

 ďalším krokom je vytvorenie funkcie, ktorá bude reagovať na udalosť – v tomto prípade funkcia názov „stopka“. Funkcia jednoducho zoskupuje príkaz, alebo viac príkazov – akcie, ktoré sa tak spustia. Funkcia s názvom „stopka“ bude obsahovať jeden príkaz, ktorého úlohou bude niečo zastaviť. Naša funkcia by mohla vyzerať takto:

function stopka (myEvent:MouseEvent) { };

názvy funkcie sú podobne ako názvy tlačidiel ľubovoľné. Môžeme ich pomenovať akýmkoľvek názvom. V našom prípade je to „stopka“. Táto funkcia vo vnútri okrúhlych zátvoriek obsahuje jeden parameter. Jeho názov je myEvent. Ide o udalosť, ktorej je priradená udalosť myši, čiže myEvent:MouseEvent. Dvojbodka popisuje, o aký typ objektu sa jedná. Ak dôjde k spustení funkcie, vykonajú sa všetky akcie, ktoré sú v zložených zátvorkách.

UDÁLOSTI MYŠI

Nasledujúci zoznam obsahuje kódy jazyka ActionScript 3 pre bežne používané udalosti myši. Je ich možné použiť pri tvorbe vlastných poslucháčov. Pri ich používaní je dôležité, aby sa napísali správne, t.j. používaj aj veľké aj malé písmená, tam, kde je to potrebné.

• MouseEvent.CLICK
• MouseEvent.Mouse_MOVE
• MouseEvent.Mouse_DOWN
• MouseEvent.Mouse_UP
• MouseEvent.Mouse_OVER
• MouseEvent.Mouse_OUT

Príkazy jazyka ActionScript3 pre navigáciu
Nasledujúci zoznam obsahuje kódy jazyka ActionScript 3 pre bežne používané príkazy navigácie. Môžeme ich použiť pri tvorbe tlačidiel pre zastavenie, spustenie alebo presunutie prehrávacej hlavy na iný snímok. Pri príkazoch gotoAndStop a gotoAndPlay je nutné v zátvorkách doplniť dodatočné údaje, resp. parametre.
• stop ( );
• play ( );
• gotoAndStop ( cislo_snimky );
• gotoAndPlay ( cislo_snimky );
• nextFrame ( );
• prevFrame ( );

príklad:
Nadefinujte trom obrázkom funkciu tlačidiel s odkazom na inú snímku.


1) po importovaní troch obrázkov na pracovnú plochu ich upravíme tak, aby boli rovnako veľké a medzery medzi nimi boli tiež rovnaké.

2) následne konvertujeme každý z obrázkov pomocou klávesy F8 na symbol Button. Zároveň ako názov symbolu uvedieme pre každé tlačidlo btn01 až btn03.



3) ďalším krokom je napísanie nasledovného kódu, pre každé tlačidlo zvlášť:

btn01.addEventListener(MouseEvent.CLICK, prepni_dalej2);
btn02.addEventListener(MouseEvent.CLICK, prepni_dalej3);
btn03.addEventListener(MouseEvent.CLICK, prepni_dalej4);

function prepni_dalej2 (myEvent:MouseEvent):void
                                      {
									   gotoAndStop(2); 
									   }
function prepni_dalej3 (myEvent:MouseEvent):void
                                      {
									   gotoAndStop(3); 
									   }
function prepni_dalej4 (myEvent:MouseEvent):void
                                      {
									   gotoAndStop(4); 
									   }									   
									   
									   
									   

Popis kódu:
- v priadku 1 až 3 sme vytvorili pre každé tlačidlo poslucháča udalosti. Počúvať sa bude objekt – tlačidlo s názvom btn01 až btn03. Ako udalosť budeme počúvať, či sa na tlačidlo neklikne. Reakciou na udalosť bude následné spustenie funkcie „prepni_dalej2“ až „prepni_dalej3“.

- v riadkoch 5 až 16 sú definované funkcie, pre každé tlačidlo zvlášť. Každá funkcia obsahuje jeden príkaz, ktorý sa vykoná. Ide o presunutie prehrávacej hlavy na príslušnú snímku.

VYTVORENIE ODKAZU NA EXTERNÚ WEBOVÚ STRÁNKU

PRÍKLAD

Vytvorte odkaz, ktorý po kliknutí otvorí nadefinovanú webovú stránku www. markiza.sk

1) vytvoríme tlačidlo pomocou obrázka alebo nakreslíme štvorec/obdĺžnik. Pomocou klávesy F8 ho prekonvertujeme na symbol – Button. Do políčka „Name“ napíšeme btn01, čo bude názov nášho tlačidla.


2) ďalej je potrebné zadať pomenovanie pre inštanciu tlačidla. Ako názov inštancie použijeme opäť názov btn01.


3) pre oživenie funkcie tlačidla napíšeme tento skript:

import flash.events.MouseEvent;
import flash.net.URLRequest;

btn01.addEventListener(MouseEvent.CLICK, otvor_stranku);

function otvor_stranku (myEvent: MouseEvent): void
         {
			 var nasa_stranka:URLRequest = new URLRequest ('http://www.cas.sk');
			 navigateToURL (nasa_stranka, '_blank');
	     }
Rubriky: