Usar Expresiones para crear animaciones complejas

Las expresiones son lneas de cdigo que le permiten establecer animaciones ms o menos
sofisticadas, reduciendo al mnimo las tareas repetitivas de produccin de fotogramas clave que
requeriran en un proceso normal. Producen un enlace entre propiedades y efectos dentro de una misma
capa o entre diferentes capas. Le resultar fcil copiar valores de animacin de una propiedad o efecto,
para reproducirlos en otras capas o propiedades, o tomar los valores de otra propiedad para sincronizarlo
con otra u otras propiedades o efectos.
Supongamos que buscamos una animacin de un objeto que proyecta una sombra y que se desplaza por
la composicin al tiempo que gira. Si quiere animar todo el conjunto, necesitar un montn de fotogramas
clave. A travs de las expresiones, conseguiremos que todo se mueva de la forma apropiada con un
mnimo esfuerzo en la produccin de fotogramas clave.
El lenguaje de expresiones de After Effects est basado en JavaScript 1.2, aunque utiliza solo el ncleo de
este lenguaje y lo adapta a sus necesidades, sustituyendo las extensiones relacionadas con la Web por
otras propias de la aplicacin. Si tiene conocimientos de JavaScript le resultar muy sencillo dominar esta
potente herramienta. Si no conoce nada de este lenguaje, no se apure, an podr crear expresiones ms o
menos sofisticadas sin escribir una lnea de cdigo, o alterando mnimamente expresiones existentes para
adaptarlas a sus necesidades. Es decir, dispone de dos maneras de crear expresiones: bien escribiendo el
cdigo de forma manual; o bien, utilizando un proceso semiautomtico con ayuda del icono espiral (Pick
Whip). En este captulo abordaremos las expresiones en sus aspectos ms sencillos, pues profundizar ms
saldra del alcance de esta gua.

14.1. Aadir expresiones a una propiedad

Independientemente de cmo se disponga a crear la expresin, si de forma manual o automtica, los
primeros pasos que debe dar son los siguientes:
1. Seleccione una propiedad en la ventana Lnea de Tiempo.
2. Dirjase al men principal Animation>Add Expresin. Automticamente se crea una
expresin que aparece en el campo de expresiones de la ventana Lnea de Tiempo. Se trata
de la expresin por defecto que adopta los valores de la propiedad o del fotograma clave si
lo hubiera.
3. Si conoce el lenguaje de expresiones puede escribir directamente el texto sobre el campo
de extensiones. Si no, puede usar el icono espiral (Pick Whip), para relacionarla con otra
propiedad.
4. Para que la expresin se haga efectiva debe realizar un clic fuera del campo de la expresin
o pulsar la tecla Intro del teclado numrico.
Todo el trabajo con expresiones se llevar a cabo desde la ventana Lnea de Tiempo. Al aadir una
expresin aparecern en la propiedad los controles mostrados en la figura 14.1.

Figura 14.1. Propiedad de rotacin con una expresin aadida

 El botn Enable Expresin (Habilitar/Desabilitar Expresin) le permitir desactivar momentneamente la
expresin al hacer un clic sobre l. Un nuevo clic volver a activarla. El botn Graph (Grfico) muestra,
cuando se activa, un grfico de valor y velocidad similar al de los fotogramas clave. Con la ayuda del
botn Pick Whip (Icono Espiral) podr crear expresiones sin escribir cdigo. El botn Expression
Language Menu (Men Lenguaje de Expresiones) le ayudar a escribir los cdigos de forma manual,
insertando objetos de expresiones.
Las expresiones se escriben y se editan en el campo de expresiones. Aunque puede escribirlas en
cualquier procesador de texto, para luego cortarlas y pegarlas en el campo.
Si escribe o edita de forma errnea una expresin, se mostrar un cuadro de dilogo de aviso sealando la
falta, y una seal triangular amarilla aparecer a la izquierda de los botones de la expresin, al tiempo que la
expresin se desactiva automticamente. Cada vez que haga un clic sobre dicho tringulo ver de nuevo el
cuadro de dilogo que le indica el error de sintaxis.
Cuando necesite eliminar de forma definitiva una expresin, utilice el comando Remove Expresin del men
principal Animation. O bien, borre el texto del campo de expresiones y haga un clic fuera o pulse tecla
Intro del teclado numrico.

Nota: Para abrir, en la ventana Lnea de Tiempo, solo las propiedades de una capa con expresin
14.1.1.
aplicada pulseUsar el icono
dos veces espiral
seguidas para
la tecla E. crear expresiones

Esta utilidad le permite poder hacer uso de las expresiones sin necesidad de saber acerca de cdigos
JavaScript. Relaciona propiedades entre capas copiando sus valores y creando automticamente
expresiones. Puede relacionar los valores de la misma propiedad o efecto en distintas capas para evitar la
repeticin de los fotogramas clave con un importante ahorro de tiempo, o relacionar valores de
propiedades o efectos diferentes dentro de una misma capa o de otra distinta para sincronizar acciones.
Por ejemplo, imagine que varios objetos o capas tienen que hacer un mismo recorrido en la composicin.
nicamente necesitar establecer los fotogramas clave para una de ellas y despus, por medio de este
icono podr copiar fcilmente los valores de la propiedad de posicin. Si posteriormente modifica la
expresin creada, aumenta las posibilidades de manipulacin de la animacin. Por ejemplo, podra
introducir un retardo en el tiempo para que una capa comenzase unos segundos despus que la otra, o
podra reducir la velocidad para que la capa haga el recorrido a una velocidad diferente.
Veamos el mtodo a seguir para usar este elemento:
1. Seleccione, en la ventana Lnea de Tiempo, la propiedad que llevar la expresin y ejecute el
comando del men principal Animation>Add Expression.
2. Haga un clic y arrastre desde el icono espiral (Pick Whip) hasta la propiedad de la cual
quiere copiar los valores. En el campo de expresin de la ventana aparecer la expresin.
Vase la figura 13.2.

Si apunt con el icono espiral (Pick Whip) al nombre de la propiedad la expresin resultante mostrar
los valores en conjunto de la propiedad. Si por el contrario apunt a uno de los valores en la expresin se
mostrar detallado cada uno de los valores. Tenga en cuenta que no todas las propiedades tienen un
mismo nmero de variables. Por ejemplo, la propiedad de posicin muestra los valores X e Y para capas 2D
o X, Y, Z para capas 3D, mientras que la propiedad de opacidad tiene un nico valor.
Es posible establecer ms de un enlace con el icono espiral (Pick Whip), aunque para separar las
expresiones debe previamente fijar un punto y coma que separe las lneas. Las nuevas expresiones se
situarn inmediatamente detrs del cursor en el campo de expresiones, cuando ste se encuentre all. Si no
estuviera activo el campo, entonces la nueva expresin reemplazar al texto previo. Si el campo est activo
y con texto seleccionado, este se reemplaza con la nueva propiedad marcada por el icono espiral.
Una vez generadas las expresiones automticas con este elemento, puede modificarlas para adaptarlas a
sus necesidades. La manera de hacerlo es escribir directamente sobre la expresin en el campo de
expresiones de la ventana Lnea de Tiempo. Uno de los cambios ms comunes y sencillos es la
introduccin de operadores matemticos para incrementar o disminuir la accin del cdigo. As, puede
utilizar el signo (+) para sumar, el signo (-) para restar, el signo (/) para dividir y el signo (*) para multiplicar.
No son las nicas posibilidades, puede utilizar funciones matemticas ms complejas y disfrutar de mayor
libertad de accin. Por ejemplo, la funcin (*-1) consigue que la accin se aplique a la inversa.
Probablemente entienda esto mejor con un ejemplo sencillo: imitaremos los movimientos de las manecillas
de un reloj. Tenemos cuatro capas: la esfera del reloj, la aguja de las horas, la de los minutos y la de los
segundos que corre en una esfera ms pequea. En realidad lo que hay que modificar es la propiedad de
rotacin. Pero previamente tendremos que cambiar el eje de anclaje para que el giro se produzca desde la
base de la aguja, que coincidir, obviamente, con el centro del reloj, y con el centro del crculo pequeo en
el caso del segundero. Podramos lograr este efecto animando la rotacin de las tres agujas de forma
independiente, de manera que las velocidades fueran distintas en cada una de ellas. Sin embargo,
comprobar que usando una expresin muy simple lograr el mismo objetivo de una manera mucho ms
rpida y sencilla, sin necesidad siquiera de escribir una lnea de cdigo.
1. Establecemos para la capa que contiene la aguja de los minutos los fotogramas clave para
hacerla rotar 360. Por ejemplo, en tiempo 0 segundos fijamos un valor de rotacin 0 y en el
tiempo 6 segundos, valor de rotacin 360 para el 2 fotograma clave (o 1 en el nmero de
revoluciones).
2. Animamos ahora la capa de la aguja de las horas, pero en lugar de crear fotogramas clave
aplicaremos una expresin: abra la propiedad de rotacin y ejecute el comando del men
principal Animation>Add Expresin.
3. Hecho esto, hay que relacionar la propiedad de rotacin de la capa anterior con esta ltima.
Emplearemos el icono espiral (Pick Whip) de las propiedades de la expresin haciendo un
clic y arrastrando hasta la propiedad de rotacin de la capa con la aguja de los minutos, la
que tena los fotogramas clave. Observe que, tras efectuar esta accin, aparece en el campo
de expresin una lnea de cdigo como la siguiente: thisComp.layer("minutos.jpg").rotation.
Vase la figura 14.2.
4. Si no alteramos este cdigo ambas capas rotarn al unsono, pero nosotros queremos retrasar
la velocidad de la aguja de las horas. Con este objetivo aadiremos, escribiendo directamente
en la expresin, los caracteres /12. As lograremos que la velocidad de la aguja se reduzca, de
manera que, cada vez que el minutero d una vuelta completa, la aguja de las horas avanzar
una hora. La expresin debe quedar: thisComp.layer("minutos.jpg").rotation/12.
5. Repitamos el mismo proceso para la aguja de los segundos. Abra su propiedad de rotacin y
aplique una expresin (Animation>Add Expression). Arrastre el icono espiral (Pick Whip)
hacia la propiedad de rotacin del minutero. En esta ocasin la aguja de los segundos debera
moverse ms rpido que la de los minutos, 60 veces ms deprisa. Entonces modificaremos la
expresin aadiendo *60 y lo habremos conseguido. As de fcil!

Figura 14.2. El icono de espiral crea expresiones de forma automtica

14.1.2. Escribir las expresiones manualmente

Si tiene conocimientos de JavaScript, quizs le resulte fcil escribir directamente las expresiones,
obteniendo el mayor grado de control de esta forma. Tambin los conocimientos en matemticas le pueden
resultar de utilidad, si quiere aadir funciones complejas. No obstante, si estudia algunos ejemplos y
prueba con las distintas opciones, es posible que llegue a entender la lgica de este cdigo y pueda
realizar animaciones sofisticadas con esta tcnica.
Es posible crear una expresin desde cero para animar una capa, sin establecer ni un solo fotograma clave.
Pero quizs, lo ms comn sea crear expresiones para relacionarlas con los fotogramas clave de otras
capas.

Algunas nociones bsicas sobre el lenguaje de las expresiones

Al escribir expresiones manualmente, no olvide que est trabajando con el lenguaje JavaScript y se rige
por sus reglas, as por ejemplo, tenga presente que este lenguaje discrimina entre maysculas y
minsculas. Puede emplear tantas lneas de cdigo como sean necesarias, para separarlas debe utilizar un
punto y coma.

Nota: Si precisa ms espacio en el campo de expresiones para ver la totalidad de las lneas de
cdigo, puede ampliar la altura del campo situando el cursor en el lado inferior y arrastrando hacia
abajo.

El lenguaje de expresiones se utiliza para relacionar objetos o propiedades con unos valores numricos.
Para acceder a estos se usa una cadena de objetos u operadores separados por un punto. Una vez que se
llega a un valor numrico, a una matriz de nmeros o a un booleano (como verdadero o falso) se concluye
la cadena y no se pueden aadir ms atributos, aunque s se pueden aadir operadores matemticos como
/,*,-,+, etc.

Objetos globales
Todas las expresiones comienzan con un objeto global y el objeto global por defecto, es siempre la
capa en la que se escribi la expresin. De modo que en las expresiones se puede obviar su presencia. Por
ejemplo, si queremos "llamar" a los valores de la propiedad rotacin de una capa denominada "capa1",
podramos utilizar cualquiera de las siguientes expresiones, todas equivalentes:
thisComp.layer("capa1").rotation
thisLayer.rotation
rotation
Tambin podramos escribir directamente un valor para la propiedad suprimiendo incluso la palabra
Rotation, pues tambin est implcita. En este caso si escribimos por ejemplo nicamente 90 en el campo de
expresiones, hace referencia al valor de la propiedad de rotacin para esa capa, y este ser su valor fijo.
Unas lneas adelante veremos cmo podemos introducir variables.
Si los valores a los que queremos "llamar" estn en otra capa, deberemos sustituir el nombre "capa1" en la
primera lnea por el de la nueva capa. En esta ocasin esta lnea sera la nica vlida.
Echemos un vistazo a la expresin creada en el apartado anterior con el icono espiral (Pick Whip), para
tratar de entender cuales eran sus instrucciones:
thisComp.layer("minutos.jpg").rotation.
Esta expresin relaciona la capa y la propiedad actual con la capa de nombre "minutos.jpg" dentro de la
composicin activa (thisComp), y copia los valores (fotogramas clave) de la propiedad de rotacin en la
capa con la expresin. Si recuerda el ejemplo anterior, con esta expresin conseguamos que las dos agujas
rotaran al unsono. Recuerde tambin, que vimos cmo podamos introducir un operador para cambiar la
velocidad, en el ejemplo anterior aadimos /12 para reducir la velocidad con respecto a la otra aguja.

Matrices y dimensiones
Los valores de las propiedades se representan por nmeros, matrices de ellos o por vectores, cuando
indican una direccin, aunque en realidad a estos ltimos After Effects los trata igual que cualquier otra
matriz.
Las matrices aparecen como nmeros separados por una coma y metidos entre corchetes. La cantidad de
elementos de la matriz indica la dimensin de la propiedad. As, tendremos hasta un total de cuatro: una
dimensin para aquellas propiedades que muestran un valor nico, como por ejemplo las propiedades de
rotacin y opacidad; dos dimensiones para las propiedades con dos valores, como pueden ser la posicin
de una capa 2D (ejes X e Y), la escala (altura y anchura) y el punto de anclaje (X,Y); tres dimensiones para
las propiedades anteriores en capas 3D (X,Y,Z); y cuatro dimensiones para el color que presenta cuatro
canales o variables (rojo, verde, azul y alfa).
Por ejemplo, una matriz de dos dimensiones poda ser:
[30,100]
matriz que podra representar los valores de posicin (x,y) de una capa.
Tambin podemos utilizar los valores independientes, para ello aadimos al nombre de la composicin [0]
para el valor de la X, [1] para el valor de la Y y [2] para el valor de la Z.
Position[0] corresponde pues al valor X, en el ejemplo anterior sera igual a 30.
Position[1] corresponde al valor Y, en nuestro ejemplo sera 100.
Es posible establecer variables:
X=position[0];
[X, 45]
Una expresin equivalente sera:
[position[0],45]
Estas seran las coordenadas de posicin para la capa con la expresin. Podramos relacionarla con el valor
del eje X de otra capa, para ello deberamos escribir una expresin como la siguiente:
[thisComp.layer("capa1").position[0],45]
Con estas instrucciones logramos que el valor en el eje X de la capa sea el valor X de otra capa de nombre
"capa1", mientras que el eje Y permanece fijo.
Si quisiramos que ambos parmetros fueran variables y que cada uno dependiera de una capa distinta
podramos escribir la siguiente lnea:
X= thisComp.layer("capa1").position[0];
Y= thisComp.layer("capa2").position[1];
[X,Y]
O expresado de otra forma:
[thisComp.layer("capa1").position[0], thisComp.layer("capa2").position[1]]
Hemos utilizado el nombre de la capa para hacer referencia a ella, pero tambin es posible usar un nmero
en el orden de apilamiento en la ventana Lnea de Tiempo. El nmero 1 corresponde con la capa superior,
el 2 con la segunda y as sucesivamente. Tiene el inconveniente de que si cambiamos el orden de
apilamiento la accin de la expresin se puede ver modificada.
As pues, es posible utilizar la expresin thisComp.layer(1).position para relacionar los valores de posicin
de la primera capa en el orden de apilamiento con la capa que contiene la expresin.

El tiempo en las expresiones

Tambin se puede introducir el tiempo en las expresiones. En ellas siempre se mide en segundos y se
refiere a la duracin de la composicin en la que aparece la expresin. Si no se indica lo contrario, el tiempo
por defecto ser el tiempo actual. Es decir, los valores relacionados se correspondern a los valores de la
propiedad en el tiempo actual. Pero esto tambin se puede modificar.
Siguiendo con el ejemplo anterior, si le aadimos el atributo valueAtTime(time) podremos intervenir en el
tiempo.
thisComp.layer("capa1").position.valueAtTime(10)
Esta expresin hace que la capa con el cdigo, presente los valores de posicin (ambos X e Y) de la
"capa1" en el tiempo 10 segundos. En este caso el valor ser fijo en toda la duracin.
Es posible asignar valores relativos de tiempo introduciendo algn operador a la palabra time. Por ejemplo:
thisComp.layer("capa1").position.valueAtTime(time+3)
Esta expresin hace que el valor de posicin de la capa con el cdigo, sea el mismo que el de la "capa1" a
lo largo de toda la duracin de la composicin, pero tres segundos ms tarde. Es decir, en un momento
dado del tiempo, digamos a los 10 segundos, la "capa1" tendr un valor de posicin determinado, la capa
con la expresin, en ese mismo momento, tendr el valor de posicin que le corresponda a la "capa1" a los
13 segundos.

Expresiones para el texto fuente

Decamos que todas las expresiones conducen a un valor numrico o a una matriz de ellos. Pero hay
una excepcin, cuando trabajamos con la propiedad Source Text (Texto Fuente) de una capa de texto, la
expresin interpreta el valor final como un string de JavaScript. Cuando relacione esta propiedad en dos
capas de texto, la capa con la expresin adquirir los caracteres de la capa relacionada, y la fuente de texto
ser la que presente el primer carcter del texto original de esa capa.

Usar el listado desplegable del men Lenguaje de expresiones

Este listado contiene todos los elementos especficos de After Effects que se pueden usar en una
expresin. Lo puede utilizar como una referencia de los elementos disponibles y para asegurarse de que la
sintaxis es correcta, adems le ahorra tiempo evitando tener que escribir cada uno de los elementos.
Para aadir objetos y atributos solo tiene que ir seleccionando las distintas opciones del men,
intercalando puntos all donde haga falta.
Por ejemplo, para crear una relacin entre la propiedad activa de una capa con el valor de rotacin de otra
capa dentro de la misma composicin, debe seguir estos pasos:
 1. Seleccione la propiedad y ejecute el comando Animation>Add Expression
2. Primero establecemos el objeto principal en el men Global, escogemos la opcin thisComp
(esta composicin).
3. Aadimos un punto al final de la palabra.
4. Para escoger el elemento siguiente nos vamos al men Comp, puesto que el primer objeto es
una composicin. De entre todas las alternativas escogemos la opcin Layer (name)
(capa(nombre)) y sustituimos la palabra name por el nombre de la capa con la que queremos
relacionarla. Si en lugar de especificar un nombre escribe un nmero estar designando el
orden de apilamiento de la capa. Supongamos que escribimos un 1 en lugar del nombre. En
este caso es la capa superior la que se utilizar. Si cambia el orden de las capas, cambiar
tambin la capa seleccionada.
5. Escribimos otro punto detrs del parntesis.
6. Lo siguiente es seleccionar del men un atributo o mtodo de todo lo relacionado con la
capa, en cualquiera de los mens Layer, Light o Camera. En nuestro caso ser la primera
opcin: Layer Properties (Capa), all se recogen todas las propiedades de una capa,
nosotros elegiremos la opcin Rotation.
7. La expresin debe quedar como sigue: thisComp.layer(1).rotation. De esta manera, la
informacin de los fotogramas clave que tenga la capa superior se utilizar en la capa con la
expresin.
Veamos otro sencillo ejemplo que nos ayude a entender la dinmica de este proceso.
En esta ocasin, tenemos una esfera en una capa con el nombre de "bola1.jpg" que se desplaza por la
composicin siguiendo una lnea de movimiento, y queremos crear ms esferas que hagan el mismo
recorrido pero con un retardo en el tiempo.
1. Hacemos un duplicado de la esfera (seleccin de la capa y teclas Control-D) y establecemos
una lnea de movimiento en ella. La renombramos como "bola2.jpg"
2. En la esfera original (bola1.jpg) asignamos una expresin ejecutando el comando
Animation>Add Expresin.
3. Bien escribiendo directamente, bien usando el men de lenguaje introducimos en el campo de
expresiones la siguiente lnea: thisComp.layer("bola2.jpg").position.valueAtTime(time - .6).
Con lo cual estamos forzando a que la capa bola1 siga el mismo recorrido que la segunda
capa, pero el atributo valueAtTime le insta a hacerlo 0.6 segundos despus de que haya
empezado (time-.6).
4. Queremos ahora aadir ms esferas que se unan al desfile; podramos repetir los pasos 2 y 3
en cada una de las nuevas capas, pero modificando la variacin de tiempo, o cambiando la
capa de referencia (bola2.jpg). Pero existe una manera ms inmediata. En lugar de asignar un
nombre a la capa le asignaremos un orden. As, sustituiremos el objeto layer("bola.jpg") por
layer(thisLayer, 1) para indicarle que la posicin y el retardo sea relativo a la capa
inmediatamente inferior en el orden de apilamiento (si utilizramos el -1 en lugar de 1 sera la
capa superior).
5. Ahora solo resta crear tantas copias de esta capa como haga falta, y cuando previsualice la
composicin, comprobar que todas las esferas hacen el recorrido con el retardo indicado en
la expresin, pero con relacin a la capa posterior en el orden de apilamiento.

14.2. Convertir expresiones a fotogramas clave

En algunas circunstancias puede resultar interesante transformar una expresin en sus fotogramas
clave correspondientes. Por ejemplo, si necesita mayor velocidad en el proceso de interpretacin, los
fotogramas clave se interpretan ms deprisa. O si necesita hacer manipulaciones posteriores, como
congelar la imagen, tambin sera til disponer de los fotogramas clave para poder efectuar un remapeado
de tiempo y congelar la parte de la imagen que nos interese.
En cualquier caso, esta conversin resulta muy sencilla, basta con ejecutar el comando del men principal
Animation>Keyframe Assistant>Convert Expression to Keyframes para que desaparezca la expresin y
en su lugar se creen fotogramas clave que la sustituyan.

14.3. Efectos Control de Expresiones

En el men principal Effects, existen unos efectos o filtros que tienen como funcin manipular los
valores de las propiedades en las expresiones. Lo ideal es aplicar estos efectos sobre una capa nula que
servir a modo de control. En las otras capas se establece una expresin ligada a las propiedades de estos
efectos. Es en la capa nula donde se fijan los fotogramas clave que regirn la animacin de las capas
relacionadas por medio de la expresin.
Primero cree una capa nula mediante el comando Layer>New>Null Object, y luego aplique los efectos con
el comando Effect>Expression Controls. En su men elija cualquiera de estas opciones:
1. Angle Control (ngulo). Este parmetro contiene valores de rotacin, aparece el dial que
muestran los efectos para controlar el ngulo.
2. Checkbox Control (Casilla de confirmacin). Contiene una casilla con dos posiciones:
apagado o encendido. Si establece fotogramas clave para esta propiedad puede usar este
control para comenzar o parar la animacin a intervalos determinados.
3. Color Control (Color). Este efecto contiene un recuadro de color que abre un selector y el
cuentagotas. Lo utilizar para controlar la velocidad de cambio de color de una capa.
4. Layer Control (Capa). Contiene un men desplegable donde se agrupan todas las capas de
la composicin. Este es el nico efecto en el que no se pueden agregar fotogramas clave.
5. Point Control (Punto). Este parmetro establece un punto de efecto. Contiene pues un valor
en coordenadas (x,y) y un botn para fijar el punto directamente haciendo un clic sobre la
pantalla. Puede aplicar este punto de efecto para que todas las capas compartan unas mismas
coordenadas de aplicacin de los efectos.
6. Slider Control (Deslizador). Este control contiene un valor basado en un rango del 1 al 100.
Puede fijar valores por encima de este rango. Si quiere usar otro rango distinto haga un clic
en el botn derecho del valor para abrir un cuadro de dilogo donde podr modificar este
rango.