V dnešním díle se podíváme na využití komponenty „MenuBar“, díky které můžeme snadným způsobem vytvořit zajímavé menu webové prezentace. Zdrojová data budou v XML formátu, který se bude starat o všechny texty prezentace.
MenuBar
Komponenta, která nám usnadní mnoho práce s tvorbou jednoduchých menu, od kterých neočekáváme nijak zvláštní grafickou podobu. Při jejím použití vytvoříme jednoduché horizontální menu s vysouváním položek submenu.
Jednotlivým položkám menu můžeme přiřazovat jak názvy, tak i další data. Ty mohou obsahovat pomocné proměnné, nebo například celé texty jednotlivých voleb. Při použití objektu, který reaguje na provedení volby z menu, můžeme napsat jednoduché funkce, které například zobrazují texty vybraných položek.
Podobný příklad si vyzkoušíme i v dnešním díle. Výsledkem bude flashová stránka, která bude mít v horní části menu a ve spodní části se bude zobrazovat text vybraných položek. Celá animace bude načítat veškeré texty z externího XML souboru. Navíc si vyzkoušíme jednu z dalších novinek Flash 8 a tou je nová třída přechodů „Transition“.
Transition třída
Lépe řečeno se jedná o TransitionManager třídu, která obsahuje metody a funkce, pro vytvoření zajímavých přechodových efektů. Díky ní nemusíme ručně vytvářet MotionTween animace se změnou průhlednosti, na jednom řádku napsaný skript plně nahradí několik řádků skriptu, které bychom dříve museli napsat pro dosažení stejného efektu.
My použijeme efekt postupného objevení objektu pomocí průhlednosti.
Postup
Nejdříve vložíme na scénu komponentu MenuBar a pod ní umístíme textové pole. Toto pole bude dynamické, protože do něj budeme chtít načítat externí texty. Navíc bude html formátovatelné s využitím CSS stylů. Textové pole vložíme do MC, abychom měli na scéně vetší pořádek a mohli jsme použít přechodový filtr. Ovšem tady narážíme na některá omezení dynamických textových polí.
Tak jako se špatně maskují, stejně jako si s nimi neporadí MotionTween animace tak stejně špatně reagují na přechodové filtry. Z tohoto důvodu bude přechodový efekt působit pouze na obrázky, vložené do textu. Ale to nám nebrání v tom, abychom si uvedené přechody vyzkoušeli.
Navíc, pokud nebudeme chtít využít komfortu externích textů a mít je zadané přímo v animaci, můžeme tyto efekty plně použít na statický text. Ale zpět k naší stránce. Pokud vložíme objekty na scénu, musíme napsat skript, který zpracuje XML soubor a extrahuje z něj potřebná data. XML soubor bude vypadat následovně:
<?xml version="1.0"?>
<menu nazev="Položka 1">
<submenu>
<text>Úvod</text>
</submenu>
<submenu>
<text>Volba 1</text>
</submenu>
<submenu>
<text>Volba 2</text>
</submenu>
<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 sit amet, consectetuer adipiscing elit. uisque 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. </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>
</menu>
Nesmíme zapomenout uložit tento soubor v UTF-8 formátu. Pokud se na něj podrobněji podíváme, jako první vidíme název položky hlavního menu. Následují jednotlivé volby submenu a jejich hodnoty, které jsou v našem případě texty. Do textů můžeme tagem IMG vložit i externí obrázky a oživit zobrazený text. Protože jsme si řekli, že dále budeme chtít texty formátovat pomocí CSS stylů, připravíme si i externí soubor styl.css:
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;
}
Zde definujeme, jak budou zobrazené texty vypadat. Externí soubory máme připravené, zaměříme se nyní na samotný flashový dokument.
Vytvoření menu
Do nového dokumentu si z knihovny komponent přetáhneme objekt MenuBar, který pojmenujeme „topMenu“. Dále vytvoříme dynamické textové pole „obsah“ které vložíme do MC „texty“. U textového pole na panelu vlastností určíme, že bude HTML formátovatelné.
Otevřeme si panel akcí prvního snímku a vložíme následující skript:
_global.style.setStyle("themeColor", "haloOrange");
var CSSstyl = new TextField.StyleSheet();
CSSstyl.load("styl.css");
texty.obsah.styleSheet = CSSstyl;
import mx.transitions.*;
import mx.transitions.easing.*;
var zobrazení:TransitionManager = new TransitionManager(texty);
var prechod:Object = new Object();
prechod.allTransitionsOutDone = function(eventObj:Object) {
texty.obsah.text = texts;
zobrazení.startTransition({type:Fade, direction:Transition.IN, duration:3, easing:None.easeNone});
};
zobrazení.addEventListener("allTransitionsOutDone", prechod);
import mx.controls.Menu;
import mx.controls.MenuBar;
var topMenu:MenuBar;
var volbaMenu:Object = new Object();
volbaMenu.change = function(evt_obj:Object) {
var menuItem_obj:Object = evt_obj.menuItem;
texts = menuItem_obj.attributes.data;
zobrazení.startTransition({type:Fade, direction:Transition.OUT, duration:1, easing:None.easeNone});
};
textData = new XML();
textData.ignoreWhite = true;
textData.load("data.xml");
textData.onLoad = function() {
node1 = textData.firstChild;
node1Name = node1.nodeName;
if (node1Name == "menu") {
var hlavniMenu:mx.controls.Menu = topMenu.addMenu(node1.attributes.nazev);
nodArray = node1.childNodes;
if (nodArray.length != 0) {
x = 0;
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("submenu") != -1) {
menuArray.push(nodArray[x].firstChild.firstChild.nodeValue);
}
x++;
} while (x<nodArray.length);
for (i=0; i<menuArray.length; i++) {
hlavniMenu.addMenuItem({label:menuArray[i], data:textArray[i+1], instanceName:menuArray[i]});
}
hlavniMenu.addEventListener("change", volbaMenu);
}
}
};
Nejdříve zvolíme nové barevné schéma pro komponenty. Následuje načtení a přiřazení CSS stylů k textovému poli. Další objekty se týkají přechodových filtrů. „Zobrazeni“ je objekt pomocí kterého vytvoříme samotný efekt. Objekt „prechod“ nám slouží pro detekci zmizení původního textu. N nejdříve necháme zmizet původní text a až poté necháme zobrazit nový.
Objekt „volbaMenu“ opět slouží pro detekci událostí, které jsou spojené s provedením volby horního menu. Jakmile jsme si připravili potřebné objekty, můžeme se pustit do zpracování XML dat. Zde uvedený postup zpracuje pouze první tag „menu“. Případné další položky jsou naprosto shodné. Pokud tedy v XML datech zjistíme přítomnost uvedeného tagu, projdeme jej celý a potřebné data ukládáme do dvou polí – názvy položek do pole „menuArray“ a jednotlivé texty položek „textArray“.
Pokud jsme obě pole naplnili, na konci cyklu je projdeme a vložíme položky do horního menu. Nyní už jen stačí otestovat a máme hotovo.
V příštím díle se podíváme na další užitečné komponenty.
Výslednou ukázku si můžete prohlédnout zde. Zdrojové soubory ke stažení zde.