G. Interactividad con Acciones, Desencadenantes y Etiquetas

La API de tiempo de ejecución de Adobe Edge Animate nos permite agregar fácilmente interactividad básica a nuestras composiciones en forma de interacciones con el ratón, interacciones táctiles y algunos comportamientos básicos de línea de tiempo y reproducción. Todo esto se logra a través de diferentes tipos de acciones de Edge Animate, dependiendo del elemento al que se aplican. Las acciones en Adobe Edge Animate son instrucciones específicas basadas en el lenguaje de scripting JavaScript utilizado por todos los navegadores modernos. Estas instrucciones son una parte integral de una composición de Edge Animate que involucra cualquier tipo de interactividad.

En este capítulo, veremos lo siguiente:

Acciones de escenario
Acciones de elementos
Desencadenantes de línea de tiempo
Etiquetas de línea de tiempo
Cursores de ratón
El panel Código
Eventos de Edge Animate

También veremos cómo agregar interactividad a nuestro banner web de muestra del capítulo anterior y consideraremos las API de tiempo de ejecución de Edge Animate antes de continuar.

Trabajar con acciones de Edge Animate

Las acciones son la principal forma de crear interactividad dentro de Adobe Edge Animate. Se pueden aplicar a un solo elemento, a todo el panel Escenario o a través de ciertos puntos a lo largo del panel Línea de tiempo como desencadenantes. El código utilizado a través del panel Acciones es todo JavaScript y se basa en dos bibliotecas de JavaScript: jQuery y Adobe Edge Animate Runtime. Vea el siguiente ejemplo:

A diferencia de Adobe Flash Professional, el código se puede aplicar a cualquier elemento; los elementos no tienen que crearse como símbolos para recibir acciones sobre ellos.

Hay muchos tipos de acciones que se pueden aplicar a un proyecto, dependiendo del elemento que recibe la interacción, pero generalmente involucran instrucciones de reproducción o referencia y manipulación de elementos.

El panel Acciones

El panel Acciones es el lugar central donde se aplican acciones y desencadenantes a los elementos dentro de Edge Animate. El diseño de este panel es único, ya que tenemos una serie de controles que permiten la manipulación de cualquier acción aplicada a un elemento específico de una manera muy robusta. El siguiente diagrama muestra algunas acciones:

A partir de este diagrama, podemos ver la variedad de controles que tenemos disponibles dentro de este panel:

Lista de fragmentos: este conjunto de acciones genera fácilmente fragmentos de código con un simple clic de botón. A menudo requieren una pequeña manipulación del código después para que sean efectivos.
Agregar/Eliminar acciones: estas acciones agregan nuevas acciones a un elemento o eliminan acciones existentes del elemento.
Acciones aplicadas: estas acciones se representan como pestañas en la parte superior del panel y proporcionan una forma rápida de ver qué acciones ya están aplicadas a un elemento y un método rápido para cambiar entre ellas.
Editor de código: este es el panel donde se realiza la manipulación manual de los comandos preestablecidos. También podemos omitir la lista de comandos por completo si lo deseamos y simplemente escribir el código a mano.

Preferencias en el panel Acciones

En la esquina superior derecha del panel Acciones hay un pequeño icono que nos permite acceder a las preferencias del panel. Podemos establecer una variedad de preferencias de esta manera, que se conservarán en los proyectos de Edge Animate.

Casi todos los paneles de Edge Animate incluyen un conjunto de preferencias a las que se puede acceder de esta manera.

Al hacer clic en el icono de preferencias, aparecerán las siguientes selecciones de preferencias:

Elemento del menú	Descripción
Mostrar números de línea	Esto determina si los números de línea son visibles en el panel Acciones.
Tamaño de fuente	Esto ajustará el tamaño de fuente del código que se muestra en el panel Acciones. Tenemos la opción de Pequeño, Mediano o Grande.
Incluir comentarios de fragmentos	Cuando se insertan fragmentos en el área de código del panel Acciones, tenemos la opción de incluir comentarios útiles que brinden un poco de orientación sobre cómo configurar y personalizar el fragmento insertado. Esto activará o desactivará esa función.

Aplicar acciones al escenario

Dado que el escenario en sí es, de hecho, un símbolo, no debería sorprender que las acciones se puedan asignar directamente al escenario. Para asignar una nueva acción al escenario, haga clic en el nodo raíz del escenario en el panel Elementos, luego, desde el panel Propiedades, haga clic en el comando del icono de script Acciones para configurar un conjunto de acciones. Alternativamente, las acciones del escenario se pueden configurar a través del panel Elementos de la misma manera.

El escenario, debido a su naturaleza única, puede tener algunas acciones únicas aplicadas. Estos se enumeran a continuación:

creationComplete: con esta acción, el código se ejecutará al crear el símbolo del escenario.
beforeDeletion: esta acción hace que el código se ejecute inmediatamente antes de que se elimine el escenario.
compositionReady: estas instrucciones se activarán inmediatamente una vez que se cargue la composición.
scroll: esta acción nos permite desplazar el contenido del escenario.
keydown: esta acción permite la detección del teclado de eventos keydown.
keyup: esta acción permite la detección del teclado de eventos keyup.
orientationChange: esto detecta un cambio de orientación, más específico para dispositivos móviles.
resize: esta acción se activa cuando se cambia el tamaño del escenario.
onError: esta acción se ejecuta cuando se produce un error de JavaScript.

Por ejemplo, para escuchar cuándo el usuario presiona la barra espaciadora, Edge Animate colocará este código en una acción keydown:

JavaScript
// La variable "e.which" le indica el código de tecla de la tecla que se presionó, por ejemplo, 32 = espacio
if (e.which == 32) {
// hacer algo
}

Aplicar acciones a elementos individuales

Para muchas acciones, como clics del ratón, efectos de desplazamiento y cosas de esa naturaleza, querremos aplicar código directamente a ciertos elementos. La forma más rápida de hacerlo es ir al panel Elementos y hacer clic en el icono de corchetes pequeños junto al elemento deseado. Esto abrirá el panel Acciones, dentro del cual podemos especificar una acción apropiada como se muestra en la siguiente captura de pantalla:

Un ejemplo común de una acción de elemento individual sería un evento de clic dentro del cual dirigimos la herramienta Cabezal de reproducción para reproducir desde la posición 1000 a lo largo del panel Línea de tiempo:

JavaScript
// reproduce la línea de tiempo desde la posición dada (ms o etiqueta)
sym.play(1000);
// insertar código para clics del ratón aquí

Cambiar el cursor del ratón

Para comunicar más claramente que el usuario puede interactuar con un elemento, Edge Animate nos permite modificar la apariencia del cursor del ratón sobre elementos individuales. Esto es especialmente útil cuando se usa la interactividad a través de acciones de elementos, ya que proporciona otro nivel de interacción del usuario.

Si bien cambiar el cursor puede ayudar a informar al usuario sobre el propósito de un elemento, cambiarlo para representar una acción incorrecta o algún propósito aleatorio sería bastante confuso. Debemos tener cuidado de cambiar el cursor solo cuando sea apropiado hacerlo.

Tipos de cursor

Edge Animate permite muchos tipos de cursores dentro de una composición. Estos se pueden utilizar para ayudar a notificar al usuario de alguna acción que puede ocurrir a través del ratón, o que algún proceso está ocurriendo. En la siguiente captura de pantalla, enumeramos todos los tipos de cursores disponibles junto con su posible uso:

En esa captura de pantalla, vimos todos los cursores disponibles para nosotros dentro de un proyecto de Edge Animate. La siguiente tabla muestra cómo se llaman muchos de ellos y qué hacen.

Cursor Descripción

auto Esto permite que el navegador determine qué cursor usar.

default Este es el cursor de flecha predeterminado.

pointer Esto es útil para indicar que se puede hacer clic en algo. Parece una manita.

move Esto indica movimiento en cuatro direcciones. Es útil para hacer clic y arrastrar.

crosshair Esto se usa a menudo para elegir elementos en una página. Parece una pequeña cruz.

wait Esto indica que algo está sucediendo y el usuario debe ser paciente. Parece un reloj de pulsera.

context-menu Esta es la flecha predeterminada con un pequeño icono de menú al lado.

help Esta es la flecha predeterminada con un gran "?" incluido.

no-drop Esta es una flecha más pequeña con el icono de círculo con una barra debajo. Indica que no se puede realizar una operación.

n-resize Esta es una flecha de cambio de tamaño que apunta al norte.

ne-resize Esta es una flecha de cambio de tamaño que apunta al noreste.

e-resize Esta es una flecha de cambio de tamaño que apunta al este.

se-resize Esta es una flecha de cambio de tamaño que apunta al sureste.

s-resize Esta es una flecha de cambio de tamaño que apunta al sur.

sw-resize Esta es una flecha de cambio de tamaño que apunta al suroeste.

w-resize Esta es una flecha de cambio de tamaño que apunta al oeste.

nw-resize Esta es una flecha de cambio de tamaño que apunta al noroeste.

ns-resize Esta es una flecha de cambio de tamaño de doble punta que apunta al norte y al sur.

nesw-resize Esta es una flecha de cambio de tamaño de doble punta que apunta al noreste y suroeste.

ew-resize Esta es una flecha de cambio de tamaño de doble punta que apunta al este y al oeste.

nwse-resize Esta es una flecha de cambio de tamaño de doble punta que apunta al noroeste y sureste.

text Esto indica texto seleccionable o editable.

vertical-text Esto indica texto vertical seleccionable o editable.

row-resize Esto indica la capacidad de reposicionar a lo largo del eje x.

col-resize Esto indica la capacidad de reposicionar a lo largo del eje y.

Desencadenantes

Al igual que cuando se trabaja con acciones de elementos, el panel Acciones es el lugar donde se aplican los desencadenantes a los elementos dentro de Edge Animate. El diseño de este panel es muy similar al que se utiliza cuando se trabaja con acciones de elementos, aunque como los desencadenantes residen a lo largo de la línea de tiempo y se activan mediante la herramienta Cabezal de reproducción en lugar de un evento elegido, en realidad hay menos opciones con las que lidiar.

A partir de este diagrama, podemos ver la variedad de controles que tenemos disponibles dentro de este panel de la siguiente manera:

Lista de fragmentos: este conjunto de acciones genera fácilmente fragmentos de código con un simple clic de botón. A menudo requieren una pequeña manipulación del código después para que sean efectivos.
Editor de código: aquí es donde se realiza la manipulación manual de los comandos preestablecidos. También podemos omitir la lista de comandos por completo si lo deseamos y simplemente escribir el código a mano.
Identificador de desencadenante: esto nos permite saber de inmediato que se trata de un desencadenante basado en la línea de tiempo.
Tiempo de activación: este es el momento en el que se ha colocado este desencadenante. Los desencadenantes se pueden desplazar a través de la línea de tiempo haciendo clic y arrastrando.

La capa Acciones de la línea de tiempo

La línea de tiempo de Edge Animate incluye una capa especial separada de todas las demás. Esto se llama capa Acciones y se utiliza explícitamente para trazar acciones especiales, llamadas desencadenantes, en varios puntos a lo largo de la línea de tiempo:

Durante muchos años, al trabajar en Flash Professional, se ha recomendado crear una capa especializada denominada Acciones, dentro de la cual incluir cualquier ActionScript de la línea de tiempo. Edge Animate toma prestada esta práctica de flujo de trabajo establecida desde hace mucho tiempo con gran efecto.

Trabajar con desencadenantes

Los desencadenantes se pueden crear a lo largo de la línea de tiempo de varias maneras. El método más directo es colocar la herramienta Cabezal de reproducción en un punto donde queremos incluir un desencadenante y luego usar el atajo de teclado Ctrl + T (Windows) o Comando + T (Mac). Alternativamente, podemos hacer clic en el diamante del fotograma clave en la capa Acciones o ir al menú de la aplicación y elegir Línea de tiempo | Insertar desencadenante:

Para editar un desencadenante existente, simplemente haga doble clic en él y aparecerá el panel Acciones, lo que nos permitirá realizar cualquier ajuste. Los desencadenantes también se pueden arrastrar a cualquier momento a lo largo del panel Línea de tiempo con el ratón.

Trabajar con etiquetas

Las etiquetas en Edge Animate son un mecanismo mediante el cual podemos establecer marcadores textuales a lo largo del panel Línea de tiempo. Estos marcadores pueden proporcionar pistas de creación visual o se pueden hacer referencia a través de acciones. Por ejemplo, si tuviéramos que establecer una etiqueta llamada JumpPoint en 0:02.000, podríamos hacer referencia a ella de la siguiente manera:

JavaScript

sym.play("JumpPoint");

en lugar de:

JavaScript

sym.play(2000);

Aquellos acostumbrados a trabajar en Flash Professional reconocerán este mismo concepto. En esa aplicación, se conocen como etiquetas de fotograma y se pueden utilizar exactamente de la misma manera.

Saltar a etiquetas

Como hemos indicado, no solo es posible saltar a diferentes códigos de tiempo específicos a lo largo del panel Línea de tiempo, sino que también podemos saltar a etiquetas de línea de tiempo establecidas. El uso de etiquetas nos permite liberarnos de los milisegundos absolutos en caso de que decidamos cambiar el contenido a lo largo de la línea de tiempo, invalidando así cualquier código de tiempo original que haya sido.

Para ver un ejemplo de cómo funciona esto, eche un vistazo al proyecto dentro del directorio llamado EdgeLabels.

En este ejemplo, establecemos un evento Click que luego dirige la posición de la herramienta Cabezal de reproducción a través de una acción Detener en. Para aplicar dicha acción, realice los siguientes pasos:

Asegúrese de configurar el escenario principal para deshabilitar la reproducción automática a través del panel Propiedades. Esto detendrá la herramienta Cabezal de reproducción en 0 milisegundos.
Cree una etiqueta en un punto específico de la línea de tiempo (digamos en 0:00.500) moviendo la herramienta Cabezal de reproducción a esa posición y luego accediendo al menú Línea de tiempo | Insertar etiqueta y nombrar la etiqueta Página 1.
Ahora cree un elemento de texto en el escenario que recibirá nuestra acción Click. Haga que lea algo como Saltar a la página 1.
Agregue otro elemento de texto al escenario y simplemente haga que lea Página 1. Coloque este elemento en un lugar único y configure su propiedad Mostrar elemento para que esté desactivada en 0 milisegundos.

Mueva el Cabezal de reproducción a la etiqueta creada previamente y configure la propiedad Mostrar elemento del elemento de texto Página 1 en activada en la etiqueta. De esta manera sabremos cuándo hemos saltado a esa posición.
Seleccione el elemento original Saltar a la página 1 e ingrese al panel Acciones haciendo clic en su icono Acciones en el panel Elementos.
Agregue un evento Click y elija agregar una acción Detener en. El siguiente código se colocará dentro del editor de código:

JavaScript

sym.stop(1000);

Cambie esto para que se lea de la siguiente manera:

JavaScript

sym.stop("Page 1");

Esto permitirá que la acción actual use el nombre de la etiqueta en lugar de una entrada específica de milisegundos.

Ahora pruebe la composición en un navegador web para demostrar esta implementación:

Observe en esta captura de pantalla que en realidad no tenemos ninguna animación a lo largo de nuestra línea de tiempo para este proyecto. Simplemente estamos usando una combinación de acciones y estamos activando y desactivando la visibilidad de los elementos en puntos específicos. No tenemos que tener transiciones en una composición.

El panel Código

En muchos sentidos, un panel de Acciones expandido: el panel Código proporciona una vista más completa de todo el código dentro de nuestro proyecto. También proporciona una forma alternativa de agregar controladores de eventos a los elementos de una manera más centrada en el código.

El panel Código en Edge Animate es en cierto modo similar al Inspector de películas de Flash Professional, pero mucho más útil ya que el panel Código se puede utilizar como una herramienta de administración directa.

El panel Código está oculto de forma predeterminada, pero se puede acceder a él a través del menú de la aplicación Ventana | Código. Proporciona una descripción general a nivel de proyecto de las acciones y desencadenantes dentro de una composición y también permite la manipulación directa del código a través de una interfaz similar al panel Acciones.

Los atajos de teclado del panel Código son Ctrl + E (Windows) y Comando + E (Mac).

Sin embargo, a diferencia del panel Acciones, tenemos una columna de todos los elementos de composición que tienen código adjunto a ellos a lo largo del lado izquierdo del panel. Desde esta columna, podemos agregar y eliminar acciones fácilmente con el alcance del proyecto a la vista.

Haga clic derecho en cualquier acción y seleccione Eliminar acción para eliminarla por completo.

Vista de código completo

Además de proporcionar una perspectiva diferente sobre la asignación de todas las acciones dentro de nuestra composición, también tenemos la opción de cambiar a un editor de código completo, que mostrará todo el archivo {project} _edgeActions.js en forma editable.

Para acceder a esto, simplemente ubique el botón Código completo en la esquina superior derecha del panel Código y haga clic en él para alternar entre vistas:

Debemos tener especial cuidado al editar en la vista de código completo, ya que la posibilidad de introducir errores de JavaScript es mucho mayor que a través de la vista normal.

Advertencias de error de código

También hay una pequeña notificación en la esquina inferior izquierda del panel Código a través de la cual podemos ver cualquier error que Edge Animate detecta que está presente en JavaScript. Podemos ver el número de errores, una descripción de cada uno y se nos notifica en qué línea se detectó el error:

Desglose de acciones y desencadenantes

Las composiciones de Edge Animate dependen de la inclusión de las bibliotecas de JavaScript jQuery y Edge Animate Runtime para animar elementos y proporcionar interactividad.

Para estos ejemplos, veremos el código sin procesar dentro del archivo {name} _edgeActions.js después de aplicar dichas acciones.

Este archivo está organizado de la siguiente manera:

JavaScript
/***********************
* Adobe Edge Animate Composition Actions
*
* Edit this file with caution, being careful to preserve 
* function signatures and comments starting with 'Edge' to maintain the 
* ability to interact with these actions from within Adobe Edge Animate
*
***********************/
(function($, Edge, compId){
var Composition = Edge.Composition, Symbol = Edge.Symbol; // aliases for commonly used Edge classes

   //Edge symbol: 'stage'
   (function(symbolName) {   
   
      Symbol.bindTriggerAction(compId, symbolName, "Default Timeline", 2000, function(sym, e) {
         sym.stop();

      });
      //Edge binding end

      Symbol.bindTriggerAction(compId, symbolName, "Default Timeline", 1505, function(sym, e) {
         // Navigate to a new URL in the current window
         // (replace "_self" with appropriate target attribute for a new window)
         window.open("http://www.adobe.com", "_self");
         // insert code here
      });
      //Edge binding end

      Symbol.bindElementAction(compId, symbolName, "${_Rectangle}", "mousedown", function(sym, e) {
         sym.playReverse();
         //Edge binding end

      });
      //Edge binding end

   })("stage");
   //Edge symbol end:'stage'

   //=========================================================
   
   //Edge symbol: 'FaceSym'
   (function(symbolName) {   
   
   })("FaceSym");
   //Edge symbol end:'FaceSym'

})(jQuery, AdobeEdge, "EDGE-1161928078");

Acciones de composición

Estas acciones de composición generales están vinculadas al escenario de Edge Animate. Dichos eventos se activan cuando la composición está lista, cuando se produce un desplazamiento o cuando se interactúa con el teclado mediante acciones keydown o keyup.

La siguiente tabla muestra los distintos eventos que se pueden aplicar en casos como este:

Acción	Descripción
creationComplete	Esto se activa al crear la composición completa.
beforeDeletion	Esto se activará inmediatamente antes de la eliminación de una composición.
compositionReady	Esto se activa cuando la composición está disponible.
scroll	Esto se activa al desplazar el contenido dentro de un elemento desplazable.
keydown	Esto se detecta cuando se presiona una tecla en el teclado.
keyup	Esto se detecta cuando se levanta una tecla que se ha presionado previamente.
OrientationChange	Esto se activa en dispositivos que admiten cambios de orientación, como tabletas y teléfonos móviles.
Resize	Esto detecta cuando se ha cambiado el tamaño de la composición.
onError	Todos los errores de composición se envían a través de este evento.

Por ejemplo, mire el siguiente código:

JavaScript
Symbol.bindElementAction(compId, symbolName, "document", "compositionReady", function(sym, e) {
   sym.play();
   // insert code for compositionReady event here
});
//Edge binding end

Lea sobre DOM en: http://www.w3.org/DOM/.

Acciones del ratón

Estos son eventos normales del ratón que se registran en elementos individuales de Edge Animate. Úselos cuando apunte cuándo un usuario presiona o suelta el botón del ratón, entre otras cosas.

La siguiente tabla muestra los distintos eventos que se pueden aplicar en casos como este:

Acción	Descripción
click	Esto representa un simple clic del ratón.
dblclick	Esto representa un doble clic del ratón.
mouseover	Esto se activa cuando el cursor entra en los límites de un elemento.
mousedown	Este evento se activa cuando se mantiene presionado el botón del ratón.
mousemove	Esto detecta y responde al cursor que se mueve a través de un elemento.
mouseup	Este evento se activa cuando se suelta el botón del ratón.
mouseout	Esto se activa cuando el cursor sale de los límites de un elemento.

Por ejemplo, considere el siguiente código:

JavaScript
Symbol.bindElementAction(compId, symbolName, "${_Rectangle}", "mousedown", function(sym, e) {
   // stop the timeline at the given position (ms or label)
   sym.stop(1000);
   // insert code for mousedown here
});
//Edge binding end

Generalmente, estas acciones también se pueden aplicar al escenario.

Acciones táctiles

Las acciones táctiles se utilizarán cuando se dirijan a dispositivos táctiles, como teléfonos inteligentes y tabletas; podemos escuchar cuándo comienza un toque, movimientos táctiles y eventos de finalización táctil para realizar ciertas funciones dentro de una composición de Edge Animate.

La siguiente tabla muestra los distintos eventos que se pueden aplicar en casos como este:

Acción	Descripción
touchstart	Esto indica que se ha detectado un evento táctil.
touchmove	Esto se activará después de un evento táctil detectado cuando el punto táctil se mueva a través de un elemento.
touchend	Esto indica que un evento táctil detectado previamente ha finalizado.

Por ejemplo, considere el siguiente código:

JavaScript
Symbol.bindElementAction(compId, symbolName, "${_Rectangle}", "touchstart", function(sym, e) {
   // Navigate to a new URL in the current window
   // (replace "_self" with another name for a new window)
   window.open("http://www.adobe.com", "_self");
   // insert code for touchstart here
});
//Edge binding end

De forma similar a los eventos del ratón, estas acciones también se pueden aplicar al escenario o a elementos individuales.

Acciones de jQuery

Estos son eventos específicos de jQuery que podemos escuchar y responder dentro de una composición de Edge Animate, como se enumera en la siguiente tabla:

Este es el código que se ejecutará cuando un elemento gane foco.

JavaScript
Symbol.bindElementAction(compId, symbolName, "${_Rectangle}", "mouseenter", function(sym, e) {
  sym.$("Status_txt").html("Mouse Enter detected!");
});

Similar to mouse and touch events, these actions can also be applied to the Stage or individual elements.

avaScript
Symbol.bindElementAction(compId, symbolName, "${_Rectangle}", "mouseenter", function(sym, e) {
  sym.$("Status_txt").html("Mouse Enter detected!");
});

Similar to mouse and touch events, these actions can also be applied to the Stage or individual elements.

Action and trigger events

Events are added to actions that can be set upon the Stage, individual elements and symbols, or along the Timeline as triggers. Any action can contain many different events.

The following table shows various events which can be applied in instances like this:

Acción	Descripción	Ejemplo
Stop	Detiene la línea de tiempo.	`sym.stop();`
Play	Reproduce la línea de tiempo.	`sym.play();`
Stop at	Detiene la línea de tiempo en la posición dada (milisegundos o etiqueta).	`sym.stop(1000);` <br> `sym.stop("Label");`
Play from	Reproduce la línea de tiempo desde la posición dada (milisegundos o etiqueta).	`sym.play(1000);` <br> `sym.play("Label");`
Play Reverse	Reproduce la línea de tiempo en reversa desde la posición actual.	`sym.playReverse();`
Open URL	Navega a una nueva URL.	`window.open("http://www.adobe.com", "_self");`
Set Symbol Variable	Establece el valor de un parámetro de símbolo.	`sym.setParameter("myParameterName", "parameterValue");`
Get Symbol Variable	Obtiene el valor de un parámetro de símbolo.	`var myParameter = sym.getParameter("myParameterName");`
Set Element Text	Cambia el contenido textual de un elemento.	`sym.$("ElementID").html("NewText");`
Get Element	Resuelve un nombre de elemento de Edge Animate a un elemento DOM que se puede usar con jQuery.	`var element = sym.$("ElementID");`
Hide Element	Oculta un elemento.	`sym.$("ElementID").hide();`
Show Element	Muestra un elemento.	`sym.$("ElementID").show();`
Create Symbol	Crea una instancia de elemento de un símbolo como hijo del elemento padre dado.	`var mySymbolObject = sym.createChildSymbol("Symbol", "ParentElement");`
Delete Symbol	Elimina un elemento que es una instancia de un símbolo.	`sym.getSymbol("Symbol").deleteSymbol();`
Get Symbol	Busca el objeto JavaScript de símbolo de Edge Animate desde un elemento que es una instancia de un símbolo.	`var mySymbolObject = sym.getSymbol("Symbol");`
Get Symbol Element	Obtiene el nodo de elemento para un objeto JavaScript de símbolo de Edge Animate.	`var symbolElement = sym.getSymbolElement();`

Muchas de estas acciones, como Detener en, tienen contrapartes cercanas en el mundo de Flash Professional y ActionScript.

Agregar interactividad a un encabezado de sitio web

Ahora que hemos tenido una descripción general sólida de cómo aplicar interactividad a través de acciones dentro de una composición de Edge Animate, volvamos a visitar nuestro proyecto de ejemplo del capítulo anterior. Si recuerda, hemos creado un encabezado de sitio web animado para un proyecto de grabación de estudio con el nombre An Early Morning Letter, Displaced.

Les gustó lo que hemos hecho con la composición hasta ahora, pero ahora solicitan que la hagamos un poco más interactiva. Específicamente, quieren un efecto de desplazamiento donde al pasar el cursor sobre cada pieza de carátula del álbum aparezca información básica sobre ese lanzamiento. Además, les gustaría que su sitio web se abra cuando un usuario hace clic en el texto del título y enlaces directos a la página de cada álbum cuando se hace clic en la carátula del álbum.

Crear el elemento de texto

Primero debemos abrir el proyecto y crear un nuevo elemento de texto en el escenario para que contenga el texto flotante que desean mostrar:

Abra el proyecto de encabezado del sitio web del capítulo anterior. Si lo desea, se puede encontrar una versión completa de ese proyecto dentro de la carpeta MotionBanner.
Guarde este proyecto en una nueva ubicación para que, si cometemos un error desastroso, no se pierda el proyecto original. Tenga en cuenta que siempre es importante versionar o hacer una copia de seguridad de nuestros archivos de forma organizada.
Con la herramienta Texto, arrastre un nuevo elemento de texto al escenario.
Al soltar el botón del ratón, la herramienta Selección se activará automáticamente con el nuevo elemento de texto seleccionado. Querremos dejar el elemento de texto vacío por ahora, así que simplemente inserte un espacio usando la barra espaciadora. Crear un elemento de texto sin ningún texto atribuido resultará en que no se cree ningún elemento de texto. Por eso debemos insertar, al menos, un espacio.
Dentro del panel Propiedades, realice los siguientes ajustes:

ID: Información

Ubicación X: 530 px

Ubicación Y: 83 px

Tamaño W: 392 px

Tamaño H: 96 px

Nombre de fuente: Arial Black, Gadget, sans-serif

Tamaño de fuente: 18 px

Color de fuente: #808080

El elemento de texto ahora está configurado correctamente.

Como el elemento de texto en realidad no contiene texto en este punto, cuando no está seleccionado, es posible que tengamos dificultades para ubicarlo para cualquier manipulación adicional. Esto no es un problema; simplemente haga clic en él en el panel Elementos para seleccionarlo una vez más.

Agregar interactividad al título

Necesitaremos agregar una acción de clic al elemento del título, lo que permitirá que un usuario haga clic en el sitio web del artista. Para hacerlo, realizamos los siguientes pasos:

Dentro del panel Elementos, haga clic en el icono de script junto al elemento Título. Esto abrirá el panel Acciones.
Inmediatamente se nos presentan una serie de acciones para elegir. Seleccione la acción de clic.
En la columna del lado derecho, seleccione Abrir URL. Se inserta algo de código junto con comentarios en el editor.
Cambie el código que aparece para que se lea de la siguiente manera:

JavaScript
window.open("http://displaced.memoryspiral.com/", "_self");

En el panel Propiedades, cambie la propiedad Cursor a puntero, lo que indica que se puede hacer clic en el elemento.

Esta parte del ejemplo ahora está completa, como se muestra en la siguiente captura de pantalla:

Agregar interactividad a la carátula del álbum

Hay tres acciones separadas que debemos asignar a cada una de las imágenes del álbum en esta composición: clic, mouseover y mouseout. Repetiremos los siguientes pasos para cada elemento, cambiando los parámetros necesarios según sea necesario:

Dentro del panel Elementos, haga clic en el icono de script junto a uno de los elementos de imagen de la carátula del álbum. Para este ejemplo, elegiremos el elemento fvm004. Esto abrirá el panel Acciones.
Inmediatamente se nos presentan una serie de acciones para elegir. Seleccione la acción de clic.
En la columna del lado derecho, seleccione Abrir URL. Se inserta algo de código junto con comentarios en el editor.
Cambie el código que aparece para que se lea de la siguiente manera:

JavaScript
window.open("http://fracturedvisionmedia.com/FVM004/", "_self");

Necesitamos seleccionar dos acciones más para elegir. Primero, hacemos clic en el pequeño icono más en la parte superior del panel Acciones y seleccionamos la acción mouseover.
En la columna del lado derecho, seleccione Establecer texto del elemento. Se inserta algo de código junto con comentarios en el editor.
Cambie el código que aparece para que se lea de la siguiente manera:

JavaScript

sym.$("Info").html("Shudderflowers (2009)");

Esto cambiará nuestro elemento de texto dinámico para mostrar información sobre este álbum.

Tenga en cuenta que estamos cambiando el texto dentro del elemento de texto Información que se creó anteriormente. Los ID de elemento son importantes no solo para nuestro propio reconocimiento, sino que también se utilizan para apuntar a elementos específicos en casos como este.

Para la acción final, haremos clic en el pequeño icono más en la parte superior del panel Acciones y seleccionaremos la acción mouseout.
En la columna del lado derecho, seleccione Establecer texto del elemento como antes. Se insertará código en el editor.
Cambie el código que aparece para que se lea de la siguiente manera:

JavaScript

sym.$("Info").html("");

Esto borrará cualquier texto insertado a través de nuestro comando mouseover.

En el panel Propiedades, cambie la propiedad Cursor a puntero, lo que indica que se puede hacer clic en el elemento.

Ahora hemos habilitado tres acciones separadas sobre este elemento; una acción de clic para abrir más detalles en el navegador web, una acción de mouseover, para mostrar algo de texto general al usuario al pasar el cursor, y una acción de mouseout para eliminar ese texto cuando el cursor ya no está presente sobre el elemento.

Hemos demostrado cómo lograr esto para uno de los cinco elementos de imagen del álbum. Para completar el ejercicio, necesitaremos repetir esto para cada elemento. Puede encontrar un ejemplo completo de este proyecto en la carpeta InteractiveBanner.

Tenga en cuenta que, si lo desea, se pueden copiar conjuntos completos de acciones de un elemento para pegarlos dentro de otro. Para lograr esto, use la herramienta Selección y seleccione el elemento que contiene las acciones deseadas. Copie el elemento a través del menú de la aplicación Editar | Copiar. Ahora seleccione el elemento para recibir las acciones y regrese al menú de la aplicación Editar | Pegado especial | Pegar acciones. Ahora podemos simplemente abrir el panel Acciones y modificar las acciones pegadas como desee.

Completar la composición final del encabezado del sitio web

Ahora estamos listos para producir los archivos finales para nuestro cliente. Para publicar nuestra composición de Edge Animate en el navegador, podemos elegir Archivo | Vista previa en navegador en el menú de la aplicación. Esto escribirá todos los archivos necesarios y abrirá la composición completa en un navegador web.

Ahora que hemos agregado interactividad a este banner, podemos pasar el cursor sobre cada imagen para obtener más información al respecto. El cursor cambiará de la flecha predeterminada a un puntero, lo que indica que el usuario puede hacer clic en el elemento. Al hacer clic en la imagen, se abrirán los detalles dentro del navegador. Al hacer clic en el título también se abrirá un sitio web.

Este es solo un ejemplo de los tipos de interactividad que se pueden lograr a través de Adobe Edge Animate. Podemos echar un vistazo a la API y la documentación de Edge Animate Runtime para obtener más ejemplos.

Usar acciones táctiles para dispositivos móviles

El ejemplo anterior utiliza eventos específicos del ratón para una variedad de propósitos. Las composiciones de Edge Animate también pueden emplear eventos para tocar. Creemos un proyecto simple que emplee eventos táctiles y proporcione información al usuario para dispositivos móviles. Para reproducir el ejemplo MobileTouch, siga estos pasos:

Cree un nuevo proyecto y modifique las propiedades del escenario de la siguiente manera:

Color de fondo: #000000

Escenario W: 480 px

Escenario H: 920 px
Si lo desea, use la herramienta Texto para dibujar un elemento de texto en el escenario para usarlo como un título simple. El proyecto de ejemplo utiliza el nombre Ejemplo de toque móvil.
Con la herramienta Texto, cree otro elemento con las siguientes propiedades:

ID: Comentarios

Ubicación X: 20 px

Ubicación Y: 126 px

Tamaño W: 440 px

Tamaño H: 250 px

Nombre de fuente: Courier, Courier New, monospace

Color del texto: #00ff03
Dentro del panel Elementos, haga clic en el icono de script junto al elemento de texto Comentarios. Esto abrirá el panel Acciones. Inmediatamente se nos presentan una serie de acciones para elegir.
Seleccione la acción touchstart.
En la columna del lado derecho, seleccione Establecer texto del elemento. Se inserta algo de código junto con comentarios en el editor.
Cambie el código que aparece para que se lea de la siguiente manera:

JavaScript

sym.$("Feedback").html("Detected: Touch Start");

Necesitamos seleccionar dos acciones más. Primero hacemos clic en el pequeño icono más en la parte superior del panel de acciones y seleccionamos la acción touchmove.
En la columna del lado derecho, seleccione Establecer texto del elemento como antes.
Cambie el código que aparece para que se lea de la siguiente manera:

JavaScript

sym.$("Feedback").html("Detected: Touch Move");

Para la acción final, haremos clic en el pequeño icono más en la parte superior del panel Acciones y seleccionaremos la acción touchend.

En la columna del lado derecho, seleccione Establecer texto del elemento tal como lo hemos estado haciendo. Se insertará código en el editor.
Cambie el código que aparece para que se lea de la siguiente manera:

JavaScript

sym.$("Feedback").html("Detected: Touch End");

Ahora tenemos una pequeña composición que reaccionará a los tres eventos táctiles admitidos por Edge Animate Runtime, escribiendo un mensaje al usuario dentro de un elemento de texto predefinido. Cuando se carga en la Web y se ve dentro de una tableta con Android 4.0, el proyecto aparece como se muestra en la siguiente captura de pantalla:

Es importante tener en cuenta que solo porque algo esté construido con HTML, no estará necesariamente optimizado para dispositivos móviles ni tendrá un mayor rendimiento que otras tecnologías. Mucho de esto depende del proyecto en particular, y de la intención y la habilidad de quienes trabajan en él.

Elementos del menú de Adobe Edge Animate

Ahora veremos algunos de los elementos del menú de Edge Animate que se pueden utilizar al copiar y pegar elementos con acciones aplicadas a ellos.

Editar

El menú Editar permite la manipulación directa de objetos a través de comandos de cortar, copiar y pegar, junto con opciones de selección y acceso a un historial de deshacer / rehacer:

Comando	Descripción
Pegado especial	En realidad, se trata de una serie de comandos que permiten pegar atributos específicos. Como cualquier comando Pegar, estos atributos o un elemento que los acompaña deben haberse cortado o copiado antes de esto.
Pegado especial \	Pegar acciones
Pegado especial \	Pegar todo

Resumen

En este capítulo, hemos examinado cómo utilizar el panel Acciones para agregar interactividad a una composición de Edge Animate a través de acciones de elementos y desencadenantes de la línea de tiempo. Adobe Edge Animate utiliza JavaScript como lenguaje de scripting a través de las API de Edge Animate Runtime debido a su adherencia a los estándares web. Aquellos familiarizados con ActionScript versiones 1 o 2 de Flash Professional deberían sentirse como en casa, al igual que cualquier persona que provenga de otro entorno de codificación basado en JavaScript.

En el próximo capítulo de este libro, veremos un manejo de elementos más avanzado dentro de Edge Animate, como el uso de símbolos, anidamiento de elementos y el mecanismo de agrupación.

Buscar este blog

Animación Publicitaria 2024