Flash: K čemu jsou vlastně dobrá Arrays neboli pole? I. díl - Grafika.cz - vše o počítačové grafice

12. října 2001, 00.00 | Cílem tohoto pokračování seriálu "skriptování pro středně pokročilé" je ukázat si lákavé možnosti, které nám tento objekt nabízí a vysvětlit základní syntaxe a pokročilejší skriptovací techniky, spojené s tímto objektem a objektem String.

Tento miniseriál samozřejmě není doslovnou odpovědí na tuto otázku. Využití objektu Array si musíte najít v praxi sami (a je jich poměrně hodně). Cílem tohoto pokračování seriálu "skriptování pro středně pokročilé" je ukázat si (lákavé :o) možnosti, které nám tento objekt nabízí a vysvětlit základní syntaxe a pokročilejší skriptovací techniky, spojené s tímto objektem a objektem String. Takže pokud se chcete o AS5 dovědět něco více z tajemných hlubin skriptování, čtěte…

Pokud opravdu zatím nevíte, co jsou to objekty Array neboli pole, zde stůjž zjednodušené "názorné" vysvětlení. Představíte-li si normální jednoduchou proměnnou (číselnou, textovou apod.) jako jakýsi kyblíček, ve kterém můžete přenášet obsah z pískoviště na pískoviště a zároveň tento obsah měnit, pole je takový nosič, do kterého se vám těch kyblíčků vejde víc najednou. Přitom můžete každý z kyblíčků ovlivnit (změnit jeho obsah, přesunout na jiné místo apod.). (no, není to opravdu hravé přirovnání? :o)))

Každý z těchto kyblíčků v nosiči je identifikovatelný podle svého indexu. Ukázková syntaxe:

nosicKyblicku = new Array()
nosicKyblicku = [modryKyblicek, zelenyKyblicek, cervenyKyblicek]

Jak vidíte, pole musí být nejdříve vytvořeno. Nikdy na to nezapomínejte! Jsou sice situace, kdy se pole "vytvoří samo", ale preventivně na to raději nespoléhejte. Na druhém řádku už do vytvořeného pole zapisujeme jednotlivé elementy.

Tyto elementy jsou potom přístupné pomocí syntaxe:

nosicKyblicku [indexElementu]

kde za indexElementu dosadíme "pořadové" číslo, pod kterým je element umístěn v poli. Tento index může být číselná hodnota nebo proměnná.

Indexy elementů stoupají z leva do prava od nuly. Ti znamená, že nadefinujeme-li například:

barva = nosicKyblicku[0]

proměnná barva bud mít hodnotu "modryKyblicek". Obdobně pro index 2 získáme hodnotu "cervenyKyblicek".

A teď dost hraní :o), pojďme blíž praxi!

1. Naše pokusná scéna
Naše pokusná scéna bude mít libovolný rozměr, libovolný podklad... prostě jak se vám zlíbí... Na tuto scénu si vložte nejdříve někam do horní části dynamické textové pole, které nazveme "vystup", nezapomeňte jej nadefinovat jako "multiline" a "word wrap", a rovnou si zaškrtněte "Border/Bg", aby bylo v našem souboru při testování vidět ohraničení pole. Jeho velikost si upravíme tak, aby obsáhlo cca tak 15 řádků.

Do spodní části si umístíme Input Text Field, tedy vstupní pole, do kterého budeme zapisovat z klávesnice. Můžeme ho ponechat jako "single line", opět můžeme zapnout "Border/Bg". Pole pojmenujeme "vstup".

Pod toto pole umístíme tlačítko. Tlačítko bude přenášet informace ze vstupního pole do funkce. Takže nyní si musíme nejdříve takovou funkci vytvořit.

Začneme zcela jednoduchou funkcí, kterou si otestujeme, zdali nám scéna funguje tak, jak má. Na první frame si zapíšeme:

function manipulace (vyraz) {
_root.vystup = vyraz
}

Jak jistě vidíte, tato funkce přenese pomocí argumentu zadanou hodnotu do výstupního textového pole. Na tlačítko zapíšeme následující skript:

on (release, keyPress "") {
_root.manipulace(_root.vstup)
_root.vstup = ""
Selection.setFocus("vstup")
}

V prvním řádku tlačítkového skriptu zavoláme funkci "manipulace" (nebojte, nejde o manipulaci politickou ani marketingovou :o)) a jako parametr předáváme hodnotu ze vstupního textového pole (tj. to, co tam při testování zapíšeme).

Další řádek automaticky "vynuluje" vstupní pole tím, že do něj zapíše prázdný textový řetězec.

Polední řádek, využívající objektu Selection, nastaví kurzor do vstupního textového pole, abyste nemuseli před zápisem do tohoto pole klikat kurzorem.

Otestujte soubor: pokud máte vše správně, po zápisu do spodního pole a stisku tlačítka by se vám v horním poli mělo objevit totéž, co jste napsali, obsah spodního pole by se měl vymazat a měl by v něm blikat kurzor.

2. Jednoduchý zápis do Array
Nyní si vyzkoušíme jednoduchý zápis do Array. Na první frame před funkci si přidáme tyto skripty:

vstupniRetezec = new String()
manipulacniPole = new Array()

První řádek vytváří objekt String. Z velké většiny není potřeba String objekt vytvářet, pokud pracujete s textovou proměnnou a použijete některou z metod nebo vlastností objektu String, Flash to automaticky pozná a objekt si sám vytvoří. V našem případě si však pro jistotu (a z didaktických důvodů) tento objekt raději vytvoříme.

A nyní přepíšeme funkci "manipulace" takto:

function manipulace (vyraz) {
vstupniRetezec = vyraz
manipulacniPole[0] = vstupniRetezec
_root.vystup = manipulacniPole[0]
}

Funkce nyní zapíše do proměnné "vstupniRetezec" hodnotu ze vstupního textového pole, poté se zapíše tato hodnota na první pozici v Array "manipulacniPole" a z ní se zapíše do výstupního textového pole.

Po otestování by se měl váš soubor chovat stejně, jako v předchozím případě.

3. Jednoduchá kontrolní funkce
Nyní si k funkci "manipulace" přidáme jednoduchou kontrolní funkci, která nám odstraní případné znaky mezer na začátku výrazu. Až budete psát své první interaktivní skripty, určitě oceníte právě takovou funkci, která dokáže "sežrat otravné a nehodící se" znaky a ponechat jen to, co opravdu potřebujete.

function manipulace (vyraz) {
pomocnyRetezec = new String()
pomocnyRetezec = vyraz
for (j=0;j<pomocnyRetezec.length;j++) {
if (pomocnyRetezec.charAt(j) != " ") {
vyraz = pomocnyRetezec.substr(j)
break
}
}
delete pomocnyRetezec
vstupniRetezec = vyraz
manipulacniPole[0] = vstupniRetezec
_root.vystup = manipulacniPole[0]
}

Vidím hrůzu v očích nejednoho z vás :o) Co je to proboha za funkce a akce? To jsem v živote neviděl??!?!? Žádný strach, ta přehršel trochu "ukecaného" AS (AS skutečně nepatří k nejúspornějším jazykům, ale který patří, že? :o) je opravdu jednoduchá.

Skript nejdříve vytvoří pomocnou proměnnou "pomocnyRetezec" a definuje ji jako objekt String. Tento krok není vyloženě nutný, ale z didaktického hlediska je dobrý a nijak nám neublíží. Do tohoto pomocného objektu načteme obsah vstupního textového pole (druhý řádek funkce).

Nyní spustíme testovací smyčku. Tato smyčka probíhá od hodnoty 0 až do hodnoty, dané délkou řetězce "pomocnyRetezec". Uvnitř této smyčky se testuje, zda je na testované pozici znak mezera. Výraz

pomocnyRetezec.charAt(j) != " "

znamená toto: "pokud se znak na pozici, dané velikostí proměnné j, nerovná znaku mezera".

Skript tedy prohledává se stoupající hodnotou j od nultého znaku "pomocnyRetezec" (jak vidíte, řetězec má číslované pozice stejně, jako pole, první znak má index 0, další 1 atd.). Ve chvíli, kdy narazí na první znak, který není mezera, pomocí

vyraz = pomocnyRetezec.substr(j)

vytvoří nový řetězec, který začíná až od prvního "nemezerového" znaku. Tím vlastně "odsekne" všechny mezery na začátku.

Na následném řádku se pomocí akce "break" přeruší smyčka "for" (je-li nalezen "nemezerový" znak, ukončí se provádění smyčky a skript přejde na akci, následující za smyčkou). Kdybychom ji nepřerušili, tedy nevyskočili z ní ve chvíli, kdy skript najde první "nemezerový" znak, smyčka by pokračovala až do konce řetězce a "okrájela" by nám celý řetězec až na jedno písmeno.

Následující řádek

delete pomocnyRetezec

provede jednoduchou věc: smaže proměnnou "pomocnyRetezec". Jak jsem již psal několikrát, Flash je takový nenasytný bumbrlíček (jéje, to mě dnes napadají přirovnání, že? asi budu mít nějaké hormonálně nevyrovnané období :o))), který pohlcuje a pohlcuje a pohlcuje paměť i výkon procesoru. Pokud průběžně mažeme proměnné, které už nepotřebujeme, vašemu počítači se citelně uleví. Přiznávám, že já na to často zapomínám, a vím, že mnohokrát by moje skripty mohly běžet lépe, kdybych dodržoval tuto jednoduchou zásadu. Takže vás vlastně vedu k tomu, abyste neopakovali moje chyby :o).

4. Přidávání elementů do Array
Nyní se dostáváme k tomu, co je na objektu Array tak důležité: k možnosti ukládat do něj více elementů. Naše funkce bude tedy nyní vypadat takto:

function manipulace (vyraz) {
.
.
.
vstupniRetezec = vyraz
manipulacniPole.unshift(vstupniRetezec)
_root.vystup = ""
for (i=0;i<manipulacniPole.length;i++) {
_root.vystup = _root.vystup + manipulacniPole[i] + newline
}
}

Tři tečky pod sebou naznačují, že je zde ponechán beze změn skript z předcházející ukázky. Najděte si tedy ve vámi napsané funkci řádek "vstupniRetezec = vyraz" a pod něj napište nové skripty.

Tento skript:

manipulacniPole.unshift(vstupniRetezec)

provede následující operaci: vezme Array "manipulacniPole", posune existující elementy o jednu pozici dopředu a na první uvolněnou pozici zapíše hodnotu "vstupniRetezec".

Pokud tedy v první kroku zapíšete do vstupního textového pole například "Pepa", "manipulacniPole" pole bude vypadat takto:

[Pepa]

Nyní zapište do vstupního textového pole třeba "Helena" a stiskněte tlačítko. Array "manipulacniPole" bude nyní vypadat takto:

[Helena, Pepa]

Smyčka, kterou je funkce ukončena, zabezpečí vypsání celého Array "manipulacniPole" do výstupního textového pole. Jak vidíte, skript jednoduše prohledá pole od indexu 0 až po index, odpovídající délce celého Array, a každý element Array vypíše na do výstupního textového pole jako nový řádek.

Obdobou metody "unshift" je metoda "push". Nahraďte řádek skriptu "manipulacniPole.unshift(vstupniRetezec)" za tento:

manipulacniPole.push(vstupniRetezec)

Po otestování souboru vidíte, ze také metoda "push" přidává k Array další element, ovšem tentokrát ne na první pozici, ale na poslední.

5. Mazání elementů z Array
Pokud lze do Array přidávat nové elementy, lze je zcela logicky také mazat. Podívejme se jak.

Vytvořte si nové tlačítko, jehož funkcí v tomto okamžiku bude mazat element v našem manipulačním poli. Na tlačítko umístěte tento skript:

on (release) {
_root.vystup = "Smazana je polozka: " + _root.manipulacniPole.shift() + newline + newline + "Zbyva:" + newline
for (i=0;i<manipulacniPole.length;i++) {
_root.vystup = _root.vystup + manipulacniPole[i] + newline
}
}

Teď spusťte testování souboru. Vložte si pomocí vstupního textového pole tři nové textové řetězce. A nyní stiskněte mazací tlačítko.

Ve výstupní textovém poli se vám objeví hlášení o tom, který element Array "manipulacniPole" byl smazán a které elementy zbývají. Jak zjistíte, metoda "shift" smazala první element.

Obdobně existuje metoda pro smazání posledního elementu Array. Zaměňte tuto část skriptu: "_root.manipulacniPole.shift()" na mazacím tlačítku za:

_root.manipulacniPole.pop()

Jak jste si jistě všimli, obě tyto metody poskytují vlastně dvě "funkce": jednak smažou určený element pole, jednak "vrátí" (poskytnou) hodnotu, kterou právě mažou.

K vašemu jistě velkému zklamání (v případě Flashe určitě už po několikáté :o) asi tušíte, že tím jednoduché metody pro mazání elementů v poli končí. Nelze jednoduše použít metodu pro smazání například pátého elementu z deseti nebo vybrat element s daným obsahem a ten smazat. K takovým činnostem musíte napsat speciální funkce.

K tomu ovšem potřebujeme vědět něco o třídění (řazení) elementů v poli.

6. Třídění polí
Základní třídění neboli řazení elementů v Array je velmi jednoduché:

nazevPole.sort()

Tato metoda seřadí pole vzestupně, pokud chceme použít opačné řazení, Array po setřídění ještě "otočíme":

nazevPole.reverse()

Pomocí těchto jednoduchých metod vytvoříme mazací funkci, která nám umožní smazat libovolný element Array.

Nejprve změníme skript na mazacím tlačítku:

on (release) {
_root.mazani(_root.vstup)
}

Na první frame za funkci "manipulace" přidáme funkci "mazani":

function mazani (vyraz) {
for (i=0;i<manipulacniPole.length;i++) {
if (manipulacniPole[i] == vyraz) {
manipulacniPole[i] = " "
}
}
manipulacniPole.sort()
manipulacniPole.shift()
_root.vystup = ""
for (i=0;i<manipulacniPole.length;i++) {
_root.vystup = _root.vystup + manipulacniPole[i] + newline
}
}

Funkce nejdříve provede smyčku, ve které se porovnávají jednotlivé elementy Array "manipulacniPole" s proměnnou, zapsanou do vstupního textového pole. V okamžiku, kdy skript najde v Array element, shodný s námi zapsaným textovým řetězcem, nahradí jej mezerou (" "). Následně se pole setřídí a tím se element, který obsahuje znak mezery, dostane v Array na první místo. Teď už zbývá jen pomocí metody "shift" smazat tento první element a vypsat nový obsah Array do výstupního textového pole.

Nyní si soubor otestujte. Zapište postupně do vstupního textového pole například tato jména: Petr, Zdena, Ondra. "manipulacniPole" v tomto okamžiku tedy vypadá takto:

["Petr", "Zdena", "Ondra"]

Nyní do vstupního textového pole zapište "Zdena" a stiskněte mazací tlačítko. Vy výstupním textovém poli by se vám měl ukázat následující výpis:

Ondra Petr

Podobně si můžeme vytvořit jednoduchou funkci, která smaže položku dle zadané pozice v Array:

function mazani (vyraz) {
pozice = parseFloat(vyraz)
for (i=0;i<manipulacniPole.length;i++) {
if (i == pozice) {
manipulacniPole[i] = " "
}
}
delete pozice
manipulacniPole.sort()
manipulacniPole.shift()
_root.vystup = ""
for (i=0;i<manipulacniPole.length;i++) {
_root.vystup = _root.vystup + manipulacniPole[i] + newline
}
}

Jak vidíte, mazací funkce se změnila jen nepatrně. První řádek funkce převádí textovou proměnnou na číslo pomocí parseFloat. Změněná podmínka v následné smyčce hledá pozici v Array, na kterou má skript zapsat znak mezery. Zbytek skriptu je už stejný, jako v předchozím případě. Vstupem pro tuto variantu mazací funkce je samozřejmě číslo, které zapíšete do vstupního textového pole.

Tak, a to je pro dnešek vše. V příštím pokračování tohoto miniseriálu si podrobně rozebereme speciální třídící funkce, podíváme se na metody, umožňující mazání více elementů najednou, na metody, které dokáží Array "rozkrájet" dle zadaných parametrů... a další užitečné manipulace s objektem Array...