reklama

Umíme ve Flashi – 8. díl – krotíme komponenty 2. část

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.

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

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.

Témata článku: Software, Programování, Menu, Elite, ETA, Import, Display, Eros, Block

1 komentář

Nejnovější komentáře

  • gully, gully 28. 11. 2005 0:10:30
    http://diskuse-zaciname-s-flash-mx-2004.wz.cz
reklama
Určitě si přečtěte

Vybíráte herní periferii nebo hardware? Pak zapomeňte na nálepku Gaming

Vybíráte herní periferii nebo hardware? Pak zapomeňte na nálepku Gaming

** Herní hardware se od toho běžného často liší jen vzhledem ** Při výběru stále nezapomínejte na základní parametry ** Poradíme jak vybrat herní hardware i periferie

20.  2.  2017 | Stanislav Janů | 35

10 nejhorších produktů v historii Microsoftu

10 nejhorších produktů v historii Microsoftu

20.  2.  2017 | Karel Javůrek | 132

Pojďme programovat elektroniku: Žádný bastlíř se neobejde bez armády švábů

Pojďme programovat elektroniku: Žádný bastlíř se neobejde bez armády švábů

** Každý bastlíř se po čase neobjede bez armády švábů ** Dnes si některé z nich vyzkoušíme ** Třeba zázračný posuvný registr

19.  2.  2017 | Jakub Čížek | 39

AMD oficiálně představilo procesory Ryzen. Známe i jejich české ceny

AMD oficiálně představilo procesory Ryzen. Známe i jejich české ceny

** AMD uvedlo první tři procesory Ryzen 7 ** Všechny budou pracovat s osmi jádry a šestnácti vlákny ** Na pulty obchodů se dostanou už za týden

22.  2.  2017 | Stanislav Janů | 123

Vyhledávání ve Windows není dokonalé, zkuste to 5× jinak

Vyhledávání ve Windows není dokonalé, zkuste to 5× jinak

** V macOS funguje vyhledávání Spotlight, ve Windows podobně propracovaná funkce chybí ** Alternativy se zaměřují na rychlé hledání souborů i externí zdroje ** Mnohé mohou vyhledávání ve Windows kompletně nahradit

18.  2.  2017 | Stanislav Janů | 58

EU se děsí Windows 10. Prý o nás vědí až příliš. Microsoft chystá změny

EU se děsí Windows 10. Prý o nás vědí až příliš. Microsoft chystá změny

** Evropští úředníci chtějí, aby byly Desítky transparentnější ** Microsoft od jara skutečně chystá změny ** Ochráncům soukromí to ale nestačí

21.  2.  2017 | Jakub Čížek | 217


reklama