Comunidad de diseño web y desarrollo en internet online

Flash con otros lenguajes - Parte 1, JavaScript

Muchos de los que no solo programamos en Flash sino en otros lenguajes como Visual Basic o aquellos diseñadores y desarrolladores web, han querido alguna vez que sus scripts se comuniquen e intercambien datos con Flash.

Flash se ha ido desarrollando en el tiempo volviéndose muy dinámico; enriqueciendo su ActionScript, con conexiones a objetos XML, carga de variables por URL y por envío GET y POST, integración con lenguajes dinámicos y muchísimas cosas mas
Pero existe algo que fue desarrollado desde que se publico en Internet el plug-in de Flash, con lo cual podemos intercambiar información entre Flash y otros lenguajes de una manera muy sencilla y ágil, las funciones del Componente ActiveX Shockwave Flash

Este articulo tratara la forma en la que por medio de las propiedades y métodos de este objeto podemos programar muchas cosas mas de las que puede hacer Flash por si solo; la clave solo esta en una función de Flash... el FSCommand

Iniciemos con la integración en paginas HTML de Flash

El primer paso es tener una pagina web HTML lista con el código estándar para colocar una película en nuestra pagina web.

Cree una película de flash con un botón, y a ese botón asignele el siguiente código:

on (release) {
fscommand("comando", "argumentos");
}

Guarde la película con el nombre "Pelicula.fla"

Luego vaya al Menú File>Publish Settings y ahí, escoja publicar Flash y HTML y clickee el botón "Publish", se generaran los archivos SWF de la película y el archivo HTML para ponerlo en la web, el código generado del archivo HTML será así:

<HTML>
<HEAD>
<TITLE>Pelicula</TITLE>
</HEAD>
<BODY bgcolor="#FFFFFF">
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/
shockwave/cabs/flash/swflash.cab
#version=6,0,0,0" WIDTH="550" HEIGHT="400" id="Pelicula" ALIGN="">
<PARAM NAME=movie VALUE="Pelicula.swf"> <PARAM NAME=menu VALUE=false> <PARAM NAME=quality VALUE=best> <PARAM NAME=wmode VALUE=transparent> <PARAM NAME=bgcolor VALUE=#FFFFFF> <EMBED src="Pelicula.swf" menu=false quality=best wmode=transparent bgcolor=#FFFFFF WIDTH="550" HEIGHT="400" NAME="Pelicula" ALIGN=""
TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED>
</OBJECT>
</BODY>
</HTML>

Este es el código normal para la incrustación d una película, resalto el pedazo en el que encontramos en la etiqueta OBJECT el atributo ID con el valor "Película", este atributo será el que nos sirva para manipular la película mas adelante en nuestro código.

Ahora lo interesante, hacer que Flash y JavaScript se integren y compartan datos

Vamos a incluir el primer código de JavaScript necesario para que nuestra película funcione; incluyan este código después de que se la etiqueta BODY

<SCRIPT LANGUAGE="JavaScript">

<!--
  1. var InternetExplorer = navigator.appName.indexOf("Microsoft") != -1;
  2. //Maneja todos los mensajes de FSCommands en una película
  3. function Pelicula_DoFSCommand(command, args) {
  4. var PeliculaObj = InternetExplorer ? Pelicula : document.Pelicula;
  5. //Aquí va a ir nuestro código de manejo
  6. }
  7.  
  8. if (navigator.appName && navigator.appName.indexOf("Microsoft") != -1 && navigator.userAgent.indexOf("Windows") != -1 && navigator.userAgent.indexOf("Windows 3.1") == -1)
  9. {
  10. document.write('<SCRIPT LANGUAGE=VBScript\> \n');
  11. document.write('on error resume next \n');
  12. document.write('Sub Pelicula_FSCommand(ByVal command, ByVal args)\n');
  13. document.write(' call Pelicula_DoFSCommand(command, args)\n');
  14. document.write('end sub\n');
  15. document.write('</SCRIPT\> \n');
  16. }

!-->
</SCRIPT>

Bien, ahora miremos que es lo que hace nuestro código paso a paso.

La línea 1 declara una variable llamada InternetExplorer donde se almacenara un valor trae o false, dependiendo si la película se esta o no ejecutando en Internet Explorer

La línea 3 declara la función que va a manejar los eventos de nuestra película, aquí parare un momento a explicar lo que desencadena los eventos de la película

Un evento es la forma en la que puede reaccionar un programa a una acción realizada por el usuario; en nuestro caso, esta función se llama Pelicula_DoFSCommand(command, args) esta función se desencadenara cada vez que un FSCommand sea generado dentro de nuestra película, vemos que la función inicia con el nombre "Película" porque ese es el nombre que se le asigno en el atributo ID de la etiqueta OBJECT; el evento se llama "DOFSCommand" que es cuando ocurre un FSCommand en nuestra película, esta función tiene como argumentos (command, args) que son los dos valores que puede tomar la instrucción fscommand en nuestra película, y estos son los valores que manipularemos mas tarde.

La línea 4 es por compatibilidad, lo que hace es que se pueda manejar de igual manera la película así el navegador sea Internet Explorer y Netscape, de la siguiente manera

Si el navegador es Internet Explorer

PeliculaObj=Película

Ya que el ID de la etiqueta OBJECT es Película, para Internet Explorer se puede manejar asi

Si no es Internet Explorer

PeliculaObj=document.Pelicula

Ya que esto funciona en todos los navegadores y no habria que preocuparnos por que navegador esta viendo la pagina, siempre manejaremos el objeto por medio de la variable PeliculaObj

Las líneas 8 a la 16 son líneas de compatibilidad para que el manejador de eventos funcione en Internet Explorer, este gestiona los eventos de diferente manera que el resto de los navegadores, ya que para eso creo el Visual Basic Script, lo que hace ese código es que en caso de que el navegador sea el de Microsoft, escribirá en el documento las líneas necesarias para que VBScript gestione los FSComands, y le pase el control al código JavaScript de arriba.

Bien, ya estamos listos para hacer algo interesante con ese código y poder comprobar si existe una comunicación con Flash y JavaScript

Vamos a hacer que aparezca un mensaje de alerta al usuario al darle clic a un botón de Flash, dejemos como quedo el código de nuestro botón en la película y modifiquemos esto en el código HTML

<SCRIPT LANGUAGE="JavaScript">
<!--
  1. var InternetExplorer = navigator.appName.indexOf("Microsoft") != -1;
  2. //Maneja todos los mensajes de FSCommands en una película
  3. function Pelicula_DoFSCommand(command, args) {>
  4. var PeliculaObj = InternetExplorer? Pelicula : document.Pelicula;
  5. //Aquí va a ir nuestro código de manejo
  6. alert("El comando pasado fue : "+command+" y el argumento fue : "+args);
  7. }
  8.  
  9. if (navigator.appName && navigator.appName.indexOf("Microsoft") != -1 && navigator.userAgent.indexOf("Windows") != -1 && navigator.userAgent.indexOf("Windows 3.1") == -1)
  10. {
  11. document.write('<SCRIPT LANGUAGE=VBScript\> \n');
  12. document.write('on error resume next \n');
  13. document.write('Sub Pelicula_FSCommand(ByVal command, ByVal args)\n');
  14. document.write(' call Pelicula_DoFSCommand(command, args)\n');
  15. document.write('end sub\n');
  16. document.write('</SCRIPT\> \n');
  17. }

</SCRIPT>

El código que fue añadido en la línea 6 genera simplemente mensaje para el usuario que le informa que valores fueron pasados por el comando FSCommand en nuestra película

Este código siempre será ejecutado cuando en la película se ejecute una instrucción fscommand.

De esta manera es posible enviarle información de todo tipo a JavaScript desde flash para que este las procese y se las devuelva procesadas... pero ... y ¿como hacemos para que JavaScript le envíe información a Flash?

Para esto deberemos usar una de los métodos de objeto ActiveX Shockwave Flash. El de asignación de variables desde afuera de la película, de la siguiente manera:

Pelicula.SetVariable(‘variable’,valor);

Película : Es el nombre del objeto Película asignado, recuerden que por compatibilidad deben usar en este caso la variable declarada en la función como "PeliculaObj"

SetVariable: Es la instrucción que asigna un valor a una variable en la película, en caso de que la variable no haya sido declarada aun dentro de la película, esta instrucción la creara.

Recibe dos parámetros esta instrucción

Variable: Es el nombre de la variable, debe ir entre comillas.

Valor: Es el valor que le será asignado a la variable; puede ser de tipo String(Cadena o texto) o de tipo Numérico.

Vamos a hacer un corto ejemplo para comprobar que esta instrucción funciona...

En la película vamos a insertar un campo de texto de tipo "Input Text", al cual le vamos a asignar la variable "campotexto" de esta manera:

Como ven en la grafica, existe un campo de texto al que le fue asignado la variable "campotexto"; también esta el botón que habíamos creado antes que contiene la instrucción:

on (release) {

fscommand("comando", "argumentos");

}

Mas adelante cambiaremos esa instrucción.

Ahora, vamos a hacer que un botón nos cambie el contenido de ese campo de texto, mediante HTML y JavaScript

En el código HTML, dentro de la etiqueta BODY inserte este código:

<P><INPUT id ="texto"><INPUT id ="boton"type=button value ="Click Aqui" OnClick ="javascript:ValorEnTexto(texto.value);"></ P>

Y luego, en la etiqueta HEAD inserte este pequeño JavaScript

<SCRIPT LANGUAGE="JavaScript">

<!--Esconde el código de los navegadores que no lo entienden

function ValorEnTexto(valor){

var PeliculaObj = InternetExplorer? Pelicula : document.Pelicula;

PeliculaObj.SetVariable("campotexto",valor);

}

-->

</SCRIPT>

Este ultimo pedazo de código JavaScript lo que hace es pasarle al campo de texto de Flash el valor almacenado en el campo de texto de HTML.

Utilizando el método del objeto Shockwave Flash "SetVariable".

Observen con cuidado que en esta función también declaramos la variable PeliculaObj, recuerden que esta es la manera en la que nos podrá funcionar tanto en Internet Explorer como en Netscape

Prueben la página en el navegador y verán algo asi:

Antes del clic

Después del click

En este punto, el código completo HTML de su página debe parecerse a esto :

<HTML>
<HEAD>
<TITLE>Pelicula</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
var InternetExplorer = navigator.appName.indexOf("Microsoft") != -1;
//Maneja todos los mensajes de FSCommands en una película
function Pelicula_DoFSCommand(command, args) {
var PeliculaObj = InternetExplorer? Pelicula : document.Pelicula;
//Aquí va a ir nuestro código de manejo
alert("El comando pasado fue : "+command+" y el argumento fue : "+args);
}
if (navigator.appName && navigator.appName.indexOf("Microsoft") != -1 && navigator.userAgent.indexOf("Windows") != -1 && navigator.userAgent.indexOf("Windows 3.1") == -1)
{
document.write('<SCRIPT LANGUAGE=VBScript\> \n');
document.write('on error resume next \n');
document.write('Sub Pelicula_FSCommand(ByVal command, ByVal args)\n');
document.write(' call Pelicula_DoFSCommand(command, args)\n');
document.write('end sub\n');
document.write('</SCRIPT\> \n');
}
-->
</SCRIPT>

<SCRIPT LANGUAGE="JavaScript">
<!--Esconde el código de los navegadores que no lo entienden
function ValorEnTexto(valor){
var PeliculaObj = InternetExplorer? Pelicula : document.Pelicula;
PeliculaObj.SetVariable("campotexto",valor);
}
-->
</SCRIPT>

</HEAD>
<BODY>
<OBJECT id=Pelicula
codeBase=http://download.macromedia.com/pub/
shockwave/cabs/flash/swflash.cab#version=6,0,0,0}
classid=clsid:D27CDB6E-AE6D-11cf-96B8-444553540000 width=550 height=400><PARAM NAME="_cx" VALUE="14552">
<PARAM NAME="_cy" VALUE="10583">
<PARAM NAME="FlashVars" VALUE="14552"><PARAM NAME="Movie" VALUE="Pelicula.swf">
<PARAM NAME="Src" VALUE="Pelicula.swf"><PARAM NAME="WMode" VALUE="Transparent">
<PARAM NAME="Play" VALUE="-1"><PARAM NAME=" Loop " VALUE="-1">
<PARAM NAME="Quality" VALUE="High"><PARAM NAME="SAlign" VALUE="">
<PARAM NAME="Menu" VALUE="0"><PARAM NAME="Base" VALUE="">
<PARAM NAME="AllowScriptAccess" VALUE="always"><PARAM NAME="Scale" VALUE="ShowAll">
<PARAM NAME="DeviceFont" VALUE="0"><PARAM NAME="EmbedMovie" VALUE="0">
<PARAM NAME="BGColor" VALUE="FFFFFF"><PARAM NAME="SWRemote" VALUE="">
<EMBED src="Pelicula.swf" menu=false quality=best wmode=transparent bgcolor=#FFFFFF WIDTH="550" HEIGHT="400" NAME="Pelicula" ALIGN="" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer">
</EMBED></OBJECT>
<P><INPUT id="texto"><INPUT id="boton" type=button value="Click Aqui" OnClick="javascript:ValorEnTexto(texto.value);"></P>

</BODY>
</HTML>

De esta manera podemos comunicar a JavaScript con flash fácilmente, pero hagamos algo más; ahora vamos a hacer que al dar click al botón de Flash El valor que estaba en el campo de texto de Flash se pase como el texto que tiene el botón HTML asignado.

Para esto, inserten este código dentro de Flash en el botón:

on (release) {

fscommand("comando", campotexto);

}

Y luego en la página HTML inserten este código en la función "Pelicula_DoFSCommand":

function Pelicula_DoFSCommand(command, args) {

var PeliculaObj = InternetExplorer? Pelicula:document.Pelicula;

//Aquí va a ir nuestro código de manejo

boton.value=args;

}

La instrucción "boton.value=args;" lo que hace es asignar el parámetro args de el FSCommand como el texto que aparece en el botón, vamos a probar la pagina y debería darnos el siguiente efecto:

Antes del click al botón Flash (El de color Azul en este caso)

Después del click (Fíjense que el texto del botón HTML (el gris), cambio al que estaba en el campo de texto de Flash)

Ya con esto saben como comunicar de manera efectiva los lenguajes ActionScript y JavaScript; asi logrando muchísimas cosas mas, por ejemplo, usar JavaScript para pasarle datos a Flash que no puede hacerlos por si solo, como valores del navegador o versiones del explorador ETC, asi como usar propiedades y funciones de JavaScript en Flash.

Su código debió quedar asi:

<HTML>
<HEAD>
<TITLE>Pelicula</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
var InternetExplorer = navigator.appName.indexOf("Microsoft") != -1;]
//Maneja todos los mensajes de FSCommands en una película
function Pelicula_DoFSCommand(command, args) {
var PeliculaObj = InternetExplorer? Pelicula : document.Pelicula;
//Aquí va a ir nuestro código de manejo
boton.value=args;
}
if (navigator.appName && navigator.appName.indexOf("Microsoft") != -1 && navigator.userAgent.indexOf("Windows") != -1 && navigator.userAgent.indexOf("Windows 3.1") == -1)
{
document.write('<SCRIPT LANGUAGE=VBScript\> \n');]
document.write('on error resume next \n');
document.write('Sub Pelicula_FSCommand(ByVal command, ByVal args)\n');
document.write(' call Pelicula_DoFSCommand(command, args)\n');
document.write('end sub\n');
document.write('</SCRIPT\> \n');
}

-->
</SCRIPT>

<SCRIPT LANGUAGE="JavaScript">
<!--Esconde el código de los navegadores que no lo entienden

function ValorEnTexto(valor){
var PeliculaObj = InternetExplorer? Pelicula : document.Pelicula;
PeliculaObj.SetVariable("campotexto",valor);
}
-->
</SCRIPT>

</HEAD>
<BODY>
<OBJECT id=Pelicula
codeBase=http://download.macromedia.com/pub/
shockwave/cabs/flash/swflash.cab#version=6,0,0,0
classid=clsid:D27CDB6E-AE6D-11cf-96B8-444553540000 width=550 height=400><PARAM NAME="_cx" VALUE="14552">
<PARAM NAME="_cy" VALUE="10583">
<PARAM NAME="FlashVars" VALUE="14552"><PARAM NAME="Movie" VALUE="Pelicula.swf">
<PARAM NAME="Src" VALUE="Pelicula.swf"><PARAM NAME="WMode" VALUE="Transparent">
<PARAM NAME="Play" VALUE="-1"><PARAM NAME=" Loop " VALUE="-1">
<PARAM NAME="Quality" VALUE="High"><PARAM NAME="SAlign" VALUE="">
<PARAM NAME="Menu" VALUE="0"><PARAM NAME="Base" VALUE="">
<PARAM NAME="AllowScriptAccess" VALUE="always"><PARAM NAME="Scale" VALUE="ShowAll">
<PARAM NAME="DeviceFont" VALUE="0"><PARAM NAME="EmbedMovie" VALUE="0">
<PARAM NAME="BGColor" VALUE="FFFFFF"><PARAM NAME="SWRemote" VALUE="">
<EMBED src="Pelicula.swf" menu=false quality=best wmode=transparent bgcolor=#FFFFFF WIDTH="550" HEIGHT="400" NAME="Pelicula" ALIGN="" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer">
</EMBED></OBJECT>
<P><INPUT id="texto"><INPUT id="boton" type=button value="Click Aqui" OnClick="javascript:ValorEnTexto(texto.value);"></P>

</BODY>
</HTML>

Por ultimo dejo esta tabla de los métodos que posee el objeto ActiveX Shockwave Flash y para que sirve cada uno, además de un ejemplo en JavaScript de cómo usarlo

Método Explicación Ejemplo
Pelicula.Back() Regresa un frame atrás la película Pelicula.Back();
Pelicula.CurrentFrame() (Solo lectura) Devuelve la posición actual de la cabeza de lectura en la línea de tiempo Variable=Pelicula.CurrentFrame();
Pelicula.FlashVersion() Regresa como valor la versión del plugin de Flash instalada Variable= Pelicula.FlashVersion();
Pelicula.Forward() Avanza un frame en la película Pelicula.Forward();
Pelicula.FrameLoaded (FrameNum) Devuelve un valor booleano(True o False) que dice si esta o no cargado el frame especificado por parámetro Var=Película.FrameLoaded(1);
Pelicula.GetVariable(name) Obtiene el valor de una variable Var=Pelicula.GetVariable(campotexto);
Pelicula.GotoFrame(FrameNum) Lleva la cabeza de lectura al frame especificado Pelicula.GotoFrame(5);
Pelicula.IsPlaying Booleano que indica si esta o no en ejecución la película Var= Pelicula.IsPlaying();
Pelicula.LoadMovie(layer,url) Carga una película en la película igual que la instrucción loadMovie de Flash Pelicula.LoadMovie(1,movie.swf)
Pelicula.PercentLoaded Devuelve el porcentaje cargado de la película Var= Pelicula.PercentLoaded();
Pelicula.Play Inicia el movimiento de la cabeza de lectura Pelicula.Play()
Pelicula.Rewind Rebobina la película hasta el primer frame Pelicula.Rewind();
Pelicula.SetVariable("nombre",valor) Asigna un valor a una variable Pelicula.SetVariable("patos",5)
Pelicula.SetZoomRect(left,top,right,bottom) Ajusta el zoom de la película de acuerdo a unas coordenadas Pelicula.SetZoomRect(50,75,100,50)
Pelicula.Stop Para la película Pelicula.Stop();
Pelicula.TCallFrame(target,FrameNum) Llama el código que hay en un frame determinado de una instancia Pelicula.TCallFrame("_root",5);
Pelicula.TCallLabel(target,label) Lo mismo que el anterior pero con el label del frame en vez del numero Pelicula.TCallLabel("_root","funciones");
Pelicula.TCurrentFrame(target) Obtiene el frame en el que esta la cabeza de lectura actualmente de una instancia Var=Pelicula.TCurrentFrame("_root.pato_mc");
Pelicula.TCurrentLabel(target) Lo mismo que el anterior pero devuelve el nombre del label del frame actual Var=Pelicula.TCurrentLabel("_root");
Pelicula.TGetProperty(target,property) Devuelve el valor de la propiedad de un movie clip Var=Pelicula.TGetProperty("movie_mc",_alpha);
Pelicula.TSetProperty(target,property,value) Asigna un valor a la una propiedad de un movie clip Pelicula.TSetProperty("movie_mc,_alpha,50)

Recuerden que este es solo el inicio, la segunda parte explicara como integrar Flash y Visual Basic y por ultimo la tercera parte explicara como con ASP y PHP para hacer dinámicas nuestras aplicaciones.

Comentarios, dudas o sugerencias a webmaster@cristalab.com,

Freddi

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Publica tu comentario

El autor de este artículo ha cerrado los comentarios. Si tienes preguntas o comentarios, puedes hacerlos en el foro

Entra al foro y participa en la discusión

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate