Začínáme s Flash MX 2004 – 16. díl - prezentační stránka, 3. část

Možnost načítat externí data patří mezi velmi užitečné funkce Flashe. Dnes této možnosti využijeme, pro externí definování textů do webové stránky. Naučíme se pracovat s dynamickým textovým polem a možnostmi jeho formátování pomocí několika html tagů

Proč externě?

Výhoda tohoto použití je jednoznačná. Pokud budeme chtít změnit část, nebo dokonce celý text, nemusíme generovat nový swf soubor, ale stačí nám pouze změnit příslušný text v externím souboru a máme změnu hotovou.

Jak to celé funguje?

Nejdříve vytvoříme objekt, do kterého načteme data (proměnné) z externího textového souboru. Proměnné, které máme v textovém souboru musí být v MIME formátu. Například:

promenna1=15&promenna2=25&text1=Hlavní text&

Jednotlivé proměnné musí být odděleny znakem „&”. Textové soubory bychom měli ukládat ve formátu UTF-8, vyhneme se tak nepříjemnostem, spojeným s nesprávným zobrazováním českých znaků ve flashových souborech - poslední verze Flashe již plně podporuje toto kódování. Nemusíme tedy již nadále používat příkaz:

system.useCodepage = true;

který bohužel často způsoboval více problémů než užitku.

Jakmile budeme mít načtená data, můžeme k nim přistupovat stejně, jako by se jednalo o MC, který má své proměnné. Pokud se náš objekt, pro uložení načtených proměnných bude jmenovat textData, na proměnné se pak budeme odkazovat: textData.promenna1.

Úprava zdrojového kódu

Ale teď už do práce. Otevřeme si zdrojový soubor z minulého dílu, který si můžeme stáhnout zde.

Nejdříve napíšeme příkaz, pro načtení externího souboru, ve kterém budeme mít uložené proměnné. Tento příkaz vložíme do prvního snímku vrstvy, kterou jsme si vyčlenili pro psaní ActionScriptu. Před příkaz stop(); vložíme tento kód:

textData = new LoadVars();
textData.load("data.txt");

nejdříve se vytvoří nový objekt „textData“, do kterého následně načteme data z externího souboru, který se bude jmenovat „data.txt“.

Protože ale máme vytvořen preloader, který by měl ukazovat opravdu celkovou situaci načtených a požadovaných dat, musíme do preloaderu vložit i údaje o velikosti a stažených datech ze souboru „data.txt“. Klikneme tedy na objekt preloaderu, otevřeme si panel akcí a za událostí „enterFrame“ změníme první dva řádky na:

celkem = _root.getBytesTotal()+_root.textData.getBytesTotal();
nahrano = _root.getBytesLoaded()+_root.textData.getBytesLoaded();

Do výsledné velikosti celé animace tak započítáme i velikost externího souboru, údaje o stažených datech musí samozřejmě také odpovídat staženým datům i z externího souboru.

Dynamické textové pole

Abychom mohli zobrazit externí data v textovém poli, musíme z něj udělat dynamické textové pole.

Přesuneme se na druhý snímek hlavní časové osy a dvojklikem na název vrstvy „Layer3“ jí přejmenujeme na „Texty“. Opět dvojklikem na text objektu ve vrstvě „Texty“, se dostaneme do MC „obsah“. Zde máme tři snímky, na které jsme se odkazovali z horního menu. V každém snímku jsme měli napevno definovaný text, což je dost nepraktické.

Nejprve vymažeme snímek 2 a 3 (kliknutím pravého tlačítka myši na snímek a zvolením „Remove Frames“). Ve zbylém prvním snímku klikneme na objekt textového pole a otevřeme si panel vlastností „Properties“. Zde změníme pole na dynamické, pojmenujeme jej „textObsah“ a určíme že bude obsahovat více řádků „Multiline“

Dojklikem přímo na objekt textového pole můžeme změnit jeho velikost. Roztáhneme jej tedy až ke druhému konci pracovní plochy, která prosvítá pod objektem.

Klikneme nyní přímo na první snímek osy objektu „obsah“ a vepíšeme mu následující script:

textObsah.autoSize = "center";

Tento příkaz nám zaručí, že se textové pole bude přizpůsobovat vkládanému textu směrem dolů. Levý a pravý okraj zůstanou na místě, bude se posouvat pouze spodní hranice textového pole.

Úprava AS tlačítek menu

Textové pole máme připravené, můžeme se tedy podívat na horní menu. V knihovně symbolů „Library“ najdeme objekt „menu“ a dvojklikem jej otevřeme. Klikneme na první tlačítko v menu, otevřeme panel akcí a přepíšeme stávající akci tlačítka na:

on (release) {
  this._parent.obsah.textObsah.html = true;
  if (this._parent.textData.text1 != undefined) {
    this._parent.obsah.textObsah.htmlText = this._parent.textData.text1;
  } else {
    this._parent.obsah.textObsah.htmlText = " ";
  }
}

Tento script říká, že textové pole, které je součástí objektu „obsah“ je html formátovatelné. Další část testuje, jestli příslušná proměnná pro text vůbec existuje, pokud ano, vložíme její obsah jako html text do textového pole. Pokud proměnná není z nějakého důvodu dostupná, v textovém poli se nic neobjeví.

Stejný AS napíšeme i dalším dvěma tlačítkům, bude se zde akorát lišit číslo v proměnné „this._parent.textData.text1“ v podmínce, kde bude místo 1 uvedeno 2 u druhého tlačítka a 3 u třetího tlačítka.

Akci:

this._parent.obsah.textObsah.html = true;
if (this._parent.textData.text1 != undefined) {
  this._parent.obsah.textObsah.htmlText = this._parent.textData.text1;
} else {
  this._parent.obsah.textObsah.htmlText = " ";
}

napíšeme i do prvního snímku MC „menu“, protože při spuštění by se nám úvodní text objevil, až po kliknutí na příslušné tlačítko, tímto zajistíme, že se text objeví ihned po načtení objektu menu.

Externí soubor

Zbývá nám už jenom vytvořit externí soubor data.txt. Otevřeme si jeden z nejužitečnějších programů v prostředí Windows a tím je Notepad (poznámkový blok). V poznámkovém bloku vytvoříme několik proměnných, které budeme později načítat. Potřebujeme proměnné text1, text2 a text3. Výsledek může vypadat takto:

text1=Úvodní text&text2=Text číslo dva&text3=Text číslo tři&

Soubor uložíme jako data.txt do stejného adresáře, jako máme swf soubor. Nesmíme zapomenout jej uložit v UTF8 formátu!

A máme hotovo, můžeme se podívat, jak nám to všechno funguje.

Proč jsme ale určovali u textového pole, že je html formátovatelné? Protože můžeme použít v externím souboru několik základních html tagů pro formátování textu. Proč to tedy nevyzkoušet?

Otevřeme si opět data.txt a změníme jej na:

text1=<b>Úvodní nadpis</b><br>Úvodní text k první straně&text2=<b>Nadpis k druhé straně</b><br>Text druhé strany&text3=<b>Nadpis třetí strany</b><br>Text strany tři, této jednoduché prezentace &

Po otestování zjistíme, že jsme vytvořily tučný nadpis a následující text je na další řádce.

Seznam podporovaných html tagů

Flash ovšem nepodporuje všechny html tagy, ale po přečtení následujícího seznamu zjistíte, že i s těmito lze velmi dobře pracovat. Html tagy podporované při formátování textu, jak je uvádí v helpu Macromedia:

Tag odkazu:
<a href="../home.htm" target="_blank">Go home</a>;

Tag tučného písma:
<b>This is bold text.</b>;

Tag nové řádky:
One line of text<br>Another line of text<br>;

Tagy pro určení druhu písma:
<font face="Times, Times New Roman">This is either Times or Times New Roman..</font>;
<font size="24" color="#0000FF">This is green, 24-point text</font>;

Tag pr vložení obrázku:
<p>Here`s a picture from my last vacation:<img src=`beach.jpg`>;

Tag kurzívy:
That is very <i>interesting</i>;

Tag odrážek:
Grocery list:
<li>Apples</li>
<li>Oranges</li>
<li>Lemons</li>

Tag zarovnání odstavce:
<p align=`right`>This text is aligned on the right side of the text field</p>;

Tag podtrženého písma:
<u>underlined</u>;

Tag pro formátování textových bloků:
<textformat>;

Další možnost formátování textu je pomocí CSS stylů, ale tím se budeme zabývat až v příštím díle.

Zdrojový soubor ukázky ke stažení zde, výsledek si můžete prohlédnout zde.

Diskuze (5) Další článek: Ke stažení: Český Adobe Reader konečně ke stažení!

Témata článku: , , , , , , , , , , , , , , , , , , , , ,