Un amigo diseñador grafico necesitaba comunicar desde una funcion JS hacia Flash, y aquí mi respuesta, pero quise dejar sentado como era (hace un tiempo con versiones anteriores) y hoy con la nueva ExternalInterface.
Sobre una pregunta que me dio nostalgia, ya que hace un par de años dictaba cursos de Flash/Dreamweaver/ASP Clasico (etc, etc) (hay que ganarse la vida), y hoy por falta de tiempo (y de ofrecimientos) solo damos cursos de NET 🙂
Pero por que escribo por aqui sobre esto? Porque con ExternalInterface es al manera actual de comunicarse entre Flash y algun contenedor como un winform en .NET si queremos embeberlo, cuando tenga algun tiempo libre escribire sobre ello, aunque con el potencial de WPF ya no lo deseemos.
Sincrona? Porque podriamos comunicarnos con Flash mediante Webservices, pero eso tambien es otro tema 🙂
UPDATE: 01/10/2008 (testado en IE7, FF3, Chrome, Safari)
Gracias al comentario de Rover que detecto que en Firefox (3.0) no funcionaba, y alli tambien lo teste en Chrome y tampoco se comunicaba desde JS hacia Flash.
Problema:
Esta linea
var flashObject = document.getElementById('ExternalInterfaceDEMO');
No detectaba/encontraba el objecto en el DOM de la pagina
Como utilizaba AC_RunActiveContent.js (el script de Adobe para el antiguo problema de IE que bloqueaba los activex en las paginas objecto object/embed)
Solucion:
Utilizar el conocido SWFObject.js
Para hacerlo simplemente hay que descargarse el script y linkearlo en nuestra pagina
<script type="text/javascript" src="/js/SWFObject/swfobject.js"><!-- // //--></script>
Luego para insertar la pelicula hay que realizar
<script type="text/javascript"> 1:
2: var flashvars = {};
3: var params = {};
4: params.wmode = "transparent";
5: params.bgcolor = "#FFFFFF";
6: var attributes = {};
7: swfobject.embedSWF("ExternalInterfaceDEMO.swf", "ExternalInterfaceDEMO", "550", "400", "8", "/js/swfobject/expressInstall.swf", flashvars, params, attributes);
8:
</script>
<div id="ExternalInterfaceDEMO">
<strong>Ud. necesita actualizar su reproductor de Flash</strong>
<a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Descargar Adobe Flash Player" /></a>
</div>
Como pueden ver el contenedor tiene el ID “ExternalIntefaceDEMO”, y es el que tomara el obejecto incrustado y alli su funcionara
var flashObject = document.getElementById('ExternalInterfaceDEMO');
Esta actualizado el archivo para la descarga.
Un poco de historia…
Hasta Flash 7 la forma de comunicación entre Flash —> Javascript era con el simple getURL y/o fsCommand (todo esto es Actionscript)… en este ultimo para probar habia que acordarse de cambiar algunas cosas.
Para la comunicacion entre Javascript —> Flash era con SetVariable (una ardua tarea, creanme)
Ejemplo:
getURL('j a v a s c r i p t:miFuncionJS('+mensaje+')');
tambien…
fscommand('miFuncionJS', mensaje);
No viene al caso ver como hacer funcionar estas dos ejemplos.. ya que mi comentario es sobre ExternalInterface.
Utilizando ExternalInterface
En la pelicula tendriamos algo asi (a modo de ejemplo) llamamos a un funcion desde Actionscript hacia Javascript llamada Mensaje
Antes que nada importamos la clase: flash.external.ExternalInterface
En la pagina HTML tenemos
<script type="text/javascript" language="javascript">
function Mensaje(texto) {
var txtMensajeHTML = document.getElementById('txtMensajeHTML');
txtMensajeHTML.value = texto;
}
</script>
Desde Flash llamamos a la funcion en en el click (release) del boton.
Si quieres puedes descargar el ejemplo (ver mas abajo)
En el mismo ejemplo…vamos a comunicarnos desde js hacia flash. Aqui en Javascript tenemos:
function ParaFlash(msj){
var flashObject = document.getElementById('ExternalInterfaceDEMO');
if (flashObject != null) {
flashObject.MensajeHaciaFlash(msj);
} else {
alert("Error. No se ha podido comunicar con Flash. Verifique");
}
}
Por si estas mirando el codigo de arriba veras que accesamos al ID de la pelicula flash, es decir “debe tener un ID”
El id del tag
object debe ser el mismo que el name del tag
embebed Actualizacion: Ahora utilice SWFObject (Ver mas arriba)
Idem si utilizamos SWFObject o AC_RunActiveContent que nos ayudan a escribir la pelicula en nuestras paginas. A tenerlo en cuenta
Actualizacion: Ahora utilice SWFObject (Ver mas arriba)
En ActionScript
en el HTML llamamos a la funcion:
<textarea id="txtMensajeHTML" cols="40" name="S1" rows="6"></textarea>
<br />
<input id="btnVerMensajeParaFlash" type="button" value="Mensaje Hacia Flash"
onclick="ParaFlash(txtMensajeHTML.value);" /></p>
NOTA: Esto se testea en un servidor web, no pruebes de forma local, para hacerlo de forma local deberias cambiar el parametro allowScriptAccess al valor “always” (por razones de seguridad). Pero tambien deberias configurar tu reproductor flash (ver video).
<param name="allowScriptAccess" value="sameDomain" />
Por
<param name="allowScriptAccess" value="always" />
Tambien configurar el reproductor (ver video)
Limitaciones para utililizar ExternalInterface
ExternalInterface funciona en:
- Version de Flash 8 o superior…
- Navegadores como:
Windows Internet Explorer 5.0 o superior,
Firefox 1.0 o superior
Mozilla 1.7.5 o superior
Netscape 8.0 o superior
Safari 1.3 o superior.
Opera 9 o superior.
y cualquier broser que soporte NPRuntime API
- Puedes preguntar si esta disponible para utilizar con la propiedad ExternalInterface.available
Lo testee en IE7, FF3, Chrome y Safari
Descargar ejemplo
Actualizada al 01/10/2008: con SWFObject
Que tiene esta interfaz sencilla donde podras enviar tanto desde flash hacia js como desde js hacia flash un texto.
UPDATE: 01/10/2008
Como Flash cuando arma el HTML para testear la pelicula lo realiza con el script AC_RunActiveContent.js, que era la solucion de Adobe para el problema del bendito IE que bloqueaba los objectos object/embeb
Mas arriba ya explique el problema y la solucion con SWFObject
<script language="javascript" type="text/javascript">
if (AC_FL_RunContent == 0) {
alert("This page requires AC_RunActiveContent.js.");
} else {
AC_FL_RunContent(
'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0',
'width', '550',
'height', '400',
'src', 'ExternalInterfaceDEMO',
'quality', 'high',
'pluginspage', 'http://www.macromedia.com/go/getflashplayer',
'align', 'middle',
'play', 'true',
'loop', 'true',
'scale', 'showall',
'wmode', 'window',
'devicefont', 'false',
'id', 'ExternalInterfaceDEMO',
'bgcolor', '#ffffff',
'name', 'ExternalInterfaceDEMO',
'menu', 'true',
'allowFullScreen', 'false',
'allowScriptAccess', 'sameDomain',
'movie', 'ExternalInterfaceDEMO',
'salign', ''
); //end AC code
}
</script>
Enlaces
