Flash – ActionSctipt 2.0 – základné príkazy

Zoznam základných príkazov jazyka ActionScript 2.0.
S týmito  príkazmi si vystačíme pri tvorbe jednoduchých interaktívnych Flash animácií a aplikácií.

Najjednoduchší spôsob použitia príkazov je zapísať ich do konkrétneho políčka (KeyFrame) na časovej osi (TimeLine), v ktorom chceme akciu vykonať. Pri použítí ActionScript 2.0 môžeme zapisovať príkazy aj do konkrétneho Symbolu (označíme symbol a stlačíme F9). ActionScript 3.0 toto neumožňuje.

Dobrá prax je vytvoriť si samostatnú vrstvu (Layer) a túto použiť pre vkladanie ActionScriptov na časovú os.
Väčšinou sa tejto vrstve dáva pomenovanie “Actions”, ale každý si ju môže pomenovať podľa svojho. Umiestnime ju ako prvú – najvyššie položenú vrstvu. Toto zabezpečí, že ActionScript bude vykonaný ešte pred tým, ako sa vykonajú ostatné vrstvy (napríklad animácia začínajúca na tom istom mieste ako ActionScript sa nezačne prehrávať, pretože ju v prvej vrstve zastavíme).
Odporúčam vrstvu Actions zamknúť, aby sme v nej náhodou nezačali pracovať (kresliť, vkladať objekty…)

Po nastavení sa na konkrétny KeyFrame vo vrstve Actions, otvoríme editor pre zápis ActionScriptu stlačením klávesy F9.

Teraz môžeme začať zapisovať jednotlivé príkazy. KeyFrame v ktorom sa nachádzajú príkazy ActionScriptu je následne na panely s vrstvami, kvôli prehľadnosti automaticky označený malým písmenkom “a”.
Ukážka vrstvy Actions s vloženým ActionScriptom

Príkazy na prácu s animáciou

stop();
Zastaví animáciu

play();
Pokračuje v prehrávaní animácie na Frame kde bola zastavená

gotoAndStop(5);
Animácia skočí a zastaví na Frame 5

gotoAndPlay(10);
Animácia skočí na Frame 10 a pokračuje v prehrávaní od tohto Frame

gotoAndStop(“koniec”);
Namiesto čísla Frame je možné použiť Záložku (Label) a skočiť na túto. Záložku vytvoríme tak, že klikneme na KeyFrame a v panely vlastností (Properties) nastavíme vlastnosť Name napríklad “koniec”.

nextFrame();
Skoč na nasledujúci Frame

prevFrame();
Skoč na predchádzajúci Frame

nextStage();
Skoč na ďalšiu Stage (ak máme rozdelenú aplikáciu na dve a viac Stage)

prevStage();
Skoč na predchádzajúcu Stage (ak máme rozdelenú aplikáciu na dve a viac Stage)

Reakcia na kliknutie a ďalšie udalosti (Button a MovieClip)

Ak máme vytvorený symbol (Button alebo MovieClip) a nazveme ho – dáme mu “instance name” napríklad “mojMC”, tak cez toto meno môžeme so Symbolom pracovať.
Vytvoríme k tomu funkciu, ktorá zostáva v pamäti počítača a kroky v nej zapísané sa spustia pri konkrétnej udalosti (napríklad kliknutí na Symbol). V tomto príklade (ktorý je zapísaný ako ActionScript vo Frame) sa po stlačení Symbolu “mojMC” zastaví animácia.

mojMc.onRelease = function()
{
stop();
}

mojMc.onRelease
Spustí sa keď je nad Symbolom pustené tlačítko myši

mojMc.onPress
Spustí sa keď je nad Symbolom stlačené tlačidlo myši

mojMc.onRollOver
Udalosť nastane keď kurzor myši vôjde nad Symbol

mojMc.onRollOut
Udalosť nastane keď kurzor myši odíde zo Symbolu

mojMc.onMouseDown
Kdekoľvek vo Flash aplikácií je stlačené tlačidlo myši

mojMc.onMouseUp
Kdekoľvek vo Flash aplikácií je uvoľnené tlačidlo myši

mojMc.onStartDrag
Udalosť nastane keď je nad Symbolom stlačené a držané tlačidlo myši – pri pokuse o ťahanie Symbolu

mojMc.onStopDrag
Ťahanie symbolu je ukončené – Symbol je “upustený”

Nastavenie vlastnosti Symbolov (MovieClip a Button)

Keď dáme symbolu (MovieClip alebo Button) nejaké meno (Instance name v panely Properties), možeme cez ActionScript konkrétnemu Symbolu meniť vlastnosti. V tomto prípade má Symbol meno “gula” a zväčšíme jeho veľkosť na 120%.

gula._xscale=120
gula._yscale=120

_xscale
zväčšenie/zmenšenie symbolu podľa X-ovej osi (číslo 100 = originál veľkosť)

_yscale
zväčšenie/zmenšenie symbolu podľa Y-ovej osi (napr.: gula._yscale = 50;)

_width
nastavenie šírky symbolu (napr.: gula._width = 500;)

_height
nastavenie výšky symbolu (napr.: gula._height = 220;)

_x
pozícia symbolu na x-ovej osi (napr.: gula._x = 400;)

_y
pozícia symbolu na y-ovej osi (napr.: gula._y = 150;)

_alpha
nastavenie Alpha (priesvitnosti) od 0 do 100. Nula = úplne priesvitný (napr.: gula._alpha = 50;)

_rotation
rotácia symbolu od 0 do 360 stupnov (napr.: gula._rotation = 90)

Predchádzajúce vlastnosti a sledovanie udalosti(eventov) môžeme rôzne kombinovať.

Ako príklad môžeme vytvoriť tlačidlo, po stlačení ktorého zmeníme vlastnosti symbolu MovieClip.

Vytvoríme si teda tlačítko. Označíme všetky jeho prvky:

Ukážka tlačidla - zmeň

a skonvertujeme ho na Symbol typu Button (môžeme stlačiť klávesu F8).

Ukážka konvertovania na symbol Button

Teraz môžeme dať tlačidlu “meno”. V panely vlastnosti vložíme “Instance name” napríklad “mojeTlacitko”

Tlacitko nastavenie Instance Name

Teraz už budeme môcť odkazovať priamo na toto tlačítko ako na “mojeTlacitko”.
Rovnakým spôsobom ako sme vytvorili tlačítko, vytvoríme teraz symbol MovieClip a dáme mu Instance Name napríklad “Gula”

Tlacitko a MovieClip GulaTeraz už len do novej vrstvy, nazvime si ju “Actions”, vložíme kód, ktorý sa má vykonať po stlačení nášho tlačítka.

Kod vkladany do vrstvy actions

Takže klikneme na prvý KeyFrame vo vrstve Actions a stlačíme F9.
Po otvorení editora ActionScriptu môžeme začať vytvárať skripty.

//Ak vojdeme kurzorom nad tlačítko, zmeň parametre pre symbol "gula"
mojeTlacitko.onRollOver = function() {
gula._xscale = 120;
gula._yscale = 120;
gula._alpha = 20;
}

//Ak vyjdeme kurzorom z tlačítka, opäť zmeň parametre pre symbol "gula"
mojeTlacitko.onRollOut = function() {
gula._xscale = 50;
gula._yscale = 50;
gula._alpha = 100;
}

//Po stlačení tlačítka, zmeň parametre pre symbol "gula"
mojeTlacitko.onRelease = function() {
gula._xscale = 100;
gula._yscale = 100;
gula._x = 80;
gula._y = 45;
gula._alpha = 20;
}

//Po stlačení MovieClipu GULA, zmeň parametre pre symbol "gula"
gula.onRelease = function() {
gula._xscale = 100;
gula._yscale = 100;
gula._x = 340;
gula._y = 45;
gula._alpha = 100;
}

Teraz môžeme našu mini aplikáciu otestovať stlačením klávesovej skratky Ctrl + Enter

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: