reklama

Umíme ve Flashi – 29. díl – dynamické XML menu

V dnešním díle vytvoříme dynamické flashové menu, které bude externě konfigurovatelné pomocí XML datového souboru.

Princip menu

Jak již bylo naznačeno v úvodu, celé menu bude konfigurovatelné pomocí externího XML dokumentu. Zde bude přímo vytvořena struktura budoucího menu, kdy jednotlivé elementy budou tvořit položky menu.

Než začneme pracovat ve Flashi, připravíme si XML soubor v tomto tvaru:

<?xml version="1.0"?>
<menus xpoz="10" ypoz ="10" >
<mItem nazev="Menu 1" >
<mItem nazev="Submenu 1-1">
<mItem nazev="Subsubmenu 1-1-1" cil="
">
</mItem>
<mItem nazev="Subsubmenu 1-1-2" cil="
">
</mItem>
</mItem>
<mItem nazev="Submenu 1-2">
<mItem nazev="Subsubmenu 1-2-1" cil="
">
</mItem>
<mItem nazev="Subsubmenu 1-2-2" cil="
">
</mItem>
</mItem>
</mItem>
<mItem nazev="Menu 2">
</mItem>
<mItem nazev="Menu 3">
</mItem>
<mItem nazev="Menu 4">
<mItem nazev="Submenu 4-1">
</mItem>
</mItem>
</menus>

Soubor uložíme v UTF-8 formátu pod názvem „menu_1.xml“. Když se na strukturu dokumentu podíváme podrobněji, nalezneme zde hlavní element „menus“, který nám vymezuje data pro menu. Vlastnosti „xpoz“ a „ypoz“ budou sloužit pro umístění celého menu na scéně.

Pokud se podíváme dále, zjistíme, že se zde vyskytují pouze elementy „mItem“, pomocí kterých přesně definujeme strukturu výsledného menu. Pokud je do elementu vložen další, vytvoří se tím submenu příslušné položky. Každý element má dvě vlastnosti, první („nazev“) určuje text položky menu a druhá volitelná položka určuje url stránky, na kterou se má po kliknutí přejít. (Samozřejmě, že akcí může být po kliknutí mnohem více, nemusí se striktně jednat o odskok na webovou stránku).

Tvorba menu

Nyní se pustíme do tvorby samotného menu. Ze všeho nejdříve musíme provést načtení a zpracování XML dat. Vytvoříme si proto prázdný MC, vložíme jej na scénu a pojmenujeme jej „menu0“. MC otevřeme a do prvního snímku vložíme první část kódu:

sirka_m = 195;
vyska_m = 40;
textData = new XML();
textData.ignoreWhite = true;
textData.load("menu_1.xml");
getSubs = function (node:XML, uroven:Number, mc:MovieClip) {
 z = 0;
 if (mc) {
  sirka = mc._parent._width;
  set("_level0.itemsArray"+(mc.uroven+1), new Array());
 }
 for (var ndSubs:XMLNode = node.firstChild; ndSubs != null; ndSubs=ndSubs.nextSibling) {
  z++;
  if (mc) {
   mc.attachMovie("menuItm", "menuI"+z, z);
   eval("mc.menuI"+z)._x = sirka_m;
   eval("mc.menuI"+z)._y = (z-1)*vyska_m;
   eval("mc.menuI"+z).txt.text = ndSubs.attributes.nazev;
   eval("mc.menuI"+z).targ = ndSubs.attributes.cil;
   eval("mc.menuI"+z).uroven = mc.uroven+1;
   eval("menuI"+z).adr = mc._name;
   if (ndSubs.hasChildNodes()) {
    eval("mc.menuI"+z).nd = ndSubs;
   }
   _level0.uroven = mc.uroven+1;
   eval("_level0.itemsArray"+(mc.uroven+1)).push(eval("mc.menuI"+z));
  } else {
   this.attachMovie("menuItm", "menuI"+z, this.getNextHighestDepth());
   eval("menuI"+z)._x = xpoz;
   eval("menuI"+z)._y = ypoz+(z-1)*vyska_m;
   eval("menuI"+z).txt.text = ndSubs.attributes.nazev;
   eval("menuI"+z).uroven = 1;
   eval("menuI"+z).adr = _name;
   if (ndSubs.hasChildNodes()) {
    eval("menuI"+z).nd = ndSubs;
   }
  }
 }
};

Než začneme zpracovávat XML data, musíme si připravit XML objekt, který dokument převezme. Po vytvoření tohoto objektu (textData) do něj načteme příslušný XML dokument. Ještě než budeme testovat úspěšné načtení dokumentu, připravíme si funkci, pomocí které zpracujeme načtená XML data.

Funkce se jmenuje „getSubs“ a bude sloužit pro vygenerování submenu příslušné položky. Z tohoto důvodu potřebujeme předat funkci několik proměnných, informujících o části XML dokumentu, která náleží zvolené položce menu, dále v jaké úrovni menu se nyní nacházíme a nakonec potřebujeme znát, o jakou položku se jedná.

Po otestování proměnné obsahující adresu MC, ze kterého chceme vytvořit submenu přistoupíme k samotnému rozboru XMl dokumentu. Zjistíme si z předaného XML elementu počet subelementů a z knihovny symbolů přetáhneme MC „menuItm“, který bude tvořit jednotlivé položky submenu (tento MC jsme si ještě nevytvořili).

Generování submenu máme rozdělené na dvě části, kde v druhé části generujeme základní úroveň a v první části generujeme další úrovně submenu.

Abychom mohli snadněji odstraňovat již zobrazené položky submenu, automaticky vytváříme pole, do kterých vkládáme cestu k vytvořeným položkám submenu. V další části pak budeme testovat úroveň, na které se nacházíme a pokud je třeba, vyhledáme příslušné pole adres a vymažeme všechny vytvořené položky submenu.

Pokračujeme dále tímto kódem:

textData.onLoad = function() {
 node1 = textData.firstChild;
 xpoz = new Number(node1.attributes.xpoz);
 ypoz = new Number(node1.attributes.ypoz);
 getSubs(node1, 0);
};
subAction = function (target) {
 if (target.targ != undefined) {
  getURL(target.targ, "_blank");
 }
};
removeSubs = function (target) {
 if (target.uroven<_level0.uroven) {
  dif = _level0.uroven-target.uroven+1;
  for (d=1; d<dif; d++) {
   arr = (eval("_level0.itemsArray"+(target.uroven+d)));
   delete eval("_level0.itemsArray"+(target.uroven+d));
   for (i=0; i<arr.length; i++) {
    unloadMovie(arr[i]);
   }
  }
 }
};

Zde nejdříve zjistíme stav načtení XML dokumentu, pokud je vše v pořádku, vygenerujeme první úroveň menu. Dále si zde připravíme funkci, která se spustí při kliknutí na položku menu. Sem můžeme umístit jakoukoliv akci, my zde máme pro začátek odskok na webovou stránku, jejíž adresu známe z XML dokumentu.

Jako poslední funkci jsme si připravili mazání již vytvořených položek submenu. Jak již bylo řečeno, pokaždé, když generujeme nové submenu, ukládáme do pole cesty k jednotlivým položkám. Při kliknutí na položku submenu pak testujeme úroveň, ve které se nacházíme, pokud je úroveň menší, než úroveň naposled rozbaleného menu, původně otevřené submenu vymažeme.

Položky menu

Nyní už zbývá vytvořit pouze položku menu, kterou při generování menu přetahujeme z knihovny na scénu. Vytvoříme si proto nový MC, do kterého vložíme dynamické textové pole, jehož instanci pojmenujeme „txt“. V tomto poli budeme zobrazovat název položky. Pod textovým polem vytvoříme pozadí, které převedeme na MC. Na takto vytvořený MC vložíme následující akce:

on (press) {
 _root.menu0.removeSubs(this._parent);
}
on (release) {
 if (this._parent.nd) {
  _root.menu0.getSubs(this._parent.nd, this._parent.uroven, this._parent);
 }
 _root.menu0.subAction(this._parent);
}

Zde po kliknutí na položku nejdříve vymažeme případná další otevřená submenu a po uvolnění tlačítky vygenerujeme menu nové.

Ukázku menu si můžete prohlédnout zde. Tato ukázka je exportována pro flashplayer 8. Zdrojové soubory dnešní ukázky si můžete stáhnout zde.

Témata článku: Software, Programování, Menu, Element

4 komentáře

Nejnovější komentáře

  • anubite 25. 5. 2007 8:16:24
    skus aj >

    kiss

  • Rurier 26. 4. 2006 21:44:31
    Mě se ty příkazy nepovedly odeslat.
  • Honza 24. 4. 2006 13:51:35
    Vsem zajemcum o flash doporucuji navstivit tyto...
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ů | 36

10 nejhorších produktů v historii Microsoftu

10 nejhorších produktů v historii Microsoftu

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

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ů | 130

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

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


Aktuální číslo časopisu Computer

Supertéma o počítačové bezpečnosti

AMD Ryzen přichází

Velké testy kinoprojektorů a levných špuntových sluchátek

Příslušenství do USB-C

reklama
reklama