ActionScript 2.0 – čo dokáže koliesko myši

4. srpna 2004

•

ActionScript 2.0 so sebou prináša aj nové preddefinované triedy a objekty, ktoré na jednej strane uľahčujú prácu programátorom a na strane druhej spríjemňujú ovládanie flashových animácií a aplikácií užívateľom. V tomto článku si povieme o ovládaní kolieska myši v ActionScripte, o novej metóde triedy TextFormat a o modely vysielania udalostí.

Ako jeden z najväčších plusov v novom Flashi je, že podporuje rolovanie pomocou kolieska myši. Doteraz to nebolo možné a z hľadiska užívateľa môžem povedať, že to nebolo veľmi príjemné klikať na šípky alebo ťahať scroll bar, keď som mal k dispozícii koliesko myši. Nový Flash to už podporuje a ActionScripte 2.0 pribudla nová metóda Mouse.onMouseWheel a v triede TextField pribudla, okrem iných, vlastnosť TextField.mouseWheelEnabled.

Vlastnosť TextField.mouseWheelEnabled má preddefinovanú hodnotu „true“. Znamená to, že každé textové pole, do ktorého sa dynamicky (pomocou ActionScriptu) priradí dlhší text ako je schopné zobraziť, sa automaticky dá rolovať pomocou kolieska myši.

Poďme si teda ukázať na príklade, na čo by sme mohli vlastnosť Mouse.onMouseWheel využiť. Ako v kuchárskej knihe – budeme potrebovať jeden otvorený nový dokument vo Flashi, ďalej jedno textové pole, keďže na tom si to najlepšie ukážeme, a jeden movie clip, ktorý bude meniť y-ovú pozíciu pri pohybe kolieska myši. Pozrime si najskôr, ako funguje náš budúci výtvor v praxi (kliknite hocikde do textového poľa a točte koliesko myši).

Keďže píšeme o ActionScripte, nebudeme používať žiadne nástroje ale pekne si všetko naťukáme do kódu. Takže v otvorenom novom dokumente (veľkosť dokumentu nastavme na 400×400, aby sme robili v rovnakých dimenziách) priradíme prvej frame nasledujúci kód:

// vytvorime textove pole v roote
_root.createTextField („mojeTextovePole_txt“, 2, 10, 10, 200, 100);
// !!! zmenil som vysku na 350 aby sme videli vsetky riadky textu
// nastavime border, aby sme videli hranice pola a wordWrap aby sa nam text zalamoval
mojeTextovePole_txt.border = true;
mojeTextovePole_txt.wordWrap = true;
// vytvorime si novy TextFormat, ktory nam formatuje nase testove pole
mojTextFormat_tfm=new TextFormat();
mojTextFormat_tfm.size=12;
mojTextFormat_tfm.font=“Verdana“;
// priradime nas textformat nasemu textovemu polu
mojeTextovePole_txt.setNewTextFormat(mojTextFormat_tfm);
// pocet riadkov ktorymi naplnime textove pole
var pocetRiadkov:Number=20
// nakoniec naplnime nase textove pole 20 riadkami textu
for (var i = 0; i < pocetRiadkov; i++)
{
mojeTextovePole_txt.text += „Toto je riadok č. “ + i + newline;
}

Len pre kompletnosť, pomenujte si Layer1 na „code“ alebo „actions“. Je dobrým zvykom jednotlivé časti pomenovať a nenechávať to na poslednú chvílu.

Keď si otestujete movie, mali by ste vidieť textové pole s textom a pomocou kolieska myši by ste mali vedieť rolovať text. Pre rolovanie však musíte kliknúť niekde do textového poľa myškou aby sa na dané textové pole aktívne (aby na ňom bol focus).

Ďalej si ukuchtíme jeden movie clip, ktorý sa nám bude posúvať podľa rolovania kolieska myši. Tak si ho teda nakreslime pomocou Drawing API v ActionScripte (zjednodušene ide o pár príkazov, pomocou ktorých sa dajú nakresliť základné tvary ako čiara, štvorec a kruh a tieto objekty sa dajú aj vyfarbiť).

Pozor, zmenil som taktiež výšku nášho textového poľa mojeTextovePole_txt, aby sme videli všetky riadky textu, čo za malý moment využijeme pri rolovaní nášho movie clipu. Po nakreslení movie clipu a zmenení výšky textového poľa bude vyzerať kód v prvej frame takto:

// vytvorime textove pole v roote, ZMENIL SOM VYSKU
_root.createTextField („mojeTextovePole_txt“, 2, 10, 10, 200, 350);
// !!! zmenil som vysku na 350 aby sme videli vsetky riadky textu
// nastavime border, aby sme videli hranice pola a wordWrap aby sa nam text zalamoval
mojeTextovePole_txt.border = true;
mojeTextovePole_txt.wordWrap = true;
// vytvorime si novy TextFormat, ktory nam formatuje nase testove pole
mojTextFormat_tfm=new TextFormat();
mojTextFormat_tfm.size=12;
mojTextFormat_tfm.font=“Verdana“;
// priradime nas textformat nasemu textovemu polu
mojeTextovePole_txt.setNewTextFormat(mojTextFormat_tfm);
// pocet riadkov ktorymi naplnime textove pole
var pocetRiadkov:Number=20
// nakoniec naplnime nase textove pole 20 riadkami textu
for (var i = 0; i < pocetRiadkov; i++)
{
mojeTextovePole_txt.text += „Toto je riadok č. “ + i + newline;
}
// vytvorime si movie clip
var pointer:MovieClip=_root.createEmptyMovieClip(„pointer“,3);
// nakreslime si do nasho movie clipu obdlznik
// zvolime si farbu, pre zjednodusenie nebudeme obdlznik vyfarbovat
pointer.lineStyle(1,0xff0000);
// zistime si vysku textoveho pola pomocou novej metody triedy TextFormat getTextExtent
var info:Object=mojTextFormat_tfm.getTextExtent(„hocico“);
var vyskaPointera:Number=info.height;
// nakreslime ho pomocou 4 ciar
pointer.lineTo(220,0);
pointer.lineTo(220,vyskaPointera);
pointer.lineTo(0,vyskaPointera);
pointer.lineTo(0,0);
// posunieme pointer na spravne y
pointer._y=12;

Po otestovaní by ste mali vidieť vysoké textové pole so zvýrazneným prvým riadkom pomocou nášho movie clipu, červeného obdĺžnika, ktorý sme pomenovali pointer.

Poďme si najskôr vysvetliť, čo sme to tam vlastne popísali. Funkcie lineStyle a lineTo sú súčasťou Drawing API ActionScriptu. Pomocou lineStyle si nastavíme šírku a farbu čiary. Potom príkazmi lineTo nakreslíme štyri čiary, ktoré nám spolu vytvoria obdĺžnik.

Na zistenie výšky pointera sme využili novinku v ActionScripte 2.0, metódu getTextExtent. Táto metóda funguje ako pravítko a odmeria podľa zadaného formátu textu rôzne údaje, napríklad výšku a šírku textu. Metóda akceptuje parameter „text“, do ktorého môžeme napísať v našom prípade hocijaký text, pretože chceme zistiť len výšku textu a tá je vždy rovnaká. V prípade, že chcete zistiť aj šírku, mal by tento parameter obsahovať text, ktorého šírku chcete zistiť. Pre bližšie informácie o tejto metóde si pozrite manuál vo Flashi.

Našou úlohou teraz bude rozhýbať movie clip tak, aby reagoval na koliesko myši. Kompletný kód v prvej frame bude vo finálnej podobe vyzerať nasledovne – tento kód môžete skopírovať a vložiť, ak vám nefunguje ten, ktorý ste si sami písali podľa článku:

// vytvorime textove pole v roote
_root.createTextField („mojeTextovePole_txt“, 2, 10, 10, 200, 350);
// !!! zmenil som vysku na 350 aby sme videli vsetky riadky textu
// nastavime border, aby sme videli hranice pola a wordWrap aby sa nam text zalamoval
mojeTextovePole_txt.border = true;
mojeTextovePole_txt.wordWrap = true;
// vytvorime si novy TextFormat, ktory nam formatuje nase testove pole
mojTextFormat_tfm=new TextFormat();
mojTextFormat_tfm.size=12;
mojTextFormat_tfm.font=“Verdana“;
// priradime nas textformat nasemu textovemu polu
mojeTextovePole_txt.setNewTextFormat(mojTextFormat_tfm);
// pocet riadkov ktorymi naplnime textove pole
var pocetRiadkov:Number=20
// nakoniec naplnime nase textove pole 20 riadkami textu
for (var i = 0; i < pocetRiadkov; i++)
{
mojeTextovePole_txt.text += „Toto je riadok č. “ + i + newline;
}
// vytvorime si movie clip
var pointer:MovieClip=_root.createEmptyMovieClip(„pointer“,3);
// nakreslime si do nasho movie clipu obdlznik
// zvolime si farbu
pointer.lineStyle(1,0xff0000);
// zistime si vysku textoveho pola pomocou novej funkcie getTextExtent
var info:Object=mojTextFormat_tfm.getTextExtent(„hocico“);
var vyskaPointera:Number=info.height;
// nakreslime ho pomocou 4 ciar
pointer.lineTo(220,0);
pointer.lineTo(220,vyskaPointera);
pointer.lineTo(0,vyskaPointera);
pointer.lineTo(0,0);
// posunieme pointer na spravne y
pointer._y=12;
// riadok na ktorom je momentalne pointer, na uvod bude pointer na prvom riadku (v actionscripte pocitame skoro vsetko od 0)
var riadok:Number=0;
// mouse listener
// vytvorime novy objekt, ktory bude sluzit ako listener
var mouseListener:Object = new Object();
// objektu priradime funkciu onMouseWheel, cize listener bude pocuvac ti sa koliesko pohlo
mouseListener.onMouseWheel = function(delta) {
riadok-=delta;
if(riadok<0) riadok=0;
if(riadok>pocetRiadkov-1) riadok=pocetRiadkov-1;
pointer._y=mojeTextovePole_txt._y + (vyskaPointera*riadok)+2;
}
// priradime vytvoreny listener objektu Mouse
Mouse.addListener(mouseListener);

Vytvoríme si premennú riadok, ktorá bude indikovať, na ktorom riadku sa momentálne nachádza pointer. Nasleduje ďalšia novinka v AS2.0 – nový model vysielania udalostí (Broadcasting Event Model). Funguje na základe listenerov. Sú to vlastne v preklade objekty, ktoré načúvajú, kedy sa daná udalosť (event) vyskytne, a hneď na ňu zareagujú.

Funguje to približne nasledovne. Každý preddefinovaný objekt alebo trieda v ActionSctipte 2.0 vysiela, alebo môže vysielať, udalosti. Napríklad trieda Key (klávesa) vysiela okrem iných aj udalosť o stlačení klávesy. Takže keď stlačím ľubovoľnú klávesu, udalosť sa automaticky vyšle a hneď na to sa zavolá metóda isDown tejto triedy.

Tieto udalosti sa vysielajú vždy a záleží len na nás, či ich budeme počúvať alebo nie. Počúvať ich znamená určitým spôsobom ich využiť alebo pridať im na funkcionalite. Napríklad po stlačení klávesy „i“ chceme, aby sa do nejakého textového poľa vypísalo „i“ – vytvoríme nový objekt (listener), ktorému priradíme funkciu isDown a v tej funkcii priradíme textovému poľu hodnotu „i“. Ide tu vlastne o prepísanie metódy isDown triedy Key.

Vráťme sa k nášmu rolovaniu kolieskom myši. Vytvorili sme si nový objekt (listener), ktorému sme priradili metódu onMouseWheel. Tou prepíšeme metódu triedy Mouse, ktorá je preddefinovane prázdna a automaticky sa volá, keď rolujeme koliesko myši, a tým reaguje na udalosť vysielanú.

Čo vlastne robí naša nanovo prepísaná metóda? Premennej „riadok“, ktorú sme si vytvorili už skôr, priradí hodnotu „delta“, ktorá je automaticky dostupná pre túto metódu. Hodnota „delta“ je vlastne počet riadkov, o koľko sa po jednom otočení kolieska myši posunie rolovaný text. Potom sme obmedzili hodnotu premennej „riadok“ a tým aj možnosť pohybu pointeru mimo viditeľnej časti textového poľa. A nakoniec meníme y-ovú súradnicu pointeru.

Po otestovaní najskôr napíšte text hocikde do textového poľa a môžete rolovať. Text sa vám rolovať nebude, lebo textové pole je dosť vysoké, aby ho zobrazilo celý, ale bude sa vám posúvať pointer hore a dole po takom počte riadkov, koľko máte nastavené, aby sa rolovalo pri jednom otočení kolieska myši.

Pozn. red.: Seriál musel být předčasně ukončen, protože autor nedodal slíbená pokračování. Máte-li zájem v seriálu pokračovat vlastními články, prosíme, kontaktujte redakci.