Converse de Javascript y ActionScript Introducción a ExternalInterface

ActionScript y Javascript. Ambos idiomas son geniales por sí solos, pero ¿alguna vez te has preguntado qué podrías hacer si pudieran hablar entre ellos? Pues estas de suerte! Ahí es donde la Clase ExternalInterface entra en escena. Sígueme mientras te enseño lo básico..

Foto de Dave Spellman..

Paso 1: La clase ExternalInterface

Donde puedo usarlo?

Actualmente, la Clase ExternalInterface está disponible en los siguientes navegadores:

Internet Exlplorer 5.0+
Netscape 8.0+
Mozilla 1.7.5+
Firefox 1.0+
Safari 1.3+

Que puedo hacer con esto?

La clase ExternalInterface le permite:

Llame a cualquier función de Javascript desde ActionScript.
Llame a cualquier función de ActionScript desde Javascript.
Pasar argumentos y parámetros entre los dos..
Recibe un valor de retorno de una función de Javascript.
Devuelve un valor a una función de Javascript.

Paso 2: Vamos a crear nuestra página HTML

Nos meteremos de lleno en esto y comenzaremos con un ejemplo realmente básico. Primero debemos crear nuestra página HTML, así que encienda su Editor HTML favorito y comencemos. Crea un formulario dentro de tu HTML.

     Prueba de interfaz externa 1     Texto de flash

Paso 3: Función de referencia SWF

Para hacer referencia fácilmente al SWF en nuestro HTML, vamos a crear una función de Javascript para que podamos hacer referencia al SWF en nuestro código. Para lograr esto, coloque este script entre las etiquetas "head".

Esta función devolverá el SWF que se pasa como parámetro de la función flashMovie (). Por ejemplo, "flashMovie ('testMovie');" devolvería el swf con un id de 'testMovie'.

Paso 4: Crear una función para recibir valores de ActionScript

Ahora crearemos una función de Javascript que acepta un valor de ActionScript. Coloca esto dentro de nuestro guión ya hecho.
etiquetas.

 function sendToJS (value) document.forms ["myForm"]. output.value = value;

Esto tomará el valor que obtengamos del código ActionScript y lo ubicaremos en nuestro campo de texto con un id de "salida".

Paso 5: Abre Flash

Vamos a abrir Flash y empezar a trabajar en el ActionScript. Cree un nuevo archivo ActionScript 3.0 y cree una nueva clase de documento llamada "EIFace1".

Paso 6: Configurar la clase de documento

Usaré FDT para escribir EIFace.as, pero puede utilizar cualquier editor ActionScript con el que se sienta cómodo. Comenzaremos por crear un shell de clase de documento estándar.

 paquete import flash.display.Sprite; / ** * @author kreativeKING * / public class EIFace1 extiende Sprite función pública EIFace1 ()

Paso 7: Creando nuestro campo de texto

Crea el campo de texto que usaremos para enviar nuestros valores..

 field1 = new TextField (); field1.type = TextFieldType.INPUT; field1.width = 300; field1.height = 20; field1.border = true; field1.borderColor = 0x565656; field1.background = true; field1.backgroundColor = 0x121212; field1.defaultTextFormat = new TextFormat ("Arial", 14, 0xEFEFEF); field1.x = stage.stageWidth * .5 - field1.width * .5; field1.y = stage.stageHeight * .5- field1.height * .5; stage.addChild (field1);

Paso 8: Crear un botón de envío

Crea un botón para hacer clic. No soy un fanático del uso de componentes, por lo que construiré un botón desde cero utilizando Flash IDE. Le invitamos a crear un cuadro o usar el componente SimpleButton; Te dejaré usar esos jugos creativos. Si no necesita más ayuda para crear un botón, puede pasar al Paso 11.

Comience por crear un rectángulo con la herramienta primitiva de rectángulo. No proporcionaré valores específicos, solo siéntelo para establecer que te gusta.

Paso 9: Continuar la creación del botón

Convertir el rectángulo en un clip de película.

Cree una nueva capa dentro del clip de película y coloque el texto "Enviar a JS".

Paso 10: Exportar para ActionScript

Vaya a su biblioteca, haga clic derecho en el botón y Exportar para ActionScript.

Paso 11: Código en el botón

Vamos a codificar nuestro botón en nuestra clase de documentos.

 button1 = new SendButton (); button1.x = stage.stageWidth * .5 - button1.width * .5; button1.y = field1.y + 30; stage.addChild (button1);

Paso 12: ¿Dónde estamos ahora?

Así es como debería aparecer tu página HTML.

     Prueba de interfaz externa 1      Texto de flash

La clase de documentos debería tener este aspecto.

 paquete import flash.display.MovieClip; importar flash.display.Sprite; importar flash.text.TextField; importar flash.text.TextFieldType; importar flash.text.TextFormat; / ** * @author kreativeKING * / public class EIFace1 extiende Sprite private var field1: TextField; privado var button1: MovieClip; función pública EIFace1 () field1 = new TextField (); field1.type = TextFieldType.INPUT; field1.width = 300; field1.height = 20; field1.border = true; field1.borderColor = 0x565656; field1.background = true; field1.backgroundColor = 0x121212; field1.defaultTextFormat = new TextFormat ("Arial", 14, 0xEFEFEF); field1.x = stage.stageWidth * .5 - field1.width * .5; field1.y = stage.stageHeight * .5- field1.height * .5; stage.addChild (field1); button1 = new SendButton (); button1.x = stage.stageWidth * .5 - button1.width * .5; button1.y = field1.y + 30; stage.addChild (button1);

Paso 13: Crear ActionScript para la función de Javascript

Ahora necesitamos crear la función que envía los datos de Flash a Javascript. Esta será una función simple que envía
una cuerda.

 button1.addEventListener (MouseEvent.CLICK, sendToJS); función privada sendToJS (e: MouseEvent): void if (ExternalInterface.available) ExternalInterface.call ("fromAS", field1.text);

Primero agregamos un detector de eventos a nuestro botón, dentro de nuestro constructor Clases de documentos. Entonces creamos nuestro oyente. los ExternalInterface.available la propiedad verifica si nuestro navegador puede usar la clase ExternalInterface. No es necesario usarlo, ya que sabemos que nuestro navegador puede admitirlo, pero es una buena práctica para desarrollar para la web y nunca estamos seguros de si el navegador del cliente será compatible..

los ExternalInterface.call () La función es lo que usamos para llamar a nuestra función de Javascript. El primer parámetro es el nombre de la función de Javascript que queremos llamar. Es el nombre de nuestra función en Javascript como una cadena. El segundo parámetro es el valor que queremos pasar a la función de Javascript. En este caso, estamos pasando el valor de nuestro campo de texto..

Nota: puede pasar tantos parámetros como desee, pero el primer parámetro debe ser el nombre de la función de Javascript.

Paso 14: Tiempo de prueba

Antes de que podamos probar, primero tenemos que integrar nuestro SWF en el HTML. Debo enfatizar que es mejor usar SWFObject y no el método predeterminado que Flash usa para incrustar archivos SWF. Publicemos nuestro SWF, configuremos SWFObject e insertemos nuestro archivo.

Aquí está el código SWFObject Embed que se encuentra en el encabezado del archivo HTML:

También es importante que le des una identificación al SWF. Esto es importante con el uso de ExternalInterface y para que lo utilicemos utilizando la función Javascript que creamos anteriormente. Vamos a crear nuestro div que alojará el archivo SWF.

  Esto será reemplazado con un SWF. Si no necesitas actualizar tu Flash Player.

Aquí están la clase de documentos y el archivo HTML hasta este punto:

 package import flash.external.ExternalInterface; import flash.events.MouseEvent; importar flash.display.MovieClip; importar flash.display.Sprite; importar flash.text.TextField; importar flash.text.TextFieldType; importar flash.text.TextFormat; / ** * @author kreativeKING * / public class EIFace1 extiende Sprite private var field1: TextField; privado var button1: MovieClip; función pública EIFace1 () field1 = new TextField (); field1.type = TextFieldType.INPUT; field1.width = 300; field1.height = 20; field1.border = true; field1.borderColor = 0x565656; field1.background = true; field1.backgroundColor = 0x121212; field1.defaultTextFormat = new TextFormat ("Arial", 14, 0xEFEFEF); field1.x = stage.stageWidth * .5 - field1.width * .5; field1.y = stage.stageHeight * .5- field1.height * .5; stage.addChild (field1); button1 = new SendButton (); button1.x = stage.stageWidth * .5 - button1.width * .5; button1.y = field1.y + 30; stage.addChild (button1); button1.addEventListener (MouseEvent.CLICK, sendToJS);  función privada sendToJS (e: MouseEvent): void if (ExternalInterface.available) ExternalInterface.call ("fromAS", field1.text);

     Prueba de interfaz externa 1       Esto será reemplazado con un SWF. Si no necesitas actualizar tu Flash Player.
 
   Texto de flash

Ahora abre tu envoltorio HTML y pruébalo. Verá que el valor del campo de texto en flash se convierte en el valor del campo de texto en nuestro HTML. De un vistazo, el código detrás de esto es bastante simple y directo. Ahora intentemos enviar alguna información de Javascript a ActionScript.

Paso 15: Hacer campos adicionales

Vamos a crear campos adicionales para enviar información de Javascript a ActionScript..

 Enviar texto a Flash

 field2 = new TextField (); field2.type = TextFieldType.DYNAMIC; field2.width = 300; field2.height = 20; field2.border = true; field2.borderColor = 0x565656; field2.background = true; field2.backgroundColor = 0xEFEFEF; field2.defaultTextFormat = new TextFormat ("Arial", 14, 0x121212); field2.x = stage.stageWidth * .5 - field2.width * .5; field2.y = field1.y - 50; stage.addChild (field2);

Paso 16: Crear la función de Javascript a ActionScript

Necesitamos crear una función que envíe el valor desde nuestro HTML a Flash. Esto es similar a la función que creamos para enviar valores de ActionScript a Javascript.

 función sendToFlash (valor) flashMovie ("EIFace"). sendToFlash (valor);

Utilizamos la función que creamos anteriormente para hacer referencia al SWF incorporado. Ahora debemos ingresar a nuestra Clase de documentos y configurar Flash para recibir valores de Javascript y crear una nueva función que Javascript llamará.

Paso 17: Agregar devoluciones de llamada

Para registrar las funciones de Javascript, necesitamos agregar devoluciones de llamada para que Flash sepa lo que estamos intentando enviar cuando llamamos una función de ActionScript. Finalmente comencemos a llamar algunos ActionScript..

 función privada addCallbacks (): void if (ExternalInterface.available) ExternalInterface.addCallback ("sendToFlash", fromJS);

los ExternalInterface.addCallback () La función registra una función en ActionScript para ser llamada por Javascript. El primer parámetro es el nombre de la función mediante el cual Javascript conocerá la función. El segundo parámetro es la función real..

En pocas palabras, eso significa que en nuestro Javascript, llamaríamos sendToFlash () y que invocaría la función fromJS () en ActionScript..

Paso 18: Creando desde JS ()

Ahora vamos a crear la función fromJS (). Esta es una función muy simple que asignará el valor pasado al campo de texto.

 función privada fromJS (value: String): void field2.text = value;

Tiempo para otra prueba y ver lo que se nos ocurre. Así es como se ven ahora la Clase de documentos y el HTML:

 package import flash.external.ExternalInterface; import flash.events.MouseEvent; importar flash.display.MovieClip; importar flash.display.Sprite; importar flash.text.TextField; importar flash.text.TextFieldType; importar flash.text.TextFormat; / ** * @author kreativeKING * / public class EIFace1 extiende Sprite private var field1: TextField; privado var button1: MovieClip; private var field2: TextField; función pública EIFace1 () field1 = new TextField (); field1.type = TextFieldType.INPUT; field1.width = 300; field1.height = 20; field1.border = true; field1.borderColor = 0x565656; field1.background = true; field1.backgroundColor = 0x121212; field1.defaultTextFormat = new TextFormat ("Arial", 14, 0xEFEFEF); field1.x = stage.stageWidth * .5 - field1.width * .5; field1.y = stage.stageHeight * .5- field1.height * .5; stage.addChild (field1); field2 = new TextField (); field2.type = TextFieldType.DYNAMIC; field2.width = 300; field2.height = 20; field2.border = true; field2.borderColor = 0x565656; field2.background = true; field2.backgroundColor = 0xEFEFEF; field2.defaultTextFormat = new TextFormat ("Arial", 14, 0x121212); field2.x = stage.stageWidth * .5 - field2.width * .5; field2.y = field1.y - 50; stage.addChild (field2); button1 = new SendButton (); button1.x = stage.stageWidth * .5 - button1.width * .5; button1.y = field1.y + 30; stage.addChild (button1); button1.addEventListener (MouseEvent.CLICK, sendToJS); addCallbacks ();  función privada addCallbacks (): void if (ExternalInterface.available) ExternalInterface.addCallback ("sendToFlash", fromJS);  función privada fromJS (value: String): void field2.text = value;  función privada sendToJS (e: MouseEvent): void if (ExternalInterface.available) ExternalInterface.call ("fromAS", field1.text);

     Prueba de interfaz externa 1       Esto será reemplazado con un SWF. Si no necesitas actualizar tu Flash Player.
 
   Enviar texto a Flash   
 
 Texto de flash

Paso 19: Resultados

Como puede ver, al colocar el texto en nuestro campo más reciente y al enviarlo, se envía el valor al campo de texto Flash. El uso de la clase ExternalInterface es muy simple y, a menudo, puede ser útil cuando se crean API y aplicaciones que se pueden manipular fuera de Flash Movie. Por ejemplo, esto se puede implementar en las API del reproductor de video para crear y controlar el video con Javascript.

Paso 20: ¿Quién usa un Javascript clásico más??

Para la mayoría de la gente ahora, nadie está usando realmente el Javascript clásico; jQuery es la ola del futuro. Aquí hay un ejemplo del uso de jQuery en lugar de Javascript clásico.

Aquí está el HTML nuevo y actualizado para usar con jQuery:

     Prueba de interfaz externa 1        Esto será reemplazado con un SWF. Si no necesitas actualizar tu Flash Player.
 
   Enviar texto a Flash   
 
 Texto de flash

Conclusión

Esperemos que ahora tenga una mejor comprensión sobre el uso de la Clase ExternalInterface. Si tiene alguna pregunta o idea sobre qué más le gustaría aprender, simplemente déjeme un comentario o tweeté y veré qué puedo hacer. Espero que hayas aprendido los conceptos y comiences a usarlos en tus propios proyectos. Gracias por leer!

kreativeKING

Código