Consejo rápido: Cómo comunicarse entre Flash y JavaScript

Spanish (Español) translation by Steven (you can also view the original English article)

En este Consejo rápido, veremos cómo usar la clase ExternalInterface. Esto nos permite escribir AS3 que puede ejecutar código JavaScript, y viceversa. ¡Eso significa que puedes usar Flash para alterar partes de la página web en la que se está ejecutando!

Paso 1: configurar el documento de Flash

Crea un nuevo documento Flash ActionScript 3. Cambia el tamaño del escenario para que sea de 600x300px. Con la herramienta rectángulo, dibuja un rectángulo que sea del tamaño del escenario. Dale un color #CCCCCC. Además, dale un trazo negro de 2px.

Paso 2: Configura la interfaz de usuario en Flash

Aquí está el diseño en el que trabajaremos:

Abre el Panel de componentes (Ventana > Componentes) y, desde la carpeta Interfaz de usuario, arrastra un componente ColorPicker al escenario. Dale un nombre de instancia de 'cp'.

Luego crea un campo de texto dinámico llamado 'resizeText'; colócalo y ajústalo como desees (no puedes ver el que está en mi imagen; está vacío y en la esquina superior derecha del escenario).

Ahora, crea otro campo de texto dinámico. Dale un nombre de instancia de 'jsText'. Luego crea un símbolo de botón y dale un nombre de instancia de 'prompt'. Después de eso, crea otro botón y asígnale un nombre de instancia de 'change'.

Finalmente, crea dos campos de texto de entrada. Coloca uno al lado de tu botón 'prompt' y asígnale el nombre 'promptText'. Toma el segundo campo de texto, muévelo al lado de tu botón 'change' y asígnale el nombre 'changeText'.

Además, agrega las etiquetas que desees; consulta mi imagen para ver cómo la configuro.

Paso 3: Configura la interfaz de usuario HTML

Para que la interfaz externa funcione, el documento debe estar en Internet. Primero, crea un nuevo archivo de texto y guárdalo como 'externalInterface.html'. A continuación, abre un editor de texto y agrega todo el código a continuación. Guarda el archivo HTML.

<html xmlns="https://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>externalInterface</title>
<style type="text/css">

body {
	font-family:Arial;
}

#asSend {
	padding-top:20px;
	font-size:12px;
}
#htmlWrap {
	margin-top:10px;
	width:578px;
	padding-left:20px;
	border-width:1px;
	border-style:solid;
}
#sender {
	margin-top:10px;
}
#textChange {
	font-size:13px;
	font-weight:bold;
	padding-top:10px;
	padding-bottom:20px;
}

</style>
</head>
<body>
<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="600" height="300" id="externalInterface" align="middle">
  <param name="allowScriptAccess" value="sameDomain" />
  <param name="allowFullScreen" value="false" />
  <param name="movie" value="externalInterface.swf" />
  <param name="quality" value="high" />
  <param name="bgcolor" value="#ffffff" />
  <embed src="externalInterface.swf" quality="high" bgcolor="#ffffff" width="600" height="300" name="externalInterface" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
<div id="htmlWrap">
<div id="asSend">
  <label for="textArea">Send to actionscript:</label><br />
  <textarea cols="50" rows="4" id="textArea" name="textArea"></textarea>
  <br />
  <button id="sender" name="sender">Send</button>
</div>
<div id="textChange">Use Actionscript to change me!</div>
</div>
</body>
</html>

Las áreas clave son:

La sección <object> que incrusta el SWF que crearás a partir del archivo Flash.
El <div> y <textarea>, que tienen propiedades id para que podamos acceder a ellos desde el SWF.

Tu HTML debe aparecer como se muestra a continuación:

Cuando se haya reemplazado el código, sube el archivo a tu servidor web para que podamos comenzar a usar ActionScript.

Paso 4: Configurar una clase de tipo documento

Crea una clase de documento para tu archivo Flash; llámalo Main.as. Si no estás familiarizado con las clases de tipo documento lee este consejo rápido.

package
{
	import flash.display.MovieClip;
	public class Main extends MovieClip {
		public function Main() {
			
		}
	}
}

Paso 5: Invocando funciones de JavaScript desde Flash

Lo primero que haremos con ExternalInterface es llamar a una función de JavaScript que cambiará el color de fondo de nuestra página web. Por lo tanto, adjunta un detector de eventos a nuestro componente ColorPicker. Cuando el color cambia, enviará el valor hexadecimal a una función de JavaScript llamada acceptColor():

package
{
	import fl.events.ColorPickerEvent;
	import flash.display.MovieClip;
	import flash.external.ExternalInterface;
	public class Main extends MovieClip {
		public function Main() {
			cp.addEventListener(ColorPickerEvent.CHANGE, colorChange);
		}
		
		public function colorChange(event:ColorPickerEvent):void {
			ExternalInterface.call("receiveColor", event.target.hexValue);	//calls receiveColor(event.target.hexValue) in the javascript
		}
	}
}

Ahora tenemos que escribir esta función acceptColor(). En la cabecera de nuestro documento HTML, comenzamos el javascript definiendo esta función. Esto simplemente toma el valor que envió Flash y cambia el color de fondo.

<script type="text/javascript">
function receiveColor(value) {
	document.bgColor = "#" + value;
}
</script>

Pon eso justo después del <head> en tu archivo HTML. Si todo está bien, cuando ejecutes la página HTML en un navegador y cambia el color en ColorPicker, debes cambiar el color de fondo de la página web.

Paso 6: Llamando a funciones de ActionScript desde JavaScript

El siguiente ejemplo será enviar datos de JavaScript a Flash. En el documento HTML, pega el siguiente código dentro de la etiqueta <script>:

window.onload = function() {
	var sender = document.getElementById("sender");		//getElementById finds an element according to its "id" property
	sender.onclick = function() {
		var ta = document.getElementById("textArea");
		document['externalInterface'].receiveText(ta.value);
		ta.value = "";
	};
};

Esto es lo que hace: después de cargar el documento, obtenemos el botón 'sender' y le adjuntamos un detector de eventos. Cuando se hace clic en el botón "sender", se llamará a la función ReceiveText() en Flash que configuraremos ahora.

De vuelta en Flash, le decimos a ExternalInterface que registre la función ActionScript para poder llamarla desde JavaScript. Luego configuramos nuestra función ReceiveText():

package
{
	import fl.events.ColorPickerEvent;
	import flash.display.MovieClip;
	import flash.external.ExternalInterface;
	public class Main extends MovieClip {
		public function Main() {
			cp.addEventListener(ColorPickerEvent.CHANGE, colorChange);
			ExternalInterface.addCallback("receiveText", receiveText);	//allows JavaScript to access the receiveText() function.
		}
		
		public function colorChange(event:ColorPickerEvent):void {
			ExternalInterface.call("receiveColor", event.target.hexValue);
		}
		
		//this is the new receiveText function
		public function receiveText(value:String):void {
			jsText.text = value;
		}
	}
}

(Las nuevas líneas son 5, 9 y 16-19.)

Paso 7: Llamando alertas de JavaScript, confirmaciones y avisos desde ActionScript

También podemos llamar alertas muy fácilmente desde ActionScript. Aquí simplemente le decimos a ExternalInterface que llame a un 'prompt'. También podemos usar la interfaz externa para pasar parámetros a las funciones. Aquí le decimos a la función 'prompt' que le pregunte al usuario su nombre. Cuando nuestro usuario ingresa la información, se devuelve al campo de texto 'promptText'.

package
{
	import fl.events.ColorPickerEvent;
	import flash.display.MovieClip;
	import flash.external.ExternalInterface;
	public class Main extends MovieClip {
		public function Main() {
			cp.addEventListener(ColorPickerEvent.CHANGE, colorChange);
			ExternalInterface.addCallback("receiveText", receiveText);
			prompt.addEventListener(MouseEvent.CLICK, promptClick);	//makes promptClick() run when prompt button is clicked
		}
		
		public function colorChange(event:ColorPickerEvent):void {
			ExternalInterface.call("receiveColor", event.target.hexValue);
		}
		
		public function receiveText(value:String):void {
			jsText.text = value;
		}
		
		//function to be called when prompt button is clicked. Will ask for user's name using a JS prompt.
		public function promptClick(event:MouseEvent):void {
			promptText.text = "You said your name is: " + ExternalInterface.call("prompt", "What is your name?");
		}
	}
}

(Las nuevas líneas son 10 y 21-24.)

Paso 8: Llamando a funciones anónimas de JavaScript

Otra cosa que podemos hacer es escribir nuestras propias funciones de JavaScript como cadenas, luego llamarlas desde la interfaz externa. Aquí creamos una función de JavaScript que recibe un parámetro. Tomamos ese parámetro y asignamos su valor al atributo innerHTML de nuestro div 'textChange' en el documento HTML. Notarás que no se llaman funciones externas de JavaScript; todo está contenido en ActionScript.

package
{
	import fl.events.ColorPickerEvent;
	import flash.display.MovieClip;
	import flash.external.ExternalInterface;
	public class Main extends MovieClip {
		public function Main() {
			cp.addEventListener(ColorPickerEvent.CHANGE, colorChange);
			ExternalInterface.addCallback("receiveText", receiveText);
			prompt.addEventListener(MouseEvent.CLICK, promptClick);
			change.addEventListener(MouseEvent.CLICK, changeClick);	//makes changeClick() run when change button is clicked
		}
		
		public function colorChange(event:ColorPickerEvent):void {
			ExternalInterface.call("receiveColor", event.target.hexValue);
		}
		
		public function receiveText(value:String):void {
			jsText.text = value;
		}
		
		public function promptClick(event:MouseEvent):void {
			promptText.text = "You said your name is: " + ExternalInterface.call("prompt", "What is your name?");
		}
		
		//changes text inside the HTML to match text field inside Flash
		public function changeClick(event:MouseEvent):void {
			ExternalInterface.call("function(param){ document.getElementById('textChange').innerHTML = param; }", changeText.text);
			changeText.text = "";
		}
	}
}

(Las nuevas líneas son 11 y 26-30.)

Paso 9: Llamando a funciones anónimas de JavaScript y ActionScript

Finalmente, podemos llamar a funciones anónimas en ambos lados. En la función 'anonymous', registramos una función anónima de ActionScript con la interfaz externa. La función completa algún texto, luego inicia un temporizador. A continuación, llamamos a una función anónima de JavaScript. Esta función le dice a la ventana que, cuando se ha redimensionado, debe volver a llamar a nuestra función anónima de ActionScript.

package
{
	import fl.events.ColorPickerEvent;
	import flash.display.MovieClip;
	import flash.external.ExternalInterface;
	public class Main extends MovieClip {
		public function Main() {
			cp.addEventListener(ColorPickerEvent.CHANGE, colorChange);
			ExternalInterface.addCallback("receiveText", receiveText);
			prompt.addEventListener(MouseEvent.CLICK, promptClick);
			change.addEventListener(MouseEvent.CLICK, changeClick);
			
			//create a new timer with a one second tick, and add an event listener
			var timer:Timer = new Timer(1000);
			timer.addEventListener(TimerEvent.TIMER, onTimer);
			
			anonymous();   //set up the anonymous functions
		}
		
		public function colorChange(event:ColorPickerEvent):void {
			ExternalInterface.call("receiveColor", event.target.hexValue);
		}
		
		public function receiveText(value:String):void {
			jsText.text = value;
		}
		
		public function promptClick(event:MouseEvent):void {
			promptText.text = "You said your name is: " + ExternalInterface.call("prompt", "What is your name?");
		}
		
		public function changeClick(event:MouseEvent):void {
			ExternalInterface.call("function(param){ document.getElementById('textChange').innerHTML = param; }", changeText.text);
			changeText.text = "";
		}
		
		//clear the text after one second has passed
		public function onTimer(event:TimerEvent):void {
			resizeText.text = "";
			timer.stop();
		}
		
		public function anonymous():void {
			//see how we're defining a function inside another function?
			ExternalInterface.addCallback("anon", function(){
				resizeText.text = "The window has been resized.";
				timer.start();
			});
			
			//same applies here
			ExternalInterface.call("function(){ window.onresize = function(){ document['externalInterface'].anon(); }; }");
		}
	}
}

(Las nuevas líneas son 13-17 y 37-52.)

Conclusión

ExternalInterface es una clase extremadamente potente y útil. Con él, puedes recibir valores y eventos, todo fuera del SWF. ¡Diviértete con ella y gracias por leer!