C.Seleccionar y Transformar Elementos

Ahora que hemos creado varios elementos en el Escenario utilizando las herramientas de dibujo internas disponibles en Adobe Edge Animate, podemos empezar a hablar de las herramientas Selección y Transformación y explorar su uso con los elementos creados.

Este capítulo explorará:

La herramienta Selección
La herramienta Transformación
El Escenario de Edge Animate
El panel Elementos
Agrupación de elementos

También repasaremos las diversas propiedades disponibles a través de las selecciones de elementos, y examinaremos los elementos del menú que pertenecen a estos aspectos particulares de la aplicación.

Localización de las herramientas, Selección y Transformación

Tanto la herramienta Selección como la herramienta Transformación se encuentran en el extremo izquierdo de la barra de herramientas de Edge Animate. La barra de herramientas en sí, por defecto, se encuentra directamente debajo del menú de la aplicación en la parte superior izquierda de la ventana de la aplicación. Podemos verlas agrupadas junto a otras herramientas de Edge Animate:

La herramienta Selección

La Herramienta Selección (V) se utiliza (como su nombre indica) para seleccionar uno o más elementos en el Escenario y modificar sus propiedades a través del ratón, los comandos del menú, los comandos del teclado o el panel Propiedades.

La herramienta Selección aparece como una pequeña flecha de cursor y se utiliza para hacer selecciones en el Escenario del proyecto. Cualquier elemento añadido al Escenario puede ser seleccionado usando esta herramienta y manteniendo pulsada la tecla Mayúsculas, un usuario puede añadir elementos adicionales a la selección.

Para seleccionar muchos elementos en el Escenario a la vez, también podemos hacer clic y arrastrar a través de todos los elementos que deseamos seleccionar. Esto dibujará un rectángulo de selección durante el proceso de selección, que desaparecerá una vez que se haya completado la selección.

Ctrl+ Clic (Windows) o Comando + Clic (Mac) en los elementos para activar/desactivar la selección de elementos incongruentes.
Mayúsculas + Clic en los elementos para activar/desactivar la selección de elementos congruentes.

Cuando se han seleccionado varios elementos de esta manera, el panel Propiedades mostrará sólo las propiedades que se comparten entre los tipos de objeto. Por ejemplo, si seleccionamos un rectángulo y un elemento de texto a la vez, podríamos modificar la Posición y el Tamaño de ambos objetos a la vez, pero no podríamos editar el Tamaño de la fuente o el Radio del borde, ya que estas propiedades son específicas de cada tipo de objeto.

También podemos hacer clic en varios elementos mientras mantenemos pulsada la tecla Mayúsculas para seleccionar/deseleccionar varios objetos en el Escenario. Una vez seleccionados los objetos, se pueden modificar de muchas maneras diferentes mediante el uso de los paneles y los sistemas de menús dentro de la ventana de la aplicación Edge Animate.

Uso de la herramienta Selección

Para seleccionar un elemento en el Escenario utilizando la herramienta Selección, todo lo que necesitamos hacer es elegir la Herramienta Selección (V) de la barra de herramientas y luego usarla para hacer clic en el elemento que deseamos seleccionar. Esto nos permitirá modificar las propiedades de este elemento ya sea mediante movimientos con el ratón, mediante atajos de teclado o, de forma más extensa, mediante el panel Propiedades.

Realicemos un ejercicio rápido para demostrar la interacción directa sobre los elementos visibles con la herramienta Selección:

Cree un nuevo proyecto de Edge Animate y dibuje un elemento rectangular en el Escenario. Las opciones de propiedad no importan mucho en este caso, así que utilice las que quiera.
Después de crear el elemento, la herramienta Selección se seleccionará automáticamente. Ahora podemos realizar una variedad de modificaciones en nuestro elemento seleccionado mediante el uso de esta herramienta.
Haga clic y arrastre con el ratón para cambiar las propiedades de Posición X e Y del elemento seleccionado.
Haga clic y arrastre cualquiera de los ocho pequeños controladores de tamaño blancos para ajustar las propiedades de tamaño de ancho y alto del elemento seleccionado.

La herramienta Transformación

La Herramienta Transformación (Q) nos permite modificar ciertas propiedades de transformación mediante la manipulación directa del objeto en el Escenario. Hay una sutil diferencia aquí, entre las herramientas Transformación y Selección, pero es muy importante.

Cuando se utiliza la herramienta Transformación para modificar un elemento, estamos modificando las propiedades de transformación en relación con el Punto de Transformación, mientras que la herramienta Selección sólo puede modificar propiedades como el ancho, el alto y la ubicación.

La herramienta aparece como un cuadro de transformación completo con controladores de modificación.

Uso de la herramienta Transformación

Vamos a realizar una demostración rápida para familiarizarnos con esta herramienta:

Cree un nuevo proyecto de Edge Animate y dibuje un elemento rectangular en el Escenario. Las opciones de propiedad no importan mucho en este caso, así que utilice las que quiera.
Después de crear el elemento, la herramienta Selección se seleccionará automáticamente. Como queremos utilizar la herramienta Transformación, seleccione la Herramienta Transformación (Q) de la barra de herramientas.
El elemento seleccionado seguirá estando seleccionado pero tendrá un aspecto diferente (esto se ilustra en el siguiente diagrama) ya que ahora estamos utilizando la herramienta Transformación.
Haga clic en cualquiera de los cuadrados negros a lo largo de los bordes del elemento y arrástrelo para realizar una transformación básica sobre el elemento. Observe que al hacer esto, las propiedades de Escala dentro del panel Propiedades cambian junto con nuestros movimientos. Recuerde que al hacer algo similar con la herramienta Selección, era la propiedad Tamaño la que se ajustaba. ¡Esta es una distinción importante!
Haga clic y arrastre cualquiera de los cuatro pequeños diamantes negros para ajustar las propiedades de los radios de las esquinas del elemento seleccionado:

Aquí podemos ver que hay distintas diferencias visuales entre las apariencias seleccionadas de un elemento cuando se compara la herramienta Selección con la herramienta Transformación. Por ejemplo, los diamantes negros que controlan los radios de las esquinas y la pequeña cruz que representa un Punto de Transformación sólo aparecerán en el modo de transformación.

Manipulación del Punto de Transformación

Uno de los conceptos más poderosos (y útiles) que hay que recordar cuando se trabaja con la herramienta Transformación es la propiedad Origen de la Transformación y el correspondiente Punto de Transformación. El Origen de la Transformación determina cómo se calcula cualquier transformación sobre el elemento, sin importar si tiene que ver con la escala, la rotación o la inclinación.

Mover el punto de Origen de la Transformación haciendo clic en él y arrastrándolo a una nueva ubicación con el ratón permitirá que el elemento rectangular se transforme como si estuviera anclado a este punto en lugar del centro del elemento.

Vamos a realizar una serie de manipulaciones dentro de Edge Animate para demostrar esto:

Cree un nuevo proyecto de Edge Animate y dibuje un elemento rectangular en el Escenario. Las opciones de propiedad no importan mucho en este caso, así que utilice las que quiera.
Después de crear el elemento, la herramienta Selección se seleccionará automáticamente. Como queremos utilizar la herramienta Transformación, seleccione la Herramienta Transformación (Q) de la barra de herramientas.
Observe que el Punto de Transformación está por defecto en el centro del elemento que acabamos de crear:
Entre en el panel Propiedades y cambie la rotación a -25 grados. Podemos ver que el elemento gira alrededor del centro, ya que aquí es donde se encuentra el Punto de Transformación:
Vuelva a poner la rotación a 0 grados.
Con el ratón, haga clic y arrastre el Punto de Transformación a la parte superior central del elemento. Observe cómo tiende a querer ajustarse a la parte superior central.
Suelte el ratón y observe cómo ha cambiado el Origen de la Transformación dentro del panel Propiedades:
Ahora, cuando hagamos ajustes en la propiedad de rotación de este elemento, podemos ver que gira desde la parte superior central. Aquí es donde hemos reubicado el Punto de Transformación.
Vuelva a poner la rotación a -25 grados para ver las diferencias en cómo se aplica el mismo efecto de transformación:

El Punto de Transformación se puede mover a cualquier lugar dentro del elemento o incluso fuera del elemento para crear una serie de interesantes efectos de movimiento.

El Escenario de Edge Animate

El Escenario en un proyecto de Edge Animate es el principal elemento visual dentro de la composición publicada final. Todos los elementos visuales se muestran dentro de esta área definida y cualquier interacción se ejecuta a través de esta ventana:

Para seleccionar el Escenario con el fin de manipular sus propiedades, simplemente deseleccione cualquier elemento que pueda existir y edite las propiedades expuestas dentro del panel Propiedades. Estas propiedades se examinarán una por una en la siguiente sección.

Al comparar Edge Animate con Flash Professional, podemos ver una serie de diferencias entre la implementación de cada escenario. Por ejemplo, en Edge Animate podemos ajustar e incluso animar el tamaño y el color del Escenario, mientras que en Flash Professional no podemos realizar tal acción.

Manipulación del Escenario

Una de las cosas interesantes de trabajar con el Escenario en un proyecto de Edge Animate es que muchas de las propiedades del Escenario se pueden cambiar, e incluso animar, mientras la composición se está reproduciendo. Propiedades como el Color de fondo, el Ancho y el Alto se pueden ajustar cuando queramos a través de la Línea de tiempo o definiendo Acciones. Esta flexibilidad abre algunas posibilidades interesantes.

Reglas y Guías

Como se mencionó en el capítulo anterior, el Escenario de Edge Animate incluye la opción de habilitar Reglas y Guías, ambas destinadas a ayudar con la disposición y el diseño de los objetos dentro de nuestras composiciones. Estas opciones se habilitan desde la opción Ver en el menú de la aplicación:

Como indica la captura de pantalla anterior, también tenemos dos escenarios adicionales disponibles dentro de un proyecto de Edge Animate, Escenario de precarga y Escenario de nivel inferior. Para obtener más información sobre estas dos opciones, consulte el Capítulo 10, Publicar composiciones de Edge Animate.

Centrar el Escenario

Inmediatamente debajo del Escenario podemos ver un pequeño icono que parece una cruz. Este es el control Centrar el Escenario y se utiliza para volver a centrar el Escenario si nos hemos desplazado demasiado a lo largo del eje vertical u horizontal y necesitamos reenfocar. Esto es especialmente útil cuando la vista está ampliada.

Controles de zoom

A la derecha del control Centrar el Escenario, también tenemos acceso a algunos controles de zoom. Estos controles funcionan de dos maneras; podemos hacer clic en el valor del porcentaje y escribir un nuevo valor, o podemos pasar el cursor por encima del valor mostrado y desplazarlo haciendo clic y arrastrando hacia la izquierda o hacia la derecha.

Construir composiciones sensibles

Uno de los objetivos de Adobe Edge Animate es permitir a los diseñadores crear contenido para todo tipo de pantallas. Algunas de estas pantallas tienen una resolución muy alta, mientras que otras pueden ser bastante pequeñas. Tenemos la posibilidad de construir nuestras composiciones de dos maneras, como una composición restringida por píxeles o como una composición basada en porcentajes. Si elegimos construir en un Escenario basado en porcentajes, podemos entonces mezclar elementos con unidades basadas en píxeles y en porcentajes para crear un diseño más sensible.

Hacer un documento sensible

Para ciertas composiciones que necesiten adaptarse a una variedad de tamaños de pantalla o diseños de página, podemos utilizar porcentajes en lugar de un tamaño de píxel establecido al definir la resolución de nuestra composición. Esto permitirá que el Escenario de la composición llene un cierto porcentaje de su elemento contenedor cuando se publique, tal y como define el Modelo de Objetos del Documento (DOM).

Una de las cosas realmente interesantes de hacer que el Escenario sea sensible de esta manera es que podemos combinar definiciones de porcentaje y píxeles en el mismo objeto, o incluso diferenciar estos tipos de unidades en todos los elementos de una composición.

Hacer que los elementos sean sensibles

También podemos establecer las unidades de los elementos individuales para que se midan en píxeles o porcentajes. De esta manera, podemos, por ejemplo, definir el ancho de un determinado elemento para que sea el 25 por ciento del Escenario o de algún otro elemento contenedor. En este caso, si el Escenario se redimensionara a 400 píxeles de ancho, el elemento en cuestión tendría 100 píxeles de ancho. Como se demuestra en la siguiente captura de pantalla, las unidades de varias propiedades se pueden mezclar y no necesitan ajustarse a una u otra:

Global vs. Aplicado

Además de configurar muchas de las propiedades de los elementos de Edge Animate para que acepten valores de porcentaje o píxeles, también podemos especificar si queremos que la Posición y el Tamaño de un elemento representen valores relativos al contenedor Global (el Escenario) o a un contenedor Aplicado (el elemento padre inmediato). Para cambiar entre cada sistema de coordenadas, simplemente hacemos clic en el control de conmutación Global/Aplicado dentro del panel Propiedades con un elemento seleccionado, como se ve en la siguiente captura de pantalla:

Edge Animate no sólo permite elegir entre coordenadas Globales y Aplicadas, sino que también proporciona un mecanismo para determinar cómo se fijan los elementos en relación con las cuatro esquinas del sistema de coordenadas elegido. Esta funcionalidad se activa a través de la pequeña cuadrícula de puntos de anclaje seleccionables a la izquierda de la palanca del sistema de coordenadas.

Preajustes de respuesta

Adobe Edge Animate también viene equipado con una serie de preajustes de respuesta, que se pueden aplicar a los elementos a través del panel Propiedades una vez que han sido seleccionados. En el caso de los rectángulos y las elipses tenemos dos opciones: Escalar posición y Escalar tamaño.

Escalar posición

Posiciona el elemento seleccionado en relación con el tamaño de su padre y establece la posición X e Y en porcentaje.

Escalar tamaño

Escala el elemento seleccionado en relación con su padre y establece el ancho y el alto en porcentaje.

Tenga en cuenta que estos son los preajustes para los objetos de dibujo. Otros tipos de elementos incluyen preajustes más específicos y variados alineados con el tipo de elemento. Abordaremos otros preajustes a medida que hablemos de los diferentes tipos de objetos en los próximos capítulos.

Simulación de varios tamaños de pantalla

Al probar nuestros ajustes de diseño responsivo, podemos simular varios tamaños de pantalla directamente dentro de Edge Animate mediante el uso de controladores de Escenario redimensionables a lo largo de los ejes X e Y. Éstos aparecen como pequeñas marcas blancas a lo largo de la Regla y se pueden arrastrar para redimensionar el Escenario. Este mecanismo proporciona un buen método para redimensionar el Escenario y probar cómo reaccionan los distintos elementos.

Observará en la captura de pantalla anterior que el tamaño del Escenario previamente establecido permanece marcado en 550px, incluso cuando desplazamos el controlador de redimensionamiento del Escenario a 400px.

El panel Elementos

El panel Elementos es una representación de todos los elementos HTML incluidos como parte de nuestro proyecto de Edge Animate. Cada elemento está siempre anidado dentro del Escenario, y los elementos como éste, que contienen subelementos, se pueden girar hacia abajo para exponer esos elementos.

También podemos activar y desactivar la visibilidad de determinados elementos activando y desactivando el icono del ojo, así como el icono del candado. Cuando un elemento está bloqueado, Edge Animate nos impedirá modificar las propiedades de ese elemento en particular.

Podemos determinar fácilmente el tipo de elemento seleccionado, por el icono que aparece directamente a la izquierda del nombre del elemento. Por ejemplo, los elementos rectángulo tendrán un pequeño icono rectangular mientras que los elementos elipse tendrán un icono que se asemeja a una elipse.

Visibilidad de los elementos

Como se mencionó anteriormente, los pequeños iconos de ojo dentro del panel Elementos se utilizan para activar y desactivar la visibilidad. También podemos activar y desactivar la visibilidad de cualquier elemento haciendo clic en el icono del ojo a la izquierda del nombre del elemento. Tenga en cuenta que esto sólo activa y desactiva la visibilidad de un elemento dentro de la interfaz de Edge Animate; no tiene ningún efecto en una composición publicada.

Podemos hacer clic y arrastrar a través de la columna de visibilidad para activar/desactivar la visibilidad de varios elementos con un solo movimiento. La visibilidad de los elementos también se puede activar/desactivar desde la Línea de tiempo.

Bloqueo de elementos

Al hacer clic en el pequeño punto junto al ojo se bloqueará un elemento en particular y, por lo tanto, se desactivará la edición de ese elemento. Como es de esperar, al hacer clic en el icono del candado resultante se volverá a activar la edición.

Podemos hacer clic y arrastrar a través de la columna de bloqueo para bloquear varios elementos con un solo movimiento. Los elementos también se pueden bloquear y desbloquear desde la Línea de tiempo o desde un clic derecho o de opción dentro del panel Elementos, o incluso desde un elemento directamente en el Escenario.

Elementos gestionados vs. no gestionados

Edge Animate tiene el concepto de que ciertos elementos son "gestionados", mientras que otros son "estáticos". Esto se ilustra con los iconos dentro del panel Elementos: un </> blanco brillante indica un elemento no gestionado. Cualquier otro tipo de icono es para un elemento gestionado.

Gestionado

Son elementos que fueron creados por las herramientas de Edge Animate. Tenemos control total sobre estos elementos específicos. Si se trabaja dentro de un proyecto de Edge Animate que nunca ha incluido documentos externos, lo más probable es que todos los elementos sean gestionados.

Estático

Son elementos que han sido añadidos a través de herramientas externas, o que están presentes dentro de un documento HTML que ha sido abierto dentro de Edge Animate. Las herramientas de Edge Animate sólo tienen un control limitado sobre estos elementos.

Al pasar el cursor del ratón por encima de un elemento en el panel Elementos también se mostrará una información sobre herramientas que indica si el elemento es "gestionado" o "estático".

Reordenación de elementos

Para reordenar los elementos, podemos arrastrar y soltar los elementos individuales dentro del panel Elementos. La nueva ubicación del elemento arrastrado aparecerá como una línea negra gruesa entre los elementos. Esto modificará eficazmente el índice z de cada elemento en consecuencia, y funciona de forma muy similar en concepto al panel Capas de Photoshop.

Renombrar elementos

Hay varios lugares en los que podemos renombrar los elementos. El panel Elementos es sólo uno de ellos. Simplemente haga doble clic en el nombre del elemento para renombrarlo:

Los elementos se pueden renombrar utilizando el mismo método desde la Línea de tiempo y siempre se pueden renombrar desde el panel Propiedades.

Agrupación de elementos

La agrupación es un método para definir un conjunto de múltiples elementos con el fin de manipular ciertas propiedades a la vez. La mayoría de las veces, esta técnica se utiliza para mover un conjunto de elementos con facilidad, sin tener que preocuparse de si su posición en relación con los demás puede cambiar.

Edge Animate proporciona varios métodos para agrupar elementos. El más sencillo de ellos es seleccionar varios elementos en el Escenario, hacer clic con el botón derecho del ratón en el conjunto seleccionado y elegir Agrupar elementos en DIV en el menú contextual que aparece. También podemos agrupar los elementos seleccionados desde el menú de la aplicación.

Elija Modificar | Agrupar elementos en DIV. Atajo de teclado: Ctrl + G (Windows) o Comando + G (Mac).

Los elementos agrupados ahora se pueden mover como uno solo y aparecen dentro del panel Elementos como anidados dentro de un DIV padre, como se ve en la siguiente captura de pantalla:

Para desagrupar elementos individuales, podemos arrastrarlos fuera de los elementos contenedores del grupo dentro del panel Elementos. La opción de desagrupar también está disponible desde el menú de la aplicación o a través del menú contextual del botón derecho del ratón.

La agrupación es un concepto muy similar a la anidación, aunque un grupo perderá muchas de las propiedades que normalmente se pueden ajustar dentro de un elemento de Edge Animate. Para leer más sobre la anidación y la agrupación, podemos consultar el Capítulo 8, Hacer uso de los símbolos, los elementos anidados y la agrupación.

Propiedades compartidas por todos los tipos de elementos

Las siguientes propiedades se comparten entre todos los elementos de Edge Animate. No importa si estamos trabajando con elementos de la herramienta de dibujo, activos importados o incluso objetos de Símbolos complejos, podremos ajustar estas propiedades a través de la herramienta Selección y el panel Propiedades.

La captura de pantalla anterior ilustra las diferentes propiedades disponibles a través de los distintos tipos de elementos en Edge Animate. Observe cuántas propiedades se comparten entre los tipos.

Propiedades de los elementos

Este es el segmento principal del panel de propiedades para un elemento y es el único segmento que no se puede colapsar. Contiene algunos ajustes básicos como el ID del elemento, los atributos de clase y acción, la visibilidad, el desbordamiento y los ajustes de opacidad:

El ID se utiliza en todo Edge Animate para identificar un elemento particular en el panel Elementos, la Línea de tiempo y también a través de varias Acciones mediante el uso de código JavaScript. Tenga en cuenta que los ID son únicos: no podemos utilizar un mismo ID más de una vez dentro de un proyecto de Edge Animate.

Clase

Esta es una definición de clase que se puede asignar a nuestros elementos para dirigirlos específicamente a través de un archivo CSS personalizado externo a nuestra composición.

Acciones

Esto nos permite vincular Acciones al elemento seleccionado.

Visibilidad

Se accede a esta configuración desde el panel Propiedades y determina si un elemento se muestra realmente en la reproducción o no. Hay tres configuraciones distintas para esta propiedad:

Comando	Descripción
Siempre activado	Esta es la configuración por defecto y simplemente significa que el elemento es visible durante el transcurso de la animación. Seleccionar Siempre activado cuando se utiliza previamente cualquiera de las otras dos configuraciones eliminará todos los fotogramas clave que tienen que ver con la visualización del elemento de la Línea de tiempo.
Activado	El elemento es visible desde el principio. La idea es manejar la visibilidad a través de los Desencadenantes de la Línea de tiempo u otras Acciones.
Desactivado	El elemento está oculto desde el principio. La idea es manejar la visibilidad a través de los Desencadenantes de la Línea de tiempo u otras Acciones.

Desbordamiento

Esta propiedad determina cómo se comporta un elemento cuando los elementos anidados se extienden más allá de sus bordes. Hay cuatro opciones:

Comando	Descripción
visible	Los elementos que se extienden más allá de los bordes permanecerán visibles
oculto	Los elementos que se extienden más allá de los bordes se volverán invisibles
scroll	El elemento presentará barras de desplazamiento al usuario, incluso si no son necesarias
auto	Los elementos que se extienden más allá de los bordes harán que aparezcan barras de desplazamiento automáticamente, según sea necesario.

Opacidad

El grado de transparencia que exhibe un elemento particular. Puede variar de 0 % a 100 %, siendo 100 % totalmente opaco.

Propiedades de posición y tamaño

Esta sección del panel contiene todas las propiedades necesarias para ajustar la posición y el tamaño de un elemento en particular. También podemos cambiar entre coordenadas relativas globales y locales, aplicar ciertos preajustes basados en el tipo de elemento y especificar un ancho mínimo y máximo:

Posición

Las coordenadas X e Y (o coordenadas L y T cuando se selecciona Aplicado) en las que se posicionará un elemento en el Escenario, en píxeles.

A diferencia del contenido de Flash Professional, Edge Animate no es capaz de renderizar subpíxeles.

Tamaño

Esta propiedad determina el ancho y el alto de un elemento, especificado en píxeles. Estos valores se pueden bloquear juntos mediante el uso del icono de enlace entre ellos.

Propiedades de transformación

Esta sección expone las propiedades relacionadas con la transformación de un elemento. Estas propiedades incluyen la escala, la inclinación y los ajustes de rotación:

Escala

La propiedad de escala se basa en el porcentaje. Tanto la escala X como la Y pueden estar vinculadas o cambiarse de forma independiente. Estos valores pueden bloquearse juntos mediante el uso del icono de enlace entre ellos.

Inclinación

La inclinación de un elemento puede realizarse a lo largo del eje X o del eje Y.

Origen de la transformación

Este es el punto desde el que se aplicarán las transformaciones como la rotación o la escala, y está determinado por los valores porcentuales de X e Y.

Tenga en cuenta que esto puede estar situado más allá de los límites de un elemento en particular.

Girar

Esta propiedad determina los grados de rotación en relación con el Punto de Transformación del elemento especificado, siendo 0 grados la rotación original.

Propiedades del cursor

Esta propiedad nos permite seleccionar un cursor para usar cuando el ratón se desplaza sobre el objeto seleccionado:

Cursor

Esta propiedad nos permite activar un cambio de cursor al pasar el ratón por encima.

Propiedades de la sombra

Esta sección del panel expone las propiedades de la sombra para un elemento seleccionado. Estas incluyen el color de la sombra, el desplazamiento y el desenfoque. El pequeño interruptor en la parte superior derecha nos permite activar y desactivar rápidamente la sombra.

Tipo de sombra

Esta propiedad determina si la sombra debe estar insertada o no. Esto no está disponible en los elementos de texto.

En el caso de los elementos de texto, no tenemos la opción de elegir insertar nuestra sombra.

Color de la sombra

El color de la sombra de un cuadro o texto.

Desplazamiento horizontal de la sombra

El desplazamiento horizontal de nuestra sombra en píxeles.

Desplazamiento vertical de la sombra

El desplazamiento vertical de nuestra sombra en píxeles.

Radio de desenfoque

Esta propiedad define el radio de desenfoque de la sombra en píxeles.

Extensión

La extensión de nuestra sombra en píxeles.

Propiedades de recorte

Esta sección del panel contiene las propiedades relacionadas con el comportamiento de recorte de un elemento. El pequeño interruptor en la parte superior derecha nos permite activar y desactivar rápidamente el recorte:

Recorte

Recortar un elemento desde la parte superior, inferior, izquierda o derecha hará que una parte del elemento seleccionado sea invisible desde el lado especificado en función de los píxeles especificados.

Propiedades de accesibilidad

Esta sección del panel expone las propiedades que pueden ayudar a mejorar la accesibilidad, incluyendo un atributo de Título y un Índice de Tabulación:

Título

Esta propiedad asigna un atributo de título a los elementos HTML.

Índice de tabulación

El índice de tabulación específico para fines de accesibilidad.

Propiedades del escenario

El propio Escenario de Edge Animate también tiene una serie de propiedades que se pueden controlar a través del panel Propiedades. Para acceder a las propiedades del Escenario, simplemente haga clic en cualquier lugar del Escenario donde no haya otro elemento presente, o seleccione Escenario <div> en el panel Elementos.

Título del documento

Esta propiedad establece el valor de la etiqueta <title> en la sección <head> de nuestro documento HTML.

Ancho

Esta propiedad establece el ancho del Escenario en píxeles.

Altura

Esta propiedad establece la altura del Escenario en píxeles.

Color de fondo

El color que se aplicará al fondo de nuestro Escenario en formato RGBA: rojo, verde, azul, alfa.

Desbordamiento

Esta propiedad determina cómo se comporta el Escenario cuando los elementos se extienden más allá de sus bordes. Hay cuatro opciones:

Comando	Descripción
visible	Los elementos que se extienden más allá de los bordes del Escenario permanecerán visibles
oculto	Los elementos que se extienden más allá de los bordes del Escenario se volverán invisibles
scroll	El Escenario presentará barras de desplazamiento al usuario, incluso si no son necesarias
auto	Los elementos que se extienden más allá de los bordes del Escenario harán que aparezcan barras de desplazamiento automáticamente, según sea necesario.

Reproducción automática

Determina si la línea de tiempo del Escenario principal debe comenzar a reproducirse automáticamente o pausarse hasta que se dé una orden para la reproducción explícita.

ID de la composición

Este es el identificador único utilizado por la API de tiempo de ejecución de Edge Animate para dirigirse a una composición específica. Se puede cambiar si es necesario.

Póster

Permite la creación de un fotograma de póster desde la posición actual del cabezal de reproducción.

Escenario de nivel inferior

Esta propiedad permite un acceso rápido al Escenario de nivel inferior.

Precargador

Esta propiedad permite un acceso rápido al Escenario del Precargador.

Elementos del menú de Adobe Edge Animate

En esta sección, vamos a echar un vistazo a algunos de los elementos del menú de Edge Animate que se pueden utilizar cuando se trata del Escenario.

Ver

Los comandos del menú Ver determinan cómo aparece el Escenario dentro de la ventana de la aplicación. Esto es especialmente útil cuando se realizan ajustes finos a los elementos del Escenario.

Comando	Descripción
Acercar	Acerca todo el Escenario para realizar ajustes finos al colocar objetos o modificar sus propiedades. Si el Escenario aparece más grande que su panel, estarán presentes las barras de desplazamiento.
Alejar	Aleja el Escenario. Útil para cuando se trabaja en pantallas más pequeñas y estrechas.
Tamaño real	Restablece el Escenario al 100 por cien de su tamaño real, tal y como se determina en el panel Propiedades.
Reglas	Activa y desactiva las reglas.
Guías	Activa y desactiva las guías.
Ajustar a las Guías	Permite que los elementos se ajusten a las guías cuando se arrastran cerca de ellas.
Bloquear Guías	Bloquea todas las guías actuales para que no se puedan mover o eliminar por error.
Guías inteligentes	Activa las guías inteligentes para obtener ayuda temporal en la alineación de los elementos.
Escenario del precargador	Accede al Escenario del precargador de la composición.
Escenario de nivel inferior	Accede al Escenario de nivel inferior de la composición para los navegadores más antiguos.

Resumen

En este capítulo, hemos echado un buen vistazo a dos herramientas muy importantes a la hora de trabajar en un proyecto de Edge Animate: las herramientas Selección y Transformación. Mucho de lo que discutiremos en los próximos capítulos dependerá del uso exitoso de estas dos herramientas.

Hemos tenido una buena visión general de algunas herramientas de asistencia para la creación de composiciones más adaptables y sensibles. Luego exploramos el Escenario con mayor detalle y echamos un buen vistazo a los paneles Elementos y Propiedades.

En el siguiente capítulo, vamos a examinar el uso de los elementos de texto a través de la herramienta Texto y cómo integrar fuentes web en nuestros proyectos de Edge Animate.