Flash tiptrik – flash a tlačítka prohlížeče

23.7.2007· Autor: Ondřej Brichta· Počet komentářů: 8

Často vytýkaným nedostatkem flashových prezentací je nemožnost využití tlačítka „Zpět“ a „Vpřed“ webového prohlížeče. Dnes si ukážeme, že tento zdánlivý problém má velice jednoduché a funkční řešení.

Pomoc JavaScriptu

Při tvorbě flashových prezentací jsme si už zvykli, že pro zajištění správné detekce Flashplayeru(http://www.flash.cz/portal/clanek.aspx?id=450) nebo automatickou aktivaci SWF objektů v Internet Exploreru, musíme využívat služeb JavaScriptu.

Pokud narazíme na nějaký problém, který se týká chování flashových animací v HTML stránkách (např. popup okna), první věc, která nás napadne je většinou JavaScript, kterým si můžeme vypomoct. I v případě využití tlačítek „Zpět" a „Vpřed", které jsou součástí webového prohlížeče, budeme JavaScript potřebovat.

To, že je ve flashových aplikací nemůžeme využívat, není pravda, není dokonce ani pravda to, že nelze flashové stránky vkládat do složky „Oblíbené" a při jejich novém zobrazení mít aplikaci na místě, kde jsme si jí do oblíbených položek vložili. Jediné, co je pravda je fakt, že si zde s čistým SWF souborem nevystačíme a musíme si vzít na pomoc JavaScript, vše ostatní je na nás a na správném použití této technologie.

SWFObject + SWFAddress = řešení

Flash už dříve umožňoval navigaci pomocí tlačítek prohlížeče. Stačilo nastavit název snímku jako Anchor (místo Name),

anchor

exportovat animaci v HTML záložce jako „Flash with Named Anchors"

named anchors

 

a mohli jsme při procházení snímků hlavní časové osy využívat i tlačítek prohlížeče.

Ovšem není to zrovna praktické řešení, protože si nemůžeme ukládat vlastní stavy a reagovat na jejich změnu. Naštěstí zde existuje řešení v podobě vkládání SWF souborů s využitím SWFObject metody(http://blog.deconcept.com/swfobject/) doplněnou o SWFAddress metodu(http://www.asual.com/swfaddress/).

První uvedená umožňuje snadným způsobem vložit SWF objekt do HTML stránky, detekovat verzi flashplayeru a případně zobrazit alternativní text. Výsledkem je pak kód v HTML stránce:

<script type="text/javascript" src="swfobject/swfobject.js"></script>

 

<div id="flashcontent">

 Pro zobrazení obsahu potřebujete mít povolen} JavaScript a Flashplayer verze 9 nebo vyšší!
 </div>
 <script type="text/javascript">
 // <![CDATA[
 var so = new SWFObject("swf_browser_as2.swf", "swf_browser_as2", "550", "400", "9", "#FFFFFF");
 so.useExpressInstall("swfobject/expressinstall.swf");
 so.addParam("menu", "false"); 
 so.write("flashcontent");
 // ]]>
 </script>

Nejprve vložíme potřebný JS soubor, který provede detekci verze flashplayeru a nahradí obsah tagu s id="flashcontent" SWF objektem.

Možnost práce s tlačítky webového prohlížeče pak zaručí import dalšího JS souboru:

<script type="text/javascript" src="swfaddress/swfaddress.js"></script>

 

ActionScript 2.0

Pro komunikaci flashové aplikace s JavaScriptovými funkcemi využijeme třídu ExternalInterface o které jsme si povídali v tomto článku: http://www.flash.cz/portal/clanek.aspx?id=815

Na webu http://www.asual.com/swfaddress/ už máme připravený *.as soubor potřebných skriptů, které využijeme pro  úpravu flashové aplikace tak, aby jí bylo možné ovládat i pomocí tlačítek webového prohlížeče. Skript aplikace může vypadat takto:

#include "SWFAddress_as2.as"
stop();
SWFAddress.onChange = function() {
 gotoAndStop(SWFAddress.getValue());
 if (SWFAddress.getValue().length>6) {
 titulek = "Stranka číslo "+SWFAddress.getValue().substr(6, 1);
 } else {
 titulek = "Stranka číslo 1";
 }
 SWFAddress.setTitle(titulek);
};
btn1.onRelease = function() {
 SWFAddress.setValue("strana1");
};
btn1.onRollOver = function() {
 SWFAddress.setStatus("strana1");
};
btn1.onRollOut = function() {
 SWFAddress.resetStatus();
};

K události onChange objektu SWFAddress máme připojenou funkci, která přesune hlavní animaci na snímek, jehož název získáme metodou getValue(). Ta nám vrací aktuální záložku, na které se nacházíme. Opačná metoda setValue() naopak nastavuje zobrazení záložky v URL řádku webového prohlížeče.

Další připravená metoda setTitle umožňuje změnit titulek zobrazené stránky, metoda setStatus slouží pro zobrazení textu ve status políčku prohlížeče (nejčastěji se využívá pro zobrazení url odkazu). Metodou resetStatus text ze status políčka odstraníme.

Pokud máme na scéně tlačítka (btn1), připojíme k nim funkce, které změní aktuální záložku. Po její změně dojde k onChange události objektu SWFAddress a připojená funkce tak provede akci, kterou jsme připravili.

Výsledná aplikace pak může vypadat takto: http://www.5d-media.com/tmp/flash/swf_browser_as2.html

 

ActionScript 3.0

Protože už umíme pracovat i s ActionScriptem 3.0, uvedeme si zde i řešení pro novou verzi ActionScriptu:

import SWFAddress;
stop();
function changeFunc():void {
 var titulek:String = "";
 if (SWFAddress.getValue().length>6) {
 titulek = "Stranka hmslo "+SWFAddress.getValue().substr(6, 1);
 gotoAndStop(SWFAddress.getValue());
 } else {
 titulek = "Stranka hmslo 1";
 gotoAndStop("strana1");
 }
 SWFAddress.setTitle(titulek);
}
SWFAddress.onChange = changeFunc;
function setPage1(e:Event):void {
 SWFAddress.setValue("strana1");
}
function setPage2(e:Event):void {
 SWFAddress.setValue("strana2");
}
function setPage3(e:Event):void {
 SWFAddress.setValue("strana3");
}
function setStatPage1(e:Event):void {
 SWFAddress.setStatus("strana1");
}
function setStatPage2(e:Event):void {
 SWFAddress.setStatus("strana2");
}
function setStatPage3(e:Event):void {
 SWFAddress.setStatus("strana3");
}
function resetStat(e:Event):void {
 SWFAddress.resetStatus();
}
btn1.addEventListener(MouseEvent.CLICK,setPage1);
btn2.addEventListener(MouseEvent.CLICK,setPage2);
btn3.addEventListener(MouseEvent.CLICK,setPage3);
btn1.addEventListener(MouseEvent.MOUSE_OVER,setStatPage1);
btn2.addEventListener(MouseEvent.MOUSE_OVER,setStatPage2);
btn3.addEventListener(MouseEvent.MOUSE_OVER,setStatPage3);
btn1.addEventListener(MouseEvent.MOUSE_OUT,resetStat);
btn2.addEventListener(MouseEvent.MOUSE_OUT,resetStat);
btn3.addEventListener(MouseEvent.MOUSE_OUT,resetStat);

Výsledná aplikace pro ActionScript 3.0 pak není rozdílná od verze pro AS2.0: http://www.5d-media.com/tmp/flash/swf_browser_as3.html

Jak je z uvedených ukázek patrné, i když přistoupíme ke stránce pod URL specifikující konkrétní záložku (například po uložení do oblíbených položek), flashová aplikace na to umí zareagovat a zobrazí odpovídající stránku, v našem případě snímek hlavní časové osy.

Zdrojové soubory ukázek jsou k dispozici zde: sources.zip

Ondřej Brichta Vývojář flashových a mobilních AIR aplikací, šéfredaktor Flash.cz, školitel produktů Flash, Flex, Flash Media Server

E-mail: ob(zavinac)obria.cz | Web: http://www.obria.cz |

Motto: <°))))><

Seriál: Tipy a triky

Tipy a triky je seriál zaměřený na zajímavá řešení a vylepšení flashových aplikací

Komentáře k článku  
vdaka TINYSOFT | 23.7.2007 21:06
Re: vdaka OBr | 23.7.2007 21:53
Re: Re: vdaka TINYSOFT | 23.7.2007 22:00
Re: Re: Re: vdaka OBr | 23.7.2007 22:12
Re: Re: Re: Re: vdaka TINYSOFT | 23.7.2007 22:18
Re: Re: Re: Re: Re: vdaka OBr | 23.7.2007 23:12
suprovy vyuziti bbarmann | 24.7.2007 13:01
Vyborna vecicka D777 | 23.2.2009 15:23

Přihlášení uživatele