Introducción

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

  • Utilizando la herramienta de texto.
    En la paleta Tools (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 File (Archivo)Open (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 Text (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 Text Property Unit (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 (espesor-de-fuente). Le ofrece varias opciones (como Thin (Delgada), Extra Light (Extradelgada), Normal y Extra Bold (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:

  1. En su navegador web, vaya a: www.google.com/webfonts. Aparecerá una página con las fuentes de muestra. Hay cientos, por lo que los widgets de la izquierda pueden ayudarle a filtrar las fuentes. Los botones de la parte inferior de la página le llevan a los tres pasos necesarios para encontrar la fuente web correcta: Choose (Selección), Review (Revisión) y Use (Uso).

  2. A la izquierda, debajo de la palabra Filters (Filtros), haga clic en el menú desplegable. Elija entre Serif, Sans-Serif, Display y Hand Writing. El menú utiliza casillas de verificación, por lo que puede elegir una combinación de características. Por ejemplo, puede utilizar Sans-Serif y Display.

  3. En caso necesario, utilice los reguladores Thickness (Grosor), Slant (Inclinación) y Width (Anchura) para acotar la búsqueda de fuentes. Con tantas opciones diferentes, resulta útil reducir el número de fuentes que aparecen en la pantalla.

  4. Utilice las fichas de la parte superior de la ventana de fuentes para cambiar la visualización a Word (Palabra), Sentence (Frase) o Paragraph (Párrafo).

    Si está buscando una fuente para los encabezados, las fichas Word (Palabra) o Sentence (Frase) son las mejores opciones.
    Si va a elegir una fuente para el texto independiente, asegúrese de comprobar su aspecto mediante la opción Paragraph (Párrafo).

  5. Haga clic en el botón azul Add to Collection (Añadir a la colección). Puede tener varias fuentes en una colección, para conseguir una velocidad de representación de la página y un diseño adecuados, probablemente desee limitar el número de fuentes utilizadas.

  6. Haga clic en Review (Revisión). Es posible que este paso no siempre sea necesario, pero, como su nombre indica, en esta página puede ver en detalle la fuente utilizada como encabezados o párrafos.

  7. Haga clic en Use (Utilizar). Se carga una página nueva con instrucciones para el uso de las fuentes en su sitio web. Un poco más abajo, aparece en la página un cuadro azul con el encabezado Add this code to your website (Añadir este código a su sitio web); consulte la figura 3.

  8. Haga clic en la ficha Standard (Estándar) y, a continuación, seleccione y copie el código que aparece. Con el código almacenado en el portapapeles, ya tiene todo lo que necesita para la segunda parte del proceso: añadir la ubicación de la descripción de la fuente al proyecto de Animate.

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:

  1. En el panel Library (Biblioteca), en la barra con el texto Fonts (Fuentes), haga clic en el botón +, como se muestra en la figura 4.

    Aparecerá el cuadro de diálogo Add Web Fonts (Añadir fuentes web).

  2. Pegue el código que identifica la ubicación de la fuente en el cuadro de texto embed code (código para insertar) inferior.

    La organización que aloja la fuente web es quien puede proporcionarle este código. Si ha seguido los pasos anteriores, el código se encuentra almacenado en el portapapeles.

  3. Escriba el nombre de la fuente web en la lista Font Fallback List (Lista de fuentes adicionales) superior junto con las fuentes que desea utilizar si la fuente web no se encuentra disponible. Si el ordenador cliente no está conectado a Internet, la fuente web no se encontrará disponible.

  4. Haga clic en el botón Add Font (Añadir fuente). La fuente aparecerá en el menú desplegable Font Name (Nombre de fuente) mientras esté trabajando con textos.

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 Size (Tamaño) determinan las dimensiones del cuadro de texto. Recuerde que las propiedades Size (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 Scale (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 Scale (Escala) para ampliar o reducir el tamaño del cuadro de texto y del texto que se encuentra en su interior. Scale (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 Scale (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 Properties (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 Remove Clip (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:

  1. Cree y guarde un documento de 550 x 400 nuevo con el fondo de color blanco. Como de costumbre, cree una nueva carpeta para colocar los archivos HTML y JavaScript del proyecto.

  2. Con la herramienta Rectangle (Rectángulo) (M), cree un rectángulo de 550 px x 100 px y colóquelo en X = 0, Y = 0. Establezca el color de fondo en R = 200, G = 210, B = 250 y A = 100 %. Establezca el color del borde en none (ninguno). Utilice el ID BannerBG para el rectángulo. La forma más rápida de crear un rectángulo de acuerdo con unas especificaciones es arrastrar un cuadro rápidamente con cualquier forma y, a continuación, escribir los valores en Properties (Propiedades). Asegúrese de hacer clic en el vínculo que aparece junto a las propiedades W (An.) y H (Al.) de Size (Tamaño) para poder especificar valores no proporcionales.

  3. En el panel Elements (Elementos), haga clic en el botón Lock Element (Bloquear elemento) que aparece junto a BannerBG. Aparecerá un candado junto a BannerBG. Ya no es posible seleccionar ni mover por accidente el cuadro azul del escenario.

  4. Seleccione la herramienta de texto y arrastre un cuadro de texto. A continuación, escriba ON the EDGE. Establezca la fuente en Arial Black; el tamaño en 72 px; y la alineación en Centered (Centrado). Este texto actuará como plantilla de posicionamiento para el texto animado.

  5. En Properties (Propiedades), especifique el nombre OnEdgeTemplate para el cuadro de texto. Al igual que ocurre con los gráficos, probablemente desee identificar diferentes bloques de texto en la línea de tiempo y en el panel Elements (Elementos). En este punto, las propiedades del texto tienen un aspecto similar al de la figura 9.

  6. Establezca el tamaño y la ubicación del cuadro de texto para que coincida con el rectángulo de color, con un tamaño de 550 px x 100 px y la ubicación en X = 0, Y = 0. Cuando termine, la parte superior del escenario de Animate debería tener un aspecto simular al de la figura 10. Si, por algún motivo, el texto aparece detrás del cuadro azul, puede cambiar el orden Z en el panel Elements (Elementos). Solo tiene que arrastrar OnEdgeTemplate para que aparezca sobre BannerBG.

  7. Seleccione OnEdgeTemplate y, a continuación, presione Ctrl + D (Cmd + D). De esta forma, el texto se duplica, aunque es posible que no pueda observarlo de inmediato debido a que se encuentra justo encima del texto anterior. No obstante, OnEdgeTemplateCopy aparece en el panel Elements (Elementos).

  8. Arrastre OnEdgeTemplateCopy hasta el centro del escenario. En los siguientes pasos, lo utilizará para crear cuadros de texto individuales con palabras independientes: “ON”, “the” y “EDGE”. Antes de eso, es recomendable que termine de configurar la plantilla de posicionamiento.

  9. Seleccione la plantilla OnEdgeTemplate original y, a continuación, establezca Text Color (Color del texto) en rojo (#ff0000). Tal y como se ha indicado, este texto se utilizará para una plantilla de posicionamiento. Posteriormente, el color rojo brillante permitirá ver fácilmente si el texto se ha colocado correctamente.

  10. En Elements (Elementos), haga clic en el botón Lock Element (Bloquear elemento) junto a OnEdgeTemplate. De esta forma, se bloquea la plantilla de posicionamiento en su ubicación para que no sea posible seleccionarla ni moverla por accidente.

  11. Seleccione OnEdgeTemplateCopy y presione Ctrl + D (Cmd + D) dos veces. De esta forma, se crean dos o más copias del texto completo del rótulo.

  12. Haga clic en la primera plantilla OnEdgeTemplateCopy. En el cuadro de edición de texto, elimínelo todo salvo la palabra “ON”. A continuación, en Properties (Propiedades), cambie el nombre del texto “ON”. La mejor opción es eliminar los espacios adicionales cuando, al animar palabras o caracteres individuales, necesita reducir la anchura del cuadro de texto para que se ajuste al texto editado.

  13. Repita el paso 12 para crear elementos de texto para “the” y “EDGE”. Ahora tiene tres palabras con las etiquetas correctas que puede identificar y animar de forma independiente. Es posible que desee cambiar la anchura de los cuadros de para que coincidan con las palabras, como se muestra en la figura 11.

  14. Arrastre la palabra “ON” para que quede sobre el escenario y a la izquierda. Arrastre la palabra “EDGE” para que quede sobre el escenario y a la derecha. Arrastre la palabra “the” para que quede en la parte superior del escenario. Estas son las posiciones de inicio de cada palabra. Deben estar totalmente fuera del escenario.

  15. Seleccione “ON” y establezca la propiedad Rotate (Rotar) en -30. Seleccione “EDGE” y establezca la rotación en 30 grados. Ambas palabras parecerán descender formando un ángulo desde sus lados respectivos.

  16. Seleccione las tres palabras y haga clic en los botones Location (Ubicación), Rotate (Rotar) y Add Keyframe (Añadir fotograma clave). Las posiciones de inicio de cada palabra se registran debidamente en fotogramas clave.

  17. Arrastre el cabezal de reproducción hasta la marca de medio segundo: 0:00.500. La animación completa tardará un segundo, que es tiempo suficiente para una animación sencilla como esta. No desea aburrir a su audiencia. Cada palabra tardará medio segundo en completar su desplazamiento. Cada palabra empezará en un momento diferente.

  18. Seleccione “ON” y establezca la propiedad Rotate (Rotar) de nuevo en 0, y coloque “ON” sobre la misma palabra en la plantilla de posicionamiento. Si desea revisar el movimiento, arrastre el cabezal de reproducción atrás y adelante. En caso necesario, puede reajustar el punto inicial o el punto final. Solo tiene que colocar el cabezal de reproducción en su lugar y retocar la posición de la palabra.

  19. Coloque el cabezal de reproducción 0:00.250. A continuación, seleccione la palabra “the” y haga clic en el botón Add Keyframe (Agregar fotograma clave) de Location (Ubicación). El objetivo es hacer que la palabra “the” empiece a moverse antes de que “ON” complete su desplazamiento. No obstante, desea que la palabra “the” permanezca inmóvil durante el primer cuarto de segundo, por lo que debe crear dos fotogramas clave de ubicación con valores idénticos en 0:00.000 y 0:00.250.

  20. Arrastre el cabezal de reproducción hasta 0:00.750 y, a continuación, coloque “the” sobre la misma palabra en la plantilla de posicionamiento. Utilice el regulador Timeline Zoom (Zoom de línea de tiempo) para obtener una vista más adecuada de la línea de tiempo. Las unidades de medida de la parte superior de la línea de tiempo cambian en función del nivel de zoom. (Figura 11)

    No se utiliza rotación para “the”, por lo que la palabra parecerá descender en línea recta.

  21. Coloque el cabezal de reproducción 0:00.500. Seleccione “EDGE” y haga clic en Location (Ubicación) y en los botones Rotate (Rotar) y Add Keyframe (Añadir fotograma clave).

    Esto mantiene “EDGE” en su lugar durante el primer medio segundo de la animación.

  22. Coloque el cabezal de reproducción en 0:01 y, a continuación, arrastre “EDGE” hasta su lugar sobre la plantilla de posicionamiento.

    En la marca del segundo 1 de la línea de tiempo, las palabras han terminado su recorrido. La primera versión de la animación se ha completado, aunque no se ha eliminado la plantilla de posicionamiento.

    Antes de eliminar la plantilla de posicionamiento roja, probablemente desee obtener una vista previa de la animación. Presione Home (Inicio) y, a continuación, la barra espaciadora para verla. En caso necesario, puede seguir retocando los puntos iniciales y finales de las palabras animadas. Por ejemplo, tal vez prefiera que “ON” y “EDGE” desciendan en primer lugar y que la palabra “the” aparezca la última.

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 Lock Element (Bloquear elemento) para poder seleccionar la plantilla. A continuación, puede seleccionar la plantilla en el panel Elements (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 Scale (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 Easing (Aceleración) 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 Elements (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 Properties (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 “aceleración”. 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 Easing (Aceleración). 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 Easing (Aceleración) 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 Easing (Aceleración) le ayuda a crear un movimiento de rebote.

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

  1. Arrastre el cabezal de reproducción a 0:01 y, a continuación, arrastre BOUNCE hacia abajo para tapar BounceTemplate. Animate crea una transición en la línea de tiempo.

  2. En la línea de tiempo, haga clic en la línea de transición junto a BOUNCE. La transición aparece resaltada en la línea de tiempo.

  3. En la parte superior de la línea de tiempo, haga clic en el botón Easing (Aceleración). El panel Easing (Aceleración) aparece sobre la línea de tiempo. Inicialmente, la información sobre herramientas de este botón indica Easing: Linear (Aceleración: lineal), ya que ese es el método de aceleración aplicado. Con la aceleración lineal, la transición se aplica a ritmo constante desde el principio hasta el final.

  4. A la izquierda del panel Easing (Aceleración), haga clic en Ease Out (Desacelerar). A continuación, en la parte derecha, haga clic en Bounce (Rebote), como se muestra en la figura 15. Al hacer clic en Ease out (Desacelerar), aparecen diferentes métodos de desaceleración en el panel. El gráfico le ofrece una representación visual del método de aceleración.

  5. Haga clic fuera del panel Easing (Aceleración). Se cierra el panel y se aplica el método de aceleración a la transición seleccionada.

  6. Presione Home (Inicio) y, a continuación, la barra espaciadora.

    Al reproducir la animación, podrá ver una agradable acción de rebote al final del movimiento. Si hubiera aplicado EaseInBounce, el movimiento de rebote se habría producido al principio de la transición.

    Las propiedades Easing (Aceleración) de las transiciones pueden ser realmente útiles. Animate incluye diferentes transiciones, aunque, en ocasiones, los nombre son un poco crípticos. La mejor forma de obtener información sobre las diferentes características de aceleración es crear una animación de práctica y aplicar diferentes aceleraciones a elementos y transiciones idénticos.

Creación de su primera animación

  1. Inicie Animate y vaya a File (Archivo)New (Nuevo) para crear un documento nuevo. Al crear un documento nuevo, empezará con un escenario vacío. Stage (Escenario) será el único elemento visible en las ventanas Elements (Elementos) y Properties (Propiedades). Como puede ver en el panel Properties (Propiedades), el escenario tiene dimensiones, color y otras propiedades. Más adelante obtendrá más información sobre cada una de estas propiedades.

  2. Cree una carpeta para su proyecto y, a continuación, seleccione File (Archivo)Save As (Guardar como) para guardar su archivo con un nombre como Hello_World o First_Try.

    Puede crear una carpeta fuera de Animate con el Explorador de Windows o Finder, o puede crear una carpeta nueva como parte de un comando File (Archivo)Save As (Guardar como). Es recomendable guardar el proyecto de Animate con un nombre útil. De esa forma, no acabará con un montón de proyectos sin título que no recuerde. Asimismo, puede guardar su trabajo desde el primer momento y con frecuencia al presionar rápidamente Ctrl + S o Comando + S. Lo ideal es guardar cada proyecto de Animate en su propia carpeta, ya que Animate crea varios archivos y una carpeta edge_includes la primera vez que se guarda un proyecto.

  3. En la ventana Properties (Propiedades), haga clic en la muestra Background Color (Color de fondo) blanca. Aparecerá un panel en el que puede elegir un color (figura 16). Si prefiere seguir un método estrictamente visual, haga clic en la barra de espectro de la izquierda para elegir un tono básico y, a continuación, haga clic dentro del cuadrado para ajustar la selección. En algunos casos, puede utilizar una especificación de color determinada en formato RGB (rojo-verde-azul) o como número hexadecimal.

  4. Cuando aparezca el selector de color, elija un color azul oscuro para representar el espacio sideral. En caso de duda, pruebe R = 30 G = 45 B = 90 A = 100 para este proyecto. Animate utiliza el método estándar de Adobe para la selección de números. Cuando aparezca un número resaltado, significa que puede hacer clic y escribir un número, o bien hacer clic y arrastrar para especificar un número. Arrastre a la derecha para aumentar el número y a la izquierda para reducirlo.

  5. En el panel de propiedades Stage (Escenario), establezca Overflow (Desbordamiento) en hidden (oculto). La propiedad Overflow (Desbordamiento) controla la visibilidad de los elementos al visualizarlos en un navegador web. En una página web, el escenario puede representar solo una parte de la página web completa. Puede controlar la visibilidad de los elementos fuera del rectángulo del escenario. Establezca esta propiedad en hidden (oculto) cuando no desee ver los elementos que se encuentran fuera del escenario.

  6. Seleccione File (Archivo)Import (Importar). Mediante la ventana Import (Importar) que aparece, seleccione una imagen, por ejemplo, del planeta Tierra. Haga clic en Open (Abrir) para importar la imagen al proyecto.

    Una vez que importe un archivo al proyecto de Animate, aparecerá en la ventana Elements (Elementos) y se mostrará en el escenario. Se selecciona automáticamente, por lo que puede ver las propiedades del elemento recién importando en la ventana Properties (Propiedades). Las propiedades de visibilidad de planet_earth aparecen en la parte superior del panel. Justo debajo aparecen las propiedades Position and Size (Posición y tamaño). Debajo de ella, aparecen las propiedades Transform (Transformar), que le permiten rotar, sesgar y escalar los elementos. Debajo de ellas, aparece el nombre del archivo de origen (lo que resulta muy útil al intentar recordar el nombre del archivo).

  7. En el panel Properties (Propiedades), haga clic en el cuadro ID en la parte superior y cambie planet_earth por World.

    A medida que Animate importa gráficos, los nombra utilizando el nombre del archivo. En algunos casos, esto puede valer, pero, a menudo, deseará cambiar el nombre del elemento en Animate. Tenga en cuenta que, de esta forma, no se cambia el nombre de archivo del gráfico. Se utilizará el ID World mientras esté trabajando en Animate. Los ID desempeñan un papel muy importante en el código HTML, como podrá ver en este libro más adelante. Tenga en cuenta que World aparece en el panel Elements (Elementos) con su nombre nuevo. Debido a que se encuentra en el escenario, World también aparece en la línea de tiempo.

  8. En la línea de tiempo, asegúrese de que el cabezal de reproducción se encuentre en 0:00. Si no ha realizado ningún cambio en la línea de tiempo desde la creación del proyecto, el cabezal de reproducción se encuentra en 0:00, marcando el primer momento o cuadro de la animación, como se muestra en la figura 17. Si necesita mover el cabezal de reproducción, arrastre la parte dorada inferior del cabezal de reproducción. La parte superior se denomina “pin”. Debería seguirlo de forma automática.

    Obtendrá más información sobre el cabezal de reproducción de dos partes en los siguientes pasos.

  9. Arrastre World para sacarlo por la parte inferior del escenario. Como se indicó en el paso 5, puede controlar si los elementos que se encuentran fuera del escenario aparecen en la página web. Con la opción Overflow (Desbordamiento) establecida en hidden (oculto), mientras se encuentre en el espacio de trabajo de Animate, los elementos que se encuentren fuera del escenario tendrán un aspecto un poco más oscuro de lo habitual. Al visualizar el proyecto final en un navegador, estos elementos se ocultarán.

  10. En la línea de tiempo, asegúrese de que el botón Auto-Keyframe Mode (Modo de fotogramas clave automáticos) esté presionado. Una vez que el botón Auto-Keyframe Mode (Modo de fotogramas clave automáticos) (figura 17) esté presionado, se crearán fotogramas clave automáticamente en la línea de tiempo a medida que realice cambios en las propiedades de los elementos. Los marcadores de fotogramas clave tienen un aspecto similar a diamantes.

  11. En la línea de tiempo, asegúrese de que el botón Auto-Transition Mode (Modo de transición automática) esté presionado. Cuando el botón está presionado, Animate crea transiciones suaves en lugar de cambios bruscos. En este caso, el gráfico World se desplazará suavemente de una posición otra.

  12. Arrastre el cabezal de reproducción hasta 0:01 en la línea de tiempo. En la línea de tiempo, 0:01 marca el segundo 1 de la animación. Una línea roja se extiende hacia abajo desde el cabezal de reproducción, lo que proporciona un marcador para todas las capas de elementos y propiedades.

  13. Con World seleccionado, en el panel Properties (Propiedades), vaya a Position and Size (Posición y tamaño) y haga clic en los botones con forma de diamante que aparecen junto a X e Y. Aparecen dos fotogramas clave con forma de diamante en la línea de tiempo para marcar la posición de los bordes Left (Izquierdo) y Top (Superior) del gráfico World. Las propiedades X e Y establecen la posición de los elementos en el escenario. Al hacer clic en el diamante que aparece junto a Location (Ubicación) en el panel Properties (Propiedades), se registra manualmente la ubicación de World en el escenario. Como resultado, World permanece en la misma posición de X e Y durante el primer segundo de la animación.

  14. Haga clic en el botón Toggle Pin (Alternar pin) y, a continuación, arrastre la parte dorada inferior del cabezal de reproducción a 0:03. Para animar un elemento, es necesario cambiar sus propiedades durante un período de tiempo específico. El cabezal de reproducción y el pin el permiten marcar dos puntos en el tiempo, como se muestra en la figura 18.

  15. Arrastre el gráfico World para que la Tierra aparezca en el escenario. Puede centrar la imagen en el escenario, o bien puede elegir otra composición que le agrade.

  16. Haga clic en el botón Toggle Pin (Alternar pin) y, a continuación, presione la tecla Home (Inicio) y, a continuación, presione la barra espaciadora. Al presionar Home (Inicio), el cabezal de reproducción regresa a 0:00. Al presionar la barra espaciadora, comienza la reproducción de la animación para que pueda obtener una vista previa de la acción en el escenario.

  17. Vuelva a colocar el cabezal de reproducción en 0:00 y, a continuación, en la barra de herramientas, haga clic en la letra T. Se selecciona la herramienta de texto y el cursor se convierte en una cruz.

  18. Haga clic en el escenario y escriba Hello World. Cuando termine, presione ESC o haga clic en el botón X de la esquina superior derecha para cerrar la ventana de texto. Las palabras “Hello World” aparecen en el escenario, pero probablemente no ocupen la posición ni tengan el formato que desee.

  19. En la ventana Properties (Propiedades), especifique HelloWorld como ID del cuadro de texto. Al asignar un nombre para el texto, se facilita su identificación en la línea de tiempo y en el panel Elements (Elementos). Animate no admite el uso de espacios en los nombres, por lo que deberá utilizar HelloWorld o Hello_World.

  20. Utilizando el panel Properties (Propiedades), aplique formato al texto. Cambie el color del texto a blanco o a un azul muy claro. Seleccione Arial Black u otra fuente en negrita. Ajuste el tamaño para que ocupe la pantalla casi en su totalidad (72 px es un tamaño adecuado con Arial Black). Animate anota todos los cambios en el texto en la línea de tiempo mediante la adición de capas de propiedades y la creación de fotogramas clave.

  21. Coloque el texto en su lugar. Si no está seguro de la colocación, pruebe a centrarlo horizontalmente y de forma que quede un tercio por debajo del escenario.

  22. Con el cabezal de reproducción en 0:00, establezca la opacidad en 0. El regulador Opacity (Opacidad) se encuentra en la parte superior del panel Properties (Propiedades). Esto significa que el texto no será visible al inicio de la animación. Solo aparecerá el cuadro de selección, que desaparecerá al hacer clic en otro elemento. No obstante, no tiene que preocuparse, ya que puede seleccionar cualquier elemento, sea visible o no, al hacer clic en su nombre en el panel Elements (Elementos).

  23. Asegúrese de que el botón Toggle Pin (Alternar pin) esté desactivado. Si Toggle Pin (Alternar pin) está desactivado, el botón no aparecerá presionado y el pin se desplazará con el cabezal de reproducción.

  24. Arrastre el cabezal de reproducción hasta 0:02. Con el texto seleccionado, haga clic en el diamante que aparece junto a Opacity (Opacidad) en el panel Properties (Propiedades). Mientras arrastra el cabezal de reproducción, podrá ver que World se desplaza por el escenario. Los cineastas y los animadores hacen referencia al proceso de arrastrar el cabezal de reproducción como “barrido”, una forma rápida y sencilla de revisar un segmento de la animación. Al hacer clic en el diamante Opacity (Opacidad), se crea un fotograma clave en la marca del segundo 2, donde el texto sigue siendo invisible.

  25. Vuelva a activar Toggle Pin (Alternar pin) y, a continuación, arrastre el cabezal de reproducción hasta la marca 0:03. Con el pin en 0:02 y el cabezal de reproducción en 0:03, ya está preparado para crear otra transición.

  26. Con el cuadro de texto HelloWorld seleccionado, establezca su opacidad en 100. Animate crea una transición para que el texto cambie gradualmente de una opacidad del 0 % a una del 100 % entre 0:02 y 0:03 en la animación.

  27. Arrastre el pin a la marca 0:03 y, a continuación, arrastre el cabezal de reproducción a 0:04. Vuelva a establecer la opacidad en 0. El texto desaparecerá de nuevo.

  28. Presione Ctrl + S (Comando + S) para guardar el trabajo.

    Como ya se ha explicado, Animate guarda la animación como un conjunto de archivos HTML y JavaScript. El archivo HTML principal utiliza el nombre proporcionado en el paso 2 (al guardar el proyecto por primera vez). Por ejemplo, puede ver Hello_World.html en la carpeta del proyecto. Cuando se importó la imagen planet_earth.png, Animate creó una carpeta de imágenes y colocó una copia del gráfico en ella. Se ha completado la animación sencilla. Para obtener una vista previa en Animate, presione Home (Inicio) y, a continuación, la barra espaciadora. El planeta Tierra asciende hasta ser visible y el mensaje aparece y desaparece progresivamente (figura 19). La animación completa tarda 4 segundos.

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 Overflow (Desbordamiento) del escenario en hidden (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 Properties (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 Properties (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ú Overflow (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 hidden (oculto), lo que hace que los elementos que se encuentren fuera del rectángulo del escenario sean invisibles. La opción hidden (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 Autoplay (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 desencadenante 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 Down-level Stage (Escenario de nivel inferior) y Poster (Póster) crean elementos alternativos para los navegadores web incompatibles con HTML5.
  • Preloader (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 Rectangle (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 Rectangle (Rectángulo) en la paleta Tools (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 Elements (Elementos). Al seleccionar el rectángulo, sus propiedades aparecen en el panel Properties (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 Properties (Propiedades). Asimismo, puede hacer doble clic en el nombre en el panel Elements (Elementos).
  • Tag (Etiqueta). Consulte Rectangle (Rectángulo) en el panel Elements (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 Elements (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 Properties (Propiedades), aparecen las propiedades Position (Posición) y Size (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 Relative to (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 Relative to (Relativo a).
  • Size (Tamaño). Junto a las propiedades Location (Ubicación), se encuentran las propiedades Size (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 Size (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: Always On (Siempre activado), On (Activado) y Off (Desactivado).
  • Overflow (Desbordamiento). El control de desbordamiento del rectángulo funciona como el del escenario, aunque se aplica de forma explícita al rectángulo.
  • Opacity (Opacidad). Utilice el regulador que se encuentra cerca de la parte superior del panel Properties (Propiedades) cuando desee controlar el valor de Opacity (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 Properties (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 Arrange (Organizar), Align (Alinear) y Distribute (Distribuir) de Animate, posiblemente desee crear tres o cuatro objetos sencillos con las herramientas Rectangle (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ú Modify (Modificar)Align (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 Elements (Elementos). Para utilizar estos comandos, seleccione todos los elementos que desee alinear y a continuación, elija una de las opciones:

  • Modify (Modificar)Align (Alinear)Left (Izquierda)
  • Modify (Modificar)Align (Alinear)Horizontal Center (Centrado horizontal)
  • Modify (Modificar)Align (Alinear)Right (Derecha)
  • Modify (Modificar)Align (Alinear)Top (Superior)
  • Modify (Modificar)Align (Alinear)Vertical Center (Centrado vertical)
  • Modify (Modificar)Align (Alinear)Bottom (Inferior) Los comandos Modify (Modificar)Distribute (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 Distribute (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:
  • Modify (Modificar)Distribute (Distribuir)Left (Izquierda)
  • Modify (Modificar)Distribute (Distribuir)Horizontal Center (Centrado horizontal) Modify (Modificar)Distribute (Distribuir)Right (Derecha)
  • Modify (Modificar)Distribute (Distribuir)Top (Superior)
  • Modify (Modificar)Distribute (Distribuir)Vertical Center (Centrado vertical)
  • Modify (Modificar)Distribute (Distribuir)Bottom (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ú View (Vista) (View (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 View (Vista)Lock Guides (Bloquear guías).

De esta forma, se bloquean en su lugar hasta que utilice View (Vista)Unlock Guides (Desbloquear guías) para volver a liberarlas. Si necesita ayuda rápida con las tareas de alineación, active Snap to Guides (Ajustar a guías) (View [Vista]Snap to Guides [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 View (Vista)Guides (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 Elements (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:

  • Modify (Modificar)Arrange (Organizar)Bring to Front (Traer al frente) (Ctrl + Mayús + ] o Mayús + Comando + ])
  • Modify (Modificar)Arrange (Organizar)Bring Forward (Traer al frente) (Ctrl + ] o Comando + ])
  • Modify (Modificar)Arrange (Organizar)Send Backward (Enviar hacia atrás) (Ctrl + [ o Comando + [)
  • Modify (Modificar)Arrange (Organizar)Send to Back (Enviar hacia 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:

  1. Abra y guarde un nuevo proyecto de Animate con el nombre Color_Bars. No se olvide de crear una carpeta nueva para el proyecto.

  2. Establezca el color del escenario en blanco y las dimensiones en W = 550 px y H = 400 px. Animate recuerda la última configuración de escenario utilizada. Por lo tanto, si ha realizado los ejercicios anteriores o ha experimentado por su cuenta, posiblemente necesite realizar estos cambios.

  3. En la línea de tiempo (figura 23) asegúrese de que los botones Auto Keyframe Mode (Modo de fotogramas clave automáticos) y Auto Transition Mode (Modo de transición automática) estén presionados. Si pasa el cursor sobre los botones, sus nombres aparecerán a modo de información sobre herramientas. Por ejemplo, en la parte superior de la línea de tiempo podrá ver lo siguiente: Auto-Keyframe Mode (Modo de fotogramas clave automáticos), Auto-Transition Mode (Modo de transición automática), Easing (Aceleración) y Toggle Pin (Alternar pin).

  4. Dibuje un rectángulo y, en Properties (Propiedades)ID, escriba Red. El cuadro ID aparece en la parte superior del panel Properties (Propiedades) al seleccionar el rectángulo.

  5. En Properties (Propiedades), haga clic en el color de fondo y elija el color rojo puro, y establezca el valor en none (ninguno). Cuando termine, el número de color hexadecimal debe ser #ff0000.

  6. Establezca el tamaño del rectángulo en W (An.) en 550 px y H (Al.) en 100 px. La forma más rápida de hacerlo es escribiendo las dimensiones en el panel Properties (Propiedades), aunque, si domina el ratón a la perfección, puede arrastrar los selectores del rectángulo. Posiblemente necesite hacer clic en el botón Link (Vincular) que se encuentra junto a W (An.) y H (Al.) para cambiar la anchura y la altura de forma independiente.

  7. Establezca el valor de Skew (Sesgar) (x) en 50 grados. El sesgo horizontal es el valor superior. Si el valor es un número positivo, se deslizan el borde superior hacia la izquierda y el borde inferior hacia la derecha.

  8. Coloque el rectángulo sesgado de color rojo en la esquina superior izquierda del escenario de forma que solo se pueda ver la punta. Las los valores de las propiedades Location (Ubicación) deberían ser X = -550 px, Y = 0 px. Lo ideal es que solo se pueda ver un triángulo rojo en la esquina superior izquierda del escenario.

  9. Con el rectángulo Red seleccionado, presione Ctrl + D (Comando + D). Cambie el ID de RedCopy a Green. A continuación, establezca el color en verde. El valor hexadecimal del color verde sólido es #00ff00. Puede cambiar el color de fondo de un elemento seleccionado en el subpanel Properties (Propiedades)Color o puede utilizar las muestras de color de la barra de herramientas que se encuentran sobre el escenario.

  10. Alinee la parte superior del rectángulo verde con la parte inferior del rectángulo rojo (Y = 100 px). A continuación, mantenga presionada la tecla Mayús y deslice el rectángulo Green hacia la derecha hasta que solo se vea la punta (X = 430 px).

    Al mantener presionada la tecla Mayús mientras desplaza un elemento, se bloquea en los ejes horizontal o vertical mientras lo arrastra. Puede arrastrarlo fuera del eje, pero es ligeramente “pegajoso”.

  11. Cree otros dos rectángulos sesgados con los nombres Blue y Yellow, y aplíqueles los colores azul y amarillo, respectivamente. Coloque los rectángulos en los lados opuestos del escenario. El valor del color azul es #0000ff y el del amarillo, #ffff00. Cuando termine de colocar los rectángulos, el escenario debería tener un aspecto simular a la figura 23.

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 Auto-Keyframe Mode (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 Properties (Propiedades). Probablemente desee bloquear las propiedades Position (Posición), Size (Tamaño) y Opacity (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.

  1. Asegúrese de que el cabezal de reproducción de la línea de tiempo se encuentre en 0:00. Seleccione el paralelogramo llamado Red y, a continuación, en el panel Properties (Propiedades), haga clic en los botones con forma de diamante que aparecen junto a X, Y, W (An.), H (Al.) y Opacity (Opacidad).

    Las propiedades X e Y se encuentran en los subpaneles Position (Posición) y Size (Tamaño) Se encargan de controlar la posición. Los botones W (An.) y H (Al.) crean fotogramas clave para la anchura y la altura. El regulador Opacity (Opacidad) se encuentra cerca de la parte superior del panel Properties (Propiedades). Los botones con forma de diamante añaden fotogramas clave de propiedad y capas de propiedad individuales a la línea de tiempo, como se muestra en la figura 24. Los fotogramas clave de propiedad anclan un valor de propiedad específico en un punto del tiempo específico. En la línea de tiempo, deben aparecer los fotogramas clave de propiedad y las capas de propiedad para lo siguiente:

    • Left (Izquierda)
    • Top (Superior)
    • Width (Anchura)
    • Height (Altura)
    • Opacity (Opacidad)

    Si no aparecen todos los fotogramas clave y las líneas de tiempo de propiedad mencionados debajo de Red, debe hacer clic en el botón con forma de diamante que aparece junto a la propiedad que falta para crearlos.

  2. Repita el paso uno para las barras de color Green, Blue y Yellow para crear los fotogramas clave de propiedad y las capas de propiedad correspondientes para cada una. Para acelerar las cosas, puede seleccionar las tres barras en primer lugar y, a continuación, hacer clic en los botones de fotogramas clave.

  3. Asegúrese de que Auto-Keyframe Mode (Modo de fotogramas clave automáticos) y Auto-Transition Mode (Modo de transición automática) estén activados (presionados) y los demás botones, no. Cuando Auto-Keyframe (Modo de fotogramas clave automáticos) está activado, Animate crea automáticamente fotogramas clave de propiedad a medida que cambia los elementos en el escenario. Se trata de un proceso de dos pasos. Coloque el cabezal de reproducción en un punto del tiempo y, a continuación, cambie las propiedades del elemento. Puede realizar cambios en el panel Properties (Propiedades) o en el escenario con las herramientas Selection (Selección) y Transform (Transformar).

  4. En la línea de tiempo, arrastre el cabezal de reproducción hasta la posición 0:02. Para este paso, el pin debe estar desactivado (no presionado).

  5. Arrastre cada rectángulo por el escenario hasta el extremo trasero del rectángulo sesgado esté visible.

    En este punto, la mayor parte del escenario está cubierto por las barras de color (se ven triángulos blancos del escenario en los bordes). Acuérdese de presionar la tecla Mayús mientras arrastra si desea fijar la posición vertical de las barras.

  6. Con todos los rectángulos seleccionados, en Properties (Propiedades) haga clic en el botón Add Key Keyframe for Opacity (Añadir fotograma clave para opacidad). Arrastre el cabezal de reproducción atrás y adelante para obtener una vista previa de la animación. La opacidad de cada barra de color se establece en el 100 % en el punto correspondiente al segundo 2. Al arrastrar el cabezal de reproducción, puede echar un vistazo rápido a la acción.

  7. Arrastre el cabezal de reproducción hasta el marcador 0:03. Esta posición representa el punto del segundo 3 de la animación.

  8. Seleccione todos los rectángulos y, a continuación, establezca el valor de la altura (propiedad H [Al.]) en 300 px y la opacidad en el 50 %. Esto hace que los rectángulos crezcan, lo que hace que se corten verticalmente los unos a los otros y, al mismo tiempo, que empiecen a desenfocarse. Consulte la figura 25. Tenga en cuenta que posiblemente tenga que desvincular las propiedades W (An.) y H (Al.) para cambiarlas de forma independiente.

  9. Arrastre el cabezal de reproducción hasta el marcador 0:04. A continuación, cambie la altura de cada rectángulo a 500 px y la opacidad al 0 %. El efecto es que los rectángulos siguen creciendo y se desenfocan hasta salir de la vista.

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

Animate guarda un as bajo la manga en relación con las herramientas Rectangle (Rectángulo), Rounded Rectangle (Rectángulo redondeado) y Ellipse (Elipse). El secreto es que puede crear todas estas formas con la herramienta Rectangle (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 ajustas las propiedades Corners (Vértices)Radius (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 Corners (Vértices)Radius (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:

 

  1. Haga clic en la herramienta Rectangle (Rectángulo) y, mientras mantiene presionada la tecla Mayús, arrastre un cuadro. Al mantener presionada la tecla Mayús, se limita el rectángulo para que todos los lados sean iguales.

  2. En las propiedades Corners (Vértices), haga clic en el botón 1. Con esta configuración, todos los vértices comparten el mismo valor de radio de vértice.

  3. Haga clic en el cuadro numérico del radio del borde y arrástrelo hasta que el cuadrado se convierta en un círculo, como se muestra en la figura 27.

    Puede arrastrar el número para que los radios de vértice se sobrepasen unos a otros en el centro, pero eso no es necesario para crear un círculo. Puede cambiar y ajustar las propiedades del círculo del mismo modo que lo haría con cualquier otro objeto creado en Animate. Al sesgar el objeto, puede crear elipsis. Al ajustar la escala, puede crear óvalos. Además, por supuesto, puede crear cualquier forma intermedia entre un cuadrado y una elipse con la configuración adecuada.

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:

  1. Dibuje tres elementos en el escenario.

  2. Seleccione uno y, en el panel Properties (Propiedades), desplácese hacia abajo a los controles Drop Shadow (Sombra paralela) mostrados en la figura 28.

  3. Haga clic en la muestra de color y seleccione Black (Negro).

  4. Haga clic en el valor del desplazamiento horizontal y escriba 4.

  5. Haga clic en el valor del desplazamiento vertical y escriba 4.

  6. Haga clic en el valor del radio de desenfoque y escriba 14.

  7. Haga clic en Spread (Extender) y escriba 2.

    Si desea que uno de los elementos tenga un aspecto tridimensional, puede utilizar la misma configuración, pero debe hacer clic en el botón Inset (Bajorrelieve). En lugar de aparecer fuera del elemento, la sombra se crea dentro del elemento. Tal y como su nombre indica, la propiedad Spread (Extender) controla el tamaño de la sombra, al hacer que se extienda en todas las direcciones. Al igual que ocurre con cualquier otra propiedad, puede hacer que la sombra paralela cambie con el tiempo. Con un poco de creatividad, puede crear la impresión de que el sol cambia de posición en el cielo, con sombras que se desplazan y cambian de forma. Las sombras también son una herramienta importante para el texto: la legibilidad de los textos sobre fondos con muchos elementos mejora al separarlos con sombras.

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 File (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 File (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 Elements (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.

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

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