Una caja que lo hace todo

One box that does it all

Buena parte de lo que se mueve en pantalla en proyectos de broadcast son rectángulos que crecen, se deslizan o abren: cajas de rótulos, barridos, transiciones, fondos de lower thirds. Wipe Box parte de esa idea y la lleva al extremo: en lugar de animar cada caja con sus keyframes, programo cómo debe comportarse una caja.

A good part of what moves on screen in a broadcast project are rectangles that grow, slide or reveal themselves: title boxes, wipes, transitions, lower-third backgrounds. Wipe Box starts from that idea and takes it to the extreme: instead of animating each box with its own keyframes, I program how a box should behave.

Es la base de sistemas más grandes, como el de Broadcasting que puedes ver abajo, que nace de este asset.

It is the base for bigger systems, like the Broadcasting you can see below, which is built from this asset.

El proyecto incluye cuatro composiciones, dos wipe y dos radiales: Wipe Box (única caja), Wipe MultiBox (una cadena de cajas) y sus equivalentes con círculos, Radial Box y Radial MultiBox. Todas comparten la misma lógica, así que lo que aprendas en una te sirve para las demás, y una casilla, Full screen, convierte cualquier caja en una hoja a pantalla completa.

The project includes four compositions, two wipe and two radial: Wipe Box (a single box), Wipe MultiBox (a chain of boxes) and their circle equivalents, Radial Box and Radial MultiBox. They all share the same logic, so what you learn in one carries over to the rest, and one checkbox, Full screen, turns any box into a full-screen sheet.

Yo me hago mis plantillas

I build my own templates

Nunca uso plantillas de terceros en mis proyectos, solo como inspiración y referencia, por dos razones. La primera: las puede tener mucha más gente, así que tu trabajo pierde personalidad. La segunda: no sabes qué te vas a encontrar dentro del proyecto, y las sorpresas pueden costarte más horas de las que esperabas ahorrar.

I never use third-party templates in my projects, only as inspiration and reference, for two reasons. First, plenty of other people can use the same ones, so your work loses its individuality. Second, you never know what you’ll find inside the project, and those surprises can cost you more hours than you expected to save.

Es ingeniería inversa aplicada.

I reverse-engineer them.

Hace años, buscando entre plantillas de After Effects, encontré varios packs de broadcasting que se parecían mucho entre sí. Al estudiarlos, me di cuenta de que todo su sistema de diseño podía construirse con un único asset parametrizado: un ladrillo con el que montar todas las piezas y al que, además, podía añadir muchas más opciones. Wipe Box es ese ladrillo.

Years ago, while browsing After Effects templates, I came across several broadcasting packages that looked very similar. After studying them, I realised their entire design system could be built around a single parameter-driven asset: one building block for assembling every element, with room to add many more options of my own. Wipe Box is that building block.

Un solo slider para animarlo todo

One slider to animate it all

Como en todos mis assets automatizados la animación de la caja no vive en el ancho, ni en el alto, ni en la posición: vive en un único slider, Motion, de 0 a 100. A 0 la caja tiene su tamaño inicial; a 100, su tamaño final. Con dos keyframes en ese slider, la caja se anima entera, y con otros dos que lo devuelven a 0, también su salida. Todo lo demás se calcula a partir de ahí.

As in all my automated assets, the box animation doesn’t live in the width, the height or the position: it lives in one slider, Motion, from 0 to 100. At 0 the box has its initial size; at 100, its final size. With two keyframes on that slider, the whole box animates, and with two more that take it back to 0, so does its exit. Everything else is calculated from there.

Esto tiene una consecuencia práctica: para cambiar el movimiento (hacerlo más lento, más rápido, retrasarlo) solo tienes que mover los keyframes de un slider, no reconstruir la animación de cada propiedad. Yo suelo usar ease out en la entrada y ease in en la salida, y alargar o acercar los keyframes de cada elemento es lo que da personalidad a cada despliegue.

This has a practical consequence: to change the motion (slower, faster, delayed) you only have to move the keyframes of one slider, not rebuild the animation of each property. I usually ease out on the way in and ease in on the way out, and stretching or tightening the keyframes of each element is what gives every wipe its own character.

Nueve orígenes

Nine origins

Tú eliges desde dónde crece la caja con el menú Origin: desde cualquiera de sus cuatro lados, de sus cuatro esquinas o desde el centro. El código se encarga de que ese borde, esa esquina o ese centro se queden fijos mientras el resto se expande, así que no tienes que mover el ancla ni compensar la posición a mano.

You choose where the box grows from with the Origin menu: any of its four sides, any of its four corners or the center. The code makes sure that edge, corner or center stays fixed while the rest expands, so you don’t need to move the anchor point or compensate the position by hand.

Ancho y alto, cada uno a su ritmo

Width and height, each at its own pace

Como ves, lo que convierte una caja en un barrido es que el ancho y el alto no tienen por qué moverse a la vez. Cada dimensión tiene su tamaño inicial (Initial W, Initial H), su retardo (Delay W, Delay H) y un bloqueo (Lock W, Lock H) que la deja en su tamaño final desde el primer fotograma. Si bloqueas el ancho y animas solo el alto, tienes un barrido vertical; si retrasas uno de los dos, la caja se despliega en dos tiempos.

As you can see, what turns a box into a wipe is that width and height don’t have to move at the same time. Each dimension has its own initial size (Initial W, Initial H), its own delay (Delay W, Delay H) and a lock (Lock W, Lock H) that keeps it at its final size from the first frame. If you lock the width and animate only the height, you get a vertical wipe; if you delay one of the two, the box unfolds in two beats.

Además, Prev X y Prev Y desplazan la caja en su entrada: empieza apartada esa distancia y se coloca en su sitio a medida que avanza el movimiento. Con la misma caja, si le das a Prev unos cientos de píxeles, un barrido seco se convierte en uno que llega deslizándose.

On top of that, Prev X and Prev Y offset the box on entry: it starts that far away and settles into place as the motion progresses. With the very same box, if you give Prev a few hundred pixels, a plain wipe turns into one that glides in.

De una caja a una secuencia

From one box to a sequence

La composición Wipe MultiBox no es una caja, es una cadena. Cada grupo tiene una capa maestra, MASTER_BOX_1, MASTER_BOX_2…, con todos los controles, y encima las cajas que la siguen, BOX_1_1, BOX_1_2, BOX_1_3…, con la maestra como parent. En el nombre de cada seguidora, el primer número es el grupo y el último es su posición en la cadena.

The Wipe MultiBox composition isn’t a single box, it’s a chain. Each group has a master layer, MASTER_BOX_1, MASTER_BOX_2…, which carries all the controls, and on top of it the boxes that follow it, BOX_1_1, BOX_1_2, BOX_1_3…, with the master as their parent. In the name of each follower, the first number is the group and the last one is its position in the chain.

Por defecto, las seguidoras lo toman todo de la maestra y se escalonan con Motion Delay: cada caja arranca unos fotogramas después de la anterior, con su Prev X y Prev Y incluidos, y Invert vuelve negativos esos retardos (también Delay W y Delay H). Shift X y Shift Y de la maestra desplazan cada caja según su posición en la cadena. El Offset de la maestra expande o encoge cada caja alrededor de su contorno (se aplica en Offset Paths, sin deformarla) y crece según su posición en la cadena. Si activas Custom, la seguidora usa sus propios valores en lugar de los de la maestra: dos cajas del mismo grupo pueden desplegarse desde esquinas distintas y con ritmos distintos. Solo con Custom cuentan también Add Left, Add Right, Add Up y Add Down, que suman (o restan) tamaño por cada lado sin mover los demás cuando necesitas una caja algo más grande que la maestra, y un Offset propio que se suma al de la maestra.

By default, the followers take everything from the master and stagger with Motion Delay: each box starts a few frames after the previous one, its Prev X and Prev Y included, and Invert makes those delays negative (Delay W and Delay H too). The master’s Shift X and Shift Y move each box according to its position in the chain. The master’s Offset grows or shrinks each box around its outline (applied in Offset Paths, without deforming it) and increases with its position in the chain. If you turn Custom on, the follower uses its own values instead of the master’s: two boxes of the same group can unfold from different corners and at different paces. Only with Custom do Add Left, Add Right, Add Up and Add Down count too, adding (or subtracting) size on each side without moving the others when you need a box slightly bigger than the master, along with an Offset of its own that is added to the master’s.

Como en el resto de mis assets, no existe un control de "número de cajas": cada seguidora sabe cuál es su maestra por el parent y qué posición ocupa por la cifra final de su nombre. Si necesitas una caja más, basta con duplicar la última capa: la cifra de su nombre hace el resto.

As in the rest of my assets, there is no "number of boxes" control: each follower knows its master from the parent and its position from the last number of its own name. If you need one more box, just duplicate the last layer: the number in its name does the rest.

Salir también es animar

Leaving is animation too

Una caja no solo entra: también se va. Con Motion volviendo a 0 la caja se encoge, y como Origin admite keyframes, si pones uno de tipo hold justo cuando empieza la salida la caja se va por el lado contrario al que entró, o por cualquier otro. En una cadena, activa Invert en ese mismo instante y las cajas saldrán en el orden inverso al de entrada, de forma que unas no tapan del todo a las otras. Y Closing Animation te da la forma negativa: en lugar de una caja que crece, un hueco que se cierra y se abre.

A box doesn’t just come in: it also leaves. With Motion going back to 0 the box shrinks, and since Origin accepts keyframes, if you set a hold keyframe right when the exit starts, the box leaves through the opposite side to the one it came in from, or through any other. In a chain, turn Invert on at that very moment and the boxes will leave in the reverse order of their entry, so they never completely cover one another. And Closing Animation gives you the negative form: instead of a box that grows, a hole that closes and opens.

El panel de la caja maestra

The master box panel

Aquí tienes los 31 controles reales de la caja maestra, organizados por función, y los 24 que lleva cada caja seguidora.

Here are the 31 real controls on the master box, grouped by function, and the 24 that each follower box carries.

Y si solo necesitas una caja

And if you only need one box

La composición Wipe Box (la simple y básica, y la que da nombre a todo el proyecto) es la misma lógica reducida a una caja con sus 26 controles, sin cadena ni nombres de capa que respetar. Es la opción para cuando solo necesitas una caja: un rótulo, una barra o un fondo.

The Wipe Box composition (the simple, basic one, which gives the whole project its name) is the same logic reduced to a single box with its 26 controls, with no chain and no layer names to respect. It’s the option for when you only need one box: a title, a bar or a background.

Transiciones a pantalla completa

Full-screen transitions

Una transición es una caja que ocupa siempre el tamaño completo de la composición, y en Wipe Box se consigue con una casilla: Full screen. Width y Height dejan de contar, pero los radios, los biseles, el skew y el resto de controles siguen funcionando. Si inclinas la caja con Skew, se agranda sola lo justo para que la inclinación no deje huecos en los bordes, y Add Width y Add Height te permiten compensar a mano.

A transition is a box that always takes up the full size of the composition, and in Wipe Box you get it with one checkbox: Full screen. Width and Height stop counting, but the radii, the bevels, the skew and every other control keep working. If you slant the box with Skew, it grows by itself just enough for the slant not to leave gaps at the edges, and Add Width and Add Height let you compensate by hand.

En una cadena la activas en la maestra y todas las hojas la heredan. Con Offset, cada hoja se encoge o se agranda alrededor de su contorno, y así puede dejar ver un marco de la anterior. Con Invert en la salida, las hojas se retiran en orden inverso, como en las cajas.

In a chain you turn it on in the master and every sheet inherits it. With Offset, each sheet shrinks or grows around its outline, so it can leave a frame of the previous one showing. With Invert on the exit, the sheets pull back in reverse order, as in the boxes.

Versión radial

The radial version

La misma filosofía, con círculos en lugar de rectángulos. Radial Box es un círculo con 9 controles y Radial MultiBox una cadena de ellos: una maestra, MASTER_RAD_1, con 14, y los círculos concéntricos RAD_1_1, RAD_1_2… con 9. Siguen a la maestra igual que las cajas (Motion Delay, Invert, Shift y Offset, aquí Add Offset). Los diámetros se gobiernan con Initial Diameter y Final Diameter; con Full screen el círculo crece hasta cubrir siempre el encuadre, y Add Initial y Add Final ajustan su tamaño al empezar y al terminar.

The same philosophy, with circles instead of rectangles. Radial Box is one circle with 9 controls and Radial MultiBox a chain of them: a master, MASTER_RAD_1, with 14, and the concentric circles RAD_1_1, RAD_1_2… with 9. They follow the master just like the boxes (Motion Delay, Invert, Shift and Offset, here Add Offset). The diameters are driven by Initial Diameter and Final Diameter; with Full screen the circle grows until it always covers the frame, and Add Initial and Add Final adjust its size at the start and at the end.

El centro de los círculos es la posición de la capa maestra, así que puedes hacer nacer la transición del centro, de cualquier coordenada o de una esquina. Si colocas el centro fuera del encuadre solo verás un arco que cruza la pantalla, y con Add Initial a 0 el círculo nace y termina exactamente en el lado o esquina más cercanos al centro. Con Closing Animation, igual que en las cajas, el círculo se convierte en un hueco que se cierra de afuera hacia dentro: la misma transición, a la inversa.

The center of the circles is the position of the master layer, so you can make the transition start in the center, at any coordinate or in a corner. If you place the center outside the frame, you’ll only see an arc sweeping across the screen, and with Add Initial at 0 the circle starts and ends exactly at the side or corner closest to the center. With Closing Animation, as in the boxes, the circle becomes a hole that closes from the outside in: the same transition, in reverse.

"Un rectángulo que puede convertirse en una danza con los controles apropiados."

"A rectangle that may turn into a dance with the right controls."