Cristalab

Cómo comunicar Flash y JavaScript en ActionScript 3

   Foros de discusión -> Tips, ¡Envía tus trucos aquí!
Mensaje Autor
Mensaje Publicado: Mar Dic 25, 2007 4:46 pm     Citar   firefox 
En ciertas ocasiones, necesitamos comunicar Flash con JavaScript, para eso estábamos acostumbrado a usar fscommand(), y más recientemente la clase ExternalInterface, que está disponible desde Flash 8, y también en ActionScript 3, con algunos cambios.

La clase ExternalInterface sustituye por completo a fscommand() y es de uso recomendado desde la nueva versión de ActionScript y está disponible en:

  • Internet Explorer para Windows (5.0 y versiones posteriores)
  • Firefox 1.0 o posterior
  • Mozilla 1.7.5 o posterior
  • Netscape 8.0 o posterior
  • Safari 1.3 o posterior
  • además de una aplicación contenedora que utilice una instancia del control ActiveX de Flash Player.

En todo caso para saber si tenemos o no la posibilidad de usar esta clase, siempre podremos recurrir a:

Código :

trace(ExternalInterface.available);
Si retorna true, es porque andamos en el camino correcto.

Sobre las mejoras con respecto a fscommand(), cito a la ayuda de ActionScript:

  • Se puede utilizar cualquier función de JavaScript, no sólo que se usan con la función fscommand().
  • Se puede pasar un número arbitrario de argumentos y los argumentos pueden tener el nombre que se desee; no existe la limitación de pasar un comando con un único argumento de tipo cadena. Esto hace que la API externa sea mucho más flexible que fscommand().
  • Se pueden pasar diversos tipos de datos (como Boolean, Number y String); ya no se está limitado a los parámetros de tipo String.
  • Se puede recibir el valor de una llamada y ese valor vuelve inmediatamente a ActionScript (como valor devuelto de la llamada que se realiza).

Bien, ahora al código, lo primero que haremos es importar la clase necesaria para poder trabajar con ExternalInterface (trabajaremos todo el código en el FLA). Además crearemos un campo de texto dinámico llamado "campo".

Código :

import flash.external.ExternalInterface;

Ahora para poder llamar una función de JavaScript, utilizamos el método call, que recibe el nombre de dicha función:

Código :

campo.text = String(ExternalInterface.call( "saludar" ) );

Le hacemos un casting a String para poder ponerlo en el campo de texto dinámico.

En el HTML tendríamos:

Código :

function saludar(){
   return ("Hola gente");
}

Pueden ver el ejemplo aquí

Si queremos pasar un parametro (o más) desde Flash, agregamos al código Actionscript:

Código :

campo.text = String(ExternalInterface.call("saludar1","zguillez"));

Y en el html:

Código :

function saludar1(nombre){
   return ("Hola "+nombre);
}

Pueden ver el ejemplo aquí

Bien, hasta aquí vimos como llamar a una función JavaScript desde ActionScript y poder mostrar el resultado en un campo de texto dinámico. Ahora haremos el proceso al revés , llamaremos de JavaScript a una función de ActionScript.

En este ejemplo, llamaré desde el body:
<body onload="cambiaTitle()">
A una función que mostrará un Alert y este a su vez, llamará a una función ActionScript.

Para este propósito usaremos el método addCallback que recibe dos parámetros, el primero es el nombre de la funcion de javascript en string y el segundo, el nombre de la función de ActionScript que ejecutaremos (tiene que ser función).

Código :

var nombre:String = "usagi";
function callMe():String {
   return nombre + "_" + Math.random() * 100;
}
ExternalInterface.addCallback("callJavaScript", callMe);

He creado una funcion callMe que retorna un String (lo enviará a JS) donde tomará la variable nombre y le agregará un número aleatorio (sólo para efectos del ejemplo)

Y en el HTML escribo:

Código :

function cambiaTitle(){
   alert(ejemplo3.callJavaScript());   
}

Pueden ver el ejemplo aquí

Cuando hacemos este proceso debemos tener en cuenta algunas cosas importantes:

El Object debe tener el id igual al que usamos al momento de invocar la función javascript

<object id="ejemplo3" ... >
<param name="allowScriptAccess" value="always" />


Lo mismo sucede con el embed
<embed name="ejemplo3"
allowScriptAccess="always" ...

Estos cambios deben de hacerse, sino no funcionaría. Asimismo, cambiar el parametro allowScriptAccess a always

Los id y name deben ser los mismo que utilizamos en JS para poder identificar con quien quieres interacturar:
alert(ejemplo3.callJavaScript());


Por otro lado, también podemos además devolver desde JavaScript una respuesta.

Sólo tenemos que recibir un parámetro en nuestra función de ActionScript:

Código :

var nombre:String = "Mariux: ";
function callMe(name:String):String {
   return nombre + name;
}
ExternalInterface.addCallback("callJavaScript", callMe);



Y pasar el mensaje desde JavaScript:

Código :

function cambiaTitle(){
   alert(ejemplo4.callJavaScript("Mensaje desde JAVASCRIPT"));   
}

pueden ver el ejemplo aquí

Hemos visto las formas como poder utilizar la clase ExternalInterface de una manera simple, limpia y fácil. Espero les sirva.

Saludos.
 _________________
U_U SWAT U_U

eldervaz
SWAT Team

Héroes Premio_Secretos SWAT
clabLevel: 3258 Genero:Masculino
Lima - Perú
11 Tutoriales
7 Tips

MP Web     Google Talk  MSN Messenger  
Volver arriba
Mensaje Publicado: Mar Dic 25, 2007 10:35 pm     Citar   firefox 
Muy bueno eldervaz. Thumbs up
 _________________

Carloz.Yanez
SWAT Team

Héroes SWAT
clabLevel: 2374
Entrance to Hell
3 Tutoriales
31 Tips

MP Email         
Volver arriba
Mensaje Publicado: Mie Dic 26, 2007 5:32 pm     Citar   firefox 
Muy bien Elder. Excelente tip! Thumbs up
 _________________
Se decente, no uses loadMovie...
Nunca maestro, siempre aprendiz...

The Fricky!

Premio_Secretos
clabLevel: 1880
Piccola Venezia...

3 Tips

MP Email Web     Google Talk    
Volver arriba
Mensaje Publicado: Vie Dic 28, 2007 2:36 am     Citar   firefox 
Ala man ¿todo bien?, me parece ó.. estás llamando a Usagi? mmmm

Muy buen tip man, podría servir para aquellos clientes especiales miau .

(ristalab


clabLevel: 11 Genero:Masculino



MP Email         
Volver arriba
Mensaje Publicado: Vie Dic 28, 2007 10:51 pm     Citar   opera 
No se porque no funciona en Opera 9.25 alguien me podría explicar porque? Aw Crap

David_blog
Invitado






        
Volver arriba
Mensaje Publicado: Sab Dic 29, 2007 1:57 am     Citar   opera 

David_blog escribió:

No se porque no funciona en Opera 9.25 alguien me podría explicar porque? Aw Crap

Hola David, lo probé y si funciona, lo q sucede con los dos ultimos link, ya es por parte de JavaScript, pero el ExternalInterface va bien.

Quizas con la invocación en JS. Triste
 _________________
U_U SWAT U_U

eldervaz
SWAT Team

Héroes Premio_Secretos SWAT
clabLevel: 3258 Genero:Masculino
Lima - Perú
11 Tutoriales
7 Tips

MP Web     Google Talk  MSN Messenger  
Volver arriba
Mensaje Publicado: Mie Ene 23, 2008 1:26 pm     Citar   firefox 
los links tienen un destino sin contenido Triste

Lucas_blog
Invitado






        
Volver arriba
Mensaje Publicado: Mie Ene 23, 2008 2:50 pm     Citar   firefox 
Exelente tip eldervaz.!, como de costumbre, ! miau .

Zandy

Héroes
clabLevel: 947 Genero:Masculino
www.cristalab.com

3 Tips

MP         
Volver arriba
Mensaje Publicado: Lun Feb 11, 2008 12:39 am     Citar   msie 
Buenas,

Estoy probando en internet explorer 7 y no me funciona, ninguno de los ejemplos de la web, ni tampoco cuando he intentado hacerlo en mi servidor. Solo comentar que tenia un codigo prácticamente igual en AS2 que me funcionaba y al migrarlo me han aparecido estos problemas.

dac_blog
Invitado






        
Volver arriba
Mensaje Publicado: Mar Feb 12, 2008 11:22 pm     Citar   firefox 
Sorpresa Excelente, gracias
 _________________
JoH
Visita Weboniar

JoH


clabLevel: 103 Genero:Masculino
Colombia

2 Tips

MP Web         
Volver arriba
Mensaje Publicado: Mar Mar 04, 2008 2:52 pm     Citar   firefox 
hola muchas gracias por el codigo, pero no me funciona en IE7,

ixs_blog
Invitado






        
Volver arriba
Mensaje Publicado: Mie Abr 09, 2008 11:53 pm     Citar   firefox 
que tal, tengo este error en firefox al llamar una funcion de flash;

Código :


Error: document.getElementById("movie").callMe is not a function
Archivo de origen: http://direccion/home.php
Línea: 91


que podria ser?

Gracias
 _________________
A veces no entiendo!

Chevy


clabLevel: 128 Genero:Masculino
Ecuador

1 Tips

MP       MSN Messenger  
Volver arriba
Mensaje Publicado: Sab Abr 12, 2008 12:26 am     Citar   firefox 
Alabanza
 _________________

I'm perfect in wickness

penHolder


clabLevel: 1778
| mdz |

19 Tips

MP Web     Google Talk    
Volver arriba
Responder al tema    Foros de discusión -> Tips, ¡Envía tus trucos aquí! Todas las horas son GMT
Página 1 de 1

Respuesta Rapida
Nick: 

  Citar el ultimo mensaje
Adjuntar tu firma

Mostrar mensajes de anteriores:
  

 


Cristalab BloodBerry Style © 2006 Cristalab
Powered by phpBB © 2001, 2002 phpBB Group