Flash tiptrik – umístění menu do stránky

11.2.2008· Autor: Milan Macháček· Počet komentářů: 1

Dnes si ukážeme dva příklady příklady, jak si připravit menu, které ukazuje aktuálně zvolenou stránku.

Framy

Asi nejjednoduší možností je použitím framů, rozdělením stránky prohlížeče na několik dílů(framů) a do takto vytvořených dílů načítat obsah(html stránky). Nejprve si musíme na úvodní stránce(zpravidla index.html)  definovat framy, což se provádí definicí v hlavičce html stránky

<frameset cols="180,*" >    
<frame name="_levySloupec" src="menu.html" noresize="noresize" scrolling="no" />    
<frame name="_pravySloupec" src="strana1.html" noresize="noresize" scrolling="auto"/>
</frameset>

Tímto zápisem do hlavičky stránky jsme definovali dva sloupce první o šířce 180 pixelů a druhý tak, aby vyplnil zbytek stránky. Na dalších dvou řádcích došlo k pojmenování sloupců, načtení obsahu a nastavení vlastností sloupců. Stránku uložíme pod jménem index.html.

Nyní si vytvoříme jednoduché menu ve Flashi a uložíme ho pod názvem menu.fla do stejné složky jako index.html. K tlačítkům v menu napíšeme následující skript:

stop();
menu1_mc.onPress = function() {
             gotoAndStop(1);
             getURL("strana1.html", "_pravySloupec" );
};
menu2_mc.onPress = function() {
             gotoAndStop(2);
             getURL("strana2.html", "_pravySloupec" );
};
menu3_mc.onPress = function() {
             gotoAndStop(3);
             getURL("strana3.html", "_pravySloupec" );
};
menu4_mc.onPress = function() {
             gotoAndStop(4);
             getURL("strana4.html", "_pravySloupec" );
};
menu5_mc.onPress = function() {
             gotoAndStop(5);
             getURL("strana5.html", "_pravySloupec" );
};
menu6_mc.onPress = function() {
             gotoAndStop(6);
             getURL("strana6.html", "_pravySloupec" );
};

V mém menu je šest klipů, které tvoří tlačítka, po kliknutí na jednotlivé tlačítko dojde k přesunu na snímek na kterém je proveden posun tlačítka (aby uživatel viděl, kde se nachází) a zároveň dojde k načtení zvolené stránky do metodou getURL do framu _pravySloupec. Ale pozor odkaz do framu musí být napsán stejně jako v tragu frameset. Pokud se odkaz liší (stačí i velikost písmenka) otevře se nová stránka v novém okně a další stejně pojmenované odkazy budou mířit do něho.

Při zkoušce vše musí běžet na serveru, otevřením ve složce, kde je vše uložené to fungovat nebude. Lokálně lze udělat zkoušku, pokud máte na instalovaný server (třeba Apache nebo IIS).

Nevýhody tohoto řešení jsou v tom, pokud host navštíví vaší stránku přímo (tedy ne přes index kde je frameset) ale z vyhledávače, neuvidí vaše menu a nemá žádnou volbu jak procházet takto navštívené stránky.

Použití proměnných v html stránce

Dále je možné načíst proměnou určující přesun na konkrétní snímek menu z HTML kódu stránky a podle té pak přejít na požadovaný snímek. Toto řešení nám umožní vyhnutí se stránek s framy.

Změníme script v menu:

stop();
var prommena:Number = _level0.promenna;
menu1_mc.onPress = function() {
             getURL("strana1.html", "_self" );
};
menu2_mc.onPress = function() {
             getURL("strana2.html", "_self" );
};
menu3_mc.onPress = function() {
             getURL("strana3.html", "_self" );
};
menu4_mc.onPress = function() {
             getURL("strana4.html", "_self" );
};
menu5_mc.onPress = function() {
             getURL("strana5.html", "_self" );
};
menu6_mc.onPress = function() {
             getURL("strana6.html", "_self" );
};
jdiNa = function () {
             gotoAndStop(promenna);
};
jdiNa();

V html stránce, kde máme umístěné menu, musíme udělat několik změn. Ve vlastní části, kde se nastavuje načtení flashe, doplníme definici proměnné a to v tagu embed a value.

src="menu.swf?promenna=1"

value="menu.swf?promenna=1"

Do každé HTML stránky stránky(s vloženým flshovým menu) napíšeme číslo proměnné podle pozice v menu. V případě, že vkládáme flshový objekt pomocí JavaScriptu, využijeme pravděpodobně podobný zápis v JS funkci:

'flashVars','promenna=1',

Obecně jsme se o možnostech vložení parametru přes HTML kód zajímali v tomto článku: http://www.flash.cz/portal/clanek.aspx?id=1040

Zdrojová data obou řešení jsou k dispozici zde: menus.zip

 

 

 

Komentáře k článku
sikovny tip	TINYSOFT | 11.2.2008 23:25