Ondřej Brichta 29.8.2005
V minulém díle jsme si řekli, že nemůžeme maskovat dynamické textové pole. Pro scrollování delšího textu proto využijeme a upravíme jednu z připravených komponent ve Flashi - „textArea“.
Komponenty jsou již připravené objekty, které nám ušetří mnoho času s programováním. Stačí z knihovny přetáhnout objekt na scénu a už můžeme přímo využívat funkcí roletkových seznamů, přetahovacích oken, tabulek, objektů pro načítání externích klipů a filmů, různých typů tlačítek a mnoha dalších připravených komponent.
Nejprve si otevřeme zdrojový z minulého dílu (soubor web6.fla), který je uložen v archívu zdroje.zip. Budeme chtít nahradit dynamické textové pole komponentou s názvem „textArea“, která nám umožňuje zobrazení libovolného textu.
Pokud je text delší než jsou rozměry objektu, automaticky se mohou zobrazit posuvníky pro posuv textu. Výhodu je, že byla přidána reakce i na kolečko myši, můžeme tedy uživatelům nabídnout posouvání textu i pomocí této pohodlné metody.
Máme tedy otevřený zdrojový soubor, přesuneme se na druhý snímek na hlavní časové ose, dvojklikem na objekt „obsah“ ve vrstvě „Texty“ otevřeme MC, ve kterém jsme zobrazovali naše externí texty.
Klikneme na textové pole a vymažeme jej. Nyní si otevřeme knihovnu komponent: Window – Development Panels – Components.
Zobrazí se nám knihovna nabízených komponent.
Počet a druh komponent je závislý d verze Flashe, kterou používáme. My využijeme komponentu, která je přítomna v obou verzích, tedy již zmiňovanou „textArea“. Přetáhneme jí na scénu a pomocí nástroje pro změnu velikosti (Free Transform Tool) roztáhneme komponentu, aby vyplňovala většinu zobrazovací plochy.
Nyní klikneme na vloženou komponentu, otevřeme panel vlastností „Properties“. Zde pojmenujeme instanci komponenty „textObsah“. Pokud klikneme na záložku „Parameters“ na panelu vlastností, objeví se tabulka pro nastavení základních parametrů vložené komponenty.
Zde máme možnost nastavit, jestli lze výsledný text editovat (vkládat vlastní text z klávesnice), dále je zde nám již známá funkce pro možnost html formátování zobrazovaného textu. Následuje možnost přímého zadání textu a poslední položkou je možnost pro zalamování textového obsahu.
My nastavíme proměnnou „editable“ na “false“, proměnnou „html“ na „true“ a „wordWrap“ na „true“.
Máme tak komponentu připravenou, nyní musíme ještě upravit AS.
Klikneme na první snímek osy klipu „obsah“, otevřeme panel akcí a původní skript nahradíme tímto:
textObsah.color = "0x000000";
textObsah.setStyle("fontFamily", "Verdana");
textObsah.setStyle("backgroundColor", "0x94A9C0");
textObsah.setStyle("borderColor", "0x94A9C0");
textObsah.setStyle("shadowColor", "0x94A9C0");
textObsah.setStyle("shadowCapColor", "0x94A9C0");
textObsah.setStyle("borderCapColor", "0x94A9C0");
textObsah.setStyle("highlightColor", "0x94A9C0");
stop();
Tímto skriptem změníme defaultní šedé barvy na barvy, které se více hodí do našeho barevného schématu. Experimentováním můžeme zjistit, jakou část okraje mění daná proměnná. Pokud se nechcete s testováním zdržovat, více se můžete dozvědět zde.
Dále potřebujeme upravit skript na menu. Vrátíme se na hlavní scénu a otevřeme si objekt, který zobrazuje horní menu.
Klineme na snímek ve vrstvě se skriptem a otevřeme si panel akcí. Zde najdeme tento řádek:
this._parent.obsah.textObsah.html = true;
a vymažeme jej. V komponentě již máme nastaveno, že bude zobrazovat html formátovatelný text.
Dále se zaměříme na část skriptu, kde přiřazujeme text do pole, zde nahradíme původní výraz:
this._parent.obsah.textObsah.htmlText =
tímto:
this._parent.obsah.textObsah.text =
Jedná se o změnu na řádcích 37 a 39.
Dále musíme změnit skript na tlačítku. Dvojklikem na MC s tlačítkem jej otevřeme, zvolíme naše „průhledné“ tlačítko a na panelu akcí provedeme stejnou změnu, jako v předchozím případě. Vymažeme řádek:
this._parent._parent.obsah.textObsah.html = true;
a vlastnost „htmlText“ změníme na „text“.
Další změnu musíme provést na preloaderu textu. Vrátíme se na hlavní osu celé prezentace, na druhém snímku klikneme na objekt preloaderu a otevřeme si panel akcí. Zde nahradíme řádky:
celkem = _root.obsah.textObsah.obr.getBytesTotal();
nahrano = _root.obsah.textObsah.obr.getBytesLoaded();
Těmito:
celkem = _root.obsah.textObsah.label.obr.getBytesTotal();
nahrano = _root.obsah.textObsah.label.obr.getBytesLoaded();
Zdálo by se, že už máme hotovo, ale ještě ne. Když otestujeme celou prezentaci, zjistíme, že na prvním snímku máme skoro 45kB animace. Je to způsobeno přidanou komponentou, která má nastaveno, že se načítá vždy v prvním snímku.
Tohle je ale z hlediska preloaderu nevyhovující. Otevřeme si okno s nastavením exportu (File – Publish Settings), zvolíme záložku „Flash“ a klikneme na tlačítko „Settings“, které je umístěno vedle nastavení verze AS.
V zobrazeném okně napíšeme do možnosti „Export frame for classes“ číslo dva.
Tímto jsme určili, že komponenty se budou exportovat do druhého snímku hlavní animace a máme tak uvolněný první snímek, ve kterém je pouze preloader.
Když se nyní podíváme na prezentaci, vidíme, že se skutečně „uvolnil“ první snímek animace a naopak narostl objem dat ve druhém snímku.
Ale zase nám nefunguje načtení textu do komponenty. To se provede pouze při zobrazení na webu. Musíme totiž ještě upravit nastavení exportu přímo v komponentě.
Otevřeme si knihovnu symbolů, najdeme „textArea“ a pravým tlačítkem zobrazíme menu, ze kterého zvolíme „Linkage“.
V zobrazeném okně odškrtneme volbu „Export in first frame“ a máme už doopravdy hotovo.
Zdrojové soubory dnešní ukázky ke stažení zde.
