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. dos veces seguidas la tecla E. aplicada pulseUsar el icono espiral para 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:

Seleccione la propiedad y ejecute el comando Animation>Add Expression 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.

1. 2.

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.