8. Creando navegación interactiva

Resumen de la lección

• Crear símbolos de botón.
• Añadir efectos de sonido a los botones.
• Duplicar símbolos.
• Intercambiar símbolos y mapas de bits.
• Nombrar instancias de botón.
• Escribir código ActionScript 3.0 para crear navegación no lineal.
• Identificar errores de código con el panel Errores del compilador.
• Usar el panel Fragmentos de código para añadir interactividad rápidamente.
• Crear y usar etiquetas de fotograma.
• Crear botones animados.

Esta lección te llevará aproximadamente 3 horas completarla. Si aún no tienes los archivos del proyecto para esta lección, descárgalos desde la pestaña Productos registrados en la página de tu cuenta en www.peachpit.com (haz clic en el enlace Acceder al contenido adicional) y guárdalos en tu ordenador en una ubicación conveniente, como se describe en la sección Introducción de este libro. En la página de tu cuenta también encontrarás cualquier actualización de las lecciones o de los archivos de las lecciones.

Deja que tus espectadores exploren tu proyecto y se conviertan en participantes activos. Los símbolos de botón y el código funcionan juntos para crear experiencias atractivas, interactivas e impulsadas por el usuario.

Introducción

Para empezar, visualiza la guía de restaurantes interactiva que crearás a medida que aprendas a crear proyectos interactivos en Adobe Animate CC.

1. Haz doble clic en el archivo 08End.html en la carpeta Lesson08/08End para reproducir la animación.

   El proyecto es una guía de restaurantes interactiva para una ciudad imaginaria que se ejecuta en Adobe Flash Player en el navegador. Los espectadores pueden hacer clic en cualquier botón para ver más información sobre un restaurante en particular. En esta lección, trabajarás en un documento de ActionScript 3.0 para crear botones interactivos y estructurar la Línea de tiempo correctamente. Aprenderás a escribir código ActionScript para proporcionar instrucciones sobre lo que hará cada botón.

   Nota: Si aún no has descargado los archivos del proyecto para esta lección a tu ordenador desde la página de tu cuenta, asegúrate de hacerlo ahora. Consulta la Introducción al principio del libro.

2. Cierra el archivo 08End.html.

3. Haz doble clic en el archivo 08Start.fla en la carpeta Lesson08/08Start para abrir el archivo de proyecto inicial en Animate. El archivo es un documento de ActionScript 3.0 que se reproducirá con Flash Player en un navegador de escritorio. El documento incluye varios recursos que ya están en el panel Biblioteca, y el Escenario ya se ha dimensionado correctamente.

4. Selecciona Archivo > Guardar como. Nombra el archivo 08_workingcopy.fla y guárdalo en la carpeta 08Start. Guardar una copia de trabajo asegura que el archivo de inicio original estará disponible si quieres empezar de nuevo.

   Nota: Animate te advierte si tu ordenador no tiene las mismas fuentes que contiene un archivo FLA. Selecciona fuentes sustitutas o simplemente haz clic en Usar predeterminado para que Animate realice automáticamente las sustituciones.

Acerca de las películas interactivas

Las películas interactivas cambian en función de las acciones del espectador. Por ejemplo, cuando el espectador hace clic en un botón, se muestra un gráfico diferente con más información. La interactividad puede ser simple, como un clic de botón, o puede ser compleja, recibiendo entradas de una variedad de fuentes, como los movimientos del ratón, las pulsaciones de teclas del teclado o incluso la inclinación de un dispositivo móvil.

En un documento de Animate ActionScript 3.0, utilizas ActionScript para lograr la mayor parte de la interactividad. ActionScript proporciona las instrucciones que le dicen a cada botón qué hacer cuando el usuario hace clic en uno de ellos. En esta lección, aprenderás a crear una navegación no lineal, una en la que la película no tiene que reproducirse directamente desde el principio de la Línea de tiempo hasta el final. ActionScript puede decirle al cabezal de reproducción de Animate que salte y vaya a diferentes fotogramas de la Línea de tiempo en función del botón en el que haga clic el usuario. Diferentes fotogramas en la Línea de tiempo contienen diferente contenido. El usuario en realidad no sabe que el cabezal de reproducción está saltando por la Línea de tiempo; el usuario simplemente ve (o escucha) aparecer diferente contenido a medida que se hace clic en los botones en el Escenario.

También puedes crear navegación interactiva en un documento de Animate HTML5 Canvas, pero en lugar de escribir código ActionScript, escribes código JavaScript. En esta lección, aprenderás los conceptos básicos de los botones y la navegación no lineal de la Línea de tiempo usando ActionScript, pero podrás usar los mismos principios cuando trabajes con código JavaScript en documentos HTML5 Canvas.

Aprenderás a insertar JavaScript en un documento HTML5 Canvas en la Lección 10.

Creando botones

Un botón es un indicador visual básico de algo con lo que el usuario puede interactuar. El usuario a menudo hace clic en un botón con el ratón, pero son posibles muchos otros tipos de interacciones. Por ejemplo, algo puede suceder cuando el usuario pasa el puntero del ratón por encima de un botón.

Los botones son un tipo de símbolo que tiene cuatro estados especiales, o fotogramas clave, que determinan cómo aparece el botón. Los botones pueden verse como prácticamente cualquier cosa: una imagen, un gráfico o un poco de texto. No tienen que ser esos típicos rectángulos grises en forma de píldora que se ven en muchos sitios web.

Creando un símbolo de botón

En esta lección, crearás botones con pequeñas imágenes en miniatura y nombres de restaurantes. Los cuatro estados especiales de un símbolo de botón se representan en la Línea de tiempo del botón como fotogramas, al igual que en la Línea de tiempo principal. Los cuatro fotogramas incluyen lo siguiente:

• El estado Arriba muestra el botón tal como aparece cuando el ratón no interactúa con él.

• El estado Sobre muestra el botón tal como aparece cuando el ratón se desplaza sobre él.

• El estado Abajo muestra el botón tal como aparece cuando el ratón se desplaza sobre él y se presiona el botón del ratón.

• El estado Pulsado indica el área en la que se puede hacer clic del botón.

Comprenderás la relación entre estos estados y la apariencia del botón a medida que trabajes en este ejercicio.

1. Selecciona Insertar > Nuevo símbolo.

2. En el cuadro de diálogo Crear nuevo símbolo, selecciona Botón en el menú Tipo y nombra el símbolo botón gabel loffel. Haz clic en Aceptar.

   Animate te coloca en el modo de edición de símbolos para tu nuevo botón.

3. En el panel Biblioteca, expande la carpeta miniaturas de restaurantes y arrastra el símbolo gráfico miniatura gabel loffel al centro del Escenario.

4. En el panel Propiedades, establece el valor X en 0 y el valor Y en 0.

   La esquina superior izquierda de la pequeña imagen del restaurante gabel loffel ahora está alineada con el punto de registro del símbolo (marcado por la pequeña cruz en el centro de la pantalla).

5. Selecciona el fotograma Pulsado en la Línea de tiempo y selecciona Insertar > Línea de tiempo > Fotograma para extender la Línea de tiempo.

   La imagen de gabel loffel ahora se extiende a través de los estados Arriba, Sobre, Abajo y Pulsado.

6. Inserta una nueva capa. La nueva capa acomodará una imagen que aparece cuando el ratón del usuario se desplaza sobre el botón.

7. En la nueva capa, selecciona el fotograma Sobre y selecciona Insertar > Línea de tiempo > Fotograma clave.

   Animate inserta un nuevo fotograma clave en el estado Sobre de la capa superior.

8. En el panel Biblioteca, expande la carpeta vistas previas de restaurantes y arrastra el símbolo de clip de película información sobre gabel loffel al Escenario.

9. Mueve el símbolo de clip de película hasta que esté sobre la parte inferior del botón. Cuando aparezcan guías a lo largo de la parte inferior y lateral del objeto, deja que encaje en su lugar. El panel Propiedades, sección Posición y tamaño, debe mostrar aproximadamente X=0 e Y=217.

   El cuadro de información gris aparecerá sobre la imagen del restaurante cada vez que el cursor del ratón se desplace sobre el botón.

10. Inserta una tercera capa encima de las dos primeras.

    Usaremos esta capa para vincular un archivo de sonido al estado Abajo para que el botón haga un clic cuando se presione.

11. Selecciona el fotograma Abajo en la nueva capa y selecciona Insertar > Línea de tiempo > Fotograma clave.

    Se inserta un nuevo fotograma clave en el estado Abajo de la nueva capa.

12. Arrastra el archivo de sonido llamado clicksound.mp3 desde el panel Biblioteca al Escenario.

    El comienzo de la forma de onda del sonido aparece en el fotograma clave Abajo de la capa superior de tu símbolo de botón.

13. Selecciona el fotograma clave Abajo donde aparece la forma de onda y, en el panel Propiedades, sección Sonido, asegúrate de que Evento esté seleccionado en el menú Sincronizar.

    Nota: Aprenderás más sobre el sonido en la Lección 9.

    Se reproducirá un sonido de clic solo cuando un espectador presione el botón.

14. Haz clic en Escena 1 en la barra Editar encima del Escenario para salir del modo de edición de símbolos y volver a la Línea de tiempo principal. ¡Tu primer símbolo de botón está completo! Mira en tu panel Biblioteca para ver el nuevo símbolo de botón almacenado allí.

Botones invisibles y el fotograma clave Pulsado

El fotograma clave Pulsado de tu símbolo de botón indica el área que está "activa" o en la que el usuario puede hacer clic. Normalmente, el fotograma clave Pulsado contiene una forma que tiene el mismo tamaño y ubicación que la forma en tu fotograma clave Arriba. En la mayoría de los casos, quieres que los gráficos que ven los usuarios sean la misma área en la que hacen clic. Sin embargo, en ciertas aplicaciones avanzadas, es posible que desees que el fotograma clave Pulsado y el fotograma clave Arriba sean diferentes.

Si tu fotograma clave Arriba está vacío, el botón resultante se conoce como un botón invisible.

Los usuarios no pueden ver los botones invisibles, pero debido a que el fotograma clave Pulsado todavía define un área en la que se puede hacer clic, los botones invisibles permanecen activos. Por lo tanto, puedes colocar botones invisibles sobre cualquier parte del Escenario y usar ActionScript para programarlos para que respondan a los usuarios.

Los botones invisibles son útiles para crear zonas interactivas genéricas. Por ejemplo, colocarlos encima de diferentes fotos puede ayudarte a hacer que cada foto responda a un clic del ratón sin tener que hacer que cada foto sea un símbolo de botón diferente.

Duplicando botones

Ahora que has creado un botón, podrás crear otros más fácilmente. Duplicarás un botón aquí, cambiarás la imagen en la siguiente sección y luego continuarás duplicando botones y modificando imágenes para los restaurantes restantes.

1. En el panel Biblioteca, haz clic con el botón derecho en el símbolo del botón gabel loffel y selecciona Duplicar. También puedes seleccionar Duplicar en el menú del panel Biblioteca.

2. En el cuadro de diálogo Duplicar símbolo, selecciona Botón en el menú Tipo y nómbralo botón gary gari. Haz clic en Aceptar.

Intercambiando mapas de bits

Los mapas de bits y los símbolos son fáciles de intercambiar en el Escenario y pueden acelerar significativamente tu flujo de trabajo.

1. En el panel Biblioteca, haz doble clic en el icono de tu símbolo recién duplicado (botón gary gari) para editarlo.

2. Selecciona la imagen del restaurante en el Escenario.

3. En el panel Propiedades, haz clic en Intercambiar.

4. En el cuadro de diálogo Intercambiar símbolo, selecciona la siguiente imagen en miniatura, miniatura gary gari, en la carpeta miniaturas de restaurantes y haz clic en Aceptar.

   La miniatura original (que se muestra con un punto junto al nombre del símbolo) se intercambia por la que seleccionaste. Debido a que ambos tienen el mismo tamaño, el reemplazo es perfecto.

5. Ahora selecciona el fotograma clave Sobre en la Capa 2 y haz clic en el cuadro de información gris en el Escenario.

6. En el panel Propiedades, haz clic en Intercambiar e intercambia el símbolo seleccionado con el símbolo llamado información sobre gary gari.

   La instancia de tu botón en el fotograma clave Sobre se reemplaza por una que es apropiada para el segundo restaurante. Debido a que el símbolo se duplicó, todos los demás elementos, como el sonido en la capa superior, permanecen iguales.

7. Continúa duplicando tus botones e intercambiando las dos instancias dentro de ellos hasta que tengas cuatro símbolos de botón diferentes en tu panel Biblioteca, cada uno representando un restaurante diferente (botón gabel loffel, botón gary gari, botón il piatto y botón pierre platters). Cuando hayas terminado, tómate un momento para organizar todos los botones de tu restaurante en una carpeta en tu panel Biblioteca.

Colocando las instancias de botón

Ahora colocarás los botones en el Escenario y les darás nombres en el panel Propiedades para que ActionScript pueda identificarlos.

1. En la Línea de tiempo principal, inserta una nueva capa y cámbiale el nombre a botones.

2. Arrastra cada uno de tus botones desde el panel Biblioteca al centro del Escenario, colocándolos en una fila horizontal. No te preocupes por su posición exacta porque los alinearás bien en los siguientes pasos.

3. Selecciona el primer botón y, en el panel Propiedades, establece el valor X en 100.

4. Selecciona el último botón y, en el panel Propiedades, establece el valor X en 680.

5. Selecciona los cuatro botones. En el panel Alinear (Ventana > Alinear), anula la selección de Alinear con el escenario, selecciona Espacio uniformemente horizontalmente y luego haz clic en Alinear borde superior.

   Los cuatro botones ahora están distribuidos uniformemente y alineados horizontalmente.

6. Con todos los botones aún seleccionados, en el panel Propiedades, introduce 170 para el valor Y.

   Todos los cuatro botones están colocados correctamente en el Escenario.

7. Ahora puedes probar tu película para ver cómo se comportan los botones. Selecciona Control > Probar.

   Observa cómo aparece el cuadro de información gris en el fotograma clave Sobre cuando el ratón se desplaza sobre cada botón y cómo al presionar el botón del ratón sobre cada botón se activa el sonido de clic. Sin embargo, en este punto, no has proporcionado ninguna instrucción para que los botones realmente hagan algo. Esa parte viene después de nombrar los botones y aprender un poco sobre ActionScript.

Nombrando instancias de botón

A continuación, nombrarás cada instancia de botón para que ActionScript pueda hacer referencia a ella. Los principiantes a menudo olvidan este paso crucial.

1. Haz clic en una parte vacía del Escenario para deseleccionar todos los botones y luego selecciona solo el primer botón.

2. Escribe gabelloffel_btn en el campo Nombre de instancia en el panel Propiedades.

3. Nombra cada uno de los otros botones garygari_btn, ilpiatto_btn y pierreplatters_btn.

   Asegúrate de usar todas las letras minúsculas, no dejar espacios y verificar la ortografía de cada instancia de botón. Animate es muy exigente, ¡y un error tipográfico evitará que todo tu proyecto funcione correctamente!

4. Bloquea todas las capas.

Reglas de nomenclatura

Nombrar instancias es un paso crítico en la creación de proyectos interactivos en Animate. El error más común que cometen los principiantes es no nombrar, o nombrar incorrectamente, una instancia de botón.

Los nombres de instancia son importantes porque ActionScript y JavaScript usan los nombres para hacer referencia a esos objetos. Los nombres de instancia no son lo mismo que los nombres de símbolo en el panel Biblioteca. Los nombres en el panel Biblioteca son simplemente recordatorios organizativos.

La nomenclatura de instancias sigue estas sencillas reglas y mejores prácticas:

1. No uses espacios ni puntuación especial. Se pueden usar guiones bajos.

2. No comiences un nombre con un número.

3. Ten en cuenta las letras mayúsculas y minúsculas. ActionScript y JavaScript distinguen entre mayúsculas y minúsculas.

4. Termina el nombre de tu botón con _btn. Aunque no es obligatorio, ayuda a identificar esos objetos como botones.

5. No uses ninguna palabra que esté reservada para un comando de ActionScript.

Entendiendo ActionScript 3.0

Adobe Animate CC usa ActionScript 3.0, un sólido lenguaje de scripting, para extender la funcionalidad de los documentos de ActionScript y Adobe AIR. Aunque ActionScript 3.0 puede parecer intimidante si eres nuevo en el scripting, puede darte excelentes resultados con algunos scripts muy simples. Como con cualquier lenguaje, es mejor tomarse el tiempo para aprender la sintaxis y la terminología básica.

Nota: La versión más reciente de Animate CC solo admite ActionScript 3.0. Si necesitas programar en ActionScript 1.0 o 2.0, debes usar Flash Professional CS6 o anterior.

Acerca de ActionScript

ActionScript, que es similar a JavaScript, te permite agregar más interactividad a los documentos de ActionScript 3.0 y AIR. En esta lección, usarás ActionScript para adjuntar comportamientos a los botones. También aprenderás a usar ActionScript para tareas tan simples como detener una animación.

No tienes que ser un experto en scripting para usar ActionScript. De hecho, para tareas comunes, es posible que puedas copiar scripts que otros usuarios de Animate han compartido. Y también puedes usar el panel Fragmentos de código, que proporciona una manera fácil y visual de agregar ActionScript a tu proyecto o compartir código ActionScript entre desarrolladores.

Sin embargo, podrás lograr mucho más en Animate, y sentirte más seguro usando la aplicación, si comprendes cómo funciona ActionScript.

Esta lección no está diseñada para convertirte en un experto en ActionScript. En cambio, presenta términos y sintaxis comunes, te guía a través de un script simple y proporciona una introducción al lenguaje ActionScript.

Si has usado lenguajes de scripting antes, la documentación en las páginas web de Adobe Learn & Support (a las que se accede a través del menú Ayuda en Animate) puede proporcionar orientación adicional que necesitas para usar ActionScript de manera competente. Si eres nuevo en el scripting y quieres aprender ActionScript, puede que te resulte útil un libro de ActionScript 3.0 para principiantes.

Entendiendo la terminología del scripting

Muchos de los términos utilizados para describir ActionScript son similares a los términos utilizados para otros lenguajes de scripting. Los siguientes términos se usan con frecuencia en la documentación de ActionScript.

Variable

Una variable representa una pieza específica de datos que te ayuda a realizar un seguimiento de las cosas. Por ejemplo, puedes usar variables para realizar un seguimiento de una puntuación en un juego o la cantidad de clics que un usuario ha realizado con el ratón. Cuando creas o declaras una variable, también asignas un tipo de datos, que determina qué tipo de datos puede representar la variable. Por ejemplo, una variable String contiene un conjunto de caracteres alfanuméricos, mientras que una variable Number debe contener un número.

Nota: Los nombres de las variables deben ser únicos y distinguen entre mayúsculas y minúsculas. La variable mypassword no es lo mismo que la variable MyPassword. Los nombres de las variables pueden contener solo números, letras, guiones bajos y signos de dólar (pero por convención, $ no se usa en ActionScript); no pueden comenzar con un número. Estas son las mismas reglas de nomenclatura que se aplican a las instancias. (De hecho, las variables y las instancias son conceptualmente lo mismo).

Palabra clave

En ActionScript, una palabra clave es una palabra reservada que se usa para realizar una tarea específica. Por ejemplo, var es una palabra clave utilizada para crear una variable.

Debido a que estas palabras están reservadas, no puedes usarlas como nombres de variables o de otras maneras. ActionScript siempre las usa para realizar sus tareas asignadas. A medida que ingresas ActionScript en el panel Acciones, las palabras clave cambiarán de color. Esta es una excelente manera de saber si Animate reserva una palabra.

Argumentos

Los argumentos, los valores que se ven con mayor frecuencia entre paréntesis () en una línea de código, proporcionan detalles específicos para un comando en particular. Por ejemplo, en el código gotoAndStop(3); el argumento indica al cabezal de reproducción en la Línea de tiempo que vaya al fotograma 3.

Función

Una función agrupa líneas de código relacionadas a las que puedes hacer referencia por su nombre. El uso de una función permite ejecutar el mismo conjunto de declaraciones sin tener que escribirlas repetidamente.

Objetos

En ActionScript 3.0, trabajas con objetos que te ayudan a realizar ciertas tareas. Un objeto Sound, por ejemplo, te ayuda a controlar el sonido, y un objeto Date puede ayudarte a manipular datos relacionados con el tiempo. Los símbolos de botón que creaste anteriormente en esta lección también son objetos, llamados objetos SimpleButton.

En ActionScript solo se puede hacer referencia a los objetos creados en el entorno de creación (a diferencia de los creados con ActionScript) si tienen un nombre de instancia único. Los botones en el Escenario se denominan instancias y, de hecho, las instancias y los objetos son sinónimos.

Métodos

Los métodos son comandos que resultan en acción. Los métodos son los que hacen ActionScript, y cada tipo de objeto tiene su propio conjunto de métodos. Comprender ActionScript implica aprender los métodos para cada tipo de objeto. Por ejemplo, dos métodos asociados con un objeto MovieClip son stop() y gotoAndPlay().

Propiedades

Las propiedades describen un objeto. Por ejemplo, las propiedades de un clip de película incluyen su altura y ancho, coordenadas x e y, y escala horizontal y vertical. Muchas propiedades se pueden cambiar, mientras que otras propiedades solo se pueden "leer", lo que significa que simplemente describen un objeto.

Usando la sintaxis de scripting adecuada

Si no estás familiarizado con el código de programa o el scripting, puede que te resulte difícil descifrar el código ActionScript. Una vez que comprendas la sintaxis básica (la gramática y la puntuación del lenguaje), te resultará más fácil seguir un script.

• El punto y coma al final de la línea le dice a ActionScript que ha llegado al final de la línea de código.

• Como en español, cada paréntesis abierto debe tener un paréntesis cerrado correspondiente, y lo mismo ocurre con los corchetes y las llaves. Si abres algo, debes cerrarlo. Muy a menudo, las llaves en el código ActionScript se separarán en diferentes líneas. Esto facilita la lectura de lo que hay dentro de las llaves.

• El operador punto (.) proporciona una forma de acceder a las propiedades y métodos de un objeto. Escribe el nombre de la instancia, seguido de un punto, y luego introduce el nombre de la propiedad o método. Piensa en el punto como una forma de separar objetos, métodos y propiedades.

• Siempre que ingreses una cadena (como la URL de un sitio web), usa comillas a su alrededor.

• Puedes agregar comentarios para recordarte a ti mismo oa otros lo que estás logrando con diferentes partes del script. Para agregar un comentario para una sola línea, comienza con dos barras (//). Para escribir un comentario de varias líneas, comienza con /* y termina con */. Animate ignora los comentarios y no afectarán tu código en absoluto.

Animate proporciona asistencia de las siguientes maneras mientras escribes scripts en el panel Acciones:

• Las palabras que tienen significados específicos en ActionScript, como palabras clave y declaraciones, aparecen en azul a medida que las escribes en el panel Acciones. Las palabras no reservadas, como los nombres de las variables, aparecen en negro. Las cadenas aparecen en verde. Los comentarios, que ActionScript ignora, aparecen en gris.

• Mientras trabajas en el panel Acciones, Animate detecta la acción que estás ingresando y muestra una sugerencia de código. Hay dos tipos de sugerencias de código: una información sobre herramientas que contiene la sintaxis completa para esa acción y un menú emergente que enumera los posibles elementos de ActionScript.

• A medida que tu panel Acciones se llena de código, puedes contraer grupos de código para facilitar la lectura. Cuando tengas bloques de código relacionados (agrupados por llaves), haz clic en el símbolo menos en el margen del código para contraerlos y haz clic en el símbolo más en el margen del código para expandirlos.

Navegando por el panel Acciones

El panel Acciones es donde escribes todo tu código. Abre el panel Acciones seleccionando Ventana > Acciones, o seleccionando un fotograma clave en la Línea de tiempo y haciendo clic en el botón del panel ActionScript en la parte superior derecha del panel Propiedades.

También puedes hacer clic con el botón derecho en cualquier fotograma clave y seleccionar Acciones.

El panel Acciones te brinda un entorno flexible para ingresar código, así como diferentes opciones para ayudarte a escribir, editar y ver tu código.

El panel Acciones está dividido en dos partes. A la derecha del panel Acciones está el panel Script, la pizarra en blanco donde puedes escribir código. Ingresas ActionScript (o JavaScript si estás en un documento HTML5 Canvas) en el panel Script tal como lo harías en una aplicación de edición de texto.

A la izquierda está el navegador de scripts, que te dice dónde se encuentra tu código. Animate coloca ActionScript en fotogramas clave en la Línea de tiempo, por lo que el navegador de scripts puede ser particularmente útil si tienes mucho código disperso en diferentes fotogramas clave y en diferentes líneas de tiempo.

En la parte inferior del panel Acciones, Animate muestra el número de línea y el número de columna (o carácter en la fila) de la posición actual del punto de inserción de texto.

La esquina superior derecha del panel Acciones contiene opciones para buscar, reemplazar e insertar código.

Preparando la línea de tiempo

Cada nuevo proyecto de Animate comienza con un solo fotograma. Para crear espacio en la Línea de tiempo para agregar más contenido, deberás agregar más fotogramas a al menos una capa.

1. Selecciona un fotograma posterior en la capa superior. En este ejemplo, selecciona el fotograma 50.

2. Selecciona Insertar > Línea de tiempo > Fotograma (F5). También puedes hacer clic con el botón derecho y seleccionar Insertar fotograma.

   Animate agrega fotogramas en la capa superior hasta el punto seleccionado, fotograma 50.

3. Selecciona el fotograma 50 en las otras dos capas e inserta fotogramas hasta el fotograma seleccionado.

   Todas tus capas tienen 50 fotogramas en la Línea de tiempo.

Añadiendo una acción de detener

Ahora que tienes fotogramas en la Línea de tiempo, tu película se reproducirá linealmente desde el fotograma 1 hasta el fotograma 50. Sin embargo, con esta guía de restaurantes interactiva, querrás que tus espectadores elijan un restaurante para ver en el orden que elijan. Por lo tanto, deberás pausar la película en el primer fotograma para esperar a que tu espectador haga clic en un botón. Usas una acción de detener para pausar tu película de Animate. Una acción de detener simplemente evita que la película continúe deteniendo el cabezal de reproducción.

1. Inserta una nueva capa en la parte superior y cámbiale el nombre a acciones.

2. Selecciona el primer fotograma clave de la capa de acciones y abre el panel Acciones (Ventana > Acciones).

3. En el panel Script, escribe stop();.

   El código aparece en el panel Script y una pequeña "a" minúscula aparece en el primer fotograma clave de la capa de acciones para indicar que contiene algún código. La película ahora se detendrá en el fotograma 1.

Creando controladores de eventos para botones

Los eventos son sucesos que ocurren en tu película que Animate puede detectar y responder. Por ejemplo, un clic del ratón, un movimiento del ratón y una pulsación de tecla son todos eventos. Un gesto de pellizco y deslizamiento en dispositivos móviles también son eventos. Estos eventos son producidos por el usuario, pero algunos eventos pueden ocurrir independientemente del usuario, como la carga exitosa de una pieza de datos o la finalización de un sonido. Con ActionScript, puedes escribir código que detecte eventos y responda a ellos con un controlador de eventos.

El primer paso en el manejo de eventos es crear un oyente que "escuchará" el evento. Un detector de eventos en ActionScript 3.0 se parece a esto:

[Click here to view code image]

dondeescuchar.addEventListener(queevento, respuestaalevento);

El comando real (o método) es addEventListener(). Las otras palabras son marcadores de posición para objetos y parámetros para tu situación. dondeescuchar es el objeto donde ocurre el evento (a menudo un botón), queevento es el tipo específico de evento (como un clic del ratón) y respuestaalevento es el nombre de una función que se activa cuando ocurre el evento. Entonces, si quieres escuchar un clic del ratón sobre un botón llamado btn1_btn, y la respuesta es activar una función llamada showimage1, el código se vería así:

[Click here to view code image]

btn1_btn.addEventListener(MouseEvent.CLICK, showimage1);

El siguiente paso es crear la función que responderá al evento; en este caso, la función llamada showimage1. Una función simplemente agrupa un montón de acciones; luego puedes activar esa función haciendo referencia a su nombre. Una función se parece a esto:

[Click here to view code image]

function showimage1 (miEvento:MouseEvent){ };

Los nombres de las funciones, como los nombres de los botones, son arbitrarios. Puedes nombrar las funciones como te parezca. En este ejemplo en particular, el nombre de la función es showimage1. Recibe un parámetro (dentro del paréntesis) llamado miEvento, el evento que invocó al oyente. El elemento que sigue a los dos puntos indica qué tipo de objeto es. Si un evento activa esta función, Animate ejecuta todas las acciones entre llaves.

Añadiendo el detector de eventos y la función

Añadirás código ActionScript para escuchar un clic del ratón en cada botón. La respuesta hará que Animate vaya a un fotograma en particular en la Línea de tiempo para mostrar diferente contenido.

1. Selecciona el primer fotograma de la capa de acciones.

2. Abre el panel Acciones.

3. En el panel Script del panel Acciones, comenzando en la segunda línea, escribe

gabelloffel_btn.addEventListener(MouseEvent.CLICK, restaurant1);

El oyente escucha un clic del ratón sobre el objeto gabelloffel_btn en el Escenario. Si ocurre el evento, activa la función llamada restaurant1.

4. En la siguiente línea del panel Script, escribe

function restaurant1(evento:MouseEvent):void { gotoAndStop(10); }

Nota: La palabra clave void se refiere al tipo de datos que devuelve la función y significa que no se devuelve nada. A veces, después de que se ejecutan las funciones, "devuelven" datos, como hacer algunos cálculos y devolver una respuesta.

Consejo: A medida que ingresas código en el panel Script del panel Acciones, Animate te ayudará proporcionando menús emergentes que enumeran las opciones de código.

La función llamada restaurante1 contiene instrucciones para ir al fotograma 10 y detenerse allí. El código para tu botón Gabel Loffel está completo.

Eventos del ratón

La siguiente lista contiene el código ActionScript para eventos comunes del ratón para el escritorio. Usa estos códigos cuando crees tu oyente y asegúrate de prestar atención a las letras minúsculas y mayúsculas. Para la mayoría de los usuarios, el primer evento (MouseEvent.CLICK) será suficiente para todos los proyectos. Ese evento ocurre cuando el usuario presiona y suelta el botón del ratón.

• MouseEvent.CLICK
• MouseEvent.MOUSE_MOVE
• MouseEvent.MOUSE_DOWN
• MouseEvent.MOUSE_UP
• MouseEvent.MOUSE_OVER
• MouseEvent.MOUSE_OUT

Para obtener una lista completa de todos los eventos disponibles para un botón, consulta los archivos de ayuda de Animate y busca los eventos de la clase SimpleButton.

Nota: En los ejemplos de código, puedes encontrarte con este misterioso carácter: . ¡No intentes incluirlo cuando escribas tu código en el panel Acciones! Se llama "carácter de continuación de código" y se usa solo cuando una línea de código es demasiado larga para mostrarse en una sola línea en el libro. Te permite saber que la línea de código continúa en la siguiente línea de texto.

5. En la siguiente línea del panel Script, introduce código adicional para los tres botones restantes. Puedes copiar y pegar las líneas 2 a 5 y simplemente cambiar los nombres del botón, el nombre de la función (en dos lugares) y el fotograma de destino. El script completo debe leerse de la siguiente manera:

[Click here to view code image]

stop(); gabelloffel_btn.addEventListener(MouseEvent.CLICK, restaurant1); function restaurant1(event:MouseEvent):void { gotoAndStop(10); } garygari_btn.addEventListener(MouseEvent.CLICK, restaurant2); function restaurant2(event:MouseEvent):void { gotoAndStop(20); } ilpiatto_btn.addEventListener(MouseEvent.CLICK, restaurant3); function restaurant3(event:MouseEvent):void { gotoAndStop(30); } pierreplatters_btn.addEventListener(MouseEvent.CLICK, restaurant4); function restaurant4(event:MouseEvent):void { gotoAndStop(40); }

Nota: ActionScript, como otros lenguajes de programación, es muy exigente y un solo punto fuera de lugar puede hacer que todo tu proyecto se detenga. Ten mucho cuidado con la puntuación. Usa la opción Llave de cierre automático en Animate > Preferencias > Editor de código para que Animate complete automáticamente las llaves en caso de que lo olvides. Aprovecha las sugerencias de color y verifica que las palabras clave y otros comandos aparezcan en color.

Comandos de ActionScript para la navegación en la línea de tiempo

La siguiente lista contiene el código ActionScript para comandos de navegación comunes. Usa estos códigos cuando crees botones para detener el cabezal de reproducción, iniciar el cabezal de reproducción o mover el cabezal de reproducción a diferentes fotogramas en la Línea de tiempo. Los comandos gotoAndStop y gotoAndPlay requieren información adicional, o argumentos, dentro de sus paréntesis como se indica.

• stop();
• play();
• gotoAndStop(numerodefotograma o "etiqueta de fotograma");
• gotoAndPlay(numerodefotograma o "etiqueta de fotograma");
• nextFrame();
• prevFrame();

Nota: Asegúrate de incluir la llave final para cada función o el código no funcionará.

Consejo: Haz clic en el botón Formatear código en la esquina superior derecha de tu panel Acciones ( ) para ordenar tu código y facilitar su lectura. Puedes cambiar la configuración de formato en Editar > Preferencias > Editor de código (Windows) o Animate CC > Preferencias > Editor de código (Mac).

Comprobando errores

La depuración es un proceso necesario, incluso para los programadores veteranos. Incluso si tienes mucho cuidado, los errores se infiltrarán en tu código. Afortunadamente, Animate te alerta de los errores de sintaxis en el panel Errores del compilador, con información sobre la naturaleza del error y su ubicación en el panel Acciones.

1. Prueba tu película seleccionando Control > Probar.

   Si no hay errores de código, Animate genera el archivo SWF en una ventana separada. Si Animate detecta algún error de código, el panel Errores del compilador aparece automáticamente (Ventana > Errores del compilador) con una descripción del error y su ubicación. Ninguno de tus códigos será funcional si hay un error del compilador en cualquier parte del código. Por ejemplo, intenta esto: selecciona el fotograma 1 en la Línea de tiempo y abre el panel Acciones. En la línea 18, agrega otra llave de cierre.

2. Prueba tu película (Control > Probar).

   Se abre la ventana Errores del compilador, advirtiéndote de un carácter adicional que se agregó en la línea 18.

3. Haz doble clic en el mensaje de error en el panel Errores del compilador.

   Animate te lleva a la ubicación exacta del error en el panel Acciones, donde puedes corregirlo. Elimina el carácter adicional para eliminar el error.

Creando fotogramas clave de destino

Cuando el usuario hace clic en cada botón, Animate mueve el cabezal de reproducción a un nuevo lugar en la Línea de tiempo de acuerdo con las instrucciones de ActionScript que acabas de programar. Sin embargo, aún no has colocado nada diferente en esos fotogramas en particular. Ese es el siguiente paso.

Insertando fotogramas clave con diferente contenido

Crearás cuatro fotogramas clave en una nueva capa y colocarás información sobre cada uno de los restaurantes en los nuevos fotogramas clave.

1. Inserta una nueva capa en la parte superior de la pila de capas, pero debajo de la capa de acciones, y cámbiale el nombre a contenido.

2. Selecciona el fotograma 10 de la capa de contenido.

3. Inserta un nuevo fotograma clave en el fotograma 10 (Insertar > Línea de tiempo > Fotograma clave o F6).

4. Inserta nuevos fotogramas clave en los fotogramas 20, 30 y 40.

   Tu línea de tiempo tiene cuatro fotogramas clave vacíos en la capa de contenido.

5. Selecciona el fotograma clave en el fotograma 10.

6. En el panel Biblioteca, expande la carpeta llamada contenido del restaurante. Arrastra el símbolo llamado gabel and loffel desde el panel Biblioteca al Escenario. El símbolo llamado gabel and loffel es un símbolo de clip de película que contiene una foto, gráficos y texto sobre el restaurante.

7. Coloca el símbolo en el centro del Escenario, pero fuera del camino del encabezado. La sección Posición y tamaño del panel Propiedades debe mostrar X=60 e Y=150.

   La información del restaurante sobre gabel and loffel está centrada en el Escenario y cubre todos los botones.

8. Selecciona el fotograma clave en el fotograma 20.

9. Arrastra el símbolo llamado gary gari desde el panel Biblioteca al Escenario para que también cubra todos los botones. Este es otro símbolo de clip de película que contiene una foto, gráficos y texto sobre este restaurante.

10. En el panel Propiedades, asegúrate de que el valor X esté establecido en 60 y el valor Y esté establecido en 150.

11. Coloca cada uno de los símbolos de clip de película de la carpeta de contenido del restaurante en el panel Biblioteca en los fotogramas clave correspondientes en la capa de contenido.

    Cada fotograma clave debe contener un símbolo de clip de película diferente sobre un restaurante.

Usando etiquetas en fotogramas clave

Tu código ActionScript le dice a Animate que vaya a un número de fotograma diferente cuando el usuario hace clic en cada uno de los botones. Sin embargo, si decides editar tu Línea de tiempo y agregar o eliminar algunos fotogramas, deberás volver a tu ActionScript y cambiar tu código para que los números de fotograma coincidan.

Una manera fácil de evitar este problema es usar etiquetas de fotograma en lugar de números de fotograma fijos. Las etiquetas de fotograma son nombres que le das a los fotogramas clave. En lugar de hacer referencia a los fotogramas clave por su número de fotograma, te refieres a ellos por su etiqueta. Por lo tanto, incluso si mueves tus fotogramas clave de destino mientras editas, las etiquetas permanecen con sus fotogramas clave. Para hacer referencia a las etiquetas de fotograma en ActionScript, debes encerrarlas entre comillas. El comando gotoAndStop("etiqueta1") hace que el cabezal de reproducción vaya al fotograma clave con la etiqueta llamada etiqueta1.

1. Selecciona el fotograma 10 en la capa de contenido.

2. En el panel Propiedades, sección Etiqueta, introduce etiqueta1 en el campo Nombre.

   Aparece un pequeño icono de bandera en cada uno de los fotogramas clave que tienen etiquetas.

3. Selecciona el fotograma 20 en la capa de contenido.

4. En el panel Propiedades, en la sección Etiqueta, introduce etiqueta2 en el campo Nombre.

5. Selecciona los fotogramas 30 y 40 y, en el panel Propiedades, introduce los nombres correspondientes en el campo Nombre para cada uno: etiqueta3 y etiqueta4.

   Aparece un pequeño icono de bandera en cada uno de los fotogramas clave que tiene una etiqueta.

6. Selecciona el primer fotograma de la capa de acciones y abre el panel Acciones.

7. En tu código ActionScript, cambia todos los números de fotograma fijos en cada uno de los comandos gotoAndStop() a las etiquetas de fotograma correspondientes:

   • gotoAndStop(10); debe cambiarse a gotoAndStop("etiqueta1");
   • gotoAndStop(20); debe cambiarse a gotoAndStop("etiqueta2");
   • gotoAndStop(30); debe cambiarse a gotoAndStop("etiqueta3");
   • gotoAndStop(40); debe cambiarse a gotoAndStop("label4");

   El código ActionScript ahora dirige el cabezal de reproducción a una etiqueta de fotograma en particular en lugar de a un número de fotograma en particular.

Nota: Asegúrate de usar comillas rectas, y no comillas curvas, para rodear el nombre de tu etiqueta. En ActionScript, las comillas rectas y curvas se tratan de manera diferente. Sin embargo, puedes usar comillas simples o dobles.

8. Prueba tu película seleccionando Control > Probar.

   Cada botón mueve el cabezal de reproducción a un fotograma clave etiquetado diferente en la Línea de tiempo, donde se muestra un clip de película diferente. El usuario puede elegir ver los restaurantes en cualquier orden. Sin embargo, dado que la información del restaurante cubre los botones, no puedes ver la pantalla del menú original para elegir otro restaurante. Deberás proporcionar otro botón para volver al primer fotograma, lo que harás en la siguiente sección.

Creando un botón de inicio usando fragmentos de código

Un botón de inicio simplemente hace que el cabezal de reproducción vuelva al primer fotograma de la Línea de tiempo, o a un fotograma clave donde se presenta al espectador un conjunto original de opciones o el menú principal. Puedes crear un botón que vaya al fotograma 1 usando el mismo proceso que seguiste para crear los cuatro botones del restaurante. Sin embargo, en esta sección, aprenderás a usar el panel Fragmentos de código para agregar ActionScript a tu proyecto.

Añadiendo otra instancia de botón

El archivo de lección de muestra te proporciona un botón de inicio o menú principal en el panel Biblioteca.

1. Selecciona la capa Botones y desbloquéala si está bloqueada.

2. Arrastra el botón llamado menú principal desde el panel Biblioteca al Escenario. Coloca la instancia del botón en la esquina superior derecha.

Usando el panel Fragmentos de código para agregar ActionScript

El panel Fragmentos de código proporciona código ActionScript común que te facilita agregar interactividad a tu proyecto de Animate. Si no estás seguro de tu capacidad para codificar tus propios botones, puedes usar el panel Fragmentos de código para aprender a agregar interactividad. El panel Fragmentos de código llena el panel Acciones con todo el código necesario y te permite modificar los parámetros críticos del código.

También puedes guardar, importar y compartir código entre un equipo de desarrolladores para que el proceso de desarrollo y producción sea más eficiente.

1. Selecciona el primer fotograma de la capa de acciones en tu Línea de tiempo. Selecciona el botón del menú principal en el Escenario.

2. Selecciona Ventana > Fragmentos de código o, si tu panel Acciones ya está abierto, haz clic en el botón Fragmentos de código en la parte superior derecha del panel Acciones.

   Aparece el panel Fragmentos de código. Los fragmentos de código están organizados en carpetas que describen su función.

3. En el panel Fragmentos de código, expande la carpeta llamada ActionScript; luego expande la carpeta Navegación de línea de tiempo y haz doble clic en Hacer clic para ir al fotograma y detener.

   Animate te advierte que debes nombrar el objeto seleccionado (el botón del menú principal) antes de poder trabajar con el código.

4. Haz clic en Aceptar.

   Animate asigna automáticamente al botón del menú principal un nombre de instancia, button_1. Aparece el panel Acciones que muestra el nuevo código ActionScript agregado a tu script. El nuevo código contiene comentarios (entre /* y */) que describen la función del código y los diferentes parámetros.

5. Reemplaza el comando gotoAndStop(5) con gotoAndStop(1).

   Hacer clic en el botón del menú principal activará la función que mueve el cabezal de reproducción al fotograma 1.

6. Prueba tu película (Control > Probar).

   Haz clic en uno de los botones del restaurante. Aparece la información del restaurante, cubriendo los botones. Ahora, haz clic en el botón del menú principal y volverás al fotograma 1, donde todos los botones del menú están accesibles de nuevo.

Nota: Animate agrega automáticamente fragmentos de código a una nueva capa llamada Acciones si aún no tienes una capa de Acciones. Si tu ActionScript está distribuido en diferentes capas, es mejor consolidar tu código copiando y pegando el código en un fotograma clave en una sola capa.

Opciones de fragmentos de código

El uso del panel Fragmentos de código no solo hace que agregar interactividad sea rápido y aprender código sea fácil, sino que también puede ayudar a organizar el código de uso frecuente para ti y para un equipo que trabaja en el mismo proyecto. El panel Fragmentos de código contiene opciones adicionales para guardar tu código y compartirlo con otros.

Creando tu propio fragmento de código

Si tienes tu propio código ActionScript que esperas usar repetidamente, puedes almacenarlo en el panel Fragmentos de código y aplicarlo fácilmente en otros proyectos.

1. Abre el panel Fragmentos de código, si aún no está abierto.

2. En el menú Opciones en la parte superior derecha del panel, selecciona Crear nuevo fragmento de código. Aparece el cuadro de diálogo Crear nuevo fragmento de código.

3. Introduce un título en el campo Título y una descripción en el campo Descripción para tu nuevo fragmento de código. En el campo Código, introduce el ActionScript que deseas guardar. Usa el término nombre_de_instancia_aquí para cualquier nombre de instancia de marcador de posición y asegúrate de seleccionar la opción debajo del campo Código.

4. Haz clic en Aceptar.

   Animate guarda tu código en el panel Fragmentos de código en una carpeta Personalizada. Ahora puedes acceder a tu código y aplicarlo a futuros proyectos.

Consejo: Haz clic en Autocompletar si deseas copiar el código ActionScript que está actualmente seleccionado en tu panel Acciones al nuevo fragmento.

Compartiendo tu fragmento de código

Pronto, puedes acumular una gran biblioteca de fragmentos de código útiles que deseas compartir con otros desarrolladores. Es fácil exportar tus fragmentos de código personalizados y permitir que otros desarrolladores de Animate los importen a su propio panel Fragmentos de código.

1. Abre el panel Fragmentos de código, si aún no está abierto.

2. En el menú Opciones en la parte superior derecha del panel, selecciona Exportar XML de fragmentos de código.

   En el cuadro de diálogo Guardar fragmento de código como que se abre, elige un nombre de archivo y un destino y haz clic en Aceptar. Animate guarda todos los fragmentos de código de tu panel Fragmentos de código (los predeterminados, así como tus propios fragmentos personalizados) en un archivo XML que puedes distribuir a otros desarrolladores de tu equipo.

3. Para importar fragmentos de código personalizados, selecciona Importar XML de fragmentos de código en el menú Opciones en el panel Fragmentos de código. Elige el archivo XML que contiene los fragmentos personalizados y haz clic en Abrir. Tu panel Fragmentos de código ahora contendrá todos los fragmentos del archivo XML.

Reproduciendo animación en el destino

Hasta ahora, esta guía de restaurantes interactiva funciona utilizando el comando gotoAndStop() para mostrar información en diferentes fotogramas clave a lo largo de la Línea de tiempo. Pero supón que quisieras que una imagen se desvaneciera en lugar de aparecer repentinamente, ¿cómo reproducirías una animación después de que un usuario hace clic en un botón? Una forma es usar el comando gotoAndPlay(), que mueve el cabezal de reproducción al número de fotograma o etiqueta de fotograma especificado por su parámetro y se reproduce desde ese punto en adelante.

Creando animaciones de transición

A continuación, crearás una breve animación de transición para cada una de las guías de restaurantes. La animación de transición mostrará las guías de restaurantes aumentando lentamente su opacidad para desvanecerse. Luego, cambiarás tu código ActionScript para indicarle a Animate que vaya a cada uno de los fotogramas clave iniciales y reproduzca la animación.

1. Mueve el cabezal de reproducción a la etiqueta de fotograma etiqueta1.

2. Haz clic con el botón derecho en la instancia de la información del restaurante en el Escenario y selecciona Crear interpolación de movimiento.

   Animate crea una capa de interpolación separada para la instancia para que pueda continuar con la interpolación de movimiento.

3. En el panel Propiedades, sección Efecto de color, selecciona Alfa en el menú Estilo.

4. Establece el control deslizante Alfa en 0%.

   La instancia en el Escenario se vuelve totalmente transparente.

5. Mueve el cabezal de reproducción al final del intervalo de interpolación en el fotograma 19.

6. Selecciona la instancia transparente en el Escenario.

7. En el panel Propiedades, establece el control deslizante Alfa en 100%.

   La instancia se muestra con un nivel de opacidad normal. La interpolación de movimiento del fotograma 10 al fotograma 19 produce un efecto de fundido de entrada suave.

8. Crea interpolaciones de movimiento similares para los restaurantes restantes en los fotogramas clave etiquetados etiqueta2, etiqueta3 y etiqueta4.

   Nota: Recuerda que puedes usar el panel Ajustes preestablecidos de movimiento para guardar una interpolación de movimiento y aplicarla a otros objetos para ahorrarte tiempo y esfuerzo. Selecciona la primera interpolación de movimiento en la Línea de tiempo y haz clic en Guardar selección como ajuste preestablecido. Una vez que se guarda, puedes aplicar la misma interpolación de movimiento a otra instancia. Sin embargo, si tus interpolaciones de movimiento no tienen todas la misma longitud que la interpolación copiada en el ajuste preestablecido, es posible que debas ajustar un fotograma clave inicial o final después de aplicar el ajuste preestablecido.

Usando el comando gotoAndPlay

El comando gotoAndPlay hace que el cabezal de reproducción de Animate se mueva a un fotograma específico en la Línea de tiempo y comience a reproducirse desde ese punto.

1. Selecciona el primer fotograma de la capa de acciones y abre el panel Acciones.

2. En tu código ActionScript, cambia los cuatro primeros comandos gotoAndStop() a comandos gotoAndPlay(). Deja el parámetro sin cambios:

   • gotoAndStop("etiqueta1"); debe cambiarse a gotoAndPlay("etiqueta1");
   • gotoAndStop("etiqueta2"); debe cambiarse a gotoAndPlay("etiqueta2");
   • gotoAndStop("etiqueta3"); debe cambiarse a gotoAndPlay("etiqueta3");
   • gotoAndStop("etiqueta4"); debe cambiarse a gotoAndPlay("etiqueta4");

   Para cada uno de los botones del restaurante, el código ActionScript ahora dirige el cabezal de reproducción a una etiqueta de fotograma en particular y comienza a reproducirse en ese punto. Asegúrate de mantener la función para tu botón de inicio sin cambios. Querrás que esa función siga siendo un comando gotoAndStop().

Consejo: Una forma rápida y sencilla de realizar múltiples reemplazos es usar el comando Buscar y reemplazar en el panel Acciones. Haz clic en el botón Buscar en la esquina superior derecha ( ), selecciona Buscar y luego elige Buscar y reemplazar en el menú a la derecha del campo Buscar texto.

Deteniendo las animaciones

Si pruebas tu película ahora (Control > Probar), verás que cada botón va a su etiqueta de fotograma correspondiente y se reproduce desde ese punto, pero sigue reproduciéndose, mostrando todas las animaciones restantes en la Línea de tiempo. El siguiente paso es decirle a Animate cuándo detenerse.

1. Selecciona el fotograma 19 de la capa de acciones, el fotograma justo antes del fotograma clave etiqueta2 en la capa de contenido.

2. Haz clic con el botón derecho y selecciona Insertar fotograma clave.

   Usaremos el nuevo fotograma clave para agregar una acción de detener justo antes de que comience a reproducirse la segunda animación.

3. Abre el panel Acciones.

   El panel Script en el panel Acciones está en blanco. ¡No te asustes! Tu código no ha desaparecido. Tu código para los detectores de eventos está en el primer fotograma clave de la capa de acciones. Has seleccionado un nuevo fotograma clave en el que agregarás un comando de detener.

4. En el panel Script, introduce stop();.

   Animate dejará de reproducirse cuando llegue al fotograma 19.

5. Inserta fotogramas clave en los fotogramas 29, 39 y 50.

6. En cada uno de esos fotogramas clave, agrega un comando de detener en el panel Acciones.

   Consejo: Si lo deseas, también puedes usar el panel Fragmentos de código para agregar el comando de detener.

7. Prueba tu película seleccionando Control > Probar.

   Cada botón te lleva a un fotograma clave diferente y reproduce una breve animación de fundido de entrada. Al final de la animación, la película se detiene y espera a que el espectador haga clic en el botón Inicio.

Consejo: Si deseas una forma rápida y sencilla de duplicar el fotograma clave que contiene el comando de detener, mantén presionada la tecla Opción/Alt mientras lo mueves a una nueva ubicación en la Línea de tiempo.

Fijando código en el panel Acciones

Cuando tienes código disperso en varios fotogramas clave en la Línea de tiempo, a veces es difícil ir y venir para editar o ver tu código. El panel Acciones te proporciona una forma de mantener el código de fotogramas clave particulares "fijado" al panel Acciones. Haz clic en el botón Fijar script en la parte superior del panel Acciones y Animate creará una pestaña separada para el código que se muestra actualmente en el panel Script. La pestaña se etiquetará con el número de fotograma donde reside tu código. Puedes fijar varios scripts, lo que te permite navegar fácilmente entre ellos.

Botones animados

Actualmente, cuando pasas el cursor del ratón sobre uno de los botones del restaurante, el cuadro gris de información adicional aparece repentinamente. Pero imagina si ese cuadro gris de información estuviera animado. Daría más vida y sofisticación a la interacción entre el usuario y el botón.

Los botones animados muestran una animación en los fotogramas clave Arriba, Sobre o Abajo. La clave para crear un botón animado es crear una animación dentro de un símbolo de clip de película y luego colocar ese símbolo de clip de película dentro de los fotogramas clave Arriba, Sobre o Abajo de un símbolo de botón. Cuando se muestra uno de esos fotogramas clave de botón, se reproduce la animación en el clip de película.

Creando la animación en un símbolo de clip de película

Tus símbolos de botón en esta guía de restaurantes interactiva ya contienen un símbolo de clip de película de un cuadro de información gris en sus estados Sobre. Editarás cada símbolo de clip de película para agregar una animación dentro de él.

1. En el panel Biblioteca, expande la carpeta vistas previas de restaurantes. Haz doble clic en el icono del símbolo de clip de película para información sobre gabel loffel. Entras en el modo de edición de símbolos para el símbolo de clip de película llamado información sobre gabel loffel.

2. Selecciona todos los elementos visuales en el Escenario (Ctrl+A/Comando+A).

3. Haz clic con el botón derecho y selecciona Crear interpolación de movimiento.

4. En el cuadro de diálogo que aparece pidiendo confirmación para convertir la selección a un símbolo, haz clic en Aceptar.

   La Capa 1 se convierte en una capa de interpolación de movimiento y agrega 1 segundo de fotogramas a la Línea de tiempo del clip de película.

5. Arrastra el final del intervalo de interpolación hacia atrás para que la Línea de tiempo solo tenga 10 fotogramas.

6. Mueve el cabezal de reproducción al fotograma 1 y selecciona la instancia en el Escenario.

7. En el panel Propiedades, sección Efecto de color, selecciona Alfa en el menú Estilo y establece el valor Alfa en 0%.

   La instancia en el Escenario se vuelve totalmente transparente.

8. Mueve el cabezal de reproducción al final del intervalo de interpolación en el fotograma 10.

9. Selecciona la instancia transparente en el Escenario.

10. En el panel Propiedades, establece el valor Alfa en 100%.

    Animate crea una transición suave entre la instancia transparente y opaca en el intervalo de interpolación de 10 fotogramas.

11. Inserta una nueva capa y cámbiale el nombre a acciones.

12. Inserta un nuevo fotograma clave en el último fotograma (fotograma 10) de la capa de acciones.

13. Abre el panel Acciones (Ventana > Acciones) e introduce stop(); en el panel Script.

    Agregar la acción de detener en el último fotograma asegura que el efecto de fundido de entrada se reproduzca solo una vez.

14. Sal del modo de edición de símbolos haciendo clic en el botón Escena 1 en la barra Editar encima del Escenario.

15. Selecciona Control > Probar.

Consejo: Si deseas que un botón animado repita su animación, omite el comando de detener al final de la Línea de tiempo del clip de película.

Cuando el cursor del ratón se desplaza sobre el primer botón del restaurante, la información gris .se desvanece. La interpolación de movimiento dentro del símbolo de clip de película reproduce el efecto de fundido de entrada, y el símbolo de clip de película se coloca en el estado Sobre del símbolo de botón.

16. Crea interpolaciones de movimiento idénticas para los otros clips de película del cuadro de información gris para animar todos los botones del restaurante.

Preguntas de repaso

1. ¿Cómo y dónde agregas código ActionScript?

2. ¿Cómo nombras una instancia y por qué es necesario?

3. ¿Cómo puedes etiquetar fotogramas y cuándo es útil?

4. ¿Qué es una función?

5. ¿Qué es un evento? ¿Qué es un detector de eventos?

6. ¿Cómo se crea un botón animado?

Respuestas de repaso

1. El código ActionScript se puede adjuntar a fotogramas clave de la Línea de tiempo. Los fotogramas clave que contienen ActionScript se indican con una pequeña "a" minúscula. Agregas ActionScript en el panel Acciones. Selecciona Ventana > Acciones, o selecciona un fotograma clave y haz clic en el icono del panel ActionScript en el panel Propiedades, o haz clic con el botón derecho y selecciona Acciones. Introduces el código directamente en el panel Script en el panel Acciones, o puedes agregar ActionScript a través del panel Fragmentos de código.

2. Para nombrar una instancia, selecciónala en el Escenario y luego escribe en el campo Nombre de instancia en el panel Propiedades. Necesitas nombrar una instancia para que ActionScript pueda identificarla con código.

3. Para etiquetar un fotograma, selecciona un fotograma clave en la Línea de tiempo y luego escribe un nombre en el cuadro Etiqueta de fotograma en el panel Propiedades. Puedes etiquetar fotogramas en Animate para que sea más fácil hacer referencia a los fotogramas en ActionScript y para darte más flexibilidad.

4. Una función es un grupo de declaraciones a las que puedes hacer referencia por su nombre. El uso de una función permite ejecutar el mismo conjunto de declaraciones sin tener que escribirlas repetidamente en el mismo script. Cuando Animate detecta un evento, ejecuta una función en respuesta.

5. Un evento es un suceso que se inicia con un clic de botón, una pulsación de tecla o cualquier número de entradas que Animate puede detectar y responder. Un detector de eventos, también llamado controlador de eventos, es una función que se ejecuta en respuesta a eventos específicos.

6. Los botones animados muestran una animación en los fotogramas clave Arriba, Sobre o Abajo. Para crear un botón animado, crea una animación dentro de un símbolo de clip de película y luego coloca ese símbolo de clip de película dentro de los fotogramas clave Arriba, Sobre o Abajo de un símbolo de botón. Cuando se muestra uno de esos fotogramas clave de botón, se reproduce la animación en el clip de película.