Mixing Animation and Reality (Adobe Character Animator Tutorial)

One of the more helpful parts of Adobe Character Animator is how easily it links up with applications you might already know how to use. Instead of learning a new drawing tool, you can use Adobe Photoshop or Illustrator to create your characters. Instead of learning a new editing or compositing tool, you can dynamic link your projects to Adobe Premiere Pro or After Effects. And that’s exactly what I did in a recent video called Extraneous Lyrics 2019. I made a cartoon guitar playing version of m

yself and added it over top of live action video. Some of these are simple static shots where the camera or character don’t move, but the majority of them do have a moving camera. And sometimes the character walks through the scene, including a moving shadow. So in this tutorial we’re going to cover the basics of how to add a Character Animator cartoon over top of existing footage using Premiere Pro and After Effects. I started with recording the animation for my character, Linden, who is a free

downloadable puppet on the Okaysamurai Puppet Page. I made two versions of the puppet - a stationary and walking version. While it’s entirely possible to just make one puppet with standing and walking states, I found that having two versions was easier to manage overall. I always start with the stationary character. I put him in a square scene with enough room around him so he wouldn’t clip off the edges - remember, you can adjust scene settings by selecting the scene in the Project panel and t

yping in new values in the right properties. For Extraneous Lyrics, I recorded and mixed all of the music in GarageBand, but you could use any audio program that you feel comfortable with. Once I was done, I soloed out the vocal tracks and disabled any extra effects to get a clear, raw audio signal to drive my lip sync. I exported this audio file as my main lip sync track, and then exported a full copy of the final mix with all the instruments as well. In Character Animator, I went to File > Imp

ort, and imported both of the audio tracks. Then I dragged the vocal only version into the scene and did Timeline > Compute Lip Sync Take From Scene Audio to automatically add all the lip sync data. Once that was rendered, I deleted the vocal track and replaced it with the full mix track. Because I didn’t change the timing at all, everything lines up exactly as I’d expect. The first recording I did was arming the Dragger and Triggers behaviors to deal with the arms playing the guitar. To get the

strumming to line up correctly, I clicked the number next to the red recording dot and went for half speed slow motion recording. This let me record much easier, reacting to the guitar strums at a slower speed. When I played it back, the strums looked natural and in sync with the music. As someone who has tried to keyframe arm motions like this before in After Effects, this was a significantly faster and more efficient way to achieve this type of movement. For the chords, I set up Replays for s

everal arm positions and triggered hands, and then added them into a Swap Set so I could easily switch between them. So when I press Q, W, E, R and T, Linden moves between the different chords. If you just arm Dragger, you’ll see that the left arm is just the arm and hand with the guitar neck sandwiched in between them. So to make a system like this, let’s say I deleted the current Strum Chords swap set group and started fresh. I would arm the Dragger and Triggers behaviors, drag the hand to whe

re I wanted it, and click a hand trigger (either the default or the 5 or 6 keys) to change the finger position. I would then go to Timeline > Record 2 Frame Take to get a short recording, drag the edges out to get a little more space to work with, and blend the Dragger in and out points, with a quicker blend for the front. I would then select both the dragger and trigger takes, right click the dragger take, and create a new Replay and Trigger. I would then change it to end with a stop/sustain an

d latch the accompanying trigger. So I could just continue this process for several chords until I have a small library of different positions. Then I’d create a new swap set, put them all in there, and set one as the default. Now I have a simple system where I can press keys to trigger each chord instead of having to animate each change individually. So I’d do another slow-motion recording take and time the chord changes to the music. Combined with the strumming arm, this creates the effect of

playing music. By the way, if this Replays music concept is familiar, it’s because I did something similar for the Drumbot example when we introduced triggerable audio. Each drum hit was also its own replay. When you create arm systems like this, you can very easily move between several key poses or expressions and make a very accessible, dynamic character. I kept arming and recording parts one by one: the head movements, the pupils, and the eye and mouth triggers, until I had a full performance

. There are 6 songs in Extraneous Lyrics 2019, so I set up each in a different location. I just used my iPhone with a small grip tripod, and filmed a variety of static and moving shots, roughly imagining where the character would be in each. I didn’t have a storyboard - I just filmed 25 shots or so at each location to give me a wide variety of potential content to work with. Ideally you also want to aim for shooting at the same framerate as your Character Animator project, which in this case I h

ad set to 24 frames per second. I imported all the video clips into Premiere, as well as the final mix of the audio track. Then I made a sequence where I edited the empty shots together, knowing I would be adding the character and lyrics later in After Effects. Now if you only have static shots and wants to keep things simple, you could bypass After Effects entirely and do your compositing in Premiere Pro. When you import a Character Animator project, or chproj file into Premiere, you’ll see the

dynamic link window appear with all the available scenes at your disposal. You can select the right one and it will show up as a new asset, as if it were another piece of footage. Just drag it in a track over your timeline and you now have a character that you can easily reposition to fit into the scene. Because the character and this edited timeline are both using the same audio track to set all their timings, it’s easy to line them up, and then mute one of them so you’re not doubling the soun

d. When the scene changes, you can split the Character Animator scene and readjust to a new position. But for anything more complicated, you probably want to move into After Effects for more compositing options. In After Effects, first I imported my Premiere Pro file to link it, and put it into a new composition. Then I imported my Character Animator project file and added my scene into the timeline. Whenever a scene change happened, I split my character into a new track (Edit > Split Layer), so

each instance of him would be able to move on its own. For moving shots, I left the area blank to fill in with the walking version later. To connect the character to the environments more, I did a few extra tricks. First, with my character selected I went to Effect > Color Correction > Hue & Saturation, and adjusted the saturation of that character until it felt like it fit the scene better, like the colors matched a little more. This is the cheap and easy way to do this sort of thing. Another

is to go into Color Corrections Levels,and isolate a Red, green, or blue channel both in the effect level via the dropdown menu, and the composition by the colored circles at the bottom. Then you adjust the sliders until it feels like the blacks, whites, and greys feel like they match. Doing this for each of the three RGB colors means the final result should look more like a match. I usually went the desaturation route, but this method was helpful for a few shots. Then you’ve got the shadow. Thi

s is simple - just select an instance of your character, go to Edit > Duplicate, and then rescale and reposition the bottom track until it seems like where a shadow would be. You can also use the puppet pin tool to distort the shadow a little bit if need be. Then go to Effects > Color Correction > Curves, and drag the light grey curve all the way to the bottom right to make this layer black. Press T to adjust the transparency to blend it into the scene a little more, and consider adding an Effec

t > Blur & Sharpen > Fast Box Blur to soften the edges a bit. By the way, depending on the complexity of your piece and computer specs, sometimes having all this stuff moving at once can go a little slow. I always adjust the Preview settings to skip frames and run at a lower resolution to keep things a little speedier. To add some more dynamic movement to the whole piece, I also included several moving shots where either the character was static and the camera was moving, or the character was wa

lking through a moving scene. For these scenes, I used motion tracking. When I found a scene I liked, I split it into its own track. I then added a new Null Layer, and attached my Character Animator character and to it with the pickwhip tool. Since I have a shadow layer too, I connected that to my character as well. This way I now had one master control for all my character elements - moving the Null moves both the character and his shadow. I then kept the playhead at the start of the scene, ope

ned up the Tracker panel. and chose Track Motion. This zooms in and gives you a little tracker square to manipulate. Now you have to look for a spot that doesn’t move too wildly and is on the same general plane as your character. So for example, if I want my character to be standing on the rock in this scene, I want to track part of the rock, not the leaves in the background or somewhere else that might be moving at a different rate. This little spot looks pretty clear, so I’ll move the tracker

over top of it and click the Analyze Frame Forward button to move one frame ahead. Ideally the tracker will keep up and move automatically with the spot, but if it doesn’t, you can manually adjust it by dragging it into place yourself. Then repeat until you’ve gotten through the entire scene. If you have a good tracking spot you can press Analyze Forward and it will try to automatically add all the tracking data for you. When you’re done, click Edit Target and choose the Null layer that you link

ed the character to. This means you’ll be applying the tracking data to the null, and the character and shadow should follow it. Click Apply, click OK, and check out the end result. All that position data is now keyframed into your Null layer, and your character will move around and follow it. You can select your character track and reposition them to get the perfect placement. If you did this all correctly, you should see your character moving realistically along with the camera. You might have

noticed that I also have a few shots where the character scales to be bigger or smaller as the camera zooms in and out. The motion tracker does have a checkbox for scale, where you can get two tracking squares to measure how the distance between them changes and scale things up or down accordingly. You could try using this, or just scale your character up and down manually in the timeline. If you have more complicated shots that involve more camera depth, you might want to use the camera tracke

r instead. This analyzes the scene and adds many little tracking points. You can then set down a target plane between several points, right-click and add a new null layer that you can also attach characters to just like we did with the simpler motion tracker. Now let’s tackle those walking shots. Back in Character Animator, I’m going to go to File > Save Project As to save a new version of my project. That way I have all the lip sync and animations I’ve already done, but now I can re-rig the cha

racter for walking. First I’ll select the scene and adjust it to be as wide as I can make it, giving the character a long, narrow walkway to move through. In Rig mode, I’ll dig into the character and get him ready for walking. You can watch the Walking tutorial on this channel if you need a refresher on how to do this, or check out the example walking Linden puppet to see exactly what you need. Linden already has most of the necessary tags, so I only need to do a few things: 1) add the Walk beha

vior to his top level, 2) remove any fixed handles or sticks from his Body group that would keep him pinned to the ground, and 3) make the legs independent so they can move on their own. Going back to the scene, I now want to set Walk’s mode to position based. This lets me set keyframes in the timeline for where I want him to go. So I’ll start at the beginning of the timeline, click the stopwatch next to Position, and drag over the blue numbers until Linden is all the way on the far right side.

Then I’ll move down the timeline a little bit and adjust the position parameter so he’s all the way on the left side of the scene. Then I’ll play it back and see if the speed feels right - if it doesn’t, I’ll just adjust the second keyframe until I get something that looks good. Once I’m happy with it, I’ll select the two keyframes and keep copying and pasting them for the remainder of the timeline. So there will always be a second or so where Linden is zipping back from the end position to his

start position. You don’t want this happening in the middle of a walking shot, so I tried to reposition the keyframes if need be so this transition would only happen when a stationary shot was happening instead. Then I just import my walking project and scene into After Effects, and use the same techniques we already did for static or tracked moving shots to place the character into the scene. I start by splitting out the parts of the puppet where he walks so I have several isolated tracks, dele

ting the ones I don’t need to use, and reposition the character accordingly. When you combine motion tracked shots with a walking character and a shadow below, it makes for a really nice final effect. So there you have it - a music video with a guitar playing cartoon character placed into real world settings. If you make something cool using these techniques, we’d love to see it - please use #CharacterAnimator on social media and we’ll take a look. And if you ran into any issues during this tuto

rial or any other problems while making your own characters, the best place for help is the official Character Animator forums. Thanks for watching, and have fun.