Začínáme s Flash MX 2004 – 18. díl – CSS formátování, preloader textu

V první řadě stručně vysvětlíme formátování pomocí CSS, které jsme minulým dílem omylem přeskočili. Dále se zaměříme na optimalizaci skriptu použitím preloaderů pro načítání obrázků do textových polí a vytvoříme si generátor horního menu z xml šablony.

Proč formátovat pomocí CSS?

Odpověď je jednoduchá, použití kaskádových stylů v klasických html stránkách v první řadě zmenšuje velikost výsledných stránek. Neméně důležité je však i to, že případné změny layoutu stránek jsou otázkou chvilky, kterou nám zabere předefinování požadovaných stylů, nemusíme tedy zasahovat a složitě měnit samotný kód.

Flash a CSS

Od flashplayeru verze 7 můžeme používat formátování pomocí CSS stylů i ve flashových dokumentech. Není sice zajištěná úplná podpora veškerých CSS vlastností ( podobně jako u html tagů), ale i tak lze pomocí podporovaných značek vcelku úspěšně formátovat textová pole. Pro úplnost uvádím seznam podporovaných CSS vlastností:

  • text-align – zarovnání textu
  • font-size – určení velikosti textu
  • text-decoration – možnost nastavení podtrženého písma
  • margin-left – určení velikosti levého okraje
  • margin-right - určení velikosti pravého okraje
  • font-weight – možnost nastavit tučné písmo
  • font-style – možnost nastavit kurzívu
  • text-indent – odsazení prvního řádku textu
  • font-family – seznam možných fontů k použití
  • color – barva textu
  • display – určení, jestli se oblast formátuje do řádku a nebo jako odstavec

V minulém díle jsme zajistili, že případná změny textu v našem swf dokumentu je snadno proveditelná, stačí nám pouze změnit příslušný externí soubor.

Popis zdrojového kódu

Díky tomu, že jsme minule načetli xml data již připravená pro css formátování, vysvětlíme si některé použité skripty.

Otevřeme si zdrojový soubor minulé ukázky. Dvojklikem na objekt horního menu se přesuneme do MC „menu“. Zde klikneme na první snímek časové osy ve vrstvě, ve které máme několik řádků skriptu z minula, jedná se o vrstvu „AS“.

Otevřeme si panel akcí a podíváme se na poslední řádky:

var CSSstyl = new TextField.StyleSheet();
CSSstyl.load("styl.css");
this._parent.obsah.textObsah.styleSheet = CSSstyl;

Ve skriptu vytváříme objekt CSSstyl z třídy TextField.StyleSheet. Tento objekt nám umožní načíst a následně použít CSS styly, které budeme mít definované v externím souboru.

Opět tak budeme mít možnost snadné aktualizace a změny textového formátu, bez nutnosti generovat nový swf soubor.

CSS soubor

Podíváme se na CSS soubor, který najdeme ve zdrojových kódech minulého dílu:

p {
  color: #000000;
  font-family: Arial,Helvetica,sans-serif;
  font-size: 12px;
 
}

.nadpis {
  color: #000000;
  font-family: Arial,Helvetica,sans-serif;
  font-size: 16px;
  font-weight: bold;
  display: inline;

}

.subnadpis {
  color: #000000;
  font-family: Arial,Helvetica,sans-serif;
  font-size: 14px;
    display: inline;
}

.text1 {
  color: #333333;
  font-style: italic;
  font-weight: bold;
  text-align: left;
 


}

.text2 {
  color: #333333;
  font-style: italic;
  font-weight: bold;
 display: block;


 
}
.text3 {
  color: #333333;
   font-weight: bold;
  display: block;
 
}

Používáme v něm zvlášť formátování pro nadpisy, podnadpisy a máme vytvořeno i extra formátování jednotlivých textů příslušných stran. Soubor se styly je uložen ve stejném adresáři, jako máme testovací swf soubor, pod názvem „styl.css“.

XML soubor

Otevřeme si soubor data.xml z minulé ukázky:

<?xml version="1.0"?>
<dataxml>
<menu>
<text>Úvod</text>
</menu>
<menu>
<text>Volba 1</text>
</menu>
<menu>
<text>Volba 2</text>
</menu>
<text cislo="1">
<p class="nadpis">Úvodní nadpis</p>
<p class="subnadpis">Úvodní text k první straně</p>
<img align="left" hspace="10" vspace="10" src="pic1.jpg" id="obr"></img>
<p class="text1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur feugiat dui ut odio. Sed tempor urna. Cras vitae est a pede venenatis mattis. Fusce sed lorem. Curabitur vestibulum lectus et arcu. Sed a lectus ac nisl volutpat luctus. Quisque condimentum, enim at facilisis iaculis, dolor orci feugiat mi, scelerisque hendrerit enim lacus dignissim enim. Fusce elementum, magna quis ultricies dignissim, ligula mauris rutrum urna, eu convallis arcu magna consectetuer leo. Suspendisse accumsan dictum nisl. Suspendisse lacus tellus, laoreet at, lobortis pharetra, rutrum a, leo. Maecenas ante nisl, aliquet at, placerat at, interdum tristique, sapien. Ut a massa. Duis venenatis turpis ut pede. Curabitur viverra.</p>
</text>
<text cislo="2">
<p class="nadpis">Nadpis k druhé straně</p>
<p class="subnadpis">Text druhé strany</p>
<img align="left" hspace="10" vspace="10" src="pic2.jpg" id="obr"></img>
<p class="text1">Quisque a urna a tellus placerat mollis. Morbi varius, est vitae tempor tincidunt, odio sem tincidunt odio, vel dapibus lorem elit vitae mauris. Nunc mattis mi a urna. Proin ac tellus. Phasellus pellentesque. Donec convallis consectetuer eros. Quisque laoreet. Nam lectus nibh, convallis id, ornare eget, consequat ac, nibh. Sed semper enim placerat urna. Integer sollicitudin tincidunt augue. Aenean sit amet mi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam sed velit. Mauris at odio. Sed vel nunc quis erat lobortis fermentum. Curabitur quam. Aenean tristique malesuada lectus</p>
</text>
<text cislo="3">
<p class="nadpis">Nadpis třetí strany</p>
<p class="subnadpis">Text strany tři, této jednoduché prezentace</p>
<img align="left" hspace="10" vspace="10" src="pic3.jpg" id="obr"></img>
<p class="text1">Donec nibh diam, posuere a, congue feugiat, fringilla eget, ligula. Curabitur pharetra, est eu vulputate laoreet, orci lacus molestie orci, eu consectetuer erat est et elit. Ut elementum tortor sed felis. Integer nonummy metus. Curabitur ultricies pede in odio. Vestibulum commodo sagittis turpis. Maecenas dolor massa, porttitor nec, tempus vel, ultricies vitae, ante. Curabitur eu nibh non mauris ornare ornare. Cras justo leo, posuere in, tristique non, laoreet vitae, odio. Mauris ultrices accumsan velit. Fusce neque. Praesent est risus, condimentum ac, pretium non, rhoncus et, sapien. Donec pharetra tortor nec lorem. Duis ac nisl. Suspendisse metus diam, varius sit amet, sollicitudin ut, varius quis, odio. Morbi quam mi, bibendum id, condimentum in, interdum euismod, pede. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque mauris. Morbi ornare scelerisque urna. Phasellus tincidunt.</p>
</text>
</dataxml>

Všimneme si několika zajímavých částí. Především se jedná o použití tagů pro označení odstavce a definování jeho příslušného stylu:

<p class="nadpis">

Zde jsme určili, že text mezi tagy označující odstavec (<p>…</p>) bude formátován stylem „nadpis“, který jsme nadefinovali v soboru „styl.css“. V kódu máme také určeno, že budeme chtít do textového pole vložit obrázek. To je zajištěno známým tagem <img>. Ten může mít tyto další parametry:

  • src – cesta k obrázku
  • id – pojmenování instance vkládaného objektu, lze následně využít pro zacílení pomocí AS
  • width – šířka obrázku
  • height – výška obrázku
  • align – zarovnání obrázku
  • hspace – horizontální odsazení od textu
  • vspace – vertikální odsazení od textu

Preloader textových polí

Při vkládání obrázků nejsme odkázáni pouze na jpg formát, ale můžeme vkládat i swf objekty, které lze při vyplněném „id“ snadno ovládat pomocí příkazů ActionScriptu.

Využijeme této vlastnosti a vytvoříme preloader, který zabrání „poskakování“ textu, které je způsobeno tím, že se musí do textového pole externě načíst obrázek. Náš preloader bude proto kontrolovat stav načtení obrázku do textového pole a podle toho zobrazí příslušný text. Abychom se nemuseli dělat s dalším objektem preloaderu, využijeme ten, který máme na prvním snímku prezentace.

Klikneme pravým tlačítkem myši na druhý snímek první vrstvy, pojmenované „preloader“ a z menu vybereme „Insert Keyframe“. Tímto jsme vytvořili z druhého snímku této vrstvy klíčový snímek, který obsahuje stejný objekt preloaderu jako první snímek. Pro naše potřeby je nutné trochu upravit kód na tomto druhém preloaderu.

Klikneme na objekt preloaderu a otevřeme si panel akcí. V něm přepíšeme starý kód tímto:

onClipEvent (load) {
  preloadbar._xscale = 0;
  _root.obsah.textObsah._visible = false;
}
onClipEvent (enterFrame) {
  _root.obsah.textObsah._visible = false;
  celkem = _root.obsah.textObsah.obr.getBytesTotal();
  nahrano = _root.obsah.textObsah.obr.getBytesLoaded();
  procNahrano = nahrano/(celkem/100);
  procent = Math.round(procNahrano);
  preloadstatus.text = "Již bylo staženo: "+procent+"% z textu.";
  preloadbar._xscale = procNahrano;
  if (celkem == nahrano) {
    this._visible = false;
    _root.obsah.textObsah._visible = true;
  } else {
    this._visible = true;
    }
}

Všimneme si, že jsme změnili objekt, ze kterého bereme údaje o jeho velikosti. Jedná se o objekt „obr“, který je součástí textového pole „textObsah“. Jakmile dojde ke kompletnímu načtení obrázku, dáme příkaz, aby se textové pole zobrazilo, jinak jej necháváme neviditelné.

Aby nám ale celý skript fungoval, musíme vytvořit onen „obr“ objekt. Pro jeho vytvoření nám stačí pouze doplnit tag <img> v souboru data .xml . Konec všech tří tagů doplníme o značku “id”: … id="obr"></img> …

Generování menu

Protože už většinu dat bereme z externího XML dokumentu, není důvod, proč bychom nemohli z těchto dat generovat i horní menu.

Otevřeme si proto soubor data.xml a za první značku „<dataxml>“ vložíme tyto tagy:

<menu>
<text>Úvod</text>
</menu>
<menu>
<text>Volba 1</text>
</menu>
<menu>
<text>Volba 2</text>
</menu>

Máme v nich oddělené tři položky menu, které obsahují text příslušného tlačítka. Soubor uložíme a podíváme se na úpravy zdrojového kódu prezentace.

Nejdříve musíme upravit první tlačítko, které budeme duplikovat podle dat zdrojového souboru. Celé tlačítko vložíme do dalšího MC, ve kterém bude navíc dynamické textové pole, do kterého budeme vkládat popisek tlačítka.

Úprava tlačítek

Zvolíme objekt „menu“ na hlavní scéně, otevřeme jej a klikneme pravým tlačítkem myši na první tlačítko menu s nápisem „Úvod“. Zvolíme „Convert to Symbol“ a nový MC pojmenujeme „odkaz1“. Nezapomeneme na panelu vlastností pojmenovat instanci objektu „odkaz1“.

 Klepněte pro větší obrázek

Otevřeme objekt „odkaz1“ a dvojklikem otevřeme objekt tlačítka. Zde vymažeme obsah snímku „Up“ a necháme pouze snímek „Hit“, ve kterém překreslíme původní obdélník trochu větším objektem obdélníku.

 Klepněte pro větší obrázek

Vrátíme se do MC „odkaz1“, zarovnáme tlačítko na střed a na časové ose vytvoříme druhou vrstvu, do které umístíme dynamické textové pole. Pole zarovnáme opět na střed, otevřeme si panel vlastností, kde jej pojmenujeme „texttlacitko“, zvolíme zarovnávání textu na střed a velikost písma na 16 barvy bílé.

 Klepněte pro větší obrázek

Toto pole bude sloužit pro zobrazení popisky tlačítka, které je aktivní podle oblasti, kterou jsme určili ve snímku “Hit“ tlačítka. Ještě jednou zvolíme tlačítko a na panelu vlastností jej pojmenujeme „tlacitko“.

 Klepněte pro větší obrázek

Otevřeme si panel akcí tlačítka, a protože jsme se dostali o úroveň níž, musíme změnit kód do tohoto tvaru:

on (release) {
  this._parent._parent.obsah.textObsah.html = true;
  if (this._parent._parent.textArray[num] != undefined) {
    this._parent._parent.obsah.textObsah.htmlText = this._parent._parent.textArray[num];
  } else {
    this._parent._parent.obsah.textObsah.htmlText = " ";
  }
}

Došlo zde navíc ke změně v parametru pole, kde nyní přebíráme proměnnou „num“ kterou budeme nastavovat při generování tlačítek.

Skript generování tlačítek

Vrátíme se do objektu „menu“, vymažeme zbylá dvě tlačítka, klikneme na první snímek vrstvy s akcemi „AS“ a otevřeme si panel akcí. Zde nahradíme kód:

this._parent.obsah.textObsah.html = true;
var CSSstyl = new TextField.StyleSheet();
CSSstyl.load("styl.css");
this._parent.obsah.textObsah.styleSheet = CSSstyl;
if (this._parent.textArray[1] != undefined) {
  this._parent.obsah.textObsah.htmlText = this._parent.textArray[1];
} else {
  this._parent.obsah.textObsah.htmlText = " ";
}

novým kódem:

//vytvoření tlačítek menu
//popis prvního tlačítka
odkaz1.num = 1;
if (this._parent.menuArray[0] != undefined) {
  //určení popisku prvního tlačítka
  odkaz1.texttlacitko.text = this._parent.menuArray[0];
} else {
  odkaz1.tlacitko.enabled = false;
}
//vytvoření dalších tlačítek
xnum = 2;
do {
  xbef = xnum-1;
  //vytvoření kopie tlačítka
  odkaz1.duplicateMovieClip("odkaz"+xnum, 20+xnum);
  //umístění kopie vedle předchozího tlačítka
  eval("odkaz"+xnum)._x = eval("odkaz"+xbef)._x+eval("odkaz"+xbef)._width*1.5;
  //nastavení proměnné num pro správnou funkci odkazu 
eval("odkaz"+xnum).num = xnum;
//vytvoření popisky
  if (this._parent.menuArray[xbef] != undefined) {
    eval("odkaz"+xnum).texttlacitko.text = this._parent.menuArray[xbef];
  } else {
    eval("odkaz"+xnum).tlacitko.enabled = false;
  }
  xnum++;
} while (this._parent.menuArray[xbef] != undefined);
//****první načtení textu první strany
this._parent.obsah.textObsah.html = true;
var CSSstyl = new TextField.StyleSheet();
CSSstyl.load("styl.css");
this._parent.obsah.textObsah.styleSheet = CSSstyl;
if (this._parent.textArray[1] != undefined) {
  this._parent.obsah.textObsah.htmlText = this._parent.textArray[1];
} else {
  this._parent.obsah.textObsah.htmlText = " ";
}

Úprava zpracování XML dokumentu

Ve skriptu se odkazujeme na pole „menuArray“, které ale ještě nemáme vytvořené. Vrátíme se proto na hlavní scénu a otevřeme si panel akcí u prvního snímku celé animace.

Zde doplníme původní cyklus „Do“:

textArray = new Array();
      do {
        if (nodArray[x].nodeName.indexOf("text") != -1) {
          num = nodArray[x].attributes.cislo;
          textArray[new Number(num.toString())] = nodArray[x];
        }
        x++;
      } while (x<nodArray.length);

do této podoby:

textArray = new Array();
      menuArray = new Array();
      do {
        if (nodArray[x].nodeName.indexOf("text") != -1) {
          num = nodArray[x].attributes.cislo;
          textArray[new Number(num.toString())] = nodArray[x];
        } else if (nodArray[x].nodeName.indexOf("menu") != -1) {
            menuArray.push(nodArray[x].firstChild.firstChild.nodeValue);
        }
        x++;
      } while (x<nodArray.length);

Vytvořili jsme si zde nové pole „menuArray“, do kterého umisťujeme jednotlivé texty pro příslušná tlačítka horního menu.

Zdrojové soubory ukázky ke stažení zde, ukázka zde.

Diskuze (14) Další článek: IBM: konec podpory OS/2 na dohled

Témata článku: Software, Programování, Flash, Magnum, Formátování, TeX, Eros, Undefined, Menu, CSS, Leo, ETA, Pole, XNU, Díl, Elite, Magna, Druhá strana, Elsa, Formát, Displej, Tlačítko, Convert, Nový kód, Starý kód


Určitě si přečtěte

Už desítky let se pokoušíme odposlouchávat mozek. Rusům se podařil kousek, ze kterého vám spadne brada

Už desítky let se pokoušíme odposlouchávat mozek. Rusům se podařil kousek, ze kterého vám spadne brada

** K odposlechu mozků používáme EEG ** To má ale žalostné informační rozlišení ** Rusům pomohla počítačová neuronová síť

Jakub Čížek | 29

Co všechno se spouští se startem Windows a proč by vás to mělo zajímat

Co všechno se spouští se startem Windows a proč by vás to mělo zajímat

** Společně s operačním systémem se spouští řada aplikací a služeb ** Mohou mít negativní dopad na celkovou dobu startu Windows ** Jak získat kontrolu nad automaticky spouštěnými programy?

Karel Kilián | 59

USA rozdávají chudým dotované telefony s Androidem. Jsou z Číny a plné virů

USA rozdávají chudým dotované telefony s Androidem. Jsou z Číny a plné virů

** Chudí Američané mohou dosáhnout na dotovaný mobil ** Jeden takový rozdává třeba tamní Virgin Mobile ** Má to jeden háček. Je prošpikovaný malwarem

Jakub Čížek | 42



Aktuální číslo časopisu Computer

Test 9 bezdrátových reproduktorů

Jak ovládnout Instagram

Test levných 27" herních monitorů

Jak se zbavit nepotřebných věcí na internetu