Adobe

Ejemplos y recursos para animación de texto


 

Para ver un tutorial de vídeo sobre animación de texto, visite el sitio web de Adobe (en inglés).

Chris y Trish Meyer incluyen un tutorial de vídeo en el sitio web ProVideo Coalition sobre la introducción, edición y tipografía de texto.

Chris y Trish Meyer incluyen un tutorial de vídeo en el sitio web Focal Press (en inglés) que muestra y explica la animación de texto.

John Dickinson proporciona una descripción general de los ajustes preestablecidos de animación, incluyendo los ajustes preestablecidos de animación de texto, en un tutorial de dos partes en su sitio web Motionworks. Este tutorial también muestra cómo utilizar selectores y animadores de texto para crear animaciones de texto propias o modificar las animaciones creadas mediante ajustes preestablecidos de animación:

John Dickinson incluye un tutorial de vídeo en su sitio webMotionworks (en inglés) que muestra la animación de la propiedad Texto de origen.

Harry Frank proporciona un tutorial sobre animación de texto con animadores de texto en el sitio web Digital Arts Online.

Aharon Rabinowitz incluye un tutorial de vídeo en el sitio web Creative COW que muestra algunos modos de crear texto extruido 3D en After Effects con el uso de capas duplicadas o el efecto Dispersión.

En la serie “After Effects Text Tips” (Sugerencias sobre texto en After Effects) de tutoriales de vídeo del sitio web Creative COW, Aharon Rabinowitz muestra cómo utilizar varios animadores de texto para crear y ajustar mejor animaciones de texto complejas.

Steve Holmes proporciona un tutorial en el sitio web Layers Magazine (en inglés) que utiliza tres animadores de texto y la animación de texto 3D por carácter para crear una animación de texto.

Colin Braley incluye un proyecto de ejemplo y un tutorial en su sitio web donde se muestra cómo utilizar una expresión en la propiedad Texto de origen para animar texto con el fin de superar algunas limitaciones del efecto Números.

Eran Stern incluye un conjunto de tutoriales de vídeo en el sitio web Creative COW que muestran cómo utilizar las funciones de animación de texto para crear una variedad de animaciones sencillas, incluyendo algunas que utilizan puntuación y otros símbolos no alfanuméricos como elementos gráficos de vector simple:

Eran Stern ofrece un tutorial de vídeo en el sitio web Creative COW en el que se explica cómo utilizar la animación de texto 3D por carácter para animar texto en un trazado con la forma de un tornado en 3D.

Rhys Enniks proporciona un tutorial de vídeo en su sitio web en el que utiliza expresiones, varios animadores de texto y selectores de rango para animar texto como si se estuviera escribiendo en la pantalla de un ordenador.

Angie Taylor incluye un tutorial en el sitio web Digital Arts que muestra cómo utilizar la animación de texto 3D por carácter junto con una solución común para simular texto 3D extruido.

Eran Stern incluye un tutorial de vídeo en el sitio Web Artbeats que muestra cómo utilizar el sistema de animación de texto de After Effects como un sistema de partículas.

Rich Young recopila varios recursos y tutoriales para crear texto extruido 3D en After Effects.

En el sitio Web ProVideo Coalition, Chris y Trish Meyer ofrecen varias sugerencias para animar texto en After Effects.

Toby Pitman muestra trucos para utilizar las capas de forma para animar texto en el sitio Web MacProVideo.

    Ejemplo: caracteres de animación con propiedades 3D por carácter

    En este ejemplo, se muestra cómo pueden animarse fácilmente caracteres individuales en 3D para que cada carácter rebase la línea y haga una reverencia.

    1. Cree una nueva composición.
    2. Cree una nueva capa de texto con la palabra ovación.
    3. Elija Animación > Animar texto > Habilitar 3D por carácter.
    4. Elija Animación > Animar texto > Posición.
    5. Elija Animación > Animar texto > Rotación.
    6. En el panel Línea de tiempo, en el grupo de animación, defina la propiedad Giro X a 45 y el valor de Posición a (0,0, 0,0, -100,0).
    7. Expanda el selector de rango 1.
    8. Haga clic en el icono del cronómetro para que la propiedad Desplazamiento establezca un fotograma clave inicial con el valor 0 segundos.
    9. Defina el valor de la propiedad Desplazamiento a -15%.
    10. Defina el valor de la propiedad Fin a 15%.
    11. Mueva el indicador del tiempo actual a 10 segundos y establezca el valor de Desplazamiento a 100%.
    12. Presione la tecla R para mostrar las propiedades de Rotación para toda la capa.
    13. Defina el valor de Rotación Y para la capa a -45, lo que girará toda la capa para que pueda ver el movimiento 3D de los caracteres.
    14. Previsualice la composición.

    Ejemplo: Desplazamiento de caracteres

    Este ejemplo ilustra cómo puede animar con facilidad caracteres aleatorios para que formen gradualmente una palabra o frase legible si especifica un valor de Desplazamiento de caracteres y anima el selector de rango.

    Animación de los valores de desplazamiento de los caracteres de la palabra Galaxia
    1. Cree una nueva composición.
    2. Cree una nueva capa de texto con la palabra Galaxia.
    3. Elija Animación > Animar texto > Desplazamiento de caracteres.
    4. En el panel Línea de tiempo, establezca el valor de Desplazamiento de caracteres a 5.
    5. Expanda el selector de rango 1.
    6. Haga clic en el cronómetro de Inicio para definir un fotograma clave inicial en 0 segundos y establecer el valor a 0%.
    7. Mueva el indicador de la hora actual a 5 segundos y establezca el valor de Inicio a 100%.
    8. Defina Alineación de caracteres en Centro.
    9. Previsualice la composición.

    Ejemplo: Animación de caracteres con el selector de ondulación

    En este ejemplo se demuestra lo sencillo que es animar la posición de caracteres individuales. También se muestra la manera en que el selector de ondulación produce un cambio radical en la animación con solo agregarlo a la capa.

    Animación del color y la posición de los caracteres de la palabra Galaxia
    1. Cree una nueva composición.
    2. Cree una nueva capa de texto con la palabra Galaxia y defina en el panel Carácter el color como azul.
    3. Elija Animación > Animar texto > Posición.
    4. En el panel Línea tiempo, arrastre el valor y de la propiedad Posición a la izquierda hasta que todos los caracteres estén fuera del fotograma.
    5. Expanda el selector de rango 1.
    6. Haga clic en el cronómetro de Inicio y déjelo en 0% a 0 segundos; después, mueva el indicador del tiempo actual a 5 segundos y establezca Inicio a 100%.
    7. Previsualice la composición.
    8. Contraiga el grupo de animación 1.
    9. Asegúrese de que no hay nada seleccionado salvo el nombre de la capa de texto en el panel Línea de tiempo y elija Color de relleno > Tono en el menú Animar. En el panel Línea de tiempo aparecerá un nuevo grupo de animación (Animación 2).
    10. Defina Tono del relleno como 1 x +0,0.
    11. Expanda el selector de rango 1 para Animación 2.
    12. Haga clic en el cronómetro de Inicio y déjelo en 0% a 0 segundos; después, mueva el indicador del tiempo actual a 5 segundos y establezca Inicio a 100%.
    13. Previsualice la animación. Ahora, los caracteres cambian de color a medida que caen desde la parte superior de la pantalla, pero todos ellos utilizan el mismo color y terminan con el color original.
    14. Con Tono del relleno seleccionado, elija Selector > Ondulación, en el menú Agregar (Windows) o Añadir (Mac OS).
    15. Expanda la propiedad Selector de ondulación 1 y elija Agregar (Windows) o Añadir (Mac OS) en el menú Modo.
    16. Previsualice la composición.
      Nota: Si agrega la propiedad Tono del relleno a Animación 1 y, después, agrega el selector de ondulación, la posición y el color variarán, en lugar de solo los colores.

    Ejemplo: Animación del espacio entre caracteres de texto

    En este ejemplo, se muestra lo sencillo que es aislar caracteres cuando se utiliza el espacio entre caracteres en una línea de texto. Con las propiedades de animación Espacio entre caracteres y Anclaje de línea, se pueden mover fácilmente todos los caracteres menos uno o varios.

    Animación de los valores de espacio entre caracteres para los caracteres 3579 (izquierda y centro) de manera que solo permanezca el 7 del medio (derecha)
    1. Cree una nueva composición.
    2. Cree una nueva capa de texto y escriba 3579.
    3. Con la capa de texto seleccionada, haga clic en el botón Centrar texto, del panel Párrafo.
    4. Elija Ver > Mostrar cuadrícula.
    5. En el panel Línea de tiempo, seleccione la capa de texto y elija Animación > Animar texto > Espacio entre caracteres.
    6. Asegúrese de que especifica Antes y después, en el menú Tipo de espacio entre caracteres.
    7. Haga clic en el cronómetro de Nivel de espacio entre caracteres y mantenga el valor en 0 a los 0 segundos.
    8. Mueva el indicador de la hora actual a 5 segundos y arrastre el valor de Nivel de espacio entre caracteres hasta que todos los caracteres se encuentren fuera de la pantalla.
    9. Previsualice la animación.
    10. Con el indicador de la hora actual en 0, capture una instantánea del panel Composición. La utilizará, junto con las cuadrículas, para determinar la posición original del número 7 al final de la animación.
    11. Mueva el indicador de la hora actual hasta 5 segundos.
    12. Haga clic en el botón Mostrar instantánea.
    13. En el panel Línea de tiempo, seleccione Animación 1 y elija Anclaje de línea en el menú Agregar (Windows) o Añadir (Mac OS).
    14. Arrastre el valor de Anclaje de línea hasta que el 7 esté colocado aproximadamente en su posición original en el centro del panel Composición.
    15. Haga clic en el botón Mostrar instantánea, en el panel Composición, para ver la posición exacta del número 7 en su ubicación original. Ajuste el valor de Anclaje de línea para colocar el carácter en la ubicación original.
    16. Previsualice la animación.

    Ejemplo: Uso de selectores para animar palabras específicas

    En este ejemplo, se muestra cómo se utilizan los selectores para limitar una animación a una palabra específica.

    Animación de los valores de sesgo de los caracteres de la palabra Platillo
    1. Cree una nueva composición.
    2. Cree una nueva capa de texto con las palabras Platillo volante.
    3. Elija Animación > Animar texto > Sesgar.
    4. En el panel Línea de tiempo, defina el valor de Sesgo como 35.
    5. Expanda el selector de rango 1.
    6. Asegúrese de que el indicador de la hora actual se encuentra en 0 segundos y haga clic en el cronómetro de Fin.
    7. En el panel Composición, arrastre las dos barras de selector al lado izquierdo de la P de Platillo.
    8. Mueva el indicador de la hora actual a 2 segundos y arrastre la barra de selector derecha a la derecha de la o de Platillo.
    9. Previsualice la composición.

    Ejemplo: Creación de una animación con simulación de escritura

    Con la propiedad de animación Opacidad se puede crear fácilmente una simulación de escritura en la pantalla.

    Escritura de texto utilizando la propiedad Opacidad
    1. Cree una nueva composición.
    2. Cree una nueva capa de texto con los caracteres 01234.
    3. Elija Animación > Animar texto > Opacidad.
    4. Establezca Opacidad a 0%.
    5. Expanda el selector de rango 1 y haga clic en el cronómetro de Inicio.
    6. En el panel Composición, arrastre el selector de inicio hasta el borde izquierdo del texto (el valor será 0).
    7. Mueva el indicador de la hora actual a 5 segundos y arrastre el selector de inicio del panel Composición hasta el borde derecho del texto (el valor será 5).
    8. Previsualice la composición.
      Nota: De manera predeterminada, la propiedad Suavidad está establecida a 100%. Para simular el efecto de una máquina de escribir, expanda la propiedad Avanzado y establezca Suavidad a 0%.

    Ejemplo: Animación de texto con varios selectores

    En este ejemplo se utiliza el parámetro selectorValue en un selector de expresión con el selector de ondulación para hacer que una cadena de caracteres parpadee y deje de parpadear aleatoriamente.

    1. Cree una nueva composición.
    2. Cree una nueva capa de texto
    3. En el panel Línea de tiempo, seleccione Opacidad desde el menú Animar para la capa de texto.
    4. Expanda la capa de texto y su animador en el panel Línea de tiempo.
    5. Seleccione el selector de rango y elimínelo.
    6. Seleccione Agregar > Selector > Ondulación junto al grupo de propiedades Animador para la capa de texto.
    7. Elija Agregar (Windows) o Añadir (Mac OS) > Selector > Expresión. Si el selector de ondulación no aparece antes que el selector de expresión, arrástrelo para colocarlo encima de este último.
    8. Expanda el selector de expresión.
    9. Expanda la propiedad Cantidad para mostrar la expresión. De manera predeterminada, aparece la siguiente expresión: 
      selectorValue * textIndex/textTotal
    10. Sustituya el texto de la expresión predeterminada por la expresión siguiente: 
      r_val=selectorValue[0]; 
if(r_val < 50)r_val=0; 
if(r_val > 50)r_val=100; 
r_val
    11. Establezca la opacidad a 0% y previsualice la composición.

    Ejemplo: Animación de la posición del texto con expresiones

    En este ejemplo se utilizan los atributos textIndex y textTotal con la expresión de ondulación para animar una línea de texto.

    1. Cree una nueva composición.
    2. Cree una nueva capa de texto
    3. Expanda la capa de texto del panel Línea de tiempo para ver las propiedades de texto. Agregue un grupo de animación de posición desde el menú Animar.
    4. Elimine el selector de rango predeterminado, el Selector de rango 1.
    5. Agregue un selector de expresión; para ello, seleccione el menú Agregar (Windows) o Añadir (Mac OS), y elija Selector > Expresión. Expanda el selector de expresión para mostrar sus opciones.
    6. Expanda la propiedad Cantidad para mostrar la expresión. De manera predeterminada, aparece la siguiente expresión: 
      selectorValue * textIndex/textTotal
    7. Sustituya la expresión predeterminada por la expresión siguiente: 
      seedRandom(textIndex); 
amount=linear(time, 0, 5, 200*textIndex/textTotal, 0); 
wiggle(1, amount);

      En este ejemplo se utiliza el método lineal para que la cantidad de ondulación máxima disminuya con el tiempo.

    8. Defina el valor de posición vertical. Cuanto mayor sea el valor, mayor será la ondulación de los caracteres.
    9. Previsualice su composición.

    Ejemplo: Animación de texto como visualizador de código de tiempo

     Sin seleccionar ninguna capa en el panel Línea de tiempo, haga doble clic en el ajuste preestablecido de animación Formato del tiempo actual del panel Efectos y ajustes preestablecidos. (Para localizar el ajuste preestablecido de animación, puede escribir su nombre en el campo Contenido del panel Efectos y ajustes preestablecidos.)

    Se crea una capa de texto con una expresión en la propiedad Texto de origen que hace que el texto muestre la hora actual en el formato de visualización de tiempo actual del proyecto.

    Para visualizar la hora con otro formato, puede utilizar otra expresión de la categoría Global.

    Para ver la expresión en una capa, seleccione la capa y presione EE.
    Más temas de ayuda

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