Integrar Flash y Javascript

Desde Flash 8 hay una clase llamada External Interface que permite la comunicación transparente entre Flash y Javascript. External Interface permite enviar objetos con argumentos complejos en comparación con Fscommand que se utilizaba antes para este tipo de comunicación.

Para utilizar External Interface es necesario desarrollar en Flash 8, y hay que tener en cuenta que no funciona en todos los navegadores pero si en la mayoría, entre los cuales tenemos el siguiente listado.

  • Internet Explorer 5.0+
  • Netscape 8.0+
  • Mozilla 1.7.5+
  • Firefox 1.0+
  • Safari 1.3+

Comunicación de Flash a Javascript
Lo primero para lograr la comunicación es importar la clase External Interface, esto se hace de la siguiente manera.

[as]import flash.external.ExternalInterface;[/as]

Luego el siguiente paso es llamar a la función call, la cual puede llamar a cualquier función definida en Javascript, para ello se le pasa como parámetro el nombre de la función Javascript a ejecutar.

[as]ExternalInterface.call(«functionName»);[/as]

Veamos un ejemplo de uso de esta propiedad. Sea que tengamos un campo de formulario en el cual se ingresa el nombre del usuario, además de ello tenemos una función javascript el cual devuelve el texto ingresado en este campo.

<html>
<head>
<title>Flash2Javascript</title>
<script language="javascript">
function getNombre() {
	return document.getElementById("nombre").value;
}
</script>
</head>
<body>
Nombre: <input name="nombre" type="text" id="nombre" />
</body>
</html>

Luego en una película flash si deseamos llamar a esta función desde un botón llamado btObtener tendríamos el siguiente código:

[as]
import flash.external.ExternalInterface;
btObtener.onPress = function() {
txtMensaje.text = ExternalInterface.call(«getNombre»);
}
[/as]

Con lo cual obtendremos el siguiente resultado.

flash2javascript.gif

Comunicación de Javascript a Flash
El proceso inverso de comunicación se realiza con la función addCallback, el cual recibe tres parámetros los cuales son: Alias de la función, instancia donde se encuentra la función a llamar y finalmente el nombre de la función a ejecutarse.

[as]ExternalInterface.addCallback(«alias», instancia, funcion);[/as]

Como ejemplo en flash creamos un campo de ingreso de texto y luego con Javascript leeremos esta información. Entonces si tenemos un campo de texto llamado txtMensaje, creamos un función para obtener el texto ingresado en este campo y luego creamos una interface para poder leer desde Javascript.

[as]
import flash.external.ExternalInterface;
function getNombre() {
return txtMensaje.text;
}
ExternalInterface.addCallback(«getNombre», this, getNombre);
[/as]

Luego en el HTML podemos llamar directamente a esta función, anteponiendo el nombre del elemento flash, es decir si incluimos esta película flash utilizando SWFObject donde asignamos como ID mymovie, función para llamar los datos desde flash sería:

<html>
<head>
<title>Flash2Javascript</title>
<script type="text/javascript" src="swfobject.js"></script>
<script language="javascript">
function getInfo() {
	alert(document.getElementById("mymovie").getNombre());
}
</script>
</head>
<body>
<div id="flashcontent"></div>
<script type="text/javascript">
   var so = new SWFObject("javascript2flash.swf", "mymovie", "300", "80", "8", "#009933");
   so.write("flashcontent");
</script>
<input type="submit" name="Submit" value="Obtener Nombre" onClick="getInfo();">
</body>
</html>

Con lo cual obtendremos el siguiente resultado:

javascript2flash.gif

Resumiendo para llamar a una función Javascript desde flash utilizaremos el método call y si deseamos que desde Javascript se llame a alguna función de flash tendremos que definirla utilizando la función addCallback.

Finalmente les dejo los archivos con los códigos fuente desarrollados en este post.

Comentarios Total 38 comentarios

abrahan
Publicado: 11/05/2007 3:46 pm

hola he provaado todo y no me funciona tengo que descargar lgo mas par el flash tengo flash 8 y internet explorer 7.0 por que no ponen un archivo para descargar seria de mucha utilidad gracias….

unijimpe
Publicado: 11/05/2007 4:03 pm

Los archivos del ejemplo funcionando esta disponibles al final del post. De todas formas pongo el enlace: http://www.box.net/public/y65rlv6a91

abrahan
Publicado: 11/05/2007 4:36 pm

hay que configurar el explorador por que me da un error que dice que el objeto no acepta el metodo y el error esta en l linea 7

abrahan
Publicado: 11/05/2007 5:51 pm

Gracias ya me funciono…
Esta muy bueno, me va a ayudar mucho….

abrahan
Publicado: 11/05/2007 9:20 pm

tengo un problema con document.getElementById(«mymovie»).getNombre() me a un error en esa linea dice que el objeto no acepta est propiedad o metodo que sera lguna fall en el archivo swfobject de verdd no se me gustria que me ayudaran agradesco su pronta respuesta

oliver
Publicado: 20/07/2007 5:28 pm

Hola:

He probado el ejemplo navegando en el sitio y me funciona. Pero cuando descargo los ficheros y los pruebo desde mi computadora me dice que el objeto no acepta esta propiedad.

Agredeceria mucho si alguien me ayudara.

Gabriel
Publicado: 29/08/2007 1:25 pm

solo funciona bajo servidor, en local tal cual no funciona

aldo
Publicado: 24/09/2007 9:58 am

Bueno, pero le falta mas detallado con Cristalab por ejemplo

Marcelo
Publicado: 02/11/2007 2:07 am

Esta perfecta esta información, ahi esta todo lo que se necesita, en cristalab han hecho demasiado lio.

Bueno, aca una pregunta para ver si alguien sabe si se puede.

Yo tengo un cuadro de texto con texto html.
en el texto html tengun un href, que quiero que haga una accion dentro del flash.
por ej. play()
alguien sabe si esto es posible????

Lo tuve que solucionar con javascript pero lo insólito es eso, tengo que llamar una funcion javascript que llame una función en actionscript. usando href=’javascript:llamarFuncion(…. etc…

Marcelo
Publicado: 02/11/2007 2:19 am

bueno,
tuve suerte y lo encontré muy rapido, si se puede, aca lo pongo por si alguien lo necesita.

unijimpe
Publicado: 02/11/2007 2:36 am

Para ello existe una función llamada asfunction, que te permite llamar directamente a funciones de flash, por ejemplo para llamar a una función llamada playMovie que esta en el root:

<a href="asfunction:_root.playMovie">play</a>

Andrés
Publicado: 13/11/2007 4:05 pm

Hola, queria saber si hay alguna forma de configurar el flash player para realizar pruebas locales con librerias externas javascript.

Jauuu
Publicado: 26/11/2007 8:58 am

Cuando llamo a la función javascript mediante la clase ExternalInterface, ésta me devuelve un null, cuando me tendría q devolver el contenido de la barra de direcciones. Y en el browser me sale el siguiente error javascript: el objeto no acepta esta propiedad o método.
Qué puede pasar?
He puesto los parámetros allowScriptAccess a ‘always’ en el html q llama al flash.

marlet pereira
Publicado: 06/02/2008 6:04 pm

hola… necesito hacer un juego de un conejo que salta y como frutas. pero las frutas son imagenes aleatorias que deben salir y moverse solas como el juego de happy rabbit que aparece por google pero no se el codigo que debo utlilizar para que se muevan sera que pueden ayudarmen lo mas antes posible.. se les agradece saludos

marlet pereira
Publicado: 06/02/2008 6:06 pm

ah pero estoy trabajando en net beans version 5.0….(java)

victor
Publicado: 02/05/2008 3:31 pm

Hola
Me Pueden Ayudarme
porque en mi computadora esta mal cuando quiero abrir el gunbound de la pagina me sale javascript porque si yo lo tengo instalado el java man

FER
Publicado: 21/06/2008 1:02 pm

Cuando llamo a la función javascript mediante la clase ExternalInterface, ésta me devuelve un null, cuando me tendría q devolver el contenido de la caja de texto. Y en el browser me sale el siguiente error javascript: el objeto no acepta esta propiedad o método.
Qué puede pasar?

Renatto
Publicado: 01/08/2008 8:52 am

Hola…..tengo mi animacion pero solo quiero que ingrese la hora que se actualiza cada segundo y la fecha, y no hacer niungun evento de boton…..¿se podra?

Jose
Publicado: 08/10/2008 11:04 pm

Hola, tengo una calculadora financiera en HTML y necesito embeberla un una pagina que esta en flash. He tratado de hacerlo utilizando la clase External Interface, pero no me funciona. Como lo puedo hacer?

unijimpe
Publicado: 08/10/2008 11:16 pm

Jose, Flash permite incluir algunos tags de HTML como esta explicado en http://blog.unijimpe.net/incluir-html-en-flash/ pero no permite embeber un html completo, solo se permite cargar archivos: swf, jpg, png, gif, mp3, flv, entre otros.

zInNeR
Publicado: 27/10/2008 11:44 am

Nota: Esta aplicación funciona perfectamente… o funcionaba hasta la aparición de Flash Player 10. Tenía varias aplicaciones en mi web que utilizaban este método, pero extrañamente dejaron de funcionar. Después de una pequeña investigación me di cuenta de que en las computadoras donde había actualizado al Flash player 10 es donde ocurría el error (siempre te devuelve un «Null»), sin embargo en aquellas que conservan el Flash Player 9 continua funcionando. Hasta donde sé esto se debe a alguna actualización de seguridad en FP10, pero dudo por ahora como resolverlo. ¿Alguna idea?

unijimpe
Publicado: 27/10/2008 10:06 pm

Hola, he instalado el Flash Player 10 y los ejemplos me siguen funcionando correctamente, revisa es el problema es ExternalInterface que es lo que utilizamos para comunicar Flash y Javascript, quizá sea otra cosas lo que falla.

Marcelo
Publicado: 09/02/2009 10:08 am

Hola. Muy buen tutorial, felicitaciones!!! Lo que quisiera saber es lo siguiente:
Tengo 2 solapas (tabs) y en ambas se reproduce un video al seleccionar cada una de ellas.
¿cómo hago para detener la reproducción de la solapa1 y que vuelva al principio si selecciono la solapa2?
Gracias a todos.

Billy Linares Hernández
Publicado: 11/09/2009 5:14 pm

Gracias, esto está muy bueno… yo necesitaba algo así (se comunicar flash solicitando datos a una base de datos en MySQL, pasando los datos en XML a traves de PHP, pero no sabía como enviar datos a flash.)

Explorer 6
Publicado: 05/10/2009 9:41 am

No consigo que funcione para explorer 6, las funciones solo van con Firefox y superior a IE6 ¿Sabe alguien por que?

cristian
Publicado: 27/10/2009 9:57 am

Hola, unijimpe y a quien este online, miren estoy creando una web 100% flash, pesa 420 kb pero tarda mas cargar que otra web que pesa 547 kb, donde esta el problema? como puedo cargar una galeria de imagenes en java script a mi flash? es posible? quiero que la galeria sea externa y que mi flash solo la llame y se cargue ahi. Gracias por su ayuda.

Joaquín
Publicado: 24/11/2009 3:44 pm

Unijimpe: muchas, muchísimas grachas, me ha sido de gran ayuda.
Cristian: puedes visitar http://www.tutoriales-flash.com/tutorial.php?id_tuto=29 y hacer una galería con fotos en flash. Yo nunca en toda mi vida he programado en ActionScript y he estado más de una semana peleándome con ese código para saber cómo funciona y adaptármelo, pero se puede jeje. Ánimo y un saludo.

Cesar
Publicado: 17/12/2009 3:43 pm

Hola:
Muy bueno el manual.

Respecto a la comunicación Javascript a Flash

Cómo hago para obtener el valor obtenido de la función Javascript y asignar este valor a un asp:textbox? y ya no enviar con un alert este valor sino asignar a un asp:textbox? como en el ejemplo.

Espero haberme hecho entender.

Gracias.

Carles
Publicado: 01/07/2010 6:20 am

Yo uso actionscript3 y no me funciona, alguien me puede ayudar?

Alfredo
Publicado: 02/08/2010 8:56 pm

Muchas gracias por tu Post, me ha sido de mucha ayuda.

andres morales
Publicado: 21/08/2010 12:58 pm

gracias a todos

Gustavo Gonzales
Publicado: 03/10/2010 12:13 am

Como hago esto desde Visual Basic 6

Pancho
Publicado: 24/01/2011 6:31 pm

Hola, bajé los archivos y los probé localmente y no me funcionan localmente ni en ie8, ni en firefox, ni en chrome.
Los subí y desde la web funcionan lo más bien.
Supongo que el problema debe estar en la configuración de mi pc.
Veo que el problema es recurrente con mucha gente.
Alguien lo ha podido solucionar?
Gracias si me pasan el dato.
Saludos!!

HAX
Publicado: 20/05/2011 8:40 pm

Muchas gracias !; me sirve el primer ejemplo, para poder ejecutar una funcion en javacript, para obtener el resultado de que navegador y que sistema operativo esta usando el usuario, para que en flash muestre los datos !!.

Diego
Publicado: 12/07/2011 2:01 pm

Hola, estoy armando un sitio que tiene varios estilos CSS que cambian dinámicamente mediante Javascript. Cada estilo de página lleva un reproductor Flash de MP3, pero no logro llamar a los reproductores desde Javascript, para que cambien junto con cada estilo (supongo que debería agregar alguna variable al mismo código que uso para hacer los cambios de estilo, pero no sé cuál es) Si pudieras darme una mano con el código necesario me harías un gran favor (ya hace meses que estoy trabado con esto) El sitio en construcción es http://www.oscuriclaros.com.ar (preferiría que no aparezca la dirección en este comentario) y perdón si no estoy escribiendo en el apartado correspondiente.

Gracias por anticipado…

Diego

Chester
Publicado: 05/10/2011 2:12 pm

Hola, se que voy a preguntar algo medio imposible y obvio, pero bueno…
Se puede pasar variables indicando el nombre del flash?. Es decir, si en una hoja se encuentran varios swf con el mismo nombre y con la misma variable, todos compartirían la misma información. En cambio me gustaría poner varios .swf con la misma programación (mismo codigo AS)pero que cada uno ejecute su información de acuerdo a la variable del form. Espero que se entienda :P.
Gracias.

Jonathan
Publicado: 06/03/2012 8:41 am

Como seria la funcion JS que debería utilizar para tomar la variable de FLASH (URL de un archivo HTML) y cargar dicha variable en un DIV.

No encuentro algo concreto en la web sobre esto.

La idea es tener un menú flash en una web HTML y que dicha WEB actualise, cada vez que preciono un boton del menu, una parte de ella y no toda.

Muchas gracias de antemano!

Bostero
Publicado: 25/05/2014 10:44 am

Hola,
En esa pagina anda pero en otra página html no funciona, puse las urls de las páginas flash2javascript.swf y swfobject.js luego pongo el html todo correcto pero al generar un nombre me dice «null» es raro no? podes poner el link de descarga porfavor

 

Comentar

En este blog los comentarios están moderados, serán mostrados cuando el administrador los apruebe. Por favor, evita comentarios ofensivos u obscenos por que no serán aprobados.
Si deseas publicar código fuente debes hacerlo entre las etiquedas <code> y </code>, además debes reemplazar los carácteres < por &lt; y > por &gt;.

(Requerido)

(Requerido, no será publicado)

(Requerido)

(Tags aceptados: <a> <em> <strong> <code> <ul> <li>)