Introducción de la lección

En esta lección, aprenderá a hacer lo siguiente:

  • Entender la interactividad
  • Escribir con sintaxis de JavaScript
  • Reconocer la relación entre JavaScript, jQuery y la API de Edge Animate
  • Diferenciar activadores, eventos y acciones
  • Añadir activadores a la línea de tiempo
  • Insertar etiquetas
  • Crear acciones y responder a eventos
  • Controlar el comportamiento del cabezal de reproducción de la línea de tiempo
  • Ver y editar código con el panel Código
  • Usar comentarios para anotar código
  • Ocultar y mostrar elementos para incorporar información visual para botones
  • Controlar elementos animados
  • Personalizar el cursor del ratón

Esta lección se completa en aproximadamente dos horas. Antes de comenzar, descargue el contenido Lesson05.

Deje que sus observadores analicen la composición y pasen a ser participantes activos. Use los fragmentos de código integrados y los paneles intuitivos de Adobe Edge Animate para crear experiencias interactivas atractivas y guiadas por los propios usuarios.

Introducción

Para comenzar, vea la guía de viaje que conseguirá crear una vez aprenda a hacer proyectos interactivos en Adobe Edge Animate.

  1. Haga doble clic en el archivo 05End.html de la carpeta Lesson05/05End para reproducir la composición en un navegador.

    El proyecto es una galería interactiva de fotos que muestra imágenes de Burma. Los observadores pueden ver la pequeña presentación de manera automática y hacerla repetir desde el principio. O, si no, los observadores pueden hacer clic en cualquier imagen en miniatura del lado izquierdo del escenario para ir directamente a alguna imagen en particular. Mueva su ratón sobre el botón triangular de la parte superior para ver información del título.

    En esta lección, creará botones interactivos con efectos al poner encima el ratón y aprenderá a incorporar el código adecuado que indicará a Edge Animate donde mover el cabezal de reproducción de la línea de tiempo para visualizar allí la animación o imagen en particular.

  2. Cierre el archivo 05End.html y salga de su navegador.

  3. Haga doble clic en el archivo de Edge Animate 05Start.html de la carpeta Lesson05/05Start para abrir el fichero de proyecto inicial en Edge Animate.

    El fichero incluye todos los activos ya colocados en el escenario y las transiciones entre cada imagen de la línea de tiempo. El escenario ya ha sido dimensionado adecuadamente. En esta lección, usted conseguirá convertir en interactiva esta animación lineal.

  4. Elija Archivo > Guardar como. Dé un nombre al archivo 05_workingcopy y guárdelo en la carpeta 05Start. Guardar una copia de trabajo asegura que se podrá disponer del fichero original caso de desear volver a empezar.

Sobre las composiciones interactivas

Las composiciones interactivas cambian según las acciones de los espectadores. Por ejemplo, cuando el observador hace clic en un botón, es posible que aparezca un gráfico diferente con más información. La interactividad puede ser sencilla, como hacer clic en un botón, o puede ser más compleja, involucrando diferentes clases de interacciones con el mismo elemento; por ejemplo, mover el cursor sobre un botón, hacer clic en el botón y mover el cursor hacia afuera del botón son tres eventos específicos que pueden dar por resultado diferentes cambios visuales en el escenario, distintos para cada uno de ellos.

En Edge Animate se usa JavaScript para lograr la interactividad. JavaScript es un código popular estándar para navegadores web. JavaScript se ejecuta en navegadores de escritorio, así como en dispositivos como tabletas y teléfonos móviles.

Si no tiene ni idea de lo que es JavaScript ni de cómo escribir código, ¡no se asuste! Adobe Edge Animate proporciona una sencilla interfaz para añadir JavaScript a sus composiciones y así integrar funciones interactivas comunes. Conforme se vaya sintiendo más cómodo con la sintaxis del código, puede empezar a profundizar y personalizar la interactividad.

En esta lección, aprenderá a crear navegación no lineal, lo que significa que la animación no tiene por que ir en línea recta desde el principio hasta el final y parar allí. Añadirá código que se activará cuando el cabezal de reproducción llegue a un cierto punto del tiempo.

También añadirá código que moverá el cabezal de reproducción a diferentes partes de la línea de tiempo para visualizar elementos particulares. Aprenderá también a hacer que los elementos del escenario respondan a diferentes interacciones con el cursor del ratón.

Aspectos básicos de JavaScript

JavaScript es el lenguaje de código que añade funcionalidad adicional a una página web. Muchos de los elementos de interfaz comunes en los sitios web, como por ejemplo menús desplegables, casillas de verificación o cuadros de búsqueda, están creados con JavaScript. Edge Animate utiliza también JavaScript para generar su interactividad, así como animaciones y otros efectos.

Dónde está javaScript

Incluso sin añadir ninguna interactividad a su composición, su proyecto depende de JavaScript. El código JavaScript está contenido en varios documentos de texto separados que tienen la extensión de archivo “.js”. Observe los archivos asociados con su composición de Edge Animate, 05_workingcopy. Hay cuatro archivos de JavaScript en la carpeta denominada edge_includes:

  • edge.0.1.6.min.js
  • jquery-1.7.1.min.js
  • jquery.easing.1.3.js
  • json2_min.js

Estos archivos contienen el código básico necesario para cualquier composición de Edge Animate. Existen además archivos de JavaScript adicionales, que son específicos de su proyecto. Estos archivos están situados fuera de la carpeta edge_includes y toman automáticamente el nombre de su archivo de Edge Animate. Sus archivos se llaman como se indica a continuación:

  • 05_workingcopy_edge.js
  • 05_workingcopy_edgeActions.js
  • 05_workingcopy_edgePreload.js

Cuando el navegador web lanza por primera vez su proyecto de Edge Animate, carga el código JavaScript, de manera que se dispone de toda la funcionalidad cuando se reproduce su proyecto. Todo el código está organizado en funciones, que agrupan comandos. Ya que cada función tiene un único nombre, pueden activarse los comandos simplemente haciendo referencia al nombre de la función. Los programadores dicen que una función “es llamada” o que el navegador “llama” a una función.

jQuery y API de Edge Animate

Si bien es cierto que JavaScript es útil, en realidad está pensado para controlar todos los detalles de una página web, lo que resulta potente, pero a menudo difícil de manejar y complicado. Esta es la razón por la que jQuery y la API de Edge Animate resultan útiles. jQuery es una biblioteca de código abierto de JavaScript que proporciona una manera fácil de seleccionar, controlar y animar elementos en un navegador. jQuery no es otro lenguaje, sino simplemente un conjunto de funciones bien escritas de JavaScript. Si mira de nuevo los archivos de JavaScript de la carpeta edge_includes, podrá ver que dos de esos archivos son, en realidad, archivos de jQuery.

Junto con jQuery, Edge Animate proporciona funciones adicionales que tiene integradas para su servicio. La biblioteca de funciones de JavaScript que Edge Animate lleva integradas para utilizarlas constituye la API (Interfaz de programación de aplicaciones) de Edge Animate.

Puede que piense que JavaScript, jQuery, y la API de Edge Animate son diferentes capas de control. La API de Edge Animate es la capa superior y más superficial de control, jQuery es la intermedia y el JavaScript del núcleo es la más profunda. Puede plantearse una analogía útil con el control de un automóvil. La API de Edge Animate se correspondería con los controles que hay en el asiento del conductor, es decir, el volante, el freno de mano y el acelerador. Permiten conducir el coche sin saber demasiado sobre su funcionamiento interno. Se crean a partir de una combinación de palancas, indicadores y ejes, para hacer que controlar el vehículo sea simple y fácil. Estas palancas, indicadores y ejes representan el nivel de control jQuery. En el nivel de mayor despiece se encuentra JavaScript, representado por las tuercas, tornillos y engranajes individuales.

De la misma manera que resulta fácil conducir un automóvil usando el volante y el acelerador, así es controlar su composición de Edge Animate con la API de Edge Animate. Pero, en ambos casos, no hay razón alguna por la que no se pueda intentar utilizar los controles de nivel más profundo para conseguir una experiencia más personalizada. Puede comenzar a codificar en jQuery y JavaScript para crear su propia interactividad. Solo necesita estar seguro de ser un mecánico competente, o sea saber lo suficiente sobre JavaScript.

En esta lección, en primer lugar aprenderá a añadir interactividad con la API de Edge Animate. Más tarde, conforme se sienta más confiado y seguro, entrará un poco más en profundidad e insertará un poco de jQuery, con lo que logrará efectos más sofisticados.

Activadores, eventos y acciones

Edge Animate utiliza acciones, activadores y eventos para incorporar JavaScript en su composición.

Las acciones son las cosas que Edge Animate puede hacer y, dado que tiene a su disposición todo el lenguaje JavaScript, son realmente muchas. Las acciones pueden ir desde cargar un hipervínculo a cambiar una determinada propiedad visual de un elemento del escenario o a almacenar una parte de información en una variable, para su recuperación posterior.

Los activadores son acciones situadas a lo largo de la línea del tiempo. Cuando el cabezal de reproducción alcanza el activador, se ejecutan las acciones. Debe utilizar los activadores cuando desee que el código se sincronice mediante su animación y no mediante el control del usuario.

Los eventos son cosas que suceden en una composición, a los que Edge Animate puede responder con una acción. Típicamente, los eventos los generan los usuarios, como por ejemplo pulsando un botón de ratón, una tecla o inclinando un dispositivo móvil. Si embargo, los eventos también pueden ocurrir automáticamente. Por ejemplo, el punto en que la composición está lista (cuando se han descargado todas las bibliotecas de activos y códigos) es un evento. Los eventos siempre están emparejados con acciones. Cuando ocurre un evento, se ejecuta una acción o un conjunto de acciones.

Activadores en la línea de tiempo

Los activadores son la manera más sencilla de añadir código a su composición de Edge Animate. Los activadores se ejecutan automáticamente cuando el cabezal de reproducción llega a donde se encuentran en la línea de tiempo. Puede haber varios activadores a lo largo de la línea del tiempo. El intervalo mínimo entre activadores es de una milésima de segundo, pero en la práctica nunca necesitará ni deseará que las acciones se ejecuten tan próximas entre sí.

Creación de un bucle

Para esta presentación de Burma, se insertará un activador al final de la línea del tiempo, que hará que el cabezal de reproducción vuelva al principio, creando así un bucle.

  1. Haga clic en el botón Hacer zoom en la línea del tiempo para adecuarla de la parte inferior de la línea de tiempo.

    La animación de la presentación completa aparecerá en el espacio disponible del panel de la línea de tiempo.

  2. Mueva el cabezal de reproducción hasta el final de la presentación, en 0:10 segundos.

  3. En el panel de la línea de tiempo, haga clic en el botón Insertar activador de la fila superior de Acciones. También puede elegir Línea de tiempo > Insertar activador o pulsar Ctrl+T (Windows) or Command+T (Mac OS).

    En la línea de tiempo aparecerá un diamante entre llaves, en 0:10 segundos. El icono representa un activador.

    Aparecerá un panel con un amplio campo en blanco para entrada de texto y una columna de opciones de fragmentos de código en el lado derecho. El panel se llama Trigger@10000ms, haciendo referencia a la posición del activador en 10.000 millisegundos, o sea 10 segundos.

  4. Seleccione el contenido del guion actual.

    El guion actual, //introducir código aquí, se conoce como un comentario. Los comentarios siempre comienzan por dos caracteres de guion inclinado y son descripciones del código. Los comentarios no son funcionales y no aumentan significativamente el tamaño del archivo de su composición.

  5. En el menú de fragmentos de código del lado derecho del panel, seleccione la opción Reproducir desde.

    Aparecerá nuevo código en el panel, sustituyendo al comentario existente. El nuevo código lleva sus propios comentarios, que describen su función. El código, sym.play(1000);, mueve el cabezal de reproducción a un punto particular del tiempo de la línea de tiempo y comienza a reproducir.

  6. Sustituya el número 1000 que está entre paréntesis en el código por 0.

    El número entre paréntesis del comando play() representa el tiempo al que se moverá el cabezal de reproducción. Dado que lo que quiere es que el cabezal de reproducción se mueva al principio de la línea de tiempo, hasta 0:00 segundos, introduzca 0 entre los paréntesis del comando play().

  7. Cierre el panel y vea previamente su proyecto en un navegador pulsando Ctrl+Enter (Windows) o Command+Return (Mac OS).

    La presentación se reproducirá, repitiéndose cuando alcance el final, a los 10 segundos.

    Nota:

    El número que haya entre los paréntesis del comando play() se denomina argumento. Proporciona la información adicional del comando necesaria para hacerlo más específico. En este caso, indica al comando en que punto del tiempo (en milisegundos) se ha de comenzar a reproducir. Los comandos pueden tener varios argumentos, que van separados por comas. Conforme vaya aprendiendo más comandos, también aprenderá los argumentos que necesitan.

Edición de activadores

Editar el guion de los activadores es simple y fácil. El panel que apareció cuando añadió el activador siempre está disponible para modificaciones, adiciones o eliminaciones.

  • Para editar un activador, haga doble clic en el icono del activador en la línea de tiempo.
  • El panel de guiones se abrirá para visualizar el activador, pudiendo modificar el argumento, eliminar el código o añadir nuevo código de las opciones de fragmentos del lado derecho del panel.
  • Para mover un activador, haga clic en el activador y arrástrelo por la línea de tiempo hasta una nueva posición.
  • El activador se moverá a una posición diferente, por lo que las acciones se ejecutarán cuando el cabezal de reproducción alcance un nuevo tiempo.
  • Para eliminar un activador, selecciónelo en la línea de tiempo y pulse la tecla Eliminar.

El activador desaparecerá de la línea de tiempo.

Nota:

Opciones de visionado del panel de guiones: el panel de guiones que se abre al añadir un activador tiene varias opciones para ayudarle a ver más fácilmente el código. El menú de opciones superior derecho tiene tres alternativas que controlan lo que se visualiza.

  • Mostrar números de línea visualiza una serie de números secuenciales junto a cada línea de código, de forma que usted y otros desarrolladores que compartan el guion puedan señalizar el código.
  • Tamaño de fuente controla el tamaño de visualización (Pequeño, Mediano, o Grande) del texto del guion. La opción predeterminada es Pequeño.
  • Incluir comentarios de fragmentos añade automáticamente comentarios al código que se añade desde las opciones de fragmentos del lado derecho del panel.

Además de estas opciones de visualización, puede hacer clic en el borde vertical que separa el área en blanco del guion del menú de fragmentos de código, para dejar más espacio para su código. Vuelva a hacer clic en el separador para ampliar el menú.

Cuidado de la sintaxis

Vamos a examinar con más detalle el código que añadió al activador, para aprender sobre la sintaxis de JavaScript, o sea la forma en que se ordenan las palabras y la puntuación. La sintaxis es la gramática de un lenguaje de programación.

Caso de que no esté familiarizado con el código de los programas o los guiones, el código JavaScript que inserta Edge Animate puede ser difícil de descifrar. Sin embargo, una vez entendida la sintaxis básica, encontrará fácil seguir un guion.

El código de su activador en 10000 milisegundos aparece como se indica a continuación:

sym.play(0);

  • La primera palabra de la frase es sym. Cuando la frase está en la línea de tiempo principal, la palabra sym representa toda la composición de Edge Animate. Edge Animate se organiza conforme al concepto de “símbolos” y la raíz, o símbolo de nivel de base, es el escenario de Edge Animate. Este símbolo de raíz contiene todos los elementos y animaciones de su composición de Edge Animate, o sea todo lo que hay en el escenario y en la línea de tiempo. En JavaScript, cuando se desea hacer algo, lo primero que hay que hacer es identificar el objeto que se quiere controlar. En este caso, como lo que quiere es actuar sobre la línea de tiempo de su composición de Edge Animate, la primera cosa que se escribe en el guion es sym.
  • El operador punto (.) proporciona una forma de acceder a diferentes comandos para el objeto que ya ha identificado (en este caso, sym). Los objetos pueden ser animaciones, texto o conceptos abstractos, como la fecha o datos específicos. Los objetos tienen propiedades que los describen y métodos, que son las cosas que pueden hacer. En el caso de su activador, el método para el objeto sym es play(). El punto separa el objeto de su método.
  • En el lenguaje escrito, cada paréntesis de apertura debe tener un paréntesis de cierre correspondiente, y eso también es válido para JavaScript. Si algo se abre, debe cerrarse. Todos los métodos llevan paréntesis. Su método, play(), tiene un paréntesis de apertura y otro de cierre.
  • Cada método puede tener diferentes argumentos entre los paréntesis, lo que facilita información adicional. El método play() requiere un único argumento, que indica a Edge Animate en qué punto del tiempo (en milisegundos) ha de comenzar a reproducir. Los métodos pueden tener varios argumentos, que van separados por comas.
  • Algunos argumentos requieren un número, algunos pueden necesitar un nombre y otros pueden precisar de las palabras verdadero o falso. Siempre que introduzca el nombre de un archivo o una URL, utilice comillas rectas sencillas o dobles. Las comillas rectas distinguen un valor de cadena, que representa una secuencia de caracteres, de otras clases de valores.
  • Puede añadir comentarios para recordarse a sí mismo o recordar a otros lo que se consigue con diferentes partes del guion. Para añadir un comentario en una única línea, hágalo comenzar con dos guiones inclinados (//). Para escribir un comentario en varias líneas, hágalo comenzar por /* y termínelo con */. JavaScript ignora los comentarios, que no afectarán en absoluto a su código.
  • Elpunto y coma al final de la línea indica a JavaScript que se ha alcanzado el final de una frase completa, así como el final de una línea de código. Un punto y coma equivale al punto final de una frase.

Hay mucha información empaquetada en una única línea de código. Sin embargo, sentirse confortable con la sintaxis es solo el primer paso al dejar el volante y mirar bajo el capó de su automóvil.

Eventos y acciones

Hasta ahora, ha visto como Edge Animate utiliza activadores para ejecutar automáticamente JavaScript cuando el cabezal de reproducción alcanza un cierto punto de la línea de tiempo. Antes añadió un activador al final de la animación, para crear un bucle. Las otras dos formas en las que Edge Animate añade JavaScript son con los eventos y las acciones.

Los eventos son cosas que suceden en Edge Animate, que puede detectar y a las que puede responder. Cuando se detecta un evento, se generan acciones en respuesta al mismo.

Es útil pensar en las interacciones en términos de eventos y acciones. Al hacer clic en un botón de menú (evento), pueden aparecer más opciones (acciones). Cuando se sitúa el cursor sobre un botón (evento), puede aparecer sobre el mismo un icono triangular (acciones). En la sección siguiente verá cómo añadir imágenes en miniatura al escenario. Cuando el usuario hace clic en cada miniatura (evento), el cabezal de reproducción se mueve a una nueva posición de la línea de tiempo (acciones), para mostrar una imagen en particular de la presentación del viaje.

Creación de los botones

Un botón es un indicador visual básico con el que el usuario puede interaccionar. El usuario normalmente hace clic en un botón, pero son posibles muchos otros tipos de interacciones. Por ejemplo, son posibles las colocaciones del cursor sobre algo, los, dobles clics y los movimientos del cursor hacia afuera de algo. Edge Animate proporciona también eventos específicos para dispositivos móviles, como toques.

Comenzará por el evento más sencillo y común, que es un solo clic.

Adición de miniaturas

En la carpeta de imágenes se han dejado a su disposición unas versiones pequeñas y recortadas de las imágenes de Burma.

  1. En el panel de bibliotecas, vea el contenido de la carpeta de imágenes que hay en la carpeta Activos.

  2. Arrastre el archivo denominado button1_gray.jpg desde el panel Bibliotecas hasta el escenario.

    Una miniatura en escala de grises de un pescador aparecerá en el escenario, en la línea de tiempo y en el panel Elementos.

  3. Coloque la miniatura de forma que su esquina superior izquierda quede en la esquina superior izquierda del escenario. Las coordenadas deben ser X=0 e Y=0.

  4. Arrastre el archivo denominado button2_gray.jpg desde el panel de bibliotecas al escenario y colóquelo justo por debajo de la primera miniatura. Puede utilizar las guías inteligentes para ayudar a ajustar automáticamente las imágenes en su lugar. Las coordenadas deben ser X=0 e Y=80.

    En el lado izquierdo del escenario habrá dos miniaturas en escala de grises, una encima de la otra

  5. Arrastre las tres miniaturas en escala de grises restantes desde el panel de bibliotecas hasta el escenario, colocando sucesivamente cada una de ellos por debajo de la precedente.

    Deberá haber un total de cinco imágenes en miniatura, apiladas verticalmente en el lado izquierdo del escenario.

Adición de eventos

Cada elemento del escenario puede tener sus propios eventos y acciones. Inserte código para los elementos individuales desde la columna de más a la izquierda de la línea de tiempo o desde el panel elementos. El botón Abrir acciones se indica mediante un conjunto de llaves.

  1. En la línea de tiempo o en el panel Elementos, haga clic en el botón Abrir acciones del primer elemento en miniatura, button1_gray.

    Se abrirá el panel de guiones para button1_gray.

    Se abrirá automáticamente un menú de opciones, que visualizará los eventos posibles para el elemento button1_gray.

  2. Seleccione la primera opción: Hacer clic.

    Edge Animate añade una pestaña Hacer clic en la parte superior del panel, con un panel de guiones vacío y fragmentos disponibles en la parte derecha.

    Nota:

    Conforme vaya añadiendo más eventos al mismo elemento, aparecerán pestañas adicionales en la parte superior del panel de guiones.

    Nota:

    Para eliminar un evento (y cualquier código que tenga asociado), seleccione la pestaña en particular del evento y haga clic en el botón Menos de la esquina superior izquierda del panel de guiones.

Adición de acciones

Cada evento debe tener una acción de acompañamiento, o sea una respuesta, al evento.

  1. Coloque el cursor en la segunda línea del panel de guiones (después de la primera línea de comentarios) y elija la opción Parar en.

    Edge Animate añade el código necesario para parar el cabezal de reproducción en una posición en particular de la línea de tiempo.

  2. Entre los paréntesis del método stop( ) , sustituya el número 1000 por 0.

    El método stop() requiere un número, en milisegundos, que señale el punto de la línea de tiempo hasta el que se moverá y donde se parará. Dado que la primera miniatura en escala de grises es la del pescador, lo que quiere hacer es parar el cabezal de reproducción en 0:00 segundos, el punto en el que aparece la imagen a tamaño completo del pescador en el escenario.

    Nota:

    En realidad, puede utilizar cualquier número entre 0 y 1500 para el método stop() de button1_gray, ya que la imagen del pescador permanece en la línea de tiempo hasta 1,5 segundos, pero es más simple y fácil ser coherente y elegir el instante en que aparece la imagen por primera vez.

  3. Cierre el panel de guiones.

    El icono Abrir acciones del elemento button1_gray se rellena, indicando que hay unido actualmente un guion a dicho elemento.

  4. Ejecute una vista previa de su composición de Edge Animate en un navegador, seleccionando Archivo > Vista previa en el navegador, o presionando Ctrl+Enter (Windows)/Command+Return (Mac OS).

  5. En cualquier punto de la presentación, haga clic en la primera miniatura en escala de grises.

    La presentación se para y muestra la imagen del pescador.

Completado de la interacción

Ahora que ha completado la interacción para el primer botón, añada la misma funcionalidad al resto.

  1. En la línea de tiempo o en el panel Elementos, haga clic en el botón Abrir acciones del segundo elemento en miniatura, button2_gray.

    Se abrirá el panel de guiones para button2_gray.

  2. Haga clic en el botón Más de la esquina superior izquierda.

    Se abrirá un menú de opciones, que visualizará los eventos posibles para el elemento button2_gray.

  3. Seleccione la primera opción: Hacer clic.

    Edge Animate añade una pestaña Hacer clic en la parte superior del panel, con un panel de guiones vacío y fragmentos disponibles en la parte derecha.

  4. Coloque el cursor en la segunda línea del panel de guiones (después de la primera línea de comentarios) y elija la opción Parar en.

    Edge Animate añade el código JavaScript necesario para parar el cabezal de reproducción en una posición en particular de la línea de tiempo.

  5. Entre los paréntesis del método stop( ) , sustituya el número 1000 por 2000.

    El método stop() requiere un número, en milisegundos, que señale el punto de la línea de tiempo hasta el que se moverá y donde se parará. Dado que la segunda miniatura en escala de grises es la de las estatuas, lo que quiere hacer es parar el cabezal de reproducción en 0:02 segundos, el punto en el que aparece la imagen a tamaño completo de las estatuas en el escenario.

  6. Añada eventos de clic similares al resto de las imágenes en miniatura en escala de grises, con la opción Parar en. Asegúrese de cambiar los argumentos de cada método stop() como se indica a continuación, de manera que el cabezal de reproducción se pare en diferentes momentos, visualizando una única imagen a tamaño completo en el escenario:

    • El método stop() de button1_gray debería ir a 0 milisegundos.
    • El método stop() de button2_gray debería ir a 2000 milisegundos.
    • El método stop() de button3_gray debería ir a 4000 milisegundos.
    • El método stop() de button4_gray debería ir a 6000 milisegundos.
    • El método stop() de button5_gray debería ir a 8000 milisegundos.

Navegación por el panel Código.

En este momento, su presentación del viaje es interactiva y los usuarios pueden hacer clic para ver cualquiera de las imágenes. Sin embargo, su código parece estar repartido entre muchos elementos diferentes. ¿Como se puede ver junto todo el código de la composición de Edge Animate? La respuesta está en el panel Código, que se puede abrir eligiendo Ventana > Código, o pulsando Ctrl+E (Windows) o Command+E (Mac OS).

Visualización de su código

El panel Código visualiza todo el código de su composición de Edge Animate composition, tanto el código generado automáticamente como el que usted mismo haya insertado.

  1. Elija Ventana > Código, o pulse Ctrl+E (Windows)/Command+E (Mac OS).

    Se abrirá el panel Código. El panel Código es similar al resto de paneles de guiones de activadores, eventos y acciones.

  2. Haga clic en el botón Todo el código del lado de más a la derecha del panel, para cambiar entre el modo Todo el código y el modo de No todo el código.

    En el modo Todo el código, Edge Animate visualiza todo el código del archivo JavaScript de la composición de Edge Animate. Desplácese hacia abajo para ver el guion de todos los elementos en miniatura, así como el activador. El código representativo de esto se encuentra contenido en el archivo 05_workingcopy_edgeActions.js.

    En modo de no Todo el código, puede seleccionar el código para los elementos o activadores individuales en el escenario, en el lado izquierdo del panel. Además, hay una opción para ver el código del Precargador, que actualmente está deshabilitada porque todavía no lo ha añadido. En lecciones posteriores aprenderá cómo añadir un precargador.

  3. Mientras está en modo de No todo el código, haga clic en el botón Más alineado con el elemento Escenario.

    Aparecerá un menú jerárquico, que le permitirá añadir un evento al propio escenario, un evento a cualquiera de los elementos del escenario o un evento a la línea de tiempo.

  4. Si desea eliminar un evento o activador del panel Código, haga clic con el botón derecho en el evento o activador de la lista y seleccione Eliminar acción.

  5. Tanto en modo de Todo el código como de No todo el código, al hacer adiciones y ediciones al guion, estas quedan guardadas en la composición.

    Nota:

    Tratamiento de los errores de código

    El uso de los fragmentos de código incorporados hace que añadir código sea relativamente sencillo, debido a que el guion ya está formateado correctamente. Todo lo que hay que hacer es sustituir los valores clave. Sin embargo, siempre surgen errores y fallos tipográficos, por lo que el tratar los errores de código es una lucha común a todos los desarrolladores, novatos o expertos.

    Edge Animate advierte inmediatamente de los errores de código, lo que facilita encontrarlos y corregirlos. Cuando hay un error de sintaxis en cualquier parte del código, Edge Animate visualiza un mensaje de error en la esquina inferior izquierda del panel Código. Por ejemplo, si eliminara accidentalmente los paréntesis de cierre del método stop(). la visualización del error le indicará dónde se encuentra el error. Además, aparece un punto rojo cerca de la línea de código en cuestión.

    La notificación de error también se visualiza en la esquina inferior derecha del escenario.

    Nota:

    Haga clic en el icono de flecha que habrá después de la descripción del error para saltar directamente al origen del error, en el panel Código, de manera que pueda corregirlo. Las opciones Todo o Código de la visualización de errores determinan si se visualizan todos los errores (incluyendo advertencias o incompatibilidades de funciones con diversos dispositivos, como sombras de texto en IE9) o solo los errores de código.

Creación de etiquetas

Cuando el usuario hace clic en cada miniatura, Edge Animate mueve el cabezal de reproducción a un nuevo tiempo de la línea de tiempo, conforme al argumento del método stop(). Sin embargo, suponga que el cliente que le ha encargado desarrollar esta presentación desea que toda la secuencia se desarrolle un poco más lentamente. Esto resulta fácil de hacer, ya que puede seleccionar todos los elementos de la línea de tiempo y mover todos los fotogramas clave y las animaciones hacia adelante, para alargar la cantidad total de tiempo. Sin embargo, hacer esto provoca que cambie el momento en que cada imagen aparece en el escenario, lo que le obligaría a cambiar todos los valores en milisegundos de los métodos stop().

Hay un enfoque alternativo que le ahorrará tiempo y esfuerzos. En lugar de usar tiempos fijos en milisegundos en los métodos stop(), puede usar etiquetas que se refieran a puntos de la línea de tiempo. Las etiquetas pueden moverse con su animación, por lo que, al aumentar o disminuir la longitud de su animación, las etiquetas se mueven proporcionalmente.

Adición de etiquetas

Las etiquetas aparecen en el panel Línea de tiempo, debajo de los marcadores de tiempo y justo por encima de la capa .

  1. Desplace el cabezal de reproducción a 0:00 segundos.

    La imagen del pescador aparece en 0:00 segundos.

  2. Haga clic en el botón Insertar etiqueta, o pulse Ctrl+L (Windows)/Command+L (Mac OS).

    Aparecerá una etiqueta en la línea de tiempo, denominada Etiqueta 1.

  3. Cambie el nombre de la etiqueta a pescador, y pulse Enter para salir de la edición de texto de la etiqueta.

    La etiqueta denominada pescador ahora está asociada con 0:00 segundos.

  4. Añada cuatro etiquetas más a la línea de tiempo, que indicarán el punto de comienzo en el que la imagen aparece en el escenario.

    • Inserte la etiqueta estatuas en 0:02 segundos.
    • Inserte la etiqueta casas en 0:04 segundos.
    • Inserte la etiqueta monje en 0:06 segundos.
    • Inserte la etiqueta mujer en 0:08 segundos.

Edición de etiquetas

Hay varias formas en las que pueden editarse las etiquetas, una vez insertadas y nombradas:

  • Para renombrar una etiqueta, haga doble clic en el nombre de la etiqueta, en la línea de tiempo.
  • Para mover una etiqueta, haga clic en la etiqueta y arrástrela por la línea de tiempo hasta una nueva posición.
  • Para eliminar una etiqueta, selecciónela en la línea de tiempo, dejándola resaltada, y pulse la tecla Eliminar.
  • Para cortar, copiar o pegar una etiqueta, haga clic con el botón derecho en una etiqueta y elija la opción que prefiera, o si no utilice los comandos estándar de teclado para cortar (Ctrl/Command+X), copiar (Ctrl/Command+C) y pegar (Ctrl/Command+V).

Cambio de referencias en la línea de tiempo

Ahora que la línea de tiempo contiene etiquetas, puede cambiar las referencias en el código JavaScript.

  1. Elija Ventana > Código, o pulse Ctrl+E (Windows)/Command+E (Mac OS).

    Se abrirá el panel Código.

  2. Si no está ya seleccionado, haga clic en el botón Todo el código para visualizar el panel en modo Todo el código.

    Todos los códigos relativos a los eventos y acciones de la miniatura se visualizan en el panel de guion único.

  3. Sustituya todos los tiempos en milisegundos de los métodos stop() por sus etiquetas. Deberían cambiarse las siguientes líneas de código:

    • Cambie sym.stop(0); por sym.stop("pescador");
    • Cambie sym.stop(1500); por sym.stop("estatuas");
    • Cambie sym.stop(3500); por sym.stop("casas");
    • Cambie sym.stop(5500); por sym.stop("monje");
    • Cambie sym.stop(7500); por sym.stop("mujer");

    Nota:

    Asegúrese de utilizar las comillas rectas adecuadas rodeando sus nombres de etiquetas. Las comillas rectas son esenciales para que JavaScript identifique los nombres como una cadena (y no como una variable). Las comillas rectas y las llaves (y las comillas tipográficas) son caracteres diferentes en HTML y JavaScript, y no son intercambiables.

  4. Ejecute una vista previa de su composición de Edge Animate en un navegador, eligiendo Archivo > Vista previa en el navegador, o presionando Ctrl+Enter (Windows)/Command+Return (Mac OS).

  5. En cualquier punto de la presentación, haga clic en las imágenes en miniatura.

    La presentación se para y se muestra la imagen seleccionada.

  6. Vuelva a Edge Animate y seleccione todos los elementos de la línea de tiempo eligiendo Seleccionar > Todo, o pulsando Ctrl+A (Windows)/Command+A (Mac OS). Asegúrese de que ningún elemento esté bloqueado.

  7. Haga clic sobre el último fotograma clave del último elemento animado y arrástrelo por la línea de tiempo. Arrastre los fotogramas clave hacia la izquierda, para disminuir la duración completa de la presentación.

    Conforme vaya disminuyendo la duración del tiempo para todos los elementos animados, las etiquetas se moverán también proporcionalmente, conservando su identificación de lo que se visualiza en el escenario. Haga que el tiempo total de la composición vuelva a ser 0:10 segundos.

Adición de información visual

La mayor parte de los elementos interactivos de la web incorporan información visual, lo que es importante para indicar al lector que el elemento en particular es interactivo. Por ejemplo, un simple hipervínculo de una página web cambia a menudo su color cuando se mueve el ratón sobre el mismo. Los botones pueden resaltarse cuando se pasa el ratón sobre ellos y parecer apretados cuando se hace clic sobre ellos.

Es posible crear estas interacciones con una combinación de eventos y acciones en Edge Animate. A continuación, añadirá estos eventos y acciones a las miniaturas, para darles información visual.

Adición de efectos al poner el ratón sobre las miniaturas

La primera pregunta que debería hacerse es qué efecto visual quiere que se aprecie cuando un usuario mueva su ratón sobre las imágenes en miniatura Para este proyecto, lo que hará será hacer que las miniaturas en escala de grises se coloreen y que aparezcan destacados sus bordes. El primer paso será traer versiones coloreadas de las miniaturas al escenario.

  1. En la carpeta de imágenes de la carpeta Activos del panel Biblioteca, podrá encontrar versiones a color de las cinco imágenes en miniatura, lo que vendrá indicado por el sufijo _color añadido al nombre del archivo.

  2. Arrastre button1_color.jpg desde la biblioteca hasta el escenario.

  3. Utilice las guías inteligentes para situar el elemento button1_color en la esquina superior izquierda, exactamente sobre su versión en escala de grises. Su posición debería ser X=0 e Y=0.

  4. Arrastre las cuatro versiones de las miniaturas coloreadas restantes al escenario, colocándolas exactamente encima de sus compañeras en escala de grises. Todas las miniaturas coloreadas deberían estar en la parte superior de la pila del panel Elementos.

    Las versiones de las miniaturas en escala de grises y en color tienen exactamente las mismas dimensiones.

Ocultación de las miniaturas que aparecen al poner el ratón encima

Ya que quiere hacer que aparezcan las versiones coloreadas solo cuando el cursor del ratón se mueva sobre las miniaturas, primero debe ocultar las miniaturas coloreadas. Puede ocultar los elementos cambiando su propiedad Visualización al valor Desactivada.

  1. Desplace el cabezal de reproducción a 0:00 segundos.

  2. Mantenga pulsada la tecla Mayús y seleccione todos los elementos en miniatura coloreada.

  3. En el panel Propiedades, cambie la propiedad Visualización de Activada a Desactivada.

    Edge Animate insertará un nuevo fotograma clave en la línea de tiempo para todos los elementos seleccionados en 0:00 segundos y los elementos seleccionados desaparecerán del escenario.

Inserción del evento de ratón por encima

Cada miniatura en escala de grises contiene un evento de hacer clic. Tiene que editar cada uno de estos elementos para incorporar un evento de ratón por encima. Un evento de ratón por encima ocurre cuando el usuario mueve el cursor del ratón por encima del elemento seleccionado. Cuando ocurra el evento de ratón por encima, se mostrarán las miniaturas coloreadas.

  1. En la línea de tiempo o en el panel Elementos, haga clic en el botón Abrir acciones del primer elemento en miniatura, button1_gray.

    Se abrirá el panel de guiones para button1_gray. Aparecerán el evento de clic y las acciones actuales.

  2. Haga clic en el botón Más de la esquina superior izquierda y elija ratón por encima.

    Edge Animate añadirá una pestaña de ratón por encima.

  3. Coloque el cursor en la segunda línea del panel de guiones (después de la primera línea de comentarios) y elija la opción Mostrar elemento.

    Edge Animate añade el código JavaScript necesario para visualizar un elemento. La parte resaltada del código es el nombre del elemento a visualizar.

  4. Sustituya el código destacado por button1_color. Asegúrese de utilizar las comillas rectas dobles adecuadas rodeando sus nombres de elemento.

    La frase completa aparece de la manera siguiente:

    sym.$("button1_color").show();

    El signo del dólar y los paréntesis son sintaxis de jQuery, e indican al navegador qué elemento seleccionar. En esta frase, está seleccionado el elemento denominado button1_color de la actual composición de Edge Animate, y se ejecuta el método denominado show() .

  5. Ejecute una vista previa de su composición de Edge Animate en un navegador, eligiendo Archivo > Vista previa en su navegador, o presionando Ctrl+Enter (Windows)/Command+Return (Mac OS). Mueva su ratón por encima de la primera miniatura en escala de grises.

    En cuanto el cursor de su ratón se mueva por encima de la imagen en miniatura en escala de grises, aparecerá la versión coloreada. Ya que la versión coloreada está sobre la versión en escala de grises, únicamente se puede ver la imagen coloreada.

  6. Vuelva a Edge Animate e inserte el evento de ratón por encima, con la acción Mostrar elemento, en los cuatro botones restantes de miniaturas en escala de grises. Asegúrese de sustituir la parte de código destacada por la versión coloreada correcta de la miniatura.

Inserción del evento de ratón hacia afuera

Al visualizar previamente el proyecto de Edge Animate, notará que las miniaturas se colorean cuando pasa su ratón por encima, pero permanecen en color incluso cuando retira el ratón de las mismas. Para hacer que las miniaturas vuelvan a sus versiones en escala de grises, necesita añadir un evento adicional: el evento de ratón hacia afuera.

Un evento de ratón hacia afuera ocurre cuando el cursor se retira de un elemento. Ahora añadirá el evento de ratón hacia afuera a las miniaturas coloreadas (no a las miniaturas en escala de grises), y emparejará el evento con un comando que oculte las versiones coloreadas. Resultado: Las versiones coloreadas desparecen, dejando visibles nuevamente las versiones en escala de grises.

  1. En la o en el panel Elementos, haga clic en el botón Abrir acciones del elemento en miniatura button1_color. El elemento está actualmente oculto en el escenario, pero todavía puede añadírsele un guion.

    Se abrirá el panel de guiones para button1_color.

  2. En el menú emergente que aparece, elija ratón hacia afuera como evento.

    Edge Animate añadirá una pestaña de ratón hacia afuera.

  3. Coloque el cursor en la segunda línea del panel de guiones (después de la primera línea de comentarios) y elija la opción Ocultar elemento.

    Edge Animate añade el código JavaScript necesario para visualizar un elemento. La parte resaltada del código es el nombre del elemento a visualizar.

  4. Sustituya el código destacado por button1_color. Asegúrese de utilizar las comillas rectas dobles adecuadas rodeando sus nombres de elemento.

    La frase completa aparece de la manera siguiente:

    sym.$("button1_color").hide();

    Observe la similitud de las acciones para este evento de ratón hacia afuera y el guion anterior de ratón por encima.

  5. Ejecute una vista previa de su composición de Edge Animate en un navegador, eligiendo Archivo > Vista previa en su navegador, o presionando Ctrl+Enter (Windows)/Command+Return (Mac OS). Mueva su ratón por encima de la primera miniatura en escala de grises.

    En cuanto el cursor de su ratón se mueva por encima de la imagen en miniatura en escala de grises, pasará a estar coloreada. Cuando retire el cursor de su ratón de la imagen, el botón parecerá volver a la escala de grises.

  6. Vuelva a Edge Animate e inserte el evento de ratón hacia afuera, con la acción Ocultar elemento, en los cuatro botones restantes de miniaturas coloreadas. Asegúrese de sustituir la parte de código destacada por la versión coloreada correcta de la miniatura.

Edición del evento de hacer clic

Se requiere un ajuste final antes de que funcionen conjuntamente todos los eventos y acciones. Es posible que haya notado que el hacer clic en los botones no mueve la cabeza de reproducción conforme preveía. La razón de que ya no funcione es que las miniaturas coloreadas se solapan sobre sus parejas en escala de grises, lo que bloquea los eventos de hacer clic. El paso final que debe dar es eliminar el evento de hacer clic de las miniaturas en escala de grises y añadirlo en su lugar a las miniaturas coloreadas.

  1. En la línea de tiempo o en el panel Elementos, haga clic en el botón Abrir acciones de cada uno de los elementos en miniatura en escala de grises.

  2. Elija la pestaña del evento de hacer clic en el panel de guiones y haga clic en el botón Menos.

    Edge Animate eliminará el evento de hacer clic y todas sus acciones.

  3. En la línea de tiempo o en el panel Elementos, haga clic en el botón Abrir acciones de cada uno de los elementos en miniatura coloreados.

  4. Haga clic en el botón Más de la esquina superior izquierda y elija como evento Hacer clic.

    Edge Animate añadirá una pestaña de evento Hacer clic.

  5. Elija como opción Parar y, como ya hizo anteriormente, sustituya el argumento de milisegundos por la etiqueta correspondiente de la línea de tiempo.

  6. Ejecute una vista previa de su composición de Edge Animate en un navegador, eligiendo Archivo > Vista previa en su navegador, o presionando Ctrl+Enter (Windows)/Command+Return (Mac OS).

    Sus botones están completos. Cuando mueva su ratón por encima de ellos, pasarán a estar coloreados. Cuando mueva su ratón hacia afuera de ellos, volverán a la escala de grises y, cuando haga clic en ellos, Edge Animate visualizará la imagen correspondiente de la presentación.

    Nota:

    Uso del panel Código para hacer ediciones globales: hacer ediciones globales, como ha hecho en esta tarea, por ejemplo el eliminar todos los eventos de hacer clic de un conjunto de elementos, puede resultar una ardua tarea, ya que es preciso seleccionar y modificar cada uno de los elementos. Sin embargo, puede ahorrarse gran cantidad de tiempo utilizando el panel Código si está interesado en el tema de la selección y edición de código.

    Abra el panel Código eligiendo Ventana > Código, o pulsando Ctrl+E (Windows)/Command+E (Mac OS), y elija el modo Todo el código. Examine el código, buscando todos los eventos de clic (que se denominan “hacer clic”) para todos los elementos deseados. Elimine todo lo que comience por las frases que incluyan el evento hacer clic y terminen con el sufijo //Edge.

    Nota:

    Eventos para el ratón y para dispositivos táctiles: la lista siguiente explica los eventos disponibles que puede unir a sus elementos para interactuar con el ratón o mediante un toque. Para la mayoría de usuarios, el evento hacer clic o el evento de toque serán suficientes para todos los proyectos.

    • click, un evento que ocurre cuando se pulsa y libera el botón del ratón.
    • dblclick, un evento que ocurre cuando se pulsa y libera el botón del ratón por dos veces, en sucesión rápida.
    • mouseover, un evento que ocurre cuando el cursor del ratón se mueve sobre un elemento.
    • mousedown, un evento que sucede cuando se pulsa el botón del ratón.
    • mousemove, un evento que ocurre cuando el cursor del ratón se mueve dentro de un elemento.
    • mouseup, un evento que ocurre cuando se suelta el botón del ratón.
    • mouseout, un evento que ocurre cuando el cursor se retira de un elemento.
    • touchstart, un evento para dispositivos táctiles que ocurre cuando un usuario toca un elemento.
    • touchmove, un evento para dispositivos táctiles que ocurre cuando el usuario toca un elemento con un dedo y lo arrastra.
    • touchend, un evento para dispositivos táctiles que ocurre cuando el usuario deja de tocar un elemento.

    Otros eventos de usuario, como pulsaciones del teclado, también están disponibles, pero no para elementos individuales. Las pulsaciones de teclado están asociadas con el elemento escenario y en la siguiente lección explorará esos eventos y otras clases de los mismos.

Personalización del cursor del ratón

Además de la información visual que se puede proporcionar cambiando la apariencia del botón cuando el usuario interacciona con el mismo, puede cambiarse también la apariencia del propio cursor. A menudo, el cursor de flecha, que es la forma predeterminada, de un navegador de equipo de escritorio o portátil, cambia a ser una mano (denominada el cursor puntero) cuando está por encima de algún elemento interactivo o hipervínculo. Puede elegir cambiar el cursor por un puntero o escoger entre docenas de otros tipos de cursor.

Uso del puntero

El panel Propiedades controla la apariencia del cursor y permite seleccionar un icono personalizado para cada elemento.

  1. En el panel Línea de tiempo, cambie la propiedad Visualización, de los cinco elementos en miniatura coloreados a Activada.

    La activación de la propiedad Visualización permite seleccionarlos en el escenario.

  2. Seleccione los cinco elementos en miniatura coloreados, desde button1_color hasta button5_color.

  3. En el panel Propiedades, haga clic en la opción Cursor y elija el icono de puntero.

  4. Cambie la propiedad Visualización de los cinco elementos en miniatura coloreados otra vez a Desactivada.

    De nuevo, los elementos en miniatura coloreados quedan ocultos.

  5. Ejecute una vista previa de su composición de Edge Animate en un navegador, eligiendo Archivo > Vista previa en su navegador, o presionando Ctrl+Enter (Windows)/Command+Return (Mac OS).

    El cursor de puntero aparecerá siempre que mueva su ratón por encima o haga clic en los botones.

    Nota:

    Solo se puede cambiar la apariencia del cursor para cada elemento y no para cada evento de un elemento en concreto.

Control de elementos animados

Hasta aquí, ha añadido JavaScript, que controlaba el comportamiento del cabezal de reproducción y la ocultación o visualización de elementos particulares. Puede también añadir código para controlar la reproducción de símbolos animados.

Los símbolos, conforme aprendió en la lección precedente, son objetos independientes que usted crea y que tienen su propia animación interna. Con JavaScript, es posible controlar las animaciones de símbolos para crear interacciones más sofisticadas. Por ejemplo, puede crear un botón que controle el lanzamiento de una animación dramática o el cierre de un mapa. O, por ejemplo, puede crear un botón que controle la expansión o el colapso animados de un cuadro de más información. El mapa y el cuadro de más información serían símbolos que se comportan independientemente en la línea de tiempo.

Para su presentación del viaje interactiva, ahora añadirá un botón en la parte superior del escenario que, cuando se le pase por encima el ratón, se animará elegantemente, para revelar información sobre las imágenes y Burma.

Adición del botón y el símbolo animado

El botón y el símbolo animado ya han sido creados para usted y están en la biblioteca, listos para usarse.

  1. En el panel Biblioteca, amplíe la sección Símbolos y arrastre el símbolo de más información al escenario. Sitúe el símbolo de más información en X=200, Y=0.

    El símbolo de más información aparece en los paneles Elementos y Línea de tiempo. Las flechas cortas de reproducción de la línea de tiempo muestra lo que dura la animación del símbolo (un segundo de duración).

  2. En la línea de tiempo, haga clic en las opciones de reproducción del elemento de más información, y elija Parar.

    La reproducción de la animación interna del símbolo ya no se ejecutará en la línea de tiempo principal.

  3. Haga clic dos veces en el símbolo de más información del escenario y pulse la barra espaciadora para ver la animación del símbolo.

    El símbolo consta de dos animaciones cortas. El rectángulo gris horizontal y largo se expandirá y, al mismo tiempo, se expandirá el cuadro adjunto de algún texto informativo para revelar el mismo.

  4. Haga clic en el botón Escenario de la parte superior del escenario para salir de su símbolo.

  5. Arrastre la imagen triangle.png desde la carpeta Library Assets hasta el escenario. Sitúe el elemento triangular en X=484, Y=3, o utilice las guías inteligentes para centrar el elemento sobre el otro elemento de más información.

Reproducción de la animación de un símbolo

El símbolo está actualmente parado en 0 segundos. Ahora, usted añadirá un evento de ratón por encima al botón triangular, que haga que el símbolo comience a reproducir.

  1. En la línea de tiempo o en el panel Elementos, haga clic en el botón Abrir acciones del elemento triangular.

    Se abrirá el panel de guiones para el triángulo.

  2. Elija ratón por encima para el evento

    Edge Animate añadirá una pestaña de evento de ratón por encima.

  3. Elija la opción Obtener símbolo.

    Edge Animate añade el código JavaScript necesario para seleccionar un símbolo en particular en el escenario. La parte resaltada del código es el nombre del símbolo que desea seleccionar.

  4. Sustituya el código destacado por más información, para coincidir con el elemento más información del escenario. Asegúrese de utilizar las comillas rectas dobles adecuadas rodeando sus nombres de elemento.

    La frase completa aparece de la manera siguiente:

    var mySymbolObject = sym.getSymbol("moreinfo");

    La primera parte de esta frase, var mySymbolObject crea una variable para hacer referencia a su símbolo, de forma que así pueda controlarlo.

  5. En la siguiente línea del panel de guiones, elija la opción Reproducir.

    Edge Animate añadirá una frase que reproduzca el objeto sym, o sea la línea de tiempo principal. Sin embargo, lo que se desea es que el símbolo reproduzca su propia animación, no la animación de la línea de tiempo principal.

  6. Sustituya sym por la variable, mySymbolObject, que se refiere a su sym.

    La siguiente frase aparece como se indica a continuación:

    mySymbolObject.play();

    Nota:

    Puede combinar las dos frases en una línea, como sym.getSymbol("moreinfo").play();

Restablecimiento de la animación del símbolo

Ahora, añadirá un evento de ratón hacia afuera en el elemento triangular, para mover su cabezal de reproducción hacia atrás, hasta 0 segundos, para restaurar la animación.

  1. En la línea de tiempo o en el panel Elementos, haga clic en el botón Abrir acciones del elemento triangular.

    Se abrirá el panel de guiones para el botón de más información.

  2. Elija textClick en el botón Más de la esquina superior izquierda y elija ratón hacia afuera para el evento.

    Edge Animate añadirá una pestaña de evento de ratón hacia afuera.

  3. Elija la opción Obtener símbolo, y sustituya el código destacado por moreinfo.

    La frase completa aparece de la manera siguiente:

    var mySymbolObject = sym.getSymbol("moreinfo");

  4. En la siguiente línea del panel de guiones, elija la opción Parar.

    Edge Animate añadirá una frase que pare el objeto sym, o sea la línea de tiempo principal. Sin embargo, lo que se desea es que el símbolo pare su propia animación, no la animación de la línea de tiempo principal.

  5. Sustituya sym por la variable mySymbolObject, que se refiere a su símbolo. Sustituya el argumento predeterminado de 1000 milisegundos por 0.

    La siguiente frase aparece como se indica a continuación:

    mySymbolObject.stop(0);

  6. Ejecute una vista previa de su composición de Edge Animate en un navegador, eligiendo Archivo > Vista previa en su navegador, o presionando Ctrl+Enter (Windows)/Command+Return (Mac OS).

    Cuando pase el cursor sobre el botón triangular de la parte superior del escenario, el símbolo de más información reproducirá su animación, que hace aparecer el cuadro de texto y el texto. Cuando mueva el cursor hacia afuera del botón, el cuadro de texto y el texto se colapsarán.

Uso de efectos jQuery

La API de Edge Animate ofrece un cuidado equilibrio entre potencia, flexibilidad y facilidad de uso, para incorporar interacción a sus diseños y animaciones. Insertar guiones simplemente haciendo clic en un botón del panel de guiones pueden hacerlo hasta los menos capacitados. Sin embargo, añadir un poco de jQuery a sus guiones puede hacer más fácil su trabajo. Como ya aprendió en un punto anterior de esta lección, jQuery es una biblioteca de JavaScript escrita específicamente para hacer ciertas cosas seleccionadas en las páginas web y hacer sencilla la creación de animaciones y transiciones. Hay muchos métodos jQuery para animar elementos, como el desvanecimiento, la iluminación, la entrada deslizante y la salida deslizante. Dado que Edge Animate es completamente compatible con JavaScript y jQuery, puede utilizar estos métodos siempre que lo considere adecuado. Vamos a examinar un método particular de jQuery, el fadeToggle(). El método fadeToggle() anima la transparencia de un elemento para ensombrecerlo o iluminarlo, dependiendo de su estado actual, Si el elemento es transparente, se vuelve opaco. Si el elemento es opaco, se vuelve transparente.

  1. En una nueva composición de Edge Animate, añada un pequeño rectángulo y una imagen al escenario. Llame al rectángulo Rectángulo, y a la imagen Imagen.

  2. En la línea de tiempo o en el panel Elementos, haga clic en el botón Abrir acciones del elemento Rectángulo.

  3. Elija hacer clic para el evento

  4. Añada la siguiente frase para el evento de hacer clic: sym.$("Image").fadeToggle()

  5. Esto es todo. Visualice previamente su composición en un navegador

    Cuando se hace clic en el rectángulo, Edge Animate utiliza jQuery para seleccionar la imagen y ejecuta el método fadeToggle(). La imagen se oscurece e ilumina con los sucesivos clics. jQuery se toma todo el trabajo de crear dos animaciones invertidas sin pedirle que cree manualmente ningún símbolo, fotograma clave ni mecanismo para recordar el estado de la imagen. jQuery es potente y constituye una buena adición a su conjunto de herramientas de diseñador o desarrollador. Puede ver el archivo 05JQuery.an de la carpeta 05End_JQuery para ver el ejemplo completo.

Revisión

Preguntas de revisión

  1. ¿Cuál es la diferencia entre acciones, activadores y eventos, y cómo se utilizan para crear interacción en Adobe Edge Animate?
  2. ¿Cuál es la relación entre la API de Edge Animate, jQuery y JavaScript?
  3. ¿Cómo se crea un botón?
  4. ¿Para qué utilizaría una etiqueta y donde se sitúan?
  5. ¿Qué es el panel Código, y en qué se diferencia de los paneles de acciones y activadores?
  6. ¿Qué significa el código sym en la API de Edge Animate, y cómo se utiliza?

Respuestas a la revisión

  1. Las acciones, los activadores y los eventos son todos ellos código JavaScript y se utilizan para crear interacción en Edge Animate? Las acciones son comandos que indican a Edge Animate que debe hacer algo, como por ejemplo ocultar o visualizar un elemento, o cargar un hipervínculo. Los activadores son acciones que se sitúan en la línea de tiempo, de manera que se ejecutan en momentos específicos. Los eventos son cosas que suceden en una composición a la que Edge Animate puede responder con acciones.
  2. Edge Animate utiliza JavaScript para accionar su animación e interactividad. JavaScript es el lenguaje de scripts estándar para los navegadores web. jQuery es una biblioteca de funciones de JavaScript bien escritas que hace más fácil seleccionar y animar elementos de las páginas web. La API de Edge Animate proporciona funciones adicionales (basadas en JavaScript y jQuery) para controlar elementos de su composición.
  3. Un botón es un indicador visual con el que el usuario puede interaccionar. Puede crear un botón creando un elemento en el escenario y, a continuación, haciendo clic en el botón Abrir acciones del panel Línea de tiempo o Elementos para añadir un evento. En la pestaña de evento que se abrirá, inserte las acciones que quiere que se activen cuando se abra el evento.
  4. Las etiquetas están situadas en la parte superior de la línea de tiempo. Las etiquetas identifican puntos específicos del tiempo, por lo que puede hacer referencia a nombres de etiquetas en lugar de utilizar valores fijos en milisegundos en su código JavaScript.
  5. El panel Código, al que se accede pulsando Ctrl+E (Windows)/Command+E (Mac OS), le permite visualizar todo el código JavaScript asociado con su actual composición de Edge Animate. También muestra los errores de código que pudiera haber y su localización en el guion. En contraste, los paneles para añadir activadores, eventos y acciones solo muestran el código para el elemento asociado, o el tiempo.  
  6. La palabra sym representa toda la composición de Edge Animate, cuando la frase está en la línea de tiempo principal. Edge Animate se organiza conforme al concepto de “símbolos” y la raíz, o símbolo de nivel de base, es el escenario de Edge Animate. Este símbolo de raíz contiene todos los elementos y animaciones de su composición de Edge Animate, o sea todo lo que hay en el escenario y en la línea de tiempo. En JavaScript, cuando se desea hacer algo, lo primero que hay que hacer es identificar el objeto que se quiere controlar. Si quiere actuar sobre la línea de tiempo de su composición de Edge Animate, la primera cosa que se escribe en el guion es sym.

Esta obra está autorizada con arreglo a la licencia de Reconocimiento-NoComercial-CompartirIgual 3.0 Unported de Creative Commons.  Los términos de Creative Commons no cubren las publicaciones en Twitter™ y Facebook.

Avisos legales   |   Política de privacidad en línea