How I Made This Complex Animation, Part 2
Building the Animation from the Ground Up
In part 1 of this series, I was showing how I developed the first concepts and the animatic for this scene:
In this part, I will focus on getting into the nitty-gritty detail of how it all came together. How I designed the level, planned out the running, and framed the shot before moving on to the hand-drawn animation.
Building the Level
From the last feedback, I knew that I had to build a level that would create a more challenging run. With longer jumps, and more up and down movement
First, I created a huge new composition in After Effects that would contain the entire level. I had to expand it a couple of times to find the right size. I ended up with a size of 7000x2160px. The person needs to run from left to right, therefore the width needs to accommodate for that movement.
I quickly blocked out a layout with a desired run path. Here’s how that looked:
While blocking out the level I was getting additional ideas to include. That’s when I added the power-up and the trampoline block. The power-up would be something to “recharge” the energy of the runner. The only things that came to mind were either an energy drink or a coffee. The trampoline would allow bringing extra verticality to the scene, by jumping higher than usual.
Building the Windows
Once, that initial idea was settled, it was time to fill the level with content. Each one of these blocks should be some kind of browser or app window. Fortunately, I already built most of these windows for a prior scene. But I still don’t want to withhold how I build it from you, because I used some novel techniques.
I knew from the start when I made the storyboard that this animation will have many windows. Different windows, with different shapes and sizes.
Instead of building every window from scratch, I decided this time to build a “master” window that could be re-used, re-colored, and re-configured in every way I want. A setup I could not only use for this project but for future projects.
It required me to get into engineering mode and write an orchestration of little scripts for a bunch of parameters to make the windows dynamically adjustable to any size, color, and style!
The effort was worth it. Ultimately, it allowed me to build each window frame very quickly.
One window to rule them all. The Lord of all Windows. (Man, I wish I came up with this name before I called it FRAMEME.)
💡 After I finished this project I thought this can benefit others, too. I made it even more flexible and released it as a template called Frameme, and you can get it here!
This solved the problem of making empty windows.
Filling the Windows
Now I also needed to fill these empty windows with content!
Everyone who worked with After Effects before knows how painful it is to work with shape layers. Especially, if you have multiple shape layers and want to edit them quickly, move them around, resize and rearrange them. After Effects will frustrate you to no end.
One solution I used in the past, Overlord, allows you to design in Illustrator and send stuff over to After Effects with a click of a button!
But, I also despise Illustrator when it comes to designing user interfaces (UI). It’s waaaay too cluttered with tools I don’t need, takes forever to start up, it’s slow, and the tools I need are not as straightforward to use.
FIGMA enters the stage. **CHEERS & APPLAUSE**
Figma on the other hand is the perfect tool for screen design. It’s built from the ground up for User Interface design and something that allows me to build fast. Previously I used Figma in tandem with After Effects already. I exported high-res PNGs and imported them into After Effects. That’s not ideal.
Don’t worry, I found a solution! — AEUX is a tool by the maker of Overlord that allows sending designs over from Figma to AE.
And it’s FREE 🎉 — (Get AEUX here)!
Now with that in mind, I happily proceeded to build out all these simplified user interfaces in Figma! They all represented tools that a data or analytics engineer would use, like a code editor, Google Docs, a version control system, a terminal, a chat application like Slack…
Now I could insert all these windows into my level.
Creating a Reference Run
The next thing I wanted to figure out was the timing of the run. How fast is it going to go, and what is the timing of the jumps?
For that, I would again just use a normal circle to represent the character and animate its position property.
The first thing I did is to “separate dimensions” for the position. It is much easier to animate the jump independently from the running forward.
So I figured out a normal-looking movement speed first and animated the x-axis. I would, later on, tweak it whenever the character needed to slow down or accelerate. But it’s nice to have a baseline.
Then I would go in and animate each jump independently so it would make a nice curve each time the character goes up and down.
To make this much faster, I use “Motion Tools”. It allows to set specific easings for the keyframes very fast. I have created an entire article just focusing on other After Effects plugins that make me more efficient here:
To get a nice curve when animating a jump you want to ease-in on the way up, and ease-out on the way down. That means it starts out fast on the way up, then gravity slows you down, and finally, you start accelerating back downwards landing very fast again. As long as you keep this in mind, your jumps will feel nice and create a bell shape like in the screenshot above.
It was also the first time I used the color label feature of After Effects and gave each of my jumps a different color. That made it later easier to tell them apart in the timeline.
Jump to the Beat
Making the jumps to the beat was not 100% necessary, but every video flows better when things happen in sync with the music. That’s why I try to time the jumps also on the beat, or very close.
In the past, I used to do this manually by calculating the exact frames when a beat would occur from the BPM (beats per minute) of the song. That’s very cumbersome, especially for long videos.
But a while ago I discovered BEATGRID. That’s another FREE life-saver. It creates a reference track for you, with keyframes where the beats are.
With this reference track I just needed to move my jumping off, or sometimes landing keyframes close to the beat and voila, we have an animation that works with the music!
Camera Movement
Now we have animated a reference for the run, but it would look dull to just show the entire level at once. We need that side-scrolling action!
So there is no traditional camera here. Instead, I just make a new composition that is the size of my final video 1920x1080. Into this new “parent” composition, I insert now the “level” composition. Obviously, it doesn’t completely fit in, since it’s huge.
But we can move it into the frame via the animation of the position property. And that’s what I did.
Again, I separated the dimensions, because again I want to animate x independently from the y. I also want to pan the camera together with the running. Therefore I copied the x-keyframes from our ball character and pasted them onto the level instance in the parent composition.
There is only one problem, it moves in the opposite direction. So I needed to flip the direction of the animation. I did it manually, there were not that many keyframes, fortunately.
The y-animation, on the other hand, I animated manually. The camera does not need to move up and down that much on every jump.
Now I created enough reference to go in and animate an actual running character…
That’s what I will dive into in PART 3!
You can look forward to seeing how I
- designed the character
- animated the run frame-by-frame, from rough to polished
- did additional juicy bounce animations in the scene!
- animated the background
Don’t miss it and subscribe to 👇
