Ejemplo: Sitio de muestras de animación (Flash Professional)

Este ejemplo se ha diseñado para ofrecer una primera oportunidad de consultar cómo se pueden juntar fragmentos de ActionScript para crear una aplicación completa. El sitio de muestras de animación es un ejemplo de cómo se puede partir de una animación lineal existente y añadir algunos elementos interactivos secundarios. Por ejemplo, se puede incorporar una animación creada para un cliente en un sitio de muestras en línea. El comportamiento interactivo que añadiremos a la animación incluirá dos botones en los que el espectador podrá hacer clic: uno para iniciar la animación y otro para navegar a un URL diferente (como el menú del sitio o la página principal del autor).

El proceso de crear este trabajo puede dividirse en las siguientes partes principales:

  1. Preparar el archivo FLA para añadir código ActionScript y elementos interactivos.

  2. Crear y añadir los botones.

  3. Escribir el código ActionScript.

  4. Probar la aplicación.

Preparación de la animación para añadirle interactividad

Para poder añadir elementos interactivos a la animación, es útil configurar el archivo FLA creando algunos lugares para añadir el contenido nuevo. Esta tarea incluye la creación del espacio real en el escenario en el que se colocarán los botones. También implica la creación de “espacio” en el archivo FLA para mantener separados los distintos elementos.

Para preparar el archivo FLA para añadir elementos interactivos:

  1. Cree un archivo FLA con una animación sencilla, como una sola interpolación de movimiento o de forma. Si ya se dispone de un archivo FLA que contiene la animación que se va a exhibir en el proyecto, abra este archivo y guárdelo con un nuevo nombre.

  2. Decida el lugar en pantalla donde desea que aparezcan los dos botones: uno para iniciar la animación y otro vinculado al sitio de muestras o a la página principal del autor. Si es necesario, borre o añada espacio en el escenario para el nuevo contenido. Si la animación no dispone de ninguna, puede crear una pantalla de inicio en el primer fotograma. Probablemente tenga que desplazar la animación de forma que empiece en el fotograma 2 o en un fotograma posterior.

  3. Añada una nueva capa sobre las demás capas de la línea de tiempo y asígnele el nombre buttons . En esta capa se añadirán los botones.

  4. Añada otra capa sobre la capa buttons y asígnele el nombre actions . Ésta será la capa en la que añadirá el código ActionScript para la aplicación.

Creación y adición de botones

A continuación se deben crear y colocar los botones que forman el centro de la aplicación interactiva.

Para crear y añadir botones al archivo FLA:

  1. Utilice las herramientas de dibujo para crear el aspecto visual del primer botón (el botón “play”) en la capa buttons. Por ejemplo, puede dibujar un óvalo horizontal con texto encima.

  2. Con la herramienta Selección, seleccione todos los elementos gráficos del botón individual.

  3. En el menú principal, elija Modificar > Convertir en símbolo.

  4. En el cuadro de diálogo, elija Botón como tipo de símbolo, asigne un nombre al símbolo y haga clic en Aceptar.

  5. Con el botón seleccionado, asigne al botón el nombre de instancia playButton en el inspector de propiedades.

  6. Repita los pasos 1 a 5 para crear el botón que llevará al usuario a la página principal del autor. Asigne a este botón el nombre homeButton .

Escritura del código

El código ActionScript para esta aplicación puede dividirse en tres grupos de funcionalidad, aunque se escribirá todo en el mismo lugar. El código realiza tres operaciones:

  • Detener la cabeza lectora en cuanto se cargue el archivo SWF (cuando la cabeza lectora llegue al Fotograma 1).

  • Detectar un evento para iniciar la reproducción del archivo SWF cuando el usuario haga clic en el botón de reproducción.

  • Detectar un evento para enviar el navegador al URL apropiado cuando el usuario haga clic en el botón vinculado a la página de inicio del autor.

Para crear el código necesario para detener la cabeza lectora cuando llegue al Fotograma 1:

  1. Seleccione el fotograma clave en el Fotograma 1 de la capa actions.

  2. Para abrir el panel Acciones, en el menú principal, elija Ventana > Acciones.

  3. En el panel Script, escriba el código siguiente: 

    stop();

Para escribir código para iniciar la animación cuando se haga clic en el botón play:

  1. Al final del código escrito en los pasos anteriores, añada dos líneas vacías.

  2. Escriba el código siguiente al final del script: 

    function startMovie(event:MouseEvent):void 
{ 
    this.play(); 
}

    Este código define una función denominada startMovie() . Cuando se llama a startMovie() , hace que se inicie la reproducción de la línea de tiempo principal.

  3. En la línea que sigue al código añadido en el paso anterior, escriba esta línea de código: 

    playButton.addEventListener(MouseEvent.CLICK, startMovie);

    Esta línea de código registra la función startMovie() como un detector del evento click de playButton . Es decir, hace que siempre que se haga clic en el botón playButton , se llame a la función startMovie() .

Para escribir código que envíe el navegador a una dirección URL cuando se haga clic en el botón vinculado a la página principal:

  1. Al final del código escrito en los pasos anteriores, añada dos líneas vacías.

  2. Escriba el código siguiente al final del script: 

    function gotoAuthorPage(event:MouseEvent):void 
{ 
    var targetURL:URLRequest = new URLRequest("http://example.com/"); 
    navigateToURL(targetURL); 
}

    Este código define una función denominada gotoAuthorPage() . En primer lugar esta función crea una instancia de URLRequest que representa la URL http://example.com/. A continuación pasa la URL a la función navigateToURL() , lo que hace que el navegador del usuario abra dicha URL.

  3. En la línea que sigue al código añadido en el paso anterior, escriba esta línea de código: 

    homeButton.addEventListener(MouseEvent.CLICK, gotoAuthorPage);

    Esta línea de código registra la función gotoAuthorPage() como un detector del evento click de homeButton . Es decir, hace que siempre que se haga clic en el botón homeButton , se llame a la función gotoAuthorPage() .

Probar la aplicación

En este momento la aplicación es completamente funcional. Pruébela.

Para probar la aplicación:

  1. En el menú principal, elija Control > Probar película. Flash Professional crea el archivo SWF y lo abre en una ventana de Flash Player.

  2. Pruebe ambos botones para asegurarse de que funcionan correctamente.

  3. Si los botones no funcionan, puede comprobar lo siguiente:

    • ¿Tienen los botones nombres de instancia distintos?

    • ¿Las llamadas al método addEventListener() utilizan los mismos nombres que los nombres de instancia de los botones?

    • ¿Se utilizan los nombres de evento correctos en las llamadas al método addEventListener() ?

    • ¿Se ha especificado el parámetro correcto para cada una de las funciones? (Ambos métodos deben tener un solo parámetro con el tipo de datos MouseEvent.)

    Todos estos errores y otros posibles generan un mensaje de error. Este mensaje puede aparecer al seleccionar el comando Probar película o al hacer clic en el botón mientras se prueba el proyecto. Vea si hay errores de compilador en el panel Errores del compilador (los que se producen al seleccionar Probar pelí­cula). Compruebe el panel Salida para ver los errores en tiempo de ejecución que se producen durante la reproducción de contenido, como al hacer clic en un botón.