Flash a JavaScript

12.6.2007· Autor: Ondřej Brichta· Počet komentářů: 1

Jsou situace, kdy potřebujeme komunikovat s JavaScriptem a nebo naopak je nutné pomocí JavaScriptu ovládat flashové animace. S třídou ExternalInterface je tato komunikace velmi jednoduchá a tak se na ní dnes podíváme.

Volání JavaScriptu

Bez použití třídy ExternalInterface je volání JavaScriptové funkce v HTML stránce relativně jednoduché, stačí použít metodu getURL:

getURL("javascript:setStatus('Chyba')");

a do HTML kódu stránky doplnit příslušnou JS funkci:

<SCRIPT LANGUAGE=JavaScript>
<!--
function setStatus(arg){
 <span style="color:grey;">//příkazy JS funkce</span>
}
//-->
</SCRIPT>

Ovšem máme zde jistá omezení, hlavně co se týče zpětného ovládání flashového objektu ze strany JavaScriptové funkce. Proto budeme při volání využívat služeb třídy ExternalInterface, která nám poskytuje komfortní komunikaci Flash-JavaScript.

ActionScript

Abychom mohli mezi oběma skript komunikovat, musíme na každé straně připravit funkce, které lze volat a které budou provádět požadované kroky. Na straně ActionScriptu budeme chtít přijímat text poslaný JavaScriptovou funkcí a zároveň budeme chtít volat JavaScriptovou funkci, která bude v našem případě otevírat nové popup okno prohlížeče. Skript na straně flashové aplikace bude ve verzi ActionScriptu 2.0 vypadat následovně:

import flash.external.ExternalInterface; 
function addText(str:String):Void {
 txt.text += " Poslaný text z HTML "+str;
 } 
ExternalInterface.addCallback("sendText",null,addText);
function makePopUp(evt:Object):Void {
 ExternalInterface.call("popupWin",win.text);
}
btn.addEventListener("click",makePopUp);

Ve skriptu nejprve importuje potřebnou třídu a poté si připravíme funkci, která bude volaná ze strany JavaScriptu. Pomocí metody addCallback určíme, pod jakým názvem (první parametr) budeme funkci JavaScriptem volat.
Následuje funkce „makePopUp", kterou naopak budeme volat JavaScriptovou funkci a to pomocí metody „call" třídy ExternalInterface.

JavaScript

Na straně HTML kódu pak musíme doplnit tyto potřebné funkce:

<SCRIPT LANGUAGE=JavaScript>
<!--
function getObj(objName) {
 var isIE = navigator.appName.indexOf("Microsoft") != -1;
 return (isIE) ? window[objName] : document[objName]; } function popupWin(arg){
 window.open(arg,"noveOkno","menubar=1,resizable=1,width=800,height=600");
}
function sendTxt(){
 getObj("fjs").sendText(getObj("controller").txt.value);
}
//-->
</SCRIPT>

Funkce „sendTxt" může přímo zavolat funkci flashového objektu, pokud tento objekt máme pojmenován pomocí atributu „id". Standardně je tento atribut v exportovaném HTML kódu obsažen, proto jej nemusíme doplňovat, ale pokud se tak nestalo, musíme doplnit „id" jak do „object" tagu tak i do „embed" tagu.

Abychom mohli posílat data do flashového objektu, doplníme HTML kód o tento krátký formulář:

<form name="controller" method="POST">
 <p>
 <input name="Play" type="button" onClick="sendTxt();" value="Poslat text:">
 <input type="text"name="txt" maxlength="100">
 </p>
</form>

Výsledná aplikace pak vypadá takto.

 

Verze pro ActionScript 3.0

Pokud se rozhodneme používat ExternalInterface třídu i v aplikacích pro ActionScript 3.0, budeme muset mírně upravit skript na straně flashové aplikace:

import flash.external.ExternalInterface;
function addText(str:String):void {
 txt.appendText("Poslaný text z HTML: "+str);
 } 
ExternalInterface.addCallback("sendText", addText); 
function makePopUp(e:MouseEvent):void {
 ExternalInterface.call("popupWin", win.text);
 }
btn.addEventListener(MouseEvent.CLICK,makePopUp);

Samotný HTML kód zůstává nezměněn a výsledná aplikace bude vypadat takto.

Zdrojová data obou verzí jsou k dispozici zde: zdroje.zip

Komentáře k článku
dlouhe nazvy souboru	hondzyk76 | 6.3.2008 11:12