Rouška tajemství poodhalena: nepublikované funkce Flash 5, 2. díl - Grafika.cz - vše o počítačové grafice

9. srpna 2001, 00.00 | Dnes se podíváme na speciální funkci asfunction, která vám může ušetřit zbytečné bolení hlavy, ale také zbytečné vyrábění nebo přesouvání buttonů. Současně si zopakujeme formátování textových polí typu Dynamic Text Field a řekneme si něco o možnostech, které poskytuje "dynamické generování skriptů".

Asfunction
Určitě se nejeden z vás párkrát vztekal nad tím, že není žádný problém udělat v dynamickém textovém poli html link, ale JAK PROBOHA docílit toho, aby se jednoduše daly z takového textového pole volat Flash akce???
Pro ty z vás, kteří se s takovým problémem ještě nesetkali: představte si, že máte na své Flash stránce sekci Novinky. Do této sekce (abyste nemuseli pořád do kola dělat celou sazbu znovu) šikovně načítáte externí text. Opravdu není žádný problém v takovém externím textu nadefinovat link na jinou html stránku. Jenomže co s tím, když chci z tohohle textu zavolat jinou část svojí Flash stránky? Třeba spustit nápovědu, archiv, skočit na jinou scénu nebo snímek, rozběhnout vyhledávání nebo pustit nějakou animaci.... Teoreticky lze pokaždé pod textové pole znovu umístit tlačítko s funkcí, ale... ani se mi nechce popisovat kolik zbytečné a piplavé práce to zabere (vyrobit nové tlačítko, piplat se s jeho umístěním....)!
Leč pomoc je nablízku. Pomůže nám nepublikovaná "asfunction", funkce, kterou jak napovídá její označení "nepublikovaná", nenajdete v manuálu.

Syntaxe asfuntion je následující:

<A HREF = 'flashFunkce, parametr'>

Jak vidíte, jde o jakýsi "pseudolink". Tento "pseudolink" neprovádí funkci klasického linku, ale zavolá funkci, která je nadefinována přímo ve Flashi a dokáže jí navíc předat parametr.
Tak, doufám, že se nikdo tímhle popisem nevyděsil a raději huráááá na konkrétní ukázku, kde se vše nakonec ukáže jako dětsky jednoduchá a hlavně užitečná! Zdrojový soubor si můžete stáhnout zde.

1. krok - základní scéna
Vytvoříme si velmi jednoduchou scénu, na které budou zatím jenom dva objekty. Jedním z nich bude dynamické textové pole, které nám bude zobrazovat text z externího textového souboru, druhý bude prázdný klip, který natáhne a "roztřídí" externí textový soubor.

Takže popadněte text tool, na paletce Text Options si zvolte Dynamic Text, nezapomeňte zavolit Multiline, Word wrap a zejména HTML, natáhněte textové okno na celou výšku stránky a textové pole pojmenujte "textovePole".

Teď si vytvořte prázdný MC, nazvěte ho třeba "loader" a na něj umístěte následující skript:

onClipEvent (load) {
this.loadVariables("pokusnyText.txt")
}

onClipEvent (data) {
_root.textovePole = this.text
}

První část skriptu načte externí text. Pokud budete používat dynamické textové pole pro část stránky typu "co je nového", vřele doporučuji použít "dynamické načítání", které jsem podrobně popsal ve svém tutorialu zde. To vám zajistí, že se bude uživateli vždy zobrazovat nejnovější verze vaší stránky.

Druhá část skriptu používá tzv. "data handler". Ve zkratce řečeno, Flash používá asynchronní načítání, které může způsobit, že se načte jen část souboru a skript se jej pokusí zpracovat, což vede nutně ke kolapsu nebo chybě. onClipEvent (data) vlastně říká: "počkej, dokud se všechna data korektně nenačtou, a teprve pak spusť následující akce".

2. krok - vytvoření externího textového souboru
Externí soubor, ze kterého budeme číst, musí být ve formátu

&promenna1=hodnota1 &promenna2=hodnota2 . . .

Znak "&" neboli apmerstand odděluje jednotlivé proměnné, které se potom objeví jako proměnné ve Flashi.

Naše první verze textového souboru tedy může vypadat takto:

&text=Tohle je nejaky text

Zkusme otestovat soubor: v textovém poli by se měl objevit text z textového souboru.

Malá poznámka: v této ukázce a v ukázkovém souboru používám pro texty "nečeštinu", abych nekomplikoval život majitelům Maců.

3. krok - hrátky s formátováním
Nejprve si upravme text v externím souboru takto:

&text=<P>Tohle je nejaky text </P><P><FONT color='#990000'>ktery se da treba i obarvit</FONT></P><P><U>muze byt podtrzeny</U></P><P><I>nebo kurziva</I></P><P><B>pripadne i tucny</B></P>

Po otestování zjistíte, že Flash dokáže použít některé html tagy. Není jich mnoho, ale pro běžnou sazbu textového okna bohatě stačí.

Podívejme se na některé další a upravme text takto:

&text=<P>Tohle je nejaky text </P><P><FONT color='#990000'>ktery se da treba i obarvit</FONT></P><P><U>muze byt podtrzeny</U></P><P><I>nebo kurziva</I></P><P><B>pripadne i tucny</B></P> &text2=<P>Muzete pouzit i zakladni formatovani:</P><P ALIGN='right'>doprava</P><P ALIGN='center'>na stred</P><P ALIGN='left'>nebo vlevo</P><P><FONT SIZE='24'>a menit velikost fontu</FONT></P>

Jak vidíte, přibyla nám další proměnná se jménem "text2". Tu musíme nyní načíst do textového okna, takže upravíme skript na MC loader takto:

onClipEvent (data) {
_root.textovePole = this.text + newline + this.text2
}

Klíčové slovo "newline" nám vytvoří nový řádek, funguje vlastně stejně jako Enter klávesa v textovém editoru nebo <P> tag.

Znovu se můžeme pokochat při otestování, pokud je vše OK, tak by se vám měl zobrazit celý text z externího souboru.

V dynamickém textovém poli s HTML formátováním také fungují <A> tagy. Přidejme si na závěr tohoto kroku ještě takový link:

&text3=<P>Takto muze vypadat link:</P><P><FONT color='#0000FF'><U><A HREF='https://www.grafika.cz'>vase nejoblibenejsi stranka ;-)</A></U></FONT></P>

Nezapomeňte v loaderu přičíst další proměnnou "text3".

Při otestování souboru se vám nad linkem objeví "tlačítková pacička" a po kliknutí se vám otevře nové okno browseru a v něm nadefinovaný link.

4. krok - dynamické generování skriptu
Tak, teď bude následovat krátká teoretická přednáška o něčem, co mě opravdu nadchlo. Je to tzv. syntaxe hranatých závorek. Je to něco, co nám umožní dynamicky generovat prakticky jakýkoliv skript!!!

Jednou z novinek ve Flash 5 je důslednější objektová orientace. Pomocí hranatých závorek je dostupná jakákoliv část objektu nebo jeho vlastností.
Přeloženo do lidštiny:

_root.mujKlip.gotoAndPlay(2)

můžeme napsat takto:

cil = mujKlip akce = gotoAndPlay snimek = 2 _root[cil][akce](snimek)

No není to fantastické? Jistě, pokud chceme napsat jednu jednoduchou akci, je to zbytečné zdržování, ale pokud chceme napsat univerzální funkci, do které budeme potom jenom dosazovat proměnné, ušetříme si spoustu práce. Vřele doporučuji si s touhle vlastností Flash 5 pohrát, prozkoušet si jí a při první příležitosti jí použít, uvidíte, kolik řádků skriptu se dá pomocí ní ušetřit.
I v našem případě nám bude tento postup velmi užitečný.

5. krok - příprava scény na "asfunction"
Abychom si mohli vyzkoušet co a jak "asfunction" vlastně dělá, upravíme si scénu.

Nejdříve na hlavní časovou osu přidáme jeden snímek a na něj umístíme tlačítko pro návrat na první snímek. Na oba snímky hlavní timeliny samozřejmě umístíme příkaz stop(), aby se nám to celé "nezacyklilo".

Nyní si udělejte jednoduchý klip, třeba z obyčejného čtverce. Abychom si ukázali všechny možnosti, které nám spojení "asfunction" a dynamického generování skriptu přinášejí, klip bude obsahovat dceru a tato dcera bude obsahovat skript pro rotaci.

Takže: udělejte si čtvereček. Z něj vytvořte klip se jménem "rotovani". Otevřete klip "rotovani", udělejte si nový layer se třemi snímky a následujícími skripty:

I.
stop()

II.
this._rotation += 3
play()

III.
this._rotation += 3
gotoAndPlay(2)

V původním layeru, který obsahuje čtvereček, doplňte další dva snímky se čtverečkem. Jak vidíte, skript je velmi jednoduchý, pokud se dostane na druhý snímek, začne se klip otáčet.

Z klipu "rotovani" nyní vytvořte klip "ukazkovaAnimace". Vložte jej na hlavní časovou osu na oba dva snímky (jen první snímek je klíčový).

Pokud vás můj koncentrovaný výklad zmátl, podívejte se do ukázkového souboru jak se scéna postavená.

6. krok - definování "asfunction"
Přidejte si nyní do externího textového souboru následujíc řádky:

&text4=<P>a ted to nejdulezitejsi: link, obsahujici "asfunction":</P><FONT color='#0000FF'><U><P><A href= 'asfunction:_root.udelejCoChci, gotoAndPlay^1'>pokud vas to tu uz nebavi...</A></P><P><A href= 'asfunction:_root.udelejCoChci, ukazkovaAnimace^rotovani^gotoAndPlay^1'>roztocte to</A></P><P><A href= 'asfunction:_root.udelejCoChci, ukazkovaAnimace^rotovani^stop^'>nebo stopnete</A></U></FONT></P>

Nezapomeňte opět přidat proměnnou "text4" do klipu "loader", aby se vám text zobrazil.

Už první pohled vám napoví, že "asfunction" volá jakousi funkci "_root.udelejCoChci" a že jí předává nějaký parametr.

Což znamená, že je nejvyšší čas na napsání této funkce.

Funkci umístíme na první snímek hlavní timeliny a bude vypadat takto:

function udelejCoChci (parametr) {
funkce = parametr.split("^")

if (funkce.length == 4) {
_root[funkce[0]][funkce[1]][funkce[2]](funkce[3])
}
if (funkce.length == 3) {
_root[funkce[0]][funkce[1]](funkce[2])
}
if (funkce.length == 2) {
_root[funkce[0]](funkce[1])
}
}

Prosím, počkejte ještě s děsem v očích, o nic složitého nejde :o)). Jedním z drobných problémů "asfuntion" je to, že neumí předat více než jeden parametr. Já jsem to ošidil tím, že parametr je sice jeden, ale je v něm skryto více "podparametrů", oddělených znakem "^". Takže první řádek funkce rozseká parametr do Array.

Další řádky jenom kontrolují, kolik elementů má pole a podle nich dynamicky sestaví příslušný skript.
Projděte si skript krok po kroku a zjistíte, že je vlastně skutečně velmi jednoduchý. Řekněme, že se zavolá následující řádek z externího textového souboru:

'asfunction:_root.udelejCoChci,ukazkovaAnimace^rotovani^stop^'

Asfunction zavolá funkci "_root.udelejCoChci" a předá jí parametr:

ukazkovaAnimace^rotovani^stop^

Ten se uvnitř funkce rozdělí na Array, které bude vypadat takto:

funkce = [ukazkovaAnimace, rotovani, stop,     ]

Všimněte si, že pole obsahuje poslední znak, který je prázdný, schválně jsem ho zdůraznil několika mezerami.

Další část skriptu přečte délku pole, v našem případě je to 4. Spustí se tedy tento skript:

if (funkce.length == 4) {
_root[funkce[0]][funkce[1]][funkce[2]](funkce[3])
}

který vytvoří přetáhne z Array hodnoty a vznikne následující řádek:

_root[ukazkovaAnimace][rotovani][stop]()

což jak už víme je totéž jako:

_root.ukazkovaAnimace.rotovani.stop]()

Jak vidíte, pomocí dynamického generování skriptu jsme vytvořili jednoduchou funkci, která je schopná vytvořit a spustit jakýkoliv skript. Jednoduché, elegantní, rychlé, efektivní (jako bych to vymyslel já :o))))

Vraťme se ještě na chvíli k našemu externímu textu a podívejme se, co vlastně "asfunctions" v něm provádějí. Když si spustíte hotový soubor, zjistíte, že v dolní části textového pole jsou tři linky. Jeden z nich přesune hlavní časovou osu na druhý snímek, další spustí rotaci čtverce a třetí ji zastaví.

Podívejte se na řádky, kde jsou "asfunction" nadefinovány a spojte si je s akcemi, které jsou spouštěny. Je to opravdu jednoduché....

7. krok - podivnosti "asfunction"
"Asfunction" se chová v některých věcech trochu prapodivně. Největší z podivností je to, že pokud v ukázkovém souboru spustíte rotaci čtverečku, je viditelné, že rotace není plynulá, ale v pravidelných intervalech vždycky na chvilku zadrhne. Stačí ale kliknout myší kamkoliv do volné plochy a problém zmizí. Podle mého to vypadá tak, že po volání "asfunction" se Flash občas snaží něco zkontrolovat a to mu ubere část zdrojů.

Proto doporučují raději odskakovat na jiný snímek nebo používat jednoduché nebo krátké necyklické animace, u kterých zadrhnutí nebude vadit.

Tak, a to už je pro dnešek OPRAVDU všechno... doufám, že vám dynamické generování skriptu nebo "asfunction" pomůže hned při dalším projektu. Nebo že jste si alespoň osvěžili možnosti HTML formátování textových polí ve Flashi...

Ještě pro připomenutí: zdrojový soubor si můžete stáhnout zde, textový soubor potom zde.