Ejemplo: Sitio De Muestras De Animación (Action Script 3.0)

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 llena de código ActionScript. El ejemplo del sitio de muestras de animación es un ejemplo de cómo se puede partir de una animación lineal (por ejemplo, un trabajo creado para un cliente) y añadir algunos elementos interactivos secundarios adecuados para incorporar la animación 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. Esto incluye la creación en el escenario del espacio en el que se colocarán los botones y 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. Si no dispone de una animación lineal a la que añadir interactividad, cree un nuevo archivo FLA con una animación sencilla, como una interpolación de movimiento o de forma individual. Si no, abra el archivo FLA que contiene la animación que va a exhibir en el proyecto y guárdela con un nuevo nombre para crear un nuevo archivo de trabajo.
   
2. Decida en qué parte de la pantalla van a aparecer 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 incluye una pantalla de bienvenida, puede que desee crear una 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 otras capas de la línea de tiempo y asigne el nombre botones. Ésta será la capa a la que añadirá los botones.
   
4. Añada otra capa sobre la capa botones y asígnele el nombre accion. Ésta será la capa en la que añadirá el código ActionScript para la aplicación.

 Crear y añadir botones:
A continuación hay que 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 botones.
   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 botonPlay 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 botonWeb.

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. Las tres tareas que el código debe realizar son:

• 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 play.
  
• 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 Iniciar(event:MouseEvent):void
   {
   this.play();
   }Este código define una función denominada Iniciar(). 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:
   botonPlay.addEventListener(MouseEvent.CLICK, Iniciar);
   Esta línea de código registra la función Iniciar() como un detector del evento click de botonPlay. Es decir, hace que siempre que se haga clic en el botón botonPlay, se llame a la función Iniciar().

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 IniciarWeb(event:MouseEvent):void
   {
   var targetURL:URLRequest = new URLRequest("http://example.com/");
   navigateToURL(targetURL);
   }
   Este código define una función denominada IniciarWeb(). Esta función crea primero una instancia de URLRequest que representa el URL http://example.com/ y, a continuación, pasa el URL a la función navigateToURL(), lo que hace que el navegador del usuario abra dicho URL.
   
3. En la línea que sigue al código añadido en el paso anterior, escriba esta línea de código:
   
   botonWeb.addEventListener(MouseEvent.CLICK, IniciarWeb);
   Esta línea de código registra la función IniciarWeb() como un detector del evento click de botonWeb. Es decir, hace que siempre que se haga clic en el botón botonWeb, se llame a la función IniciarWeb().

Probar la aplicación:
Al llegar a este punto, la aplicación ya debe ser completamente funcional. Pruébela.

Para probar la aplicación:

1. En el menú principal, elija Control > Probar película. Flash 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 deben tener un solo parámetro con el tipo de datos MouseEvent.)
     
   Estos errores, y otros errores posibles, deben producir un mensaje de error cuando se elija el comando Probar película o cuando se haga clic en el botón. Vea si hay errores de compilador en el panel Errores del compilador (los que se producen al elegir Probar película) y si hay errores de tiempo de ejecución en el panel Salida (errores que se producen durante la reproducción del archivo SWF, como al hacer clic en un botón).