Ejemplo: Animation portfolio piece (sitio de muestras de animación)
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 usuario puede hacer clic: uno para iniciar la animación y otro para navegar a un URL distinto (como el menú de muestras o la página principal del autor).
El proceso de crear este trabajo puede dividirse en las siguientes partes principales:
Preparar el archivo FLA para añadir código ActionScript y elementos interactivos.
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:
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.
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).
Añada una nueva capa sobre las otras capas de la línea de tiempo y asigne el nombre buttons. Ésta será la capa a la que añadirá los botones.
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 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:
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.
Con la herramienta Selección, seleccione todos los elementos gráficos del botón individual.
En el menú principal, elija Modificar > Convertir en símbolo.
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.
Con el botón seleccionado, asigne al botón el nombre de instancia playButton en el inspector de propiedades.
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. 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:
Seleccione el fotograma clave en el Fotograma 1 de la capa actions.
Para abrir el panel Acciones, en el menú principal, elija Ventana > Acciones.
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:
Al final del código escrito en los pasos anteriores, añada dos líneas vacías.
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.
En la línea que sigue al código añadido en el paso anterior, escriba esta línea de código:
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:
Al final del código escrito en los pasos anteriores, añada dos líneas vacías.
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(). 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.
En la línea que sigue al código añadido en el paso anterior, escriba esta línea de código:
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
Al llegar a este punto, la aplicación ya debe ser completamente funcional. Pruébela.
Para probar la aplicación:
En el menú principal, elija Control > Probar película. Flash crea el archivo SWF y lo abre en una ventana de Flash Player.
Pruebe ambos botones para asegurarse de que funcionan correctamente.
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).
