31. Comunicare con Javascript

Posted Mer, 11/26/2008 - 14:29 by Francesco Casula

In questo capitolo vedremo gli strumenti che Action Script 3 ci mette a disposizione per comunicare con Javascript.

Utilizzeremo la classe ExternalInterface per comunicare con il contenitore del nostro filmato Flash, nel nostro caso una semplice pagina HTML, la quale conterrà il codice Javascript che chiameremo dal filmato Flash, che a sua volta metterà a disposizione determinate funzioni ActionScript che potranno essere invece richiamate da Javascript.

Chi volesse mantenere una compatibilità con alcuni browser dell'era preistorica, può trovare la funzione fscommand() all'interno del pacchetto flash.system.

Il metodo da me descritto, che utilizzerà la classe ExternalInterface, mantiene comunque una discreta compatibilità a prova di Homo Neanderthalensis, a partire dalle versioni dei seguenti browser :

  • Firefox 1.0
  • Mozilla 1.7.5
  • Netscape 8.0
  • Safari 1.3

Richiamare una funzione Javascript da ActionScript 3 è piuttosto semplice.
E' sufficiente verificare che la classe ExternalInterface sia supportata dal browser, e in caso di esito positivo procedere alla chiamata della funzione Javascript attraverso il metodo statico call(), come mostrato nell'esempio seguente :

if (ExternalInterface.available) // Controlla che l'API esterna sia supportata dal browser
{
	ExternalInterface.call("setTitle"); // Effettua una chiamata alla funzione Javascript "setTitle"
}
else throw Error("ExternalInterface non supportata!");

Ricordatevi di inserire il codice soprastante all'interno di un gestore appropriato per poter effettuare dei test.
Per fare un rapido esempio, potreste inserire il codice all'interno di un metodo chiamato clickHandler e definirlo come ascoltatore per l'evento MouseEvent.CLICK sullo stage.

// ... Costruttore

	stage.addEventListener(MouseEvent.CLICK, clickHandler);
}

private function clickHandler(evt:MouseEvent):void
{
	if (ExternalInterface.available)
		ExternalInterface.call("setTitle");
	else
		throw Error("ExternalInterface non supportata!");
}

Vediamo di seguito la pagina HTML che conterrà il codice Javascript con la funzione setTitle() :

<html>
<head>
	<title>hello world</title>

</head>
<body bgcolor="#ffffff">

	<script language="javascript">
		function setTitle()
		{
			var ora = new Date();
			var temp = new String(ora.getDate() + "/" + (ora.getMonth() + 1) + "/" + ora.getFullYear());
			temp += " - " + ora.getHours() + ":" + ora.getMinutes() + ":" + ora.getSeconds();
			document.title = temp;
		}
	</script>

	<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
		codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0"
		width="250" height="150" id="hello world" align="middle">

		<param name="allowScriptAccess" value="sameDomain" />
		<param name="allowFullScreen" value="false" />

		<param name="movie" value="hello world.swf" /><param name="loop" value="false" /><param name="menu" value="false" />

		<param name="quality" value="best" /><param name="wmode" value="transparent" /><param name="bgcolor" value="#ffffff" />

		<embed src="hello world.swf" loop="false" menu="false" quality="best" wmode="transparent" bgcolor="#ffffff" width="250"

		height="150" name="hello world" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false"
		type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />

	</object>

</body>
</html>

Per il prossimo esempio includo il sorgente di due classi da me create a scopo didattico, la cui funzione è quella di disegnare dei rettangoli sullo stage.

Non è necessario comprendere il funzionamento di queste classi, non è argomento di questo capitolo, basterà salvarle in formato .as pronte per l'uso.

Nel codice che segue, vedremo come sarà possibile dare a Javascript la possibilità di richiamare dei metodi specifici memorizzati nel filmato Flash.

Per prima cosa dobbiamo realizzare il metodo ActionScript che dovrà essere richiamato da Javascript, per poi aggiungerlo all'API esterna tramite il metodo statico addCallback().

// ... Costruttore

	if (ExternalInterface.available)
	{
		ExternalInterface.addCallback("disegna", this.disegna);
	}
	else throw Error("ExternalInterface non supportata!");
}

private function disegna():void
{
	// ... Corpo del metodo
}

A questo punto è necessario creare una funzione Javascript che ci consenta di individuare e leggere il filmato Flash in tutti i browser supportati dall'API esterna.
Il più usato getElementById purtroppo non mantiene sempre la compatibilità con ExternalInterface, di conseguenza dovremo accedere al filmato Flash utilizzando l'array globale window, nel caso di Internet Explorer, oppure attraverso l'array globale document nel caso in cui l'utente stia utilizzando un altro browser (lo spero).

// Funzione Javascript

function leggiSWF(nome)
{
	if (navigator.appName.indexOf("Microsoft") != -1)
	{ return window[nome]; }
	else
	{ return document[nome]; }
}

Attraverso la funzione soprastante leggiSWF(), ci sarà possibile richiamare il metodo disegna() messo a disposizione da ActionScript, procedendo come segue :

leggiSWF("hello world").disegna();

Sviluppando un'applicazione reale, dovrete tenere conto anche di altri aspetti come ad esempio la gestione della cache dei browser.
Un filmato Flash potrà essere immediatamente disponibile grazie alle funzioni di cache, mentre il resto della pagina è ancora in fase di caricamento.
In questi casi può accadere quindi che il filmato Flash venga avviato prima che le funzioni Javascript siano disponibili, effettuando delle chiamate a funzioni inesistenti.

Vi consiglio quindi di progettare le vostre pagine HTML/Javascript, in modo che una variabile di controllo assuma il valore true solo nel caso in cui il caricamento della pagina sia stato completato correttamente, e allo stesso tempo progettate un timer in ActionScript che controlli periodicamente questa variabile di controllo prima di procedere alle chiamate delle altre funzioni.

Nota : gli esempi del presente capitolo sono stati testati con successo sui seguenti browser :

  • Safari 3.1
  • Firefox 2.0.0.13
  • Internet Explorer 7.0.6001.18000 (non è il prefisso della Groenlandia, è un prodotto Microsoft)

AllegatoDimensione
Rettangolo.as523 bytes
Disegnatore.as424 bytes