V tomto príklade budeme veľmi jednoduchým spôsobom vo Flash aplikácií overovať, či uživateľ stlačil na klávesnici šípku na udanie smeru, a keď áno, pohneme daným smerom náš objekt (symbol).

Najprv si nakreslíme objekt, ktorým budeme pohybovať. V mojom prípade autíčko.

Auticko - ovladanie pohybu pomocou ActionScript 2Keď sme hotoví, skonvertujeme si kresbu na Symbol typu MovieClip (klávesová skratka F8).

Keďže pri použití ActionScript 2 môžeme príkazy vkladať nielen do Framov, ale aj do Symbolov (typu Button a MovieClip), využijeme túto možnosť. Pri použití ActionScript 3 táto možnosť zaniká.

Označíme náš Symbol (MovieClip) s autíčkom a otvoríme ActionScript editor (F9).

Teraz zapisujeme príkazy priamo pre tento symbol a preto ich nemôžeme písať len tak “na voľno”, ako pri zápise na Frame. Musíme určiť v akej situácií sa má daný kód spustiť (napríklad pri načítani symbolu, po kliknutí naň, atď…)

My chceme aby sa po načítaní nášho symbolu nastavila premenná, ktorá bude určovať “Rýchlosť” – to znamená počet pixelov o ktoré autíčko poskočí.  Kedy bol symbol načítaný pre nás odsleduje Event-Handler (oblsuha události) onClipEvent(load).

onClipEvent(load)
{
rychlostPohybu = 10;
}

Máme nastavené, že autíčko sa bude pohybovať o 10 pixelov (samozrejme je možné hodnotu zväčšiť alebo zmenšiť).

Pridáme kód, ktorý sa spustí po zobrazení autíčka na Stage. Tento kód bude sledovať či bola stlačená klávesa (na klávesnici) a pokiaľ áno, tak ktorá.
Následne pomocou podmienok určíme, čo sa má v prípade stlačenia tej ktorej klávesy stať.

onClipEvent(enterFrame) //nasledujúci kód sa vykoná pri zobrazení symbolu na Stage
{

takže keď sa autíčko zobrazí na stage, a bola stlačená šípka vpravo zmení sa pozícia autíčka. Zároveň ho necháme otočiť o 90 stupňov, aby bolo nasmerované správnym smerom.

if(Key.isDown(Key.RIGHT))
{
this._x +=  rychlostPohybu; //pripočítaj k aktuálnej pozíci X hodnotu rychlostPohybu
this._rotation = 90; //otoč autíčko o 90 stupňov
}

Stlačnie klávesy pre nás odlsedoval objekt (knižnica) Key, konkrétne metóda isDown. Metóda isDown má následne argument (parameter) určujúci stlačenie ktorej klávesy má sledovať. Rovnako vytvoríme Event-Handler aj pre ďalšie klávesy:

if(Key.isDown(Key.LEFT))
{
this._x -=  rychlostPohybu; //od pozície X odpočítaj hodnotu rychlostPohybu
this._rotation = -90; //otoč autíčko o -90 stupňov
}

if(Key.isDown(Key.UP))
{
this._y -=  rychlostPohybu;
//od pozície Y odpočítaj hodnotu rychlostPohybu
this._rotation = 0; //otoč autíčko na 0 stupňov - pôvodná poloha
}

if(Key.isDown(Key.DOWN))
{
this._y +=  rychlostPohybu;
//k pozícii Y opripočítaj hodnotu rychlostPohybu
this._rotation = 180; //otoč autíčko na 180 stupňov
}
}

Po spustení aplikácie (Ctrl + Enter) môžeme autíčkom pohybovať. Samozrejme existujú efektívnejšie metódy ktoré by sme použili, ale na začiatok môže postačovať.

Kompletný kód pre pohyb autíčka (MovieClip symbol)


onClipEvent(load)
{
rychlostPohybu = 10;
trace(rychlostPohybu)
}

onClipEvent(enterFrame)
{
if(Key.isDown(Key.RIGHT))
{
this._x +=  rychlostPohybu;
this._rotation = 90;
}

if(Key.isDown(Key.LEFT))
{
this._x -=  rychlostPohybu;
this._rotation = -90;
}

if(Key.isDown(Key.UP))
{
this._y -=  rychlostPohybu;
this._rotation = 0;
}

if(Key.isDown(Key.DOWN))
{
this._y +=  rychlostPohybu;
this._rotation = 180;
}
}

Tento jednoduchý príklad ukazuje vytvorenie digitálnych hodín v Adobe Flash (tieto môžu byť zaujímavým doplnkom web stránky) a využitie objektu/knižnice Date().
Knižnica Date() patrí medzi štandardné knižnice funkcií ActionScript, podobne ako napríklad knižnica Math().

Objekt/Knižnica Date() slúži na to, aby sme pomocou ActionScript získali prístup k systémovemu času (zahŕňa čas, dátum…)

Tento príklad funguje na princípe načítania a následného zobrazenia času pri návrate na Frame 1. Aby táto mini aplikácia fungovala budeme potrebovať Framy dva (nestačí mať jeden frame pretože potom hodiny nefungujú).

[Update] Kvôli množstvu dotazov som pridal aj návod na vytvorenie analógových hodín.

Kvôli prehľadnosti si umiestnime jednotlivé prvky aplikácie do osobitných vrstiev (Layers)

  • Actions – tu vložíme kód jazyka ActionScript (dobrá prax je túto vrstvu zamykať)
  • Text – do tejto vrsty vložíme textové pole – bude slúžiť na zobrazenie času
  • Hodiny – toto je vrstva v ktorej nakreslíme grafický dizajn našich hodin

Vrstvy Flash aplikácie digitálne hodiny

Ako vidieť na obrázku, tak v každej vrstve sú spominané dva Framy (ďalší Frame je vložený klávesovou skratkou F5)

Keďže digitálne hodiny sú aplikáciou malých rozmerov, môžeme zmenšiť veľkosť Stage povedzme na 200x100px.
Vo vrstve “Hodiny” nakreslíme vzhľad hodin, napríklad:

Dizajn pre Digitalne hodinyTeraz do vrstvy “text” vložíme textové pole, ktoré bude tvoriť display hodin. Prednastavený typ textového poľa je “Static text”. Zmeníme ho na “Dynamic text”, pretože typ textového poľa “Dynamic text” môžeme označiť špecifickým menom (instance name) a podobne ako pri Symboloch následne odkazovať na toto pole cez jeho meno (či už z neho čítať alebo zapisovať).
My použijeme Instance name “mojText”.

Odporúčam vpísať do textového poľa nejaký text, aby bolo možné nastaviť najvhodnejšie parametre textu (veľkosť, farbu..)

Digitalne hodiny - instance name

Teraz pristúpime k samotnému kódu, ktorý zabezpečí fungovanie aplikácie.

Klikneme na niektorý Frame vo vrstve “Actions” a stlačíme F9. Otvorí sa editor pre ActionScript.

Najprv si nadeklarujeme niekoľko premenných.

var cas = new Date();

Premenná “cas” bude odteraz vystupovať ako objekt reprezentujúci knižnicu Date() takže bude mať všetky vlastnosti a metódy tejto knižnice.

Nadeklarujeme ďalšie premenné, do ktorých budú načítané časové hodnoty vrátené funkciami (metódami) knižnice Date() – tú teraz zastupuje náš objekt “cas”.

var sekundy = cas.getSeconds(); //do premennej sekundy načítame aktuálne sekundy
var minuty = cas.getMinutes();
//do premennej minuty načítame aktuálne minuty
var hodiny = cas.getHours(); //do premennej hodiny načítame aktuálnu hodinu

Do premenných sekundy, minuty a hodiny máme načítané hodnoty a tie vpíšeme cez vlastnosť “.text” do textového poľa mojText.

mojText.text = hodiny + ":" + minuty + ":" + sekundy;

A vrátime sa späť na prvý Frame.

gotoAndPlay(1);

Ak aplikáciu spustíme (Ctrl + Enter) tak máme digitálne hodiny s presným časom hotové.

Kompletný kód:

var cas = new Date();

var sekundy = cas.getSeconds();
var minuty = cas.getMinutes();
var hodiny = cas.getHours();

mojText.text = hodiny + ":" + minuty + ":" + sekundy;

gotoAndPlay(1);

Využitie príkazov “nextFrame” a “prevFrame” na obsluhu galérie (ActionScript 2.0)

V tomto príklade si vytvoríme galériu, v ktorej budeme pomocou dvoch tlačitiel prechádzať jednotlivé obrázky.
Takto bude vyzerať výsledok návodu:

Ukazka jednoduchej galerie

Na začiatok si po otvorení nového súboru vo Flash editore vytvoríme tri vrstvy:

  • Actions – tu zapíšeme naš ActionScript na obsluhu správania aplikácie a tlačitiel
  • Tlacitka – v tejto vrstve vytvoríme tlačítka
  • Obrazky – tu budú jednotlivé obrázky

Ukazka vrstiev v galerii

Pozadie galérie môžeme nastaviť na tmavo sivú (kvôli lepšiemu vzhľadu) na panely Vlastnosti (Properties panel).

Do Galérie si naimportujeme jednotlivé obrázky a na vrstve “Obrazky” uložíme každý obrázok do osobitného KeyFrame.
(ak naimportujeme kolekciu obrázkov – obrázky s rovnakým menom napr.: obr01.jpg … obr50.jpg – tak toto za nás urobí Flash editor a my len premenujeme vrstvu)

Vo vrstve “Tlacitka” vytvoríme použitím štandardných nástrojov grafický návrh tlačítka. Keď sme hotoví, tak po stlačení klávesy F8 skonvertujeme náš dizajn na Symbol typu Button.

Ukážka dialógu na prekonvertovaniu na Symbol

Takto vytvorené tlačítko označíme a vytvoríme duplikát (Ctrl + D).
Duplikát prevrátime, napríklad cez: Menu > Modify > Transform > Flip Horizontal

Teraz máme vo vrstve Tlacitka dve tlačítka. Každému z nich dáme “Instance name” – konkrétne meno symbolu – na panely Vlastnosti. Nazveme si ich “lavo” a “pravo”.

Do tohto pola vkaldame instance name - lavo

Máme teraz na Stage dve tlačítka a všetky obrázky, ktoré použijeme v Galérii (niečo ako je na obrázku dole), takže môžeme pristúpiť k samotnému “kódovaniu”.

Ak teraz galériu otestujeme (Ctrl + Enter), tak sa budú jednotlivé obrázky striedať jeden za druhým.
Toto bude prvá vec, ktorú ošetríme a aplikáciu hneď na začiatku zastavíme.

Vo vrstve “actions” klikneme na prvy Frame a stlačením klávesy F9 otvoríme editor pre ActionScript.

Teraz môžeme začať písať. Prvé čo spravíme je, že zastavíme animáciu. Stačí napísať príkaz:
stop();

Ukážka ActionScript príkazu stop();

Ak galériu otestujeme teraz (Ctrl + Enter), tak zostane stáť na prvom obrázku.

V ďalšom riadku začneme písať kód, ktorý sa uloží ako funkcia do pamäte a počas behu aplikácie čaká či nieje stlačené dané tlačidlo.  Ide o takzvaný Event-hanler (obsluhu udalostí). Keď je tlačidlo “pravo” stlačené, tak sa vykonajú zadané príkazy – aplikácia skočí na ďalší Frame.

pravo.onRelease = function()
{
nextFrame();
}

Ak aplikácu otestujeme, tak teraz po stlačení tlačidla s “Instance name” pravo galéria skáče na ďalší obrázok, až kým nedojde na posledný. Tu sa animácia zastaví, pretože za posledným už nieje ďalší Frame. Musíme preto zabezpečiť, že ak je aktuálny Frame posledný, tak po stlačí tlačidla aplikácia skočí na Frame prvý a zastaví sa.
Rozšírime preto kód o podmienku.

pravo.onRelease = function()
{
if(_root._currentframe == 4)
{
//ak je aktuálny frame posledný v tomto prípade 4tý tak skoč na začiatok
gotoAndStop(1);
}
else
{
//inak - čiže ak niesme na poslednom Frame, tak skoč na ďalší Frame
nextFrame();
}
}

To isté teraz urobíme pre druhé tlačidlo, len namiesto nextFrame(); použijeme príkaz prevFrame(); ktorý skáče na predchádzajúci Frame.
V podmienke otestujeme či aktuálny Frame je prvý, a ak áno, tak aplikácia skočí na Frame posledný (momentálne 4).

lavo.onRelease = function()
{
if(_root._currentframe == 1)
{
//ak je aktuálny Frame prvý, tak skoč na koniec, v tomto prípade je to 4
gotoAndStop(4);
}
else
{
//inak - čiže ak niesme na prvom Frame, tak skoč na prechádzajúci Frame
prevFrame();
}
}

Kompletný kód galérie:

stop();

pravo.onRelease = function()
{
if(_root._currentframe == 4)
{
gotoAndStop(1);
}
else
{
nextFrame();
}
}

lavo.onRelease = function()
{
if(_root._currentframe == 1)
{
gotoAndStop(4);
}
else
{
prevFrame();
}

Teraz už naša galéria funguje presne tak, ako by sme očakávali a na tomto základe môžete galériu ďalej vylepšovať.

Stiahni súborZdrojový súbor s celou Galériou (Flash CS4)
Zdrojový súbor s celou Galériou (Flash CS3)

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