H. Haciendo uso de símbolos, elementos anidados y agrupación

Los símbolos en Adobe Edge Animate son objetos autónomos que tienen sus propios atributos y funcionalidades únicos, separados de otros elementos base dentro de una composición, como rectángulos y texto. Los símbolos en sí se almacenan en la biblioteca de un proyecto de Edge Animate y se pueden instanciar en el escenario. Estas instancias se pueden modificar por separado, según las necesidades del autor.

Este capítulo explorará los símbolos con respecto a los siguientes aspectos:

Comparación entre símbolos y otros elementos.
Cómo crear y gestionar símbolos.
El uso de símbolos en Edge Animate.
La exportación e importación de símbolos.
Una exploración de las propiedades únicas de los símbolos.

También veremos algunas funcionalidades similares con respecto a la anidación de elementos entre sí y exploraremos el mecanismo de agrupación disponible para nosotros dentro de Edge Animate.

¿Qué son los símbolos en Edge Animate?

Los símbolos en Adobe Edge Animate son objetos encapsulados que pueden constar de uno o más elementos base, contener su propia línea de tiempo y proporcionar un mecanismo mediante el cual se pueden empaquetar y compartir entre composiciones.

Aquellos lectores con experiencia en Flash Professional, Fireworks o Illustrator deben comprender de inmediato el concepto y los beneficios de los símbolos. ¡Hay muchas similitudes para aprovechar!

Diferencias entre símbolos y otros elementos

Los símbolos en Adobe Edge Animate son bastante diferentes de otros elementos que se pueden crear a través de las herramientas de la aplicación o mediante la importación de activos externos. Es importante reconocer las diversas diferencias aquí, ya que son importantes al considerar el uso de una instancia de símbolo en un proyecto de Edge Animate.

Los símbolos son autónomos

Uno de los grandes beneficios de los símbolos es que existen fuera del escenario. Debido a este hecho, se editan dentro de un modo de edición especial y aislado y se comportan de forma completamente aislada de la línea de tiempo principal. Cuando una entidad Symbol ha entrado en el modo de edición aislado, el escenario obtiene un efecto de textura representado por un patrón de líneas diagonales.

Verá lo siguiente cuando abra BasicSymbol.html:

En esta captura de pantalla, vemos que la instancia de Symbol se ha colocado en modo de edición aislado. Para salir del modo de edición, simplemente haga clic en el texto que dice Escenario en la parte superior de la ventana.

Los símbolos existen dentro del panel Biblioteca

A diferencia de los elementos dibujados básicos que existen únicamente en el escenario en Edge Animate, los símbolos residen dentro de la biblioteca del proyecto y las instancias de los símbolos se pueden crear en el escenario arrastrándolos desde el panel Biblioteca:

Este es un modelo muy similar al empleado por Flash Professional. Incluso el icono de Symbol en Edge Animate es muy similar al de un símbolo de MovieClip en Flash Professional.

Los símbolos se instancian en el escenario

Como se mencionó anteriormente, los símbolos en Edge Animate residen en la biblioteca del proyecto y se utilizan creando una instancia del símbolo, colocando la instancia en el escenario y manipulando esa instancia de alguna manera.

En la siguiente captura de pantalla, vemos cómo se pueden crear varias instancias de Symbol en el escenario y cómo las propiedades de las instancias individuales, como la opacidad, la rotación y la escala, se pueden manipular al azar sin afectar a otras instancias.

La manipulación de instancias de símbolos en el escenario en realidad no modifica la instancia de símbolo en sí, a menos que estemos en el modo de edición de símbolo. Si cambiamos las propiedades de una instancia de Symbol en sí, estos cambios se propagarán en cascada a través de todas las instancias del Symbol.

Los símbolos tienen su propia línea de tiempo

A diferencia de otros elementos que están vinculados directamente a la línea de tiempo del proyecto principal, los símbolos emplean su propia línea de tiempo aislada, que se puede manipular de forma aislada de la línea de tiempo principal. Esto nos permite crear movimiento dentro de los símbolos que se mueve independientemente de lo que esté sucediendo en la línea de tiempo principal. Esto también abre la posibilidad de animaciones anidadas.

Aunque la línea de tiempo dentro de una instancia de Symbol es independiente de la línea de tiempo del escenario, la línea de tiempo de ese Symbol se puede controlar desde el alcance de la línea de tiempo del proyecto principal a través de Acciones y Acciones de reproducción.

Los símbolos pueden emplear acciones de reproducción

Las acciones de reproducción solo están disponibles en los símbolos y se puede acceder a ellas a través del panel Propiedades o la línea de tiempo. Nos permiten controlar la línea de tiempo dentro de una instancia de Symbol a través de acciones como Detener, Reproducir o Reproducir al revés, y la capacidad de especificar el código de tiempo específico desde el que realizar esa acción.

Esta funcionalidad puede permitir que se acceda a segmentos animados incrustados específicos dentro de una instancia de Symbol en los momentos adecuados desde la línea de tiempo del escenario. Un buen ejemplo de esto sería controlar una secuencia de animación de caminata: emitir comandos para que el personaje camine hacia la derecha, se detenga y espere, corra hacia la izquierda, etc.

Comparación de símbolos en Edge Animate con símbolos en Flash Professional

Los símbolos en Edge Animate obviamente toman prestadas muchas cualidades de los símbolos de MovieClip en Adobe Flash Professional. Analicemos las similitudes y diferencias entre estas dos implementaciones.

Similitudes

Muchas de las propiedades y funcionalidades básicas son compartidas por estas dos plataformas. Estas son algunas de las similitudes más fáciles de identificar:

En ambos casos, los símbolos son objetos aislados y autónomos.
Los símbolos deben instanciarse en el escenario.
Los símbolos se pueden instanciar mediante el uso de código.
La reproducción se puede controlar desde el código en la línea de tiempo principal y desde el propio símbolo.
La visibilidad se puede alternar desde la línea de tiempo principal.

Diferencias

También hay algunas diferencias definidas a tener en cuenta entre estas dos implementaciones. Estas diferencias se describen a continuación:

La animación interna en los símbolos de MovieClip de Flash Professional no se puede restregar a lo largo de la línea de tiempo, aunque los símbolos gráficos se comportan de esta manera.
Los símbolos en Edge Animate no pueden tener características de composición avanzadas, como modos de fusión o efectos de filtro, aplicados a ellos.
Los símbolos en Edge Animate no tienen opciones de rotación y traslación 3D.
Los símbolos en Edge Animate pueden emplear recortes para ocultar partes del símbolo. Los símbolos en Flash Professional pueden emplear máscaras con el mismo efecto.
En Flash Professional, es posible crear símbolos vacíos. Dentro de Edge Animate, los símbolos siempre se crean mediante la conversión de otros elementos.

Si bien no podemos crear símbolos vacíos en Edge Animate, es posible convertir un símbolo en un símbolo vacío eliminando todos los elementos dentro de él después de su creación.

Crear y gestionar símbolos

Los símbolos se pueden crear y gestionar a través de la aplicación Adobe Edge Animate de varias maneras. Cada vez que queremos crear un nuevo símbolo, primero debemos crear uno o más elementos, que formarán sus partes. Podemos hacerlo mediante el uso de las herramientas de dibujo, la herramienta de texto o mediante la importación de recursos de imagen creados en otras aplicaciones.

El comando para convertir uno o más elementos seleccionados a un símbolo se encuentra en el menú de la aplicación Edge Animate. Elija Modificar | Convertir a símbolo para lograr esto.

También podemos usar el atajo de teclado para este comando: Ctrl + Y (Windows) o Comando + Y (Mac).

Al igual que con muchas aplicaciones creativas de Adobe, se puede acceder al mismo comando de diversas formas. Aparte de las formas detalladas anteriormente, también es posible hacer clic con el botón derecho en muchos elementos para obtener una lista contextual de opciones:

Como se ve en la captura de pantalla anterior, además de usar el menú de la aplicación Edge Animate o los atajos de teclado; también podemos emplear el clic derecho en el menú en la conversión de elementos a símbolos.

Convertir activos en símbolos

Los símbolos en Adobe Edge Animate residen en la biblioteca y son objetos autónomos con sus propias líneas de tiempo y comportamientos. Las instancias de los símbolos se pueden arrastrar fuera de la biblioteca y colocar en el escenario principal, o incluso dentro de otros símbolos, donde sus propiedades se pueden ajustar como cualquier otro elemento.

La opción de línea de tiempo Reproducción automática en este cuadro de diálogo determina si el símbolo se reproducirá por sí solo o si requerirá un comando manual de la API de tiempo de ejecución de Edge Animate para comenzar la reproducción.

Para crear una instancia de Symbol en Edge Animate, realice los siguientes pasos:

Cree un nuevo proyecto y guárdelo en el disco local.
Utilice la herramienta Rectángulo para dibujar un elemento en el escenario.
Si lo desea, ajuste las propiedades de su elemento antes de continuar.
Asegúrese de que su elemento esté seleccionado con la herramienta Selección.
En el menú Edge Animate, elija Modificar | Convertir a símbolo….
Aparecerá un pequeño cuadro de diálogo Crear símbolo, que ofrece la opción de darle al símbolo un nombre personalizado. Escriba un nombre significativo y haga clic en Aceptar.

Como se indica en esta captura de pantalla, existen ciertas restricciones sobre qué caracteres se pueden usar dentro de un nombre de símbolo.

La instancia de Symbol ahora existirá dentro de la biblioteca del proyecto y el elemento original se convertirá en un Symbol en el escenario. Para editar un símbolo, simplemente haga doble clic en el icono de rueda dentada pequeña en el lado izquierdo del nombre del símbolo en el panel Biblioteca. Alternativamente, haga doble clic en una instancia de Symbol en el escenario. Esto nos llevará al propio Symbol para una edición aislada.

Regrese al panel Escenario principal haciendo clic en el término Escenario en el encabezado negro dentro del modo de edición.

Cree muchas instancias del mismo símbolo arrastrándolas desde el panel Biblioteca al panel Escenario. Ajustar las propiedades de un símbolo no cambiará el símbolo original en absoluto.

Administrar símbolos a través del panel Biblioteca

Además de editar símbolos en su lugar a través de sus instancias colocadas en el escenario, también podemos editar el símbolo en sí a través de la biblioteca, directamente. Para hacerlo, simplemente haga clic derecho en el símbolo y elija la opción que desee:

También podemos cambiar el nombre de un símbolo en el panel Biblioteca haciendo doble clic en su nombre.

Editar

Este comando llevará al símbolo a un modo de edición que es ligeramente diferente al descrito anteriormente. Dentro del modo de edición directa, el símbolo no está vinculado de ninguna manera al escenario y aparece solo dentro del modo de edición, lo que permite una experiencia de edición mucho más enfocada.

Eliminar

Este comando eliminará un símbolo por completo del proyecto. Si hay instancias de este símbolo en uso dentro del proyecto, Edge Animate proporcionará un cuadro de diálogo de advertencia que nos lo indicará.

Cambiar nombre

Este comando nos permite cambiar el nombre de un símbolo escribiendo un nuevo nombre o modificando el actual. Cambiar el nombre de un símbolo no afectará a ninguna instancia de este símbolo de forma negativa; es perfectamente seguro hacerlo incluso con muchas instancias ya en el escenario.

Duplicar

Esto clonará el símbolo seleccionado y creará un símbolo completamente nuevo dentro del proyecto de Edge Animate que se puede editar sin afectar al símbolo original en absoluto. Cuando se duplica un símbolo, cada uno es su propio objeto único, por lo que editar cualquiera de ellos no afectará al otro de ninguna manera.

Tenga en cuenta que el nuevo símbolo tendrá el mismo nombre que el original, pero con el texto _ {x} añadido a ese nombre original. (x representa un número; por ejemplo, si tiene Symbol_1 y lo duplica, el duplicado será Symbol_2.) Sería una buena idea cambiar el nombre de dicho símbolo inmediatamente para mayor claridad.

Exportar…

Este comando abrirá el cuadro de diálogo Exportar símbolos a archivo, que nos permite guardar símbolos de la biblioteca en archivos .ansym portátiles.

Compartir símbolos entre composiciones de Edge Animate

A menudo es deseable compartir ciertos activos de Symbol entre proyectos de Edge Animate para su uso en muchas composiciones. Edge Animate hace que sea bastante sencillo hacerlo a través del formato de archivo .ansym. Este formato contiene todo lo asociado con un símbolo en particular y se puede almacenar en un disco duro local, cargar en un recurso de red, enviar por correo electrónico o compartir de otra manera entre grupos y dispositivos.

Exportar un símbolo

Para exportar un símbolo de Edge Animate y crear un archivo .ansym portátil, realice las siguientes acciones:

Abra el proyecto de Edge Animate que contiene el símbolo que se compartirá.
En la biblioteca del proyecto, haga clic con el botón derecho en el símbolo que desea exportar. Aparecerá un pequeño menú contextual.
Elija Exportar… en este menú contextual para seleccionar el destino en el que se guardará el archivo. También podemos proporcionar un nombre específico al archivo si lo deseamos.
Haga clic en Guardar para exportar el símbolo y crear un archivo .ansym.

Importar un símbolo

Ahora que hemos exportado nuestro símbolo como un archivo .ansym, podemos importarlo a un proyecto de Edge Animate nuevo o existente para su uso inmediato. Para importar un archivo .ansym y crear el símbolo asociado dentro de la nueva biblioteca del proyecto, realice las siguientes acciones:

Cree un nuevo proyecto de Edge Animate en blanco.
En el panel Biblioteca, haga clic en el icono de signo más pequeño en el lado derecho de la sección Símbolos.
Elija Importar símbolos… en el menú contextual que aparece. Esto abrirá el cuadro de diálogo Importar símbolos desde el archivo.
Busque el archivo .ansym que deseamos importar y haga clic en Abrir.
El símbolo seleccionado ahora existirá dentro de la biblioteca del proyecto y se puede usar y editar como cualquier otro símbolo.

Propiedades únicas de las instancias de Symbol

Tanto las instancias de Symbol como los Symbols en sí tienen un conjunto de propiedades únicas para ellos. Cuando se crea una instancia en el escenario, hereda todas las propiedades internas del Symbol de su padre, y también se exponen varios elementos a través del panel Propiedades una vez que se selecciona una instancia. Las propiedades únicas de las instancias de Symbol se muestran en el siguiente diagrama:

ID de instancia

Este es un identificador único que se le da a una instancia de Symbol individual para distinguirla de otras instancias y elementos dentro de un proyecto dado.

El ID de instancia también nos permite apuntar a una instancia específica a través de Acciones o Desencadenantes.

Tenga en cuenta el pequeño icono de rueda dentada en el lado izquierdo del ID de instancia. Esto solo es visible cuando se interactúa con una instancia de Symbol y es un indicador rápido de que estamos tratando con una instancia de Symbol.

Nombre del símbolo

El nombre del símbolo no es editable, aunque realiza la importante función de alertarnos o informarnos de qué símbolo específico es una instancia este elemento.

Alternar desplazamiento

Esta casilla de verificación determina si la animación de la línea de tiempo del símbolo se desplazará junto con la línea de tiempo del escenario. Esta configuración no tiene ningún efecto en las composiciones publicadas, pero existe solo por conveniencia al crear.

Tenga en cuenta que la propiedad AutoPlay interna del Symbol también debe estar habilitada para que esta función funcione.

Acciones de reproducción

Estas no son las mismas que las Acciones, que se definen dentro del panel Acciones, sino que son más como comportamientos primitivos para las instancias de Symbol. Nos permiten influir en la línea de tiempo del propio Symbol a través de comandos colocados en la línea de tiempo del escenario.

Usar acciones de reproducción para controlar la reproducción de símbolos

Este ejemplo demostrará cómo configurar y utilizar Acciones de reproducción para influir en la reproducción de una instancia de Symbol en la línea de tiempo principal:

Cree un nuevo proyecto de Edge Animate y guárdelo en el sistema de archivos.
Ahora, use la herramienta Rectángulo para dibujar un elemento rectangular en el escenario.
Con el nuevo elemento seleccionado, elija Modificar | Convertir a símbolo… en el menú de la aplicación. Proporcione un nombre para ese símbolo y haga clic en Aceptar.
Haga doble clic en la instancia de Symbol en el escenario para ingresar al modo de edición y realice al menos cinco segundos de animación en la línea de tiempo interna.
Salga del modo de edición haciendo clic en Escenario en la barra de navegación sobre el escenario del símbolo. Ahora estaremos en la línea de tiempo de la composición.
Seleccione la instancia de Symbol una vez más y céntrese en la línea de tiempo.
Mueva el cabezal de reproducción a dos segundos y haga clic en el pequeño botón más con el término Reproducción a la izquierda. Todas las instancias de Symbol tendrán esta opción dentro de la línea de tiempo.
Podemos seleccionar entre varias opciones dentro de este menú. En el caso de este ejemplo, elegiremos Detener:
Esto inserta una Acción de reproducción de tipo Detener en la línea de tiempo, vinculada a nuestra instancia de Symbol. Este comando indica a la línea de tiempo que la instancia de Symbol se detenga una vez que la línea de tiempo principal llegue a este punto durante la reproducción. De esta manera, podemos controlar las instancias de Symbol fácilmente desde la línea de tiempo principal.
Pruebe la composición para ver que la animación dentro de nuestra instancia de Symbol se detendrá en el punto de 2 segundos.

Comandos de reproducción disponibles

Cuando aplicamos un Comando de reproducción a lo largo de la línea de tiempo principal, tenemos varias opciones para el tipo que queremos aplicar. Los diferentes tipos de comandos son los siguientes:

Comando	Descripción
Reproducir	Esto reproducirá la instancia de Symbol desde su posición actual en la línea de tiempo interna.
Reproducir desde…	Esto reproducirá la instancia de Symbol en reversa desde la posición especificada en la línea de tiempo interna o la etiqueta.
Reproducir al revés	Esto reproducirá la instancia de Symbol en reversa desde su posición actual en la línea de tiempo interna.
Reproducir al revés desde…	Esto reproducirá la instancia de Symbol en reversa desde la posición especificada en la línea de tiempo interna o la etiqueta.
Detener	Esto detendrá la instancia de Symbol en su posición actual en la línea de tiempo interna.

Aquí vemos cómo especificar el código de tiempo a través del comando Reproducir desde…:

Tenga en cuenta que, alternativamente, podemos especificar una etiqueta definida para Reproducir desde… en lugar del código de tiempo exacto.

Propiedades internas del símbolo

Se accede a las propiedades internas del símbolo colocando una instancia de símbolo o un símbolo en modo de edición y seleccionando el escenario interno del símbolo. Luego, se revelarán varias propiedades a través del panel Propiedades, que luego podemos manipular.

Propiedad	Descripción
Nombre del símbolo	Este es el nombre que se le da al símbolo (no el ID de instancia del símbolo) al crearlo. Este valor se puede cambiar desde la biblioteca del proyecto haciendo clic derecho en Símbolo y eligiendo la opción de cambio de nombre. Esto también se establece al crear el símbolo.
Acciones	Al hacer clic en el icono Acciones dentro del panel Propiedades del símbolo, podemos editar eventos a nivel de símbolo. Estos eventos se detallan en la siguiente sección.
Dimensiones del escenario del símbolo	Estas propiedades funcionan exactamente de la misma manera que las propiedades del escenario de composición principal. Utilice esto para ajustar el ancho y la altura de nuestro símbolo.
Desbordamiento	Al igual que ocurre con cualquier elemento visible, el desbordamiento determina cómo aparecen los elementos anidados.
Reproducción automática	Esto determina si la línea de tiempo del símbolo debe reproducirse de forma predeterminada o esperar un comando de Edge Animate. Esto también se establece al crear el símbolo.
Instancia	Se puede configurar en Escalar o Cambiar tamaño. Esto afecta el comportamiento de las instancias de Symbol.
Mín W, Máx W	Estas opciones establecen límites sobre cuánto se puede ajustar el tamaño de la instancia.

Eventos a nivel de símbolo

Los eventos a nivel de símbolo son eventos que se pueden activar al crear o antes de eliminar una instancia de símbolo. La siguiente tabla explica los dos paneles de eventos beforeDeletion y creationComplete:

Nombre del evento	Descripción
creationComplete	El código incluido se ejecutará cuando se cree el símbolo.
beforeDeletion	El código incluido se ejecutará justo antes de que se elimine un símbolo.

Anidación de elementos

Anidar uno o más elementos dentro de otro crea una especie de relación agrupada donde un elemento es el contenedor de otros. Hacer esto puede tener muchas ventajas; por ejemplo, los elementos que se han anidado están esencialmente agrupados en su elemento contenedor, lo que permite mover y ajustar todos los elementos junto con y en relación con el contenedor.

Los elementos anidados también se pueden ocultar cuando están fuera de los límites de su elemento contenedor. Esto casi funciona como enmascaramiento en algunos aspectos, ya que ciertos elementos anidados o partes de un elemento anidado se pueden revelar a través del elemento contenedor. Todo lo que hay que hacer es configurar la propiedad de desbordamiento del elemento contenedor en oculto.

Tenga en cuenta que anidar elementos es bastante diferente de convertir elementos en un símbolo. Los elementos anidados no obtienen su propia línea de tiempo ni ninguna de las propiedades especiales de los símbolos y conservan todos sus atributos originales.

Cómo funciona la anidación

Anidar realmente uno o más elementos con Edge Animate es engañosamente simple. Todo lo que hay que hacer es acceder al panel Elementos y luego arrastrar y soltar elementos entre sí.

En la siguiente captura de pantalla, vemos todos los elementos dentro de una composición de Edge Animate como elementos secundarios básicos del escenario. Ninguno de estos elementos está anidado dentro de otro y no hay ningún indicador visual para mostrar que existe alguna relación entre estos elementos.

Para anidar un elemento dentro de otro, simplemente haga clic y arrastre un elemento en este panel y suéltelo en otro elemento. En la siguiente captura de pantalla, podemos ver como ejemplo que el elemento del mapa se ha anidado dentro del elemento Contenedor de esta manera.

Podemos ver fácilmente que ahora existe una relación de anidación entre estos elementos debido al giro junto al elemento contenedor y como el elemento anidado ahora tiene sangría debajo:

Para desanidar un elemento anidado, simplemente arrástrelo y suéltelo fuera del elemento contenedor.

Anidación de activos

Los activos de la biblioteca se pueden anidar fácilmente dentro de elementos rectangulares mediante el uso del panel Elementos. La anidación básicamente encapsula un elemento dentro de otro y nos permite realizar la agrupación de elementos de esta manera, ya que muchos elementos se pueden agrupar dentro de un solo elemento principal.

Es importante tener en cuenta que para que se produzca la anidación, el elemento principal debe ser Rectángulo, Rectángulo redondeado o Elipse <div />. Una imagen, una instancia de Symbol o un elemento de texto no pueden ser el elemento principal en este caso. Todos estos pueden ser elementos secundarios, pero no el objetivo de un padre.

Las modificaciones realizadas en las propiedades de un elemento principal afectarán esencialmente a todos los elementos secundarios anidados también, aunque las propiedades de cada elemento secundario también se pueden ajustar independientemente del elemento principal y entre sí.

Podemos saber que un elemento está anidado dentro de otro mirando el panel Elementos. Los elementos anidados tienen sangría debajo de su padre, y el padre mismo tiene un pequeño giro junto a él, lo que nos permite contraer y expandir la visualización de los elementos secundarios cuando lo deseemos.

Incluso podemos pensar en el panel Escenario como un gran elemento anidado, ya que contiene todos los demás elementos dentro de él.

Veamos cómo anidar una imagen importada dentro de un elemento rectangular básico:

Primero crearemos un nuevo proyecto de Edge Animate y modificaremos las propiedades del escenario a nuestro gusto.
Utilice la herramienta Rectángulo para dibujar un elemento rectangular en el escenario.
Con este elemento rectangular seleccionado, visite el panel Propiedades y realice los siguientes ajustes:

Color de fondo: #404040

Color del borde: #2eff00

Estilo de borde: sólido

Grosor del borde: 12 px

Desbordamiento: oculto
Ahora importaremos un activo de imagen a nuestro proyecto utilizando la función Archivo | Importar… o arrastrando y soltando en el proyecto. Ahora deberíamos tener dos elementos en el escenario.
En el panel Elementos, haga doble clic en el elemento rectangular y cámbiele el nombre a ParentElement. No necesitamos hacer esto, pero es útil para mayor claridad.
Mientras aún se encuentra en el panel Elementos, haga clic en el nodo del elemento de activo de imagen y arrástrelo directamente sobre ParentElement.
Suelte el ratón y veremos que el nodo del elemento de imagen se sangra y aparecerá un pequeño giro junto a ParentElement, lo que indica que se ha producido la anidación.
Para verificar este hecho, podemos ver que la imagen está parcialmente oculta debido a la configuración de Desbordamiento: oculto que creamos en el paso 3.

En este punto, sería útil jugar con las propiedades de cada elemento para ver cómo se comportan juntos ahora que están anidados.

Anidación de texto

Para ilustrar aún más el uso de elementos anidados dentro de Edge Animate, vamos a repasar algunos pequeños ejemplos de anidación. En el primer ejemplo, vemos cómo el texto se puede anidar dentro de un elemento, lo que permite que aparezcan barras de desplazamiento para desplazarse y leer todo el texto, que se ha ocultado de los límites del elemento contenedor mediante una configuración de desbordamiento.Los archivos para este proyecto se encuentran en el directorio NestedText.

Para replicar este proyecto:

Cree un nuevo proyecto de Edge Animate.
Utilice la herramienta Rectángulo para dibujar un elemento rectangular en el panel Escenario.
En el panel Propiedades, configure la propiedad Desbordamiento en automático.
Ahora, con la herramienta Texto, cree un elemento de texto en el escenario y rellénelo con mucho texto. El objetivo aquí es asegurarse de que el elemento de texto sea más grande que el elemento rectangular que acabamos de crear.
Para anidar el elemento de texto dentro del elemento rectangular, en el panel Elementos, haga clic en el elemento de texto y arrástrelo al elemento rectangular.
Una vez que el cursor esté sobre el elemento rectangular, suelte el botón del mouse para realizar la función de anidamiento.
El elemento de texto ahora está anidado dentro del elemento rectangular, como lo indica la flecha hacia abajo en el lado izquierdo del elemento rectangular. Como hemos configurado la propiedad Desbordamiento de este elemento en automático, ahora podemos desplazarnos por el texto utilizando las barras de desplazamiento que aparecen automáticamente.

Controlar contenido anidado

Llevando este concepto aún más lejos, podemos emplear una imagen anidada para que no solo revelemos solo una parte de esa imagen en un momento dado, sino que podamos controlar qué áreas se revelan a través de un conjunto de controles personalizados y un poco de JavaScript.

Este ejemplo contará con una imagen de mapa grande anidada dentro de un elemento rectangular, similar al ejemplo anterior. En lugar de que el navegador represente las barras de desplazamiento automáticamente, diseñaremos un conjunto de controles y los conectaremos a través de acciones para una experiencia verdaderamente personalizada. Los archivos para este proyecto se encuentran en el directorio NestedImage.

Para replicar este proyecto:

Cree un nuevo proyecto de Edge Animate.
Utilice la herramienta Rectángulo para dibujar elementos rectangulares en el panel Escenario.
En el panel Propiedades, configure la propiedad Desbordamiento en oculto.
Ahora, necesitaremos importar un archivo de imagen grande a nuestra composición. Elija Archivo | Importar desde el menú, o simplemente arrastre y suelte una imagen preparada en la ventana de la aplicación.
Una vez que se haya importado la imagen, asegúrese de que haya una instancia en el escenario. Recuerde que el objetivo aquí es asegurarse de que el elemento de imagen sea más grande que el elemento rectangular que acabamos de crear.
Para anidar el elemento de imagen dentro del elemento rectangular, en el panel Elementos, haga clic en el elemento de imagen y arrástrelo al elemento rectangular.
Una vez que el cursor esté sobre el elemento rectangular, suelte el botón del mouse para realizar la función de anidamiento.
El elemento de imagen ahora está anidado dentro del elemento rectangular, como lo indica la flecha hacia abajo en el lado izquierdo del elemento rectangular.
Asegúrese de proporcionar una ID sensata al elemento de imagen anidado. Lo necesitaremos más adelante.

Como hemos configurado la propiedad Desbordamiento de este elemento en oculto, aunque la imagen es demasiado grande para su elemento contenedor, el contenido que se extiende más allá de estos bordes permanece oculto sin forma de desplazarse o revelar las partes ocultas.

Para permitir que el usuario se desplace y vea otras partes de la imagen, tendremos que crear un conjunto de controles personalizados dentro de nuestra interfaz. Para crear los controles:

Diseñe una pequeña imagen de flecha direccional en algo como Photoshop, dibuje una con las herramientas de Edge Animate o importe el ejemplo proporcionado en este proyecto. Independientemente de cómo elija crearlo, asegúrese de que esté disponible en su proyecto.
Replique el elemento de flecha tres veces para que haya cuatro instancias de este elemento en el panel Escenario. Puede optar por replicar mediante copiar y pegar o simplemente arrastrando instancias desde el original con la tecla Alt presionada.
Con la herramienta Transformar, gire cada uno de los tres elementos de flecha para que apunten: arriba, abajo, izquierda y derecha. Organícelos en el escenario de la forma que más le convenga.
Asigne a cada uno de estos elementos de flecha una ID sensata. Esto facilitará mucho las cosas cuando llegue el momento de realizar ajustes en la composición más adelante y es bueno para mayor claridad.

Ahora, para que todo esto funcione, necesitamos conectar los elementos de flecha direccional con algunas acciones que influyan en el contenido anidado. Para preparar las acciones del elemento:

Elija primero el elemento de flecha hacia arriba y haga clic en el icono de llave a la izquierda de este elemento dentro del panel Elementos. Esto abrirá el editor de Acciones.
Agregue una instancia de acción de tipo Clic e inserte el siguiente código (donde mapa es el ID de nuestro elemento de imagen anidado):

JavaScript
var element = sym.$("map")
element.animate({top: +=20})

Abra el editor de Acciones para el elemento de flecha del lado derecho.
Agregue una instancia de acción de tipo Clic e inserte el siguiente código (donde mapa es el ID de nuestro elemento de imagen anidado):

JavaScript
var element = sym.$("map");
element.animate({left: "-=20"});

Abra el editor de Acciones para el elemento de flecha hacia abajo.
Agregue una instancia de acción de tipo Clic e inserte el siguiente código (donde mapa es el ID de nuestro elemento de imagen anidado):

JavaScript
var element = sym.$("map");
element.animate({top: "-=20"});

Abra el editor de Acciones para el elemento de flecha izquierda.
Agregue una instancia de acción de tipo Clic e inserte el siguiente código (donde "mapa" es el ID de nuestro elemento de imagen anidado):

JavaScript
var element = sym.$("map");
element.animate({left: "+=20"});

Cierre el editor de Acciones, luego guarde y pruebe su composición.

Entonces, ¿qué está pasando aquí? Estamos aprovechando el método "animar" de jQuery para desplazar el elemento de imagen dentro de su contenedor. Esto nos permite brindar al usuario un conjunto de controles personalizados y no tener que depender de simples barras de desplazamiento generadas por el navegador.

Agrupar y desagrupar dentro de Edge Animate

Si bien la anidación es un gran mecanismo para relaciones más complejas e intencionales, a veces solo necesitamos agrupar temporalmente un conjunto de elementos para colocarlos o transformarlos de alguna manera, sin tener que administrar cada elemento individualmente.

La capacidad de agrupar y desagrupar un conjunto de elementos es un mecanismo útil en tales situaciones.

Para agrupar realmente un conjunto de elementos, primero debemos seleccionar los elementos con los que pretendemos formar el grupo. Podemos administrar nuestra selección a través del panel Escenario, el panel Elementos o cualquier vía de interacción que permita la selección de múltiples elementos dentro de una composición. Una vez seleccionados los elementos, existen algunas formas de constituir un nuevo grupo:

El primer método para agrupar elementos se realiza haciendo clic derecho en uno de los elementos seleccionados y eligiendo Agrupar elementos en DIV en el menú contextual que aparece.
Otro método de agrupación es acceder al menú de la aplicación y elegir Modificar | Agrupar elementos en DIV.
Un tercer método es a través del simple atajo de teclado: Ctrl + G (Windows) o Comando + G (Mac).

Para desagrupar un grupo de elementos establecido, podemos seguir estos mismos pasos pero elegir la opción Desagrupar elementos. Los atajos de teclado para desagrupar son: Ctrl + Shift + G (Windows) o Comando + Shift + G (Mac).

También podemos desagrupar elementos a través del panel Elementos de la misma manera que eliminamos elementos de un elemento principal anidado: simplemente arrastrar y soltar.

Elementos del menú de Adobe Edge Animate

Ahora veremos algunos de los elementos del menú de Edge Animate que se pueden usar cuando se trata de la creación y edición de símbolos.

Modificar

El menú Modificar incluye dos comandos específicos de los símbolos que involucran la conversión de elementos y la edición de símbolos y grupos.

Comando	Descripción
Agrupar elementos en DIV	Envuelve todos los elementos seleccionados dentro de un elemento DIV vacío.
Desagrupar elementos	Elimina cualquier elemento agrupado para un contenedor DIV y elimina el contenedor.
Convertir a símbolo…	Convertirá los elementos seleccionados a Símbolo y colocará este nuevo Símbolo en la Biblioteca. Se crea una instancia del símbolo recién creado en el escenario en el lugar exacto donde existían previamente los elementos.
Editar símbolo	Si se ha seleccionado Symbol, Edge Animate cambia la vista a un modo de aislamiento dentro de ese Symbol para editar su contenido.

Resumen

Tanto los símbolos como los elementos anidados son formas en que podemos expandir las capacidades básicas y los bordes creativos de los elementos dentro de Adobe Edge Animate. Con los símbolos, tenemos acceso a lo que casi podrían considerarse subcomposiciones dentro de nuestro proyecto general. Con el poder disponible para nosotros dentro de los símbolos de Edge Animate, la creación de composiciones ricas y atractivas no está tan lejos. Cuando los símbolos son excesivos, pero necesitamos algo más allá de los elementos básicos, podemos emplear la anidación de elementos en forma de agrupación o para realizar otras asociaciones.

En el próximo capítulo, veremos algunos mecanismos que se pueden utilizar para "enmascarar" o recortar contenido, así como el uso de hojas de sprites y otras funciones de animación avanzadas dentro de Edge Animate.