Adición de texto al proyecto (tutorial)

Puede agregar textos de tres formas a su proyecto de Animate:

• Utilizando la herramienta de texto.
  En la paleta Herramientas, haga clic en la T de gran tamaño (o utilice la tecla de método abreviado T) y, a continuación, haga clic en el documento y arrastre para crear un cuadro de texto. Inicialmente, no tiene que preocuparse demasiado por la posición o el tamaño del cuadro de texto. Puede gestionar esos detalles posteriormente. Solo tiene que seguir adelante y empezar a escribir. Pruebe con la frase “ON the EDGE”. El texto introducido aparece en el escenario, como se muestra en la figura 1. Si desea crear varios párrafos, solo tiene que presionar Intro (Retorno) del mismo modo que en un programa de tratamiento de texto. Una vez que termine, puede presionar Esc o hacer clic en el botón X de la esquina superior derecha para cerrar la ventana de texto.
• Copiando y pegando.
  Si trabaja con grandes bloques de texto, es posible que ya haya creado un borrador en un programa de tratamiento de texto o en otro tipo de fuente. En ese caso, puede copiar el texto del programa de tratamiento de texto y, a continuación, crear un cuadro de texto en Animate y presionar Ctrl + V (Comando + V) para pegarlo en el proyecto. No tendrá exactamente el mismo formato que tenía originalmente, pero el texto aparecerá ahí. Este proceso mantiene parte del formato principal, como los saltos de párrafo.
• Abriendo el documento HTML con texto.
  Es posible que ya haya creado una página web en un editor de HTML o en otra herramienta de creación web. Es posible que desee añadir algo de emoción con varias animaciones a la página estática. Puede abrir dicha página en Animate desde Archivo➝Abrir y, a continuación, puede hacer que los elementos se muevan con Animate. Al importar texto de esta forma, tendrá las siguientes limitaciones: no podrá editar ni cambiar el formato. En esencia, no es más que otro elemento gráfico que puede utilizar en las animaciones. Una ventaja importante de este método es que se conservan los vínculos del texto.

Cambio de las propiedades específicas del texto

Una vez que haya introducido texto en el proyecto de Animate, puede utilizar diferentes propiedades específicas del texto para cambiar su aspecto, como se muestra en la figura 2. Dichas propiedades aparecen en el subpanel Texto. Inicialmente, es posible que algunas de las opciones utilizadas con menos frecuencia permanezcan ocultas. Haga clic en el botón de la esquina inferior izquierda del subpanel para mostrar y ocultar propiedades adicionales. Los nombres de estas herramientas siguen las convenciones de nomenclatura CSS (hojas de estilos en cascada), por lo que aparecen en minúsculas con guiones entre las palabras.

• font-family (familia de fuentes). Puede elegir entre diferentes tipos de letra. Es posible que no aparezcan todas las fuentes que tiene en su ordenador. En el diseño web, estará limitado a las fuentes disponibles para su audiencia a menos que pueda ofrecer la fuente con el proyecto. Para obtener más detalles sobre las fuentes y los tipos de letra, consulte la siguiente sección.
• color. Haga clic en la muestra y aparecerá el selector de color estándar donde puede establecer el color del texto.
• font-size ( tamaño de fuente). Seleccione el valor numérico del tamaño de fuente. Junto a font-size ( tamaño de fuente), aparece un botón llamado Unidad de propiedad de texto. Haga clic aquí para cambiar el método de especificación de font-size (tamaño de fuente).
• font-unit (unidad de fuente). Animate utiliza tres unidades diferentes para la especificación del tamaño de fuente: píxeles (px) ems (em) y porcentaje (%). Los píxeles equivalen a un solo punto de un monitor. Un em equivale aproximadamente al tamaño de la letra M. La mayoría de los navegadores web permiten a los usuarios ajustar el tamaño del texto, por lo que un em es una unidad que cambia según la configuración del navegador. El porcentaje es una opción útil al diseñar contenido web que pueda visualizarse tanto en dispositivos móviles como en ordenadores de sobremesa.
• font-style (estilo de fuente). El texto se inclina para que parezca que está en cursiva.
• font-weight (grosor de fuente). Le ofrece varias opciones (como Delgada, Extradelgada, Normal y Extranegrita. El orden de las opciones y los números que las acompañan le ofrecen pistas para que pueda comparar los diferentes grosores.
• font-decoration (decoración de fuente). Utilice este botón para subrayar el texto.
• text-align (alineación de texto). Al igual que los programas de tratamiento de texto, Animate le permite alinear el texto a la derecha, al centro o a la izquierda. La alineación afecta a todo el texto del cuadro de texto. Por lo tanto, si desea crear un párrafo alineado a la derecha y otro centrado, deben encontrarse en cuadros de texto independientes.
• text-indent (sangría de texto). Aplica una sangría a la primera línea de un cuadro de texto. Puede cambiar el valor en píxeles. No se acepta el uso de números negativos para crear sangrías francesas.
• line-height (alto de línea). Utilice esta opción para establecer el espacio entre las líneas de texto.
• letter-spacing (espaciado entre caracteres). Tal y como indica su nombre, le permite ajustar el espacio entre los caracteres. Suele utilizarse para crear encabezados o logotipos empresariales característicos. Este efecto debe utilizarse con moderación para el texto independiente normal.
• word-spacing (espaciado entre palabras). Varía la distancia entre las palabras. Utilice esta opción con cuidado o el resultado puede ser un texto extraño y difícil de leer.

Uso de las fuentes web

Existe otra forma de aumentar el número de tipos de letra que puede utilizar en las animaciones de Animate. Los diseñadores web llevan años utilizando las fuentes web. Para que los programas, incluidos los navegadores web, puedan mostrar una fuente específica, deben disponer de acceso a la descripción de la fuente. Por lo general, dicha descripción reside en el mismo ordenador que el programa (conocido en ocasiones como el “cliente”). El funcionamiento de las fuentes web es ligeramente diferente. Por ejemplo, en el caso de las fuentes web de Google (www.google.com/webfonts), las definiciones de las fuentes se encuentran almacenadas en los servidores de Google. Como diseñador web, puede añadir a sus páginas el código que indica a los navegadores dónde se encuentran las descripciones de las fuentes para utilizarlas.

En primer lugar, localice la fuente web que desee utilizar. Las fuentes web de Google son gratuitas y sorprendentemente fáciles de utilizar, lo que las convierte en el candidato perfecto para sus primeros intentos. A continuación puede ver los pasos necesarios para seleccionar una fuente web de Google y tomar el código que necesita para identificarla en su proyecto:

Adición de fuentes web a la composición

Una vez que haya elegido una fuente web de Google o de otra marca y haya copiado el código que la identifica, puede añadirlo al proyecto fácilmente en Animate. A continuación puede ver los pasos:

Modificación de otras propiedades de texto

Al igual que ocurre con los demás elementos en Animate, probablemente no espere que el texto se mantenga estático en todo momento. Por suerte para los diseñadores, no es necesario aprender a utilizar herramientas nuevas para hacer que el texto baile por la pantalla. Las propiedades X e Y de Position (Posición) determinan el lugar en el que aparece el texto, y las propiedades W y H de Tamaño determinan las dimensiones del cuadro de texto. Recuerde que las propiedades Tamaño cambian el tamaño del cuadro de texto, pero no el tamaño de los caracteres. Para cambiar el tamaño de los caracteres, puede utilizar las propiedades font-size ( tamaño de fuente) o las propiedades Escala. En ocasiones, es posible que desee que el tamaño del texto cambie según el tamaño de la ventana del navegador. En ese caso, utilice % (porcentaje) como valor de Unit (Unidad) en Text Properties (Propiedades de texto). Al igual que ocurre con los dibujos y las fotografías, puede crear fotogramas clave de propiedad en la línea de tiempo para que las propiedades del texto cambien con el tiempo.

¿Recuerda las herramientas de plegado, giro y corte? También puede utilizar las propiedades Transform (Transformar) en el texto. Puede girar o sesgar los bloques de texto para aplicar efectos especiales a medida que los añade a la página web o los elimina de esta. Utilice las propiedades Escala para ampliar o reducir el tamaño del cuadro de texto y del texto que se encuentra en su interior. Escala actúa en el texto de la misma forma que en una imagen JPEG: al establecer un porcentaje, todo crece o se encoge. Tenga en cuenta que el texto se vuelve un poco borroso al ampliarlo con la propiedad Escala.

Recorte de texto por los bordes

Al igual que ocurre con los demás elementos gráficos del escenario, puede utilizar las propiedades Clip (Recortar) para ocultar los bordes de un cuadro de texto. Es muy similar al recorte de los bordes de una fotografía. Imagine que desea animar un cuadro de texto para que inicialmente solo se pueda ver un punto en el centro y que, a continuación, crezca para mostrar un bloque de texto completo. Seleccione el texto y, a continuación, observe cerca de la parte inferior del panel Propiedades. Haga clic en el botón triangular para ampliar el subpanel Clip (Recortar). En la esquina superior derecha del subpanel, haga clic en el botón para activar la herramienta de recorte. Edge Animate pone a su disposición cuatro controles que representan los bordes superior, inferior, izquierdo y derecho del elemento (figura 7). Escriba o arrastre los valores en píxeles (px).

A medida que realice cambios, podrá ver su efecto en el cuadro de texto. ¿Desea eliminar las propiedades Clip (Recortar) una vez que las haya aplicado? Solo tiene que hacer clic con el botón derecho del ratón (Control + clic) en el elemento recortado y seleccionar Eliminar recorte desde el menú contextual.

Encabezados descendentes

En la mayoría de los casos, la finalidad del texto es transmitir un mensaje, por lo que resulta contraproducente someter a la audiencia a un texto que esté desplazándose y cambiando constantemente. Eso no significa que no pueda divertirse un poco. Por ejemplo, posiblemente desee que el encabezado descienda o rebote hasta ocupar su posición al cargar la página por primera vez. En este proyecto, se crea un rótulo en la parte superior del escenario. Al cargar la página web, tres palabras (“ON the EDGE”) descienden hasta ocupar su posición. En este caso, va a animar la frase “ON the EDGE”. Las palabras se dividen en tres cuadros de texto diferentes, por lo que puede mover cada palabra de forma independiente. En otros caso, es posible que desee animar todos los caracteres individuales de una palabra o frase. Lo más complicado es hacer que los caracteres o las palabras estén alineados correctamente una vez que ocupen su lugar. Desea que el espacio entre caracteres tenga un aspecto natural, así como que el texto esté dispuesto de forma homogénea sobre una línea horizontal. A menudo, al animar palabras o caracteres de esta forma, resulta útil crear una plantilla de posicionamiento, y eso es exactamente lo que hará en este proyecto. La plantilla de posicionamiento (figura 8) aparece durante la fase de diseño para ayudarle a alinear las palabras y letras en movimiento. Una vez que termine de crear la animación, puede eliminar la plantilla.

A continuación le mostramos los pasos necesarios para crear un encabezado descendente:

Tratamiento de la plantilla

La plantilla de posicionamiento roja no ha sido diseñada para formar parte de la animación permanentemente. Por lo tanto, si ya está satisfecho con todo, puede eliminarla. En primer lugar, desactive el botón Bloquear elemento para poder seleccionar la plantilla. A continuación, puede seleccionar la plantilla en el panel Elementos o en el escenario y presionar Delete (Eliminar). Asimismo, puede convertir la plantilla en una sombra paralela (figura 13) o en un efecto de resplandor para el texto.

• Para crear una sombra paralela, utilice un tono gris medio para el texto y ajuste la opacidad como desee. Un valor aproximado del 30 por ciento suele ser adecuado. Es posible que desee mantener la sombra paralela oculta hasta que las tres palabras hayan terminado de moverse. En ese caso, establezca la opacidad en cero hasta ese punto de la animación y, a continuación, aumente el valor.
• Para conseguir un efecto de resplandor, utilice los colores amarillo o naranja. Utilice el control Escala para hacer que el texto sea ligeramente más grande que el texto que desciende hasta su lugar. Una vez más, probablemente desee utilizar la opacidad para controlar la temporización y el aspecto del texto resplandeciente. Tal vez desee que el efecto de resplandor se intensifique y, a continuación, se desvanezca, lo que ofrece un énfasis momentáneo al encabezado.

Adición de rebotes

Si el ejemplo anterior (donde el texto desciende hasta su lugar) es demasiado formal para su página web, posiblemente desee considerar la posibilidad de añadir varios rebotes a la acción. Los rebotes hacen que parezca que la página web está sometida a las leyes de la física. Al igual que un balón de baloncesto, el texto puede empezar con un gran rebote y, a continuación, uno o dos rebotes más pequeños hasta que ocupe su lugar. Puede crear sus propios rebotes mediante la adición de fotogramas clave de posición, o puede crearlos mediante las propiedades de Suavizado que forman parte de la transición en la línea de tiempo.

Creación de rebotes manualmente

Abra el archivo y examine el panel Elementos, donde aparecerá el escenario con otros tres elementos. “BOUNCE” es la palabra que va a animar. “BounceTemplate” (texto rojo) es el nombre de la plantilla de posicionamiento. Al igual que ocurre en el ejemplo anterior, marca la posición final del texto animado. El elemento que actuará a modo suelo es un rectángulo gris colocado en la parte inferior del escenario. Puede pensar en él como el suelo sobre el que rebotará el texto.

Se crea un movimiento de rebote en la línea de tiempo mediante la adición de fotogramas clave con ubicaciones que alternan entre arriba y abajo (figura 14). Con el cursor todavía en 0:00, seleccione BOUNCE y haga clic en el botón Add Keyframe for Y (Añadir fotograma clave para Y) en Propiedades. De esta forma, se establece el punto inicial. Para el siguiente tramo del recorrido, arrastre el cabezal de reproducción a 1:00 y mueva BOUNCE de forma que cubra BounceTemplate.

Haga clic en Add Keyframe for Y (Añadir fotograma clave para Y) para añadir nuevos fotogramas clave de ubicación. Arrastre el cabezal de reproducción hasta 1.75 y, a continuación, suba la palabra BOUNCE y colóquela cerca de la parte central del escenario. Desplace el cabezal de reproducción hasta 2.25 y, a continuación, vuelva a colocar BOUNCE sobre la plantilla. Puede crear varios rebotes más utilizando períodos más breves para el movimiento (medio segundo y, a continuación, un cuarto de segundo). Acorte la distancia con cada rebote.

Si se cansa de rebotes rectos hacia arriba y hacia abajo, puede añadir una ligera rotación al movimiento para que parezca que la palabra rebota adelante y atrás en las esquinas inferiores. Si reduce la propiedad de escala vertical cuando el texto golpee el suelo, puede hacer que se aplaste con un aspecto caricaturesco, como si el texto se comprimiera al impactar en el suelo.

Uso de rebotes creados previamente de Animate

En primer lugar, le ofrecemos un poco de información sobre las transiciones y el concepto “suavizado”. Las transiciones se crean al animar un elemento en el escenario mediante la modificación de las propiedades y la creación de propiedades de fotogramas clave en la línea de tiempo. Dichas transiciones suelen mostrarse visualmente como barras en la línea de tiempo. Al igual que los elementos del escenario, las transiciones también tienen propiedades. Una de las propiedades se denomina Suavizado. En el mundo real, cuando los objetos se mueven, aceleran y desaceleran. Nunca verá un automóvil que empiece a moverse a máxima velocidad o que se detenga de inmediato. Las propiedades Suavizado le ayudan a crear movimientos más realistas al controlar la transición de un elemento de forma automática. Casualmente, una de las opciones de Suavizado le ayuda a crear un movimiento de rebote.

Aquí puede ver una serie de pasos para explorar las propiedades de transición:

Creación de su primera animación

Establecimiento del escenario

Tal y como afirmó Shakespeare hace varios cientos de años: “todo el mundo es un escenario”. Eso es especialmente cierto en Edge Animate. Como se explicó en el capítulo 1, al colocar un elemento sobre el escenario, la audiencia podrá verlo. Los elementos pueden ocultarse o eliminarse del escenario de diferentes formas. Si ha establecido las propiedades Desbordamiento del escenario en oculto, puede salir del escenario por la derecha, la izquierda, arriba o abajo al sacar el elemento del escenario.

Al menos, deja de ser visible durante su visualización en un navegador. El escenario con el que trabaja en Edge Animate representa una parte de una página al visualizarla en un navegador. El escenario tiene un número limitado de propiedades. Las más evidentes son las dimensiones y el color de fondo, aunque probablemente desee comprenderlas todas. A continuación puede ver un resumen, empezando desde la parte superior del panel Propiedades:

• El ID, como podrá imaginar, es el nombre de la animación. Al guardar un proyecto, Animate crea una página web, también conocida como un “documento HTML”. La mayoría de los navegadores muestran el ID de la página web en una ficha o en la barra de título de la ventana.
• Inicialmente, las dimensiones del escenario aparecen representadas como las propiedades W (An.) (anchura) y H (Al.) (altura) en píxeles. No hay grandes sorpresas. Puede escribir o arrastrar los valores de anchura y altura de la página. No es necesario que el escenario aparezca en la esquina superior izquierda de una página web. Por ejemplo, si la composición de Animate es un rótulo publicitario, puede crear un escenario alto y estrecho y, a continuación, colocarlo en la parte izquierda de la página. Utilice el vínculo que aparece junto a las propiedades W (An.) y H (Al.) para bloquear y desbloquear la proporción de aspecto del escenario. Cuando Link Width and Height (Vincular altura y anchura) está activada, al cambiar una dimensión, también se la otra para que el escenario se mantenga proporcionado; cuando se interrumpe el vínculo, puede cambiar W (An.) y H (Al.) de forma independiente. Puede cambiar la medida de píxeles (px) a porcentajes (%). Por ejemplo, si establece la anchura de la página en 80 %, el escenario ocupará el 80 % del espacio de la ventana del navegador web en el que se esté visualizando. Esta función es muy útil al desarrollar páginas web para ordenadores, tablets y teléfonos. Además, si se cambia el tamaño de la ventana del navegador, se ajusta automáticamente el escenario al tamaño nuevo.
• El color de fondo se establece mediante un selector de color. En el panel Propiedades, haga clic en la muestra de color para que aparezca un selector de color, como se muestra en la figura 20. Haga clic en la barra (también conocida como “espectro”) de la izquierda para elegir un tono y, a continuación, haga clic en el cuadrado de mayor tamaño para ajustar el tono. El círculo se coloca sobre el color seleccionado y aparece en la muestra de la esquina inferior derecha. Las tres muestras de la parte superior derecha permiten elegir de forma rápida y sencilla los colores blanco, negro o transparente para el fondo. Si trabaja con un equipo, es posible que le proporcionen una especificación de color con los formatos RGB o hexadecimal. Por otra parte, si es usted quien toma las decisiones, posiblemente desee especificar un color para los demás diseñadores.

• Utilice Min W (An. mín.) y Max W (An. máx.) para establecer las anchuras mínima y máxima para el escenario. Las páginas web no tienen un tamaño fijo. Su página podrá visualizarse tanto en smartphones como en televisores de pantalla grande. Asimismo, la audiencia puede cambiar el tamaño de la ventana del navegador. Puede tener cierto control sobre el aspecto de su proyecto al establecer unas anchuras mínima y máxima. Puede establecer como medida los píxeles para establecer un valor absoluto o un porcentaje para diseños con capacidad de respuesta. Inicialmente, Max W (An. máx.) se establece en none (ninguna). Para activar la opción, haga clic en la etiqueta y anule la selección de none (ninguna). En ese momento, el valor aparecerá en el panel y podrá realizar ajustes.
• El menú Desbordamiento controla la forma en que los elementos aparecen cuando se encuentran fuera del escenario. A menudo, es posible que desee establecer este menú en oculto, lo que hace que los elementos que se encuentren fuera del rectángulo del escenario sean invisibles. La opción oculto resulta muy útil cuando desee que los elementos entren en el escenario y salgan de este. Si establece el menú en visible, los elementos que se desplacen más allá de los límites del escenario seguirán siendo visibles siempre que haya sitio en la página web. La opción scroll (desplazamiento) coloca barras de desplazamiento en la parte derecha y en la parte inferior del escenario para que se puedan ver los elementos que no se encuentren dentro de las dimensiones especificadas del escenario. La opción auto (automático) añade una barra de desplazamiento de forma automática si hay contenido más allá de los límites del escenario.
• Utilice la casilla de verificación Reproducción automática para hacer que la animación que se ejecute automáticamente cuando se cargue la página web en un navegador. Si la casilla está desactivada, debe utilizar un desencadenador de JavaScript para ejecutar la animación.
• Composition ID (ID de composición) permite identificar este escenario concreto y la línea de tiempo adjunta. Esto es especialmente importante cuando hay varias composiciones de Animate en una sola página web. Encontrará más información al respecto en los capítulos sobre JavaScript.
• Las propiedades Escenario de nivel inferior y Póster crean elementos alternativos para los navegadores web incompatibles con HTML5.
• Precargador es responsable de la carga de todos los recursos necesarios para mostrar la composición en una página web. Entre estos recursos, se incluyen las bibliotecas y los gráficos de JavaScript.

Creación de arte en Animate

En la siguiente sección, se describen detalladamente las propiedades de los rectángulos. No obstante, otros objetos (como los bloques de texto y las ilustraciones importados a Animate) utilizan muchas de estas propiedades. Por lo tanto, encontrará toda la información que necesita sobre la rotación, el sesgo y el ajuste de escala de rectángulos. Recuerde que también puede rotar, inclinar y ajustar la escala de textos y fotografías.

Rectángulos: creación de un cuadro básico

Gracias a la herramienta Rectángulo (M), puede añadir bloques de color al escenario. Estos bloques son muy útiles si desea diferenciar partes de la página web. Por ejemplo, tal vez desee utilizar una barra lateral. Añada un rectángulo y, a continuación, podrá colocar textos o gráficos sobre el rectángulo para separarlos del resto de la página. Tal vez ya disponga de los conocimientos básicos necesarios para crear rectángulos. Haga clic en la herramienta Rectángulo en la paleta Herramientas y, a continuación, haga clic y arrastre en el escenario para marcar la forma. Para crear un cuadrado, mantenga la tecla Mayús mientras arrastra. El nuevo elemento aparece en el escenario y se selecciona automáticamente, por lo que aparecerán ocho cuadrados blancos alrededor del borde que representan los selectores (figura 21). Puede seguir cambiando el tamaño y la forma del rectángulo tras dibujarlo al arrastrar los selectores. Aquí puede encontrar las propiedades básicas que describen los rectángulos:

• ID. Una vez que dibuje un rectángulo en el escenario, aparecerá en el panel Elementos. Al seleccionar el rectángulo, sus propiedades aparecen en el panel Propiedades. Al igual que ocurre con todos los elementos de Animate, probablemente desee utilizar un ID descriptivo para el rectángulo, como LeftSidebar o Header. De lo contrario, tendrá que buscar entre Rectangle1, Rectangle2 y Rectangle3 cuando intentar encontrar uno en particular. Para cambiar el nombre del rectángulo, selecciónelo y cambie el ID en la parte superior del panel Propiedades. Asimismo, puede hacer doble clic en el nombre en el panel Elementos.
• Tag (Etiqueta). Consulte Rectángulo en el panel Elementos y podrá ver <div> tras el nombre. Se asignará automáticamente una etiqueta <div> HTML al rectángulo. Animate utiliza estas etiquetas para identificar, colocar y transformar los elementos. Para los demás Elementos, Edge Animate le permite elegir etiquetas diferentes. Por ejemplo, al añadir una fotografía a la animación, hay diferentes motivos que pueden justificar el uso de la etiqueta <img> en lugar de <div>.
• Position (Posición). Debajo del nombre en el panel Propiedades, aparecen las propiedades Position (Posición) y Tamaño. Se hace referencia a la esquina superior izquierda del escenario como X = 0, Y = 0. Al desplazarse de izquierda a derecha, aumenta el valor de X. Al desplazarse de arriba a abajo, aumenta el valor de Y. Inicialmente, el punto de referencia para la posición del rectángulo es la esquina superior izquierda. Para cambiar dicho punto de referencia, utilice la herramienta Relativo a. Tiene un aspecto similar a un cuadrado en cada esquina. Imagine que necesita colocar un elemento a una distancia determinada de la esquina inferior derecha del escenario: es posible que desee utilizar la esquina inferior derecha del elemento como punto de referencia. En ese caso, solo tiene que hacer clic en el cuadrado inferior derecho del cuadro Relativo a.
• Tamaño. Junto a las propiedades Ubicación, se encuentran las propiedades Tamaño: W (An.) (anchura) y H (Al.) (altura). Estas cambian automáticamente al arrastrar los selectores del rectángulo. También puede escribir un valor o arrastrar para establecer un número concreto. Inicialmente, se utilizan los píxeles como unidad de medida para las propiedades Tamaño de los rectángulos. No obstante, puede cambiar la unidad de píxeles a porcentaje. Por lo tanto, un rectángulo con una anchura del 20 % ocuparía el 20 % de la anchura del escenario. Utilice el vínculo que aparece junto a las propiedades W (An.) y H (Al.) para bloquear y desbloquear la proporción de aspecto del rectángulo. Cuando la opción Link Scale (Vincular escala) está activada, al cambiar una dimensión, se cambia la otra automáticamente para mantener el rectángulo proporcionado. Al interrumpir el vínculo, se pueden cambiar W (An.) y H (Al.) de forma independiente.
• Display (Visualización). Algunos elementos siempre permanecen en el escenario, mientras que otros pueden ir y venir. El menú Display (Visualización) le permite ocultar fácilmente un elemento hasta que lo necesite. Las tres opciones son: Siempre activado, Activado y Desactivado.
• Desbordamiento. El control de desbordamiento del rectángulo funciona como el del escenario, aunque se aplica de forma explícita al rectángulo.
• Opacidad. Utilice el regulador que se encuentra cerca de la parte superior del panel Propiedades cuando desee controlar el valor de Opacidad del rectángulo completo. Cuando desee ajustar la opacidad del borde o del fondo de forma independiente, haga clic en sus muestras de color (esto se encuentra explicado en Color) y cambie A (propiedad alfa).
• Color. Los rectángulos constan de dos partes básicas: color del borde y color de fondo. El color del borde marca el borde exterior del rectángulo, mientras que el color de fondo es el color del interior del cuadro. (En ocasiones, en otros programas se hace referencia a estas propiedades como “trazo” y “relleno”). Puede asignar colores diferentes al borde y al fondo, o puede hacer que sean transparentes si establece Alpha channel (Canal alfa) en cero. El trazo cuenta con dos propiedades adicionales. Puede establecer el tamaño en píxeles (px) y puede elegir entre solid stroke (trazo continuo), dashed stroke (trazo con rayas), dotted stroke (trazos con puntos) o none (ninguno), es decir, sin trazos. La barra de herramientas de la parte superior del espacio de trabajo le ofrece otra forma de cambiar rápidamente el color de fondo y del borde de un elemento seleccionado. Funciona igual que el selector de color en el panel Propiedades.

Alineación, distribución y organización de elementos

La máxima de que “cada cosa tiene su lugar” es especialmente cierta al hablar de animaciones. Cuando hay varios elementos en el escenario, la relación existente entre ellos es esencial. Los diseñadores suelen tener en mente una cuadrícula específica al crear páginas impresas o páginas web. Lo ideal es que los cuadros de texto o los gráficos estén alineados con esta cuadrícula invisible. Al alinear varios elementos, por lo general, su aspecto mejora cuando hay la misma distancia entre ellos. Puede dedicar mucho tiempo a medir a ojo el escenario para intentar que todo esté bien, pero, afortunadamente, no es necesario.

Para experimentar con las herramientas Organizar, Alinear y Distribuir de Animate, posiblemente desee crear tres o cuatro objetos sencillos con las herramientas Rectángulo y Rounded Rectangle (Rectángulo redondeado), como los mostrados en la figura 22. Al arrastrar elementos por el escenario, podrá observar líneas de color magenta que brotan de los bordes y los puntos medios. Se trata de las Smart Guides (Guías inteligentes), que pueden ayudarle a alinear rápidamente uno o varios objetos mientras está realizando movimientos. En la mayoría de los casos, pueden ofrecerle toda la ayuda que necesita.

Si tiene unas necesidades de alineación más formales, active el menú Modificar➝Alinear. Para alinear el trabajo, debe seleccionar dos elementos como mínimo. Uno de esos elementos puede ser el escenario. Puede seleccionar los elementos del escenario o puede utilizar el panel Elementos. Para utilizar estos comandos, seleccione todos los elementos que desee alinear y a continuación, elija una de las opciones:

• Modificar➝Alinear➝Izquierda
• Modificar➝Alinear➝Centrado horizontal
• Modificar➝Alinear➝Derecha
• Modificar➝Alinear➝Superior
• Modificar➝Alinear➝Centrado vertical
• Modificar➝Alinear➝Inferior Los comandos Modificar➝Distribuir se utilizan para colocar tres o más elementos en el escenario a la misma distancia. Puede elegir qué parte de los elementos utiliza el comando Distribuir para el proceso, así como si la acción se lleva a cabo en el eje horizontal o vertical. Los comandos específicos son los siguientes:
• Modificar➝Distribuir➝Izquierda
• Modificar➝Distribuir➝Centrado horizontal Modificar➝Distribuir➝Derecha
• Modificar➝Distribuir➝Superior
• Modificar➝Distribuir➝Centrado vertical
• Modificar➝Distribuir➝Inferior
  

Reglas y guías manuales

El escenario incluye varias reglas para ayudarle a colocar los elementos con precisión. Puede mostrar y ocultar las reglas mediante desde el menú Vista (Vista➝Rulers (Reglas)) o con las teclas de método abreviado: Ctrl + R (Comando + R). Las reglas se extienden más allá de los bordes del escenario, pero hay marcadores para indicar el tamaño actual del escenario. Si necesita ayuda con las tareas de alineación, puede crear guías haciendo clic en las reglas horizontal o vertical y arrastrando hacia el escenario. La guía le sigue y permanece en su lugar al soltar el botón del ratón. Si ese no es el lugar perfecto, puede arrastrar la guía hasta una ubicación nueva. Cuando no desee conservar una guía, puede arrastrarla hasta la regla para eliminarla. Para que no sea posible seleccionar y desplazar una guía por accidente, utilice el comando Vista➝Bloquear guías.

De esta forma, se bloquean en su lugar hasta que utilice Vista➝Desbloquear guías para volver a liberarlas. Si necesita ayuda rápida con las tareas de alineación, active Ajustar a guías (Vista➝Ajustar a guías).

Puede arrastrar varias guías sobre el escenario para diferentes tareas de alineación, y puede mostrar y ocultar todas las guías simultáneamente con el comando Vista➝Guías (Ctrl + ; o Comando + ;).

Organización de elementos: orden Z

Además de las posiciones horizontal y vertical, puede organizar los objetos de otra forma en el escenario. A medida que cree elementos, posiblemente observe que los elementos nuevos parecen encontrarse delante de los elementos antiguos. Asimismo, si arrastra un elemento nuevo a la misma posición de X e Y en el escenario, se oculta el antiguo. Si está familiarizado con Photoshop, puede pensar en este posicionamiento como “capas”. En la jerga técnica, se suele hacer referencia a ellas como “capa Z” u “orden Z”, ya que esta tercera dimensión se conoce como “eje Z”.

Para examinar el orden Z de los elementos del escenario solo tiene que consultar el panel Elementos. Los elementos de la parte superior de la lista son los más cercanos a la parte delantera. Si desea cambiar el orden, solo tiene que arrastrar un elemento a una nueva posición en el panel. Animate también le proporciona comandos de menú y teclas de método abreviado para reorganizar los elementos:

• Modificar➝Organizar➝Traer al frente (Ctrl + Mayús + ] o Mayús + Comando + ])
• Modificar➝Organizar➝Traer al frente (Ctrl + ] o Comando + ])
• Modificar➝Organizar➝Enviar hacia atrás (Ctrl + [ o Comando + [)
• Modificar➝Organizar➝Enviar atrás) (Ctrl + Mayús + [ o Mayús +Comando + [)

Una animación rectangular

¿Está preparado para empezar? Se acabó la teoría. Llegó el momento de empezar a trabajar con las animaciones. En este ejercicio, creará cuatro rectángulos, especificará sus nombres, les aplicará color y los sesgará.

A continuación, los colocará en el escenario y hará que se muevan, que cambien de forma y que parezca que se disuelven. Es el tipo de efecto que podría formar parte de un rótulo publicitario o la introducción a una animación más compleja.

Este ejercicio está dividido en dos partes. En la primera serie de pasos, creará y colocará las barras de color:

Animación mediante la adición de fotogramas clave de propiedad

Ahora que ha creado y ha colocado correctamente las barras de color, es hora de ponerlas en movimiento. En el capítulo 1 se explicó cómo se controla la posición de los elementos en el escenario mediante fotogramas clave de propiedad en la línea de tiempo. Cuando el botón Modo de fotogramas clave automáticos está presionado, como se muestra en la figura 23, se crean fotogramas clave de propiedad cada vez que se establece o se cambia una propiedad. También puede crear fotogramas clave de propiedad manualmente al hacer clic en los botones con forma de diamante del panel Propiedades. Probablemente desee bloquear las propiedades Position (Posición), Tamaño y Opacidad al inicio de la animación mediante la creación de fotogramas clave de propiedad. A continuación, podrá desplazar la línea de tiempo hacia abajo y crear fotogramas clave de propiedad diferentes. El resultado será una animación mágica.

Rectángulos redondeados: más de lo que parece

Animate guarda un as bajo la manga en relación con las herramientas Rectángulo, Rounded Rectangle (Rectángulo redondeado) y Ellipse (Elipse). El secreto es que puede crear todas estas formas con la herramienta Rectángulo al ajustar las propiedades. Los motivos de esta peculiaridad están relacionados con el hecho de que estas formas se definen mediante código de JavaScript. Para comprobarlo, puede crear una forma con cada herramienta y examinar sus propiedades. Para convertir un rectángulo en un rectángulo redondeado, solo tiene que ajustar las propiedades Vértices➝Radio, como se muestra en la figura 26. De igual modo, puede cuadrar un rectángulo cuadrado con las mismas herramientas. Aquí puede ver cómo funcionan.

En un proyecto nuevo de Animate, cree un rectángulo y déjelo seleccionado. Elija la herramienta Transform (Transformar) (Q) y, a continuación, coloque el puntero del ratón sobre el diamante del fotograma clave en las propiedades Rounded Rectangle (Rectángulo redondeado) y aparecerá el siguiente mensaje a modo de información sobre herramientas: Add Keyframe for Border Radii (Añadir fotograma clave para radios de borde). Los tres botones de la parte superior del panel tienen las etiquetas 1, 4 y 8. A continuación puede ver un cuadrado formado por botones donde puede seleccionar individualmente los cuatro vértices de un rectángulo. Aparece un número junto a los botones de los vértices (inicialmente establecido en 0). Un radio de vértice con el valor 0 indica que los bordes de los vértices del rectángulo están bien definidos. Haga clic en el número y arrástrelo a la derecha para redondear los vértices. El cuadro numérico solo acepta números positivos, por lo que no es posible arrastrarlo a la izquierda. Tenga en cuenta que, al arrastrar, los diamantes negros de las esquinas del rectángulo se desplazan hacia el centro. Estos diamantes son los puntos de control de los radios de vértices. Puede arrastrar manualmente los diamantes de cualquier rectángulo para crear y ajustar vértices redondeados.

Restablezca el rectángulo para que sea cuadrado y, a continuación, haga clic en la esquina superior derecha del panel Propiedades. Cambie el valor del radio y, en esta ocasión, podrá ver que el vértice superior derecho se mantendrá cuadrado, mientras que los demás estarán redondeados. Al presionar el botón de un vértice, se anula la selección de dicho vértice en la configuración de vértices redondeados.

Restablezca el rectángulo una vez más y haga clic en el vértice superior derecho para que vuelva a aparecer. A continuación, haga clic en el botón 4 en la parte superior de las propiedades de los vértices. Aparecen cuatro cuadros numéricos nuevos junto a cada esquina. A continuación, puede establecer cada esquina de forma independiente con diferentes valores de radio. Esto le permite crear formas irregulares incluso aunque, técnicamente, sigan teniendo cuatro esquinas. En combinación con las propiedades de sesgo y ajuste de escala, puede crear efectos similares a amebas realmente interesantes. Haga clic en el botón 8 y cada esquina tendrá dos números de control. Esto le permite alejar el punto de control del centro, por lo que puede hacer que el vértice sea más plano en un lado que en el otro. Tenga en cuenta que, al ajustar la configuración, el punto de control del diamante negro también se desplaza. Siempre puede ajustar las esquinas mediante los cuadros numéricos o los puntos de control del rectángulo.

Un círculo es un rectángulo muy redondeado

Puede experimentar con las propiedades Vértices➝Radio para convertir los rectángulos en óvalos y círculos. Por ejemplo, aquí puede ver los pasos necesarios para convertir un cuadrado en un círculo:

Adición de sombras paralelas a gráficos

Las sombras paralelas, además de tener un aspecto genial, le permiten separar visualmente diferentes elementos. Al aplicar una sombra paralela a un gráfico, puede hacer que parezca que está flotando sobre el escenario. Al añadir una sombra al interior de un elemento, conseguirá que tenga un aspecto más tridimensional. Las sombras suelen utilizarse con los botones para crear diferentes aspectos según su estado: con el cursor encima, presionado y seleccionado. Animate le permite crear sombras paralelas fácilmente y modificarlas según sus necesidades y sus preferencias.

Para crear una sombra sutil que le ayude a separar un elemento del fondo, pruebe los siguientes pasos:

Importación de arte

Crear formas básicas y textos en Animate es bastante fácil; sin embargo, cuando necesite crear ilustraciones complejas, probablemente utilice sus herramientas de creación artística favoritas. Para el arte lineal y los dibujos complejos, podría utilizar Adobe Illustrator. En el caso de las fotografías, posiblemente utilice Photoshop, Lightroom o iPhoto. Adobe Fireworks puede ser la herramienta complementaria ideal para Animate, ya que ambas herramientas han sido diseñadas para la creación de contenido web. Con independencia de la forma en que cree archivos JPEG, GIF, PNG o SVG, puede importarlos a Animate y, a continuación, cambiar su posición en el escenario y su aspecto para animarlos.

Al margen del formato del archivo, el proceso de importación de ilustraciones es idéntico. Vaya a Archivo➝Import (Importar) y, a continuación, busque el archivo que desee incorporar a su proyecto. La carpeta 02-2_Sliding_Show de Missing CD contiene tres fotografías en formato JPEG. Si desea practicar, puede crear un proyecto completo nuevo con una carpeta nueva llamada 02-2_Sliding_Show e importar todas las fotografías. Una vez que seleccione Archivo➝Import (Importar), se abre una ventana de archivos/carpetas estándar para su PC o Mac. Si desea importar los tres archivos a la vez, solo tiene que hacer clic en ellos mientras mantiene presionada la tecla Mayús para seleccionarlos. Como de costumbre, Animate importa los archivos y, para ayudarle a ahorrar tiempo, establece sus nombres en función de los nombres de archivo. En este caso, podrá ver squirrel, farmhouse y bike en el panel Elementos. Todas las imágenes se colocan automáticamente en la posición 0,0 del escenario. No obstante, solo podrá ver una de las imágenes, ya que se taparán unas a otras.

Elección entre GIF, JPG, PNG y SVG

El mundo de la infografía bidimensional le ofrece dos sistemas para el almacenamiento y la visualización de imágenes: mapas de bits (técnicamente conocidos como “gráficos rasterizados”) y gráficos vectoriales.

Los programas informáticos almacenan los mapas de bits como conjuntos de píxeles, identificados según su color y su posición. El término “gráficos de mapas de bits” no solo hace referencia a los archivos con la extensión de mapas de bits de Windows (.bmp), sino que hace referencia a todas las imágenes en formato de mapa de bits, incluidos .gif, .jpg, .tiff y .png.

La ventaja de los gráficos de mapas de bits es que le permiten crear detalles superrealistas con colores complejos, degradados y sombreados sutiles. El inconveniente es que los mapas de bits no comprimidos suelen ocupar una enorme cantidad de espacio en disco y no son especialmente escalables. Por ejemplo, imagine que tiene una imagen de mapa de bits de un automóvil y le indica al programa que desea ampliar el tamaño en un 500 %.

El programa tiene que crear píxeles nuevos para la imagen de mayor tamaño, por lo que duplica los píxeles (puntos de color) que ya se encuentran en la imagen. Los resultados no siempre son buenos. Probablemente la imagen completa tenga un aspecto borroso. Los bordes curvados pueden aparecer con aspecto de bloques o pixelados.

Los ordenadores almacenan los gráficos vectoriales como un conjunto de fórmulas. En comparación con los gráficos rasterizados, los gráficos vectorizados tienen un tamaño relativamente reducido y son escalables. Dicho de otro modo, si dibuja un automóvil pequeño y decide ajustar la escala al 500 %, el dibujo escalado seguirá teniendo unos detalles agradables y nítidos.

Es importante tener en cuenta las ventajas y los inconvenientes de cada formato al trabajar con imágenes. Los mapas de bits son más adecuados para las imágenes fotorrealistas con una gran cantidad de colores y tonos. Los gráficos vectoriales son más adecuados para artes lineales, gráficos, diagramas e imágenes cuya escala vaya a ajustar a diferentes tamaños. Animate puede importar cuatro tipos de archivos de gráficos (JPG, GIF, PNG y SVG); no obstante, hay un par de problemas comunes que podrían sorprenderle.

Los archivos JPG, también conocidos como archivos JPEG, son el formato de mapa de bits más frecuente utilizado en la Web y por muchas cámaras. El formato fue desarrollado por Joint Photographic Experts Group (al que debe su acrónimo). Los archivos JPEG utilizan lo que se conoce como “técnicas de compresión con pérdidas” para crear archivos de menor tamaño. Por lo general, los editores de imágenes que trabajan con archivos JPEG le permiten elegir el nivel de compresión. Si la imagen solo se visualizará en una pantalla, puede aumentar la compresión. Si va a imprimirla con una impresora fotográfica en tamaño póster, necesitará todos los píxeles.

Los archivos GIF fueron desarrollados por CompuServe (uno de los primeros servicios en línea). El acrónimo procede de Graphic Interchange Format (formato de intercambio de gráficos). La popularidad de los archivos GIF parece disminuir en comparación con los archivos JPEG y PNG; sin embargo, todavía es posible encontrarlos en muchos sitios web. Los archivos GIF son mapas de bits almacenados con una técnica de compresión sin pérdidas, pero utilizan una paleta de colores limitada. El resultado es que las imágenes con grandes franjas de colores sólidos, como los logotipos de empresas o las gráficas de barras, podrían ser archivos muy pequeños. Por otro lado, las imágenes fotográficas no se comprimirán igual de bien y su aspecto en formato GIF no será tan bueno como, por ejemplo, el de los archivos JPEG a causa del número limitado de colores. Los archivos GIF ponen a su disposición una serie de trucos útiles. Puede crear archivos GIF animados utilizando animaciones sencillas cuadro por cuadro. Gracias a programas como Adobe Fireworks y

Flash, el proceso es bastante sencillo. Los archivos GIF también le permiten designar partes de la imagen como transparentes. Eso resulta muy práctico al colocar imágenes irregulares, como personajes animados, que se encuentren sobre fondos previamente desarrollados, como el interior de una habitación.

Los archivos PNG fueron desarrollados en un momento en el que los problemas de los archivos GIF eran evidentes. Se trata del acrónimo de Portable Network Graphics (gráficos de red portátiles). El formato PNG fue diseñado para su uso en la Web (en oposición a los gráficos impresos) y para mejorar las características de los populares archivos GIF. Los archivos PNG utilizan técnicas de compresión sin pérdidas, ofrecen una mayor paleta de colores, pueden mostrar secuencias animadas y pueden incluir transparencias dentro de la imagen. Los archivos PNG son compatibles con los navegadores web modernos, aunque probablemente haya navegadores más antiguos incapaces de admitir el formato. El formato PNG funciona correctamente con Animate, en parte debido a que ambos fueron desarrollados pensando en la Web. Los archivos SVG están basados en vectores. El acrónimo corresponde a Scalable Vector Graphics (gráficos vectoriales escalables). Eso significa que, en lugar de guardar un mapa de una imagen píxel por píxel, los archivos SVG contienen fórmulas que describen las líneas, curvas, formas y demás detalles de las imágenes. Aunque todos los navegadores web modernos admiten el formato, la compatibilidad de los navegadores antiguos con los archivos SVG no es uniforme.

Si cambia el tamaño de una imagen SVG mientras trabaja en Animate, probablemente esta empiece a tener un aspecto pixelado (el aspecto escalonado de los gráficos al ampliarlos). Al visualizar la imagen modificada en un navegador, se puede apreciar la pixelación. Resulta interesante destacar que, si no modifica la imagen en Animate, su tamaño cambia sin problemas en la ventana del navegador al ampliarse y reducirse.