Accessibility

Flash TechNote

Un ejemplo de comunicación entre JavaScript y Macromedia Flash

A continuación se muestran ejemplos de comunicación entre Macromedia Flash y un documento HTML utilizando JavaScript, seguido de pasos para recrear cada uno de ellos.

Requisitos previos:

Es necesario tener conocimientos de usuario de JavaScript para beneficiarse adecuadamente de estas técnicas. Esto queda fuera del alcance de esta nota técnica. Sin embargo, dispone de muchos recursos para aprender JavaScript. Para obtener más información, consulte la sección Información adicional de la parte inferior de este documento. Los redactores de scripts con experiencia deben leer el artículo Scripting with Flash (Creación de scripts con Flash) * para ver información general de métodos JavaScript que pueden controlar Macromedia Flash Player.

En esta nota técnica se describen tres tipos básicos de comunicación Flash/JavaScript:

La creación de scripts de navegador no es una función que tengan todos los navegadores. Para comunicarse con Flash Player, el navegador debe tener anclas incorporadas para que Flash Player pueda detectarlas. Los requisitos del navegador se indican a continuación:

  • Netscape Navigator 3.0 - 4.7x y Netscape 6.2 o superior

    (Windows 95/98/NT/2000/XP o MacOS; con LiveConnect y Java activados)

  • Internet Explorer 3.0 y versiones superiores

    (Sólo Windows 95/98/NT/2000/XP; con ActiveX activado)

Nota: Internet Explorer en Macintosh y las versiones anteriores de Netscape 6 no admiten este método. Para obtener más información, consulte la sección Información adicional de la parte inferior de este documento.

Comunicación de JavaScript a Flash

En este ejemplo se demuestra cómo utilizar un método Flash para enviar una variable desde un campo de texto de entrada HTML a un archivo Flash incluido en el mismo documento HTML. La fecha introducida en el campo de entrada HTML completará el campo de texto del archivo Flash utilizando el método Flash SetVariable.

Vea el ejemplo: Ejemplo 1 *

Descargue el archivo de origen:

javascript_to_flash.zip (17 K)


Pasos a seguir:

    En Flash

    1. Cree un nuevo archivo en Flash y guárdelo como javascript_to_flash.fla.
    2. Coloque un campo de texto en el escenario con la herramienta Texto.
    3. Seleccione el campo de texto y, en el panel Propiedades, elija Texto dinámico en el menú desplegable e introduzca "myVar" en el campo de la variable.

      Nota: según los métodos óptimos de codificación, se debe utilizar el campo Nombre de instancia, que requiere myVar.text. Para simplificar y obtener una compatibilidad retroactiva de este método con Flash 4 y 5, utilizamos el campo de la variable.

    4. Guarde el archivo.
    5. Publique una página HTML y un archivo SWF de Flash con la función Publicar y elija la plantilla HTML "Flash Only". Se crearán en la misma carpeta en la que ha guardado el archivo FLA original.

    En Dreamweaver


    Las instrucciones que se indican a continuación son específicas de Dreamweaver. Sin embargo, puede utilizar cualquier editor HTML para editar el código manualmente utilizando las mismas técnicas.

    1. Abra el archivo HTML publicado por Flash anteriormente en el paso 5.
    2. Introduzca el medio de Flash y el código OBJECT/EMBED.

      1. Seleccione Insertar > Medio > Flash y seleccione el archivo SWF "javascript_to_flash.swf" creado anteriormente.
      2. Seleccione el marcador de posición de la película Flash.
      3. Abra la vista de código de Dreamweaver con Ver > Código. Las etiquetas OBJECT y EMBED en las que necesita centrarse quedarán resaltadas.
      4. En la etiqueta OBJECT, introduzca el valor id="myFlash" si éste no se encuentra ya en ella. Asegúrese también de que el valor name="myFlash" NO esté presente en la primera parte del código, la parte OBJECT principal de la etiqueta.

        <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
         codebase="http://download.macromedia.com/pub/shockwave/cabs/
         flash/swflash.cab#version=5,0,0,0"
         width=366 height=142 id="myFlash">

        Nota: si copia y pega en Dreamweaver, asegúrese de eliminar los posibles saltos de línea adicionales del script. De lo contrario, se pueden producir errores en la página.

        Nota: en Netscape 6.2 y en versiones superiores es obligatorio eliminar el atributo name de la etiqueta object para permitir la comunicación de scripts. Dreamweaver ofrece un campo en el Inspector de propiedades que escribe automáticamente ambos atributos, de modo que es necesario editar el código manualmente para asegurarse de que las etiquetas sean correctas.

      5. Introduzca en la sección EMBED de la etiqueta los valores name="myFlash" y swLiveConnect="true", en caso de que éstos no se encuentren ya en ella. Asegúrese de que no haya un valor "id" para esta sección, la etiqueta EMBED.

        <embed src="javascript_to_flash.swf" quality=high width=366 height=142
         type="application/x-shockwave-flash"
         pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?
         P1_Prod_Version=ShockwaveFlash"
         name="myFlash" swLiveConnect="true">
        </embed>

        </object>
    3. Cree el campo de formulario en HTML

      1. Vuelva a la vista de diseño utilizando Ver > Diseño.
      2. Elija Insertar > Objeto de formulario > Campo de texto (haga clic en Sí cuando el sistema le solicite que añada una etiqueta de formulario).
      3. Modifique las etiquetas HTML del campo de texto de modo que indiquen: <input type="text" name="sendText" maxlength="45" onChange="doPassVar(this)">

        Cuando se modifica el contenido del campo de texto se llama automáticamente al controlador onChange. Cuando se produce un cambio se llama a la función doPassVar() (véase el paso siguiente).

    4. Cree la función Javascript que pasa el valor

      Copie el código JavaScript siguiente y péguelo entre las etiquetas <head> y </head> del código fuente HTML:

      <SCRIPT LANGUAGE=JavaScript>
      <!--
      function doPassVar(args){
         var sendText = args.value;
         window.document.myFlash.SetVariable("myVar", sendText);
      }
      //-->
      </SCRIPT>
      

      Siempre que se produce un cambio en el campo de texto se llama a esta función JavaScript. Ésta utiliza el método JavaScript de Flash SetVariable para establecer la variable myVar de la película Flash en el valor introducido en el campo del formulario de texto HTML.

    5. Seleccione Archivo > Guardar.
    6. Pruebe o visualice previamente el archivo en un navegador pulsando F12.

Comunicación de Flash a JavaScript

Además de enviar datos de una página HTML a una película Flash, puede también realizar el proceso contrario. En este ejemplo se muestra cómo utilizar la acción de Flash fscommand * para enviar una cadena desde Flash a un controlador JavaScript. Con fines demostrativos se muestra un cuadro de aviso JavaScript que contiene el valor enviado desde Flash al navegador.

Véase el ejemplo: Ejemplo 2 *

Descargue el archivo de origen:

flash_to_javascript.zip (17 K)


Pasos a seguir:

    En Flash

    1. Cree un nuevo archivo en Flash y guárdelo como flash_to_javascript.fla.
    2. Coloque un campo de texto en el escenario con la herramienta Texto.
    3. Seleccione el campo de texto y, en el panel Propiedades, elija Introducción de texto en el menú desplegable. Seleccione el icono del borde para ver el campo (véase la ilustración anterior para entenderlo mejor).
    4. Introduzca "inputVar" en el campo de la variable.
    5. Añada un botón al escenario. Puede encontrar un botón de muestra seleccionando Ventana > Bibliotecas comunes > Botones.
    6. Seleccione el botón y abra el panel Acciones (Ventana > Acciones).
    7. Añada la siguiente acción fscommand al botón:

      on (release) {
      fscommand ("send_var", inputVar);
      }
      
    8. Guarde el archivo.
    9. Publique una página HTML y un archivo SWF de Flash con la función Publicar y elija la plantilla HTML "Flash Only". Se crearán en la misma carpeta en la que ha guardado el archivo FLA original.

    En Dreamweaver

    Las instrucciones que se indican a continuación son específicas de Dreamweaver. Sin embargo, puede utilizar cualquier editor HTML para editar el código manualmente utilizando las mismas técnicas.

    1. Abra el archivo HTML creado mediante el comando Publicar de Flash en el paso 9 descrito anteriormente.
    2. Introduzca el medio de Flash y el código OBJECT/EMBED.

      1. Seleccione Insertar > Medio > Flash y seleccione el archivo SWF "javascript_to_flash.swf" creado anteriormente.
      2. Seleccione el marcador de posición de la película Flash.
      3. Abra la vista de código de Dreamweaver con Ver > Código. Las etiquetas OBJECT y EMBED en las que necesita centrarse quedarán resaltadas.
      4. En la etiqueta OBJECT, introduzca el valor id="myFlash" si no se encuentra ya en ella. Asegúrese también de que el valor name="myFlash" NO esté presente en la primera parte del código, la parte OBJECT principal de la etiqueta.

        <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
        codebase="http://download.macromedia.com/pub/shockwave/cabs/
        flash/swflash.cab#version=5,0,0,0"
        width=366 height=142 id="myFlash">

        Nota: si copia y pega en Dreamweaver, asegúrese de eliminar los posibles saltos de línea adicionales del script. De lo contrario, se pueden producir errores en la página.

        Nota: en Netscape 6.2 y en versiones superiores es obligatorio eliminar el atributo name de la etiqueta object para permitir la comunicación de scripts. Dreamweaver ofrece un campo en el Inspector de propiedades que escribe automáticamente ambos atributos, de modo que es necesario editar el código manualmente para asegurarse de que las etiquetas sean correctas.

      5. Introduzca en la sección EMBED de la etiqueta, en caso de que no estén ya allí, los valores name="myFlash" y swLiveConnect="true". Asegúrese de que no haya un valor "id" para esta sección, la etiqueta EMBED.

        <embed src="javascript_to_flash.swf" quality=high
        width=366 height=142
        type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?
        P1_Prod_Version=ShockwaveFlash" name="myFlash" swLiveConnect="true">
        </embed>
        </object>
    3. Cree la función Javascript para recuperar y mostrar el valor

      1. Introduzca el código siguiente después de las etiquetas de apertura en el documento HTML:



        <SCRIPT LANGUAGE=JavaScript> <!-- var InternetExplorer = navigator.appName.indexOf("Microsoft") != -1; function myFlash_DoFSCommand(command, args) { var myFlashObj = InternetExplorer ? myFlash : document.myFlash; alert (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 myFlash_FSCommand(ByVal command, ByVal args)\n');
        document.write(' call myFlash_DoFSCommand(command, args)\n');
        document.write('end sub\n');
        document.write('</SCRIPT\> \n');
        }
        //-->
        </SCRIPT>

        La función específica que realiza la alerta se resalta en rojo. Para obtener más información sobre Javascript, consulte la sección Información adicional.

      2. Seleccione Archivo > Guardar.
      3. Pruebe o visualice previamente el archivo en un navegador pulsando F12.

Comunicación de Flash a Flash

Dos o más películas de Macromedia Flash que estén en el mismo documento HTML pueden enviarse mensajes entre ellas combinando las dos técnicas que se han descrito anteriormente. Utilice fscommand para enviar mensajes desde una película Flash al navegador Web y métodos JavaScript de Flash para enviar mensajes a una película Flash desde el navegador. Para más información, consulte An example of communication between Flash movies (Un ejemplo de comunicación entre películas de Flash) (NT 15692) *.

Comenzando por Macromedia Flash MX, los objetos LocalConnection se pueden utilizar para la comunicación de Flash a Flash. Esto permitirá que dos películas Flash que estén en el mismo documento HTML o dos ventanas de navegador puedan enviarse mensajes entre sí sin utilizar JavaScript o el comando fscommand. Para más información, consulte Using local connection objects in Macromedia Flash MX * (Utilización de objetos de conexión local en Macromedia Flash MX).


Información adicional

Para ver ejemplos de comandos JavaScript para enviar desde una función, consulte el artículo técnico Scripting with Flash (Creación de scripts con Flash) *. Para más información sobre JavaScript visite Webmonkey.com.

Para más información sobre Internet Explorer en Macintosh, consulte Flash and Internet Explorer Issues on the Macintosh Platform (Problemas de Flash e Internet Explorer en la plataforma Macintosh) (nota técnica 13638) *.

Para más información sobre la compatibilidad con Netscape y Mozilla, consulte Netscape 6, 6.01 and Mozilla (Netscape 6, 6.01 y Mozilla) (nota técnica 14625) *.

Para obtener una matriz completa donde se indique la compatibilidad de los navegadores con diferentes funciones, consulte A comprehensive list of supported Flash features, specific to each browser (Lista exhaustiva de funciones de Flash admitidas, específicas para cada navegador) (nota técnica 14159) *.

Para obtener información general sobre los métodos JavaScript que pueden controlar Macromedia Flash Player, consulte Scripting with Flash (Creación de scripts con Flash) (artículo) *.

Última actualización: 6 de enero de 2003
Fecha de creación: 25 de julio de 2001
ID: 15683
Producto: Flash
Versiones: todas
SO: todos
Navegador: todos
Servidor: todos
Base de datos: todas
ID anterior: N/A