Cuando se habla de comunicar ActionScript con JavaScript, también se debe hablar acerca de Security Domain (o Sandboxing) o lo que es lo mismo, la seguridad que debe atravesar el Flash Player para comunicar así ambos lenguajes. En este tutorial aprenderemos como ocultar un banner desde una pagina HTML por medio de la comunicación del ActionScript con JavaScript haciendo Cross Site Scripting Unidireccional.

El Cross Site Scripting Unidireccional se refiere a la comunicación del Flash Player (nuestro SWF) con el dominio sobre el cual esta posicionado dicho archivo. Nos centraremos mas en la comunicación entre ambos lenguajes mas que en el desarrollo del banner swf.


1.- Comenzaremos creando un nuevo archivo html en Dreamweaver al que llamaremos demo. Dicho archivo estará alojado en nuestro servidor local; en este caso Apache Server.

Para habilitar a nuestro archivo swf para comunicarse con nuestro dominio por medio de JavaScript, necesitaremos alojar nuestros archivos en un servidor.
Nuestra pagina tendrá un div principal llamado wrapper, y tres div’s dentro de este llamados header, fla y content. El width y el heigth de wrapper serán de 100% y 400px respectivamente.

2.- Dentro de header tendremos un titulo y un subtitulo, el primero: External Interface y el segundo: Comunicando ActionScript y JavaScript. Nuestro div fla tendrá un width de 300px por un heigth de 150px ya que sera el contenedor de nuestro archivo swf.

El div content tendrá un párrafo con el texto: Cerrar banner, el cual tendrá un link vació que ejecutara la función en JavaScript y ocultara el div fla. En la vista de diseño nuestra pagina web debería verse así:

3.- Ahora añadiremos la función en JavaScript abriendo el panel Behaviors desde el menú Window -> Behaviors. Seleccionaremos nuestro párrafo; dentro del panel Tag Inspector tenemos behaviors, dentro del cual seleccionaremos el pequeño botón con signo de mas para así seleccionar Show-Hide Elements, y así visualizar una pequeña ventana de la cual seleccionaremos nuestro div fla y el botón Hide.

De modo que dentro de nuestro código html se añadirá un bloque de script con la función que ocultara nuestro div fla, al dar clic en nuestro enlace.

4.- Abriremos Flash Professional y crearemos un nuevo proyecto de ActionScript 3 con un width de 350 por un height de 150, el cual constara de una animación con ocho layers donde se encontrara nuestro código y nuestros objetos.

Esta animación constara de 50 frames, y dentro del primer frame de nuestro primer layer (al cual llamaremos actionscript) donde incluiremos la función que comunicara ambos lenguajes.
Importamos nuestras librerías:

5.- Nuestro segundo layer lo nombraremos contenido e incluirá un botón al cual le daremos el nombre de instancia cerrar_btn, este sera el botón que ejecute nuestra función en JavaScript. Debajo de nuestras librerías en el primer frame y en nuestro layer actionscript añadiremos la función que ocultara nuestro banner por medio del JavaScript de nuestra pagina.

Dicha función necesita los parámetros de nuestra función en JavaScript, primero el nombre de la función que se ejecutara en el html, segundo el objeto afectado por dicha función, seguido de algún parámetro que reciba dicho objeto (en este caso nulo) y por ultimo la acción a realizar.

6.- Nuestra pagina web esta alojada en un servidor, al cual se accede por medio del siguiente domino local: “localhost:8080“, el cual definiremos en nuestro layer actionscript para que pueda nuestro banner acceder al JavaScript.

Si nosotros no definimos que dominio permitirá el acceso a nuestro swf, simplemente veremos una alerta al ejecutar nuestra pagina web y aunque aceptemos permitirle el acceso a dicho swf, nuestro navegador no sera capaz de ejecutar las funciones declaradas en nuestro archivo.

7.- Exportaremos nuestro proyecto hacia swf y lo copearemos en la carpeta donde se encuentra nuestro archivo html en nuestro servidor. De vuelta en Dreamweaver arrastraremos este swf hacia el interior de nuestro div fla, con lo cual se agregara código a nuestro div el cual hace referencia a nuestro archivo y su ejecución, ademas de que al cargar nuestra pagina web lo primero que hará es evaluar la versión de Flash Player instalado en el equipo.

Ahora al abrir nuestro archivo demo.html localizado en nuestro servidor (localhost:8080/demo.html) visualizaremos nuestro banner incrustado en el html, y ya sea que demos clic al botón cerrar incluido en este swf o que demos clic a nuestro link Cerrar Banner, veremos que nuestro swf junto con nuestro div fla se ocultan.
Para mas información sobre External Interface, aquí.