Categories
Quick Reviews

Quick Review: Previewing Compositions

Buffering…

There are actually several different ways of previewing the project you are working on in After Effects.  The Preview window contains lots of options, which may be hidden until you expand the panel to its full dimensions.  By default, there are three basic methods of previewing your composition, each of which can be further customized.  Note that these may change slightly from version to version of After Effects, but they can always be customized in the Preview panel.

Pressing the space bar will preview your composition without cacheing the frames first.  This means that After Effects will attempt to play what you are working on in real time, as best it can.  If you have a fast computer or a simple composition, this may work fine.  However, your playback may start to slow down or stutter.

Pressing the zero key on your number pad will cache the frames in your composition before playing them back.  This is called a RAM preview – essentially, After Effects is temporarily rendering your composition before playing it back.  You may have noticed a green line near the top of the timeline panel.  Areas that are green have been cached and should play back relatively smoothly.  When you press the zero key, that green line will gradually fill up.  When it fills the timeline – or when you press zero again – the preview will play.  Note that you must press the zero key on the number pad for a RAM preview – not the zero key in the numbers along the top of the keyboard.

The last type of preview is an audio preview, which is fairly self-explanatory.  You activate an audio preview by pressing the period key on the number pad (again, it must be the one on the number pad).  This will play only the audio in a composition – no video.  When doing an audio preview, you may find it helpful to see a waveform of the audio being played.  To do this, simply highlight a layer in the timeline with audio and press twice quickly.

One nice thing about the bevy of preview options in After Effects is that you can really customize how they operate.  In the preview panel, you’ll find options for resolution, sound, looping, and much more.  You can choose whether the preview plays from the beginning of the composition or from wherever the playhead is.  If you always want your preview to play in full screen mode, there is an option for that.  Because previewing footage in After Effects is so intensive, it’s extremely helpful to have these options.

Categories
Blog Posts

Fleischer Studio’s Superman

The Animated Man of Steel

Before any live-action adaptations were created, the Superman character was adapted into a ground-breaking animation by Max Fleischer and his studio.  Fleischer’s Superman was meticulously – and brilliantly – animated with a level of precision that we rarely see in hand-drawn animation.  In addition to being an artistic achievement in its own right, Fleischer’s Superman cartoons also helped shape the iconic hero’s mythology – notably, Superman’s ability to fly.  Check out this video essay by kaptainkristian as well as some of the original episodes below.

https://youtu.be/sjdnCC6n4xk

https://youtu.be/DadH3KjHZws

https://youtu.be/J5M1A_OQaaM

Categories
Weekly Lessons

Week 9: Character Design and Creation

Creating Characters

There isn’t really a right or wrong way to design a character; the kinds of characters you choose to make is ultimately a matter of artistic preference.  We can, however, learn a lot by listening to the advice of other artists and animators.  In his book Making Comics, Scott McCloud suggests that there are three qualities that a successful character must possess: an inner life, visual distinction, and expressive traits.  Without these qualities, a character might be confusing, flat, or – worst of all – forgettable.

A character’s inner life relates to their “unique history, worldview and desires.”  This includes a character’s backstory, personality, archetype, and more.  Visual distinction means that a character has” a distinct and memorable body, face, and wardrobe.”  This has to do with a character’s physical characteristics.  Expressive traits are “traits of speech and behavior associated with that character.”  A character’s expressive traits are what make them move and speak in a unique and interesting way – this could include posture, body language, facial expressions, and more.

Backstory

In order to be successful, even a very simple character should have a backstory.  While you certainly don’t need to know every detail of a character’s life history – McCloud writes that “obsessing too much over such details is a classic beginner’s mistake” – you should certainly have a sense of a character’s personal identity.

Some characters are defined by specific moments in their history.  Superhero stories often utilize moments like this – think about the origin stories of Spiderman and Batman.  Other characters are defined by their desires – something that motivates them and causes narrative conflict.  Every character in The Wizard of Oz has a clear desire that motivates their actions.  Still other characters fit into certain archetypes.  Star Wars makes great use of archetypal characters: the naive hero beginning a quest, the lovable rogue, the princess, the wise old man, etc.  Your characters can be defined by their history, their desires, their archetype, or some combination thereof – the important thing is that you know and understand them.

Shape and Silhouette

Matt Groening, the creator of The Simpsons and Futurama has a theory of good character design that has helped him create some of the most iconic characters in the history of animation.  “The secret of designing cartoon characters — and I’m giving away this secret now to all of you out there — is: you make a character that you can tell who it is in silhouette. I learned this from watching Mickey Mouse as a kid. You can tell Mickey Mouse from a mile away…those two big ears. Same thing with Popeye, same thing with Batman. And so, if you look at the Simpsons, they’re all identifiable in silhouette. Bart with the picket fence hair, Marge with the beehive, and Homer with the two little hairs, and all the rest. So…I think about hair quite a lot.”

One way to give a character a distinctive silhouette is by using basic shapes as a starting point.  By using a square, circle, or triangle as a starting point, you can give your character a unique look that is easily recognizable.  Of course, you can – and should – elaborate on these basic shapes, but they can be a great starting point.

Shapes can also tell the audience a great deal about a character’s personality.  Think about Ellie and Carl in the Pixar film Up – everything about Carl is square and blocky, which makes him seem gruff and serious.  Ellie is made up of curved lines and circles, so she seems free-spirited and whimsical by comparison.

I’d also suggest using lots of reference images when you’re designing your characters.  Don’t feel like you can only draw from your own imagination –there is absolutely nothing wrong with using other images, or even other artists’ characters, as a point of inspiration. Just be sure that you make the finished character your own.

Body Language and Speech

Does your character slouch or stand up straight?  Do they fidget?  Walk with a limp?  Speak with an accent or use particular idioms?  These are some of what McCloud calls “expressive traits.”  Whereas visual distinction has to do with physical appearance, expressive traits are related to what your character does.

Japanese animation legend Hayao Miyazaki does a masterful job of using physicality to reveal aspects of a character to the audience.  In My Neighbor Totoro, older sister Satsuki is graceful and precise while younger sister Mei is comparatively clumsy.  The way each character moves tells the audience about their age, personality, and relationship to each other.  Satsuki flits across the screen while Mei crashes after her.

McCloud suggests defining key poses or facial expressions for your characters.  These are physical cues unique to each character.  It could be the way someone cocks their head to the side, or leans against a doorframe, or looks over the tops of their glasses.  As the audience gets to know your character, these key actions will become associated with their respective characters and help make them seem more rounded and alive.

You can also use expressive traits to play against a character’s physical appearance.  A hulking, brutish looking character could tiptoe fearfully or a meek-looking character could pose heroically.  There are endless options.

Designing for Animation

We’re not going to dive too deeply into how to use programs like Photoshop and Illustrator, but there are some things to keep in mind.  First, remember the abilities and limitations of After Effects when you are creating your character.  We’ll be animating using keyframed transform properties like rotation and position as well as puppet pin deformation.  This gives us a lot of flexibility, but it also means that some things are more difficult to animate than others.  Wild, elaborate hair, for example and flowing fabric will be challenging to animate in After Effects.  That said, you can often find creative solutions to such problems, so don’t sacrifice your vision.

Second, remember to think in layers.  When a Photoshop or Illustrator file is imported, we can retain the layer structure.  If you want something to move independently, put it on its own layer.  As a very general guideline, a good layer breakdown might include the head, facial features, torso, hips, upper and lower arms, hands, upper and lower legs, and feet.  The more elaborate and detailed your character is, the more layers you’ll have to create (and eventually animate).

Finally, think about how your character is going to appear in the animation you will eventually be creating.  If your character is only ever going to appear from the front, you might only need a frontal view – but if your character is going to be seen from the side, behind, or above, you’ll need to create those views as well.  Also think about how closely you’ll be seeing your character on screen.  While Illustrator files can be scaled up without distorting, Photoshop files will pixelate if you zoom in too far.  If you’re creating your character in Photoshop, make them big enough to be usable, or create multiple versions at different resolutions.

Drawing Inside After Effects

After Effects does not have the same breadth of drawing tools that dedicated programs like Photoshop, Sketchbook, Gimp, or Illustrator do.  However, its tools are robust enough to be used in certain situations and animation styles.  After Effects’ shape tools allow you to control the path, fill, and stroke of shapes, so it’s fairly easy to create relatively simple characters directly within the program.

There are some distinct benefits to building your puppet within After Effects.  For one, since shapes in After Effects are vector-based, they can be scaled up infinitely with no loss in quality.  Creating your puppet within After Effects also means that you have one less file to keep track of and you don’t need to “round-trip” between After Effects and another program to make changes.  Finally, creating a puppet within After Effects lets you keyframe and control aspects of the character in unique ways; for example, you could keyframe the path of a shape or the thickness of its stroke.  That kind of direct control is only possible when creating characters directly within After Effects.

The biggest downside to drawing your puppet within After Effects is that you just don’t have as many options at your disposal.  After Effects is not really a drawing program, so its interface and toolset aren’t designed around that purpose.  That being said, there is still a lot of latitude within the program and you shouldn’t discount it as a possibility.

If you want to use this method, I’d suggest starting with a sketch and then importing it into After Effects.  You can then use the pen and shape tools to trace the sketch in After Effects.  Note that you can actually have multiple shapes – with different fills, strokes, and paths – on the same shape layer, which can help keep your composition a bit more manageable.  However, every part of your puppet that needs to move independently should be on its own layer.

Talented (and profane) animator Ross Plaskow utilizes this method in some of his animation tutorials.

https://youtu.be/fXL9bVnX8fU

Using Photoshop

Photoshop’s biggest asset is probably its ability to modify and utilize other images.  Images can be distorted, manipulated, and combined in very interesting ways.  Photoshop also has very advanced drawing tools – if you are an artist with a traditional drawing background, using Photoshop and a pen tablet may be an easy transition for you.

Photoshop is very well suited for creating characters with texture, shading, and rough edges.  If you want your character to have a hand-drawn look, Photoshop is probably your best choice.  It’s also a great tool for collaging or importing your own artwork.  If you aren’t comfortable drawing digitally, one option is to draw your character by hand, scan it, then separate the layers in Photoshop.

Layers are one thing you’ll need to be mindful of regardless of the method you choose to make your character.  Think about how you want your character to move and let that dictate the structure of your character.  If your character has a long flowing scarf, for instance, that scarf should probably be on its own layer.  Other objects that don’t need to move independently (such as the buttons on a character’s jacket) can be combined with other layers.

Another thing you’ll need to consider regardless of your method is the way that layers overlap and interact with each other.  In Plaskow’s tutorial above, he mentions that overlapping body parts should have curved ends.  This allows two layers – for example, the upper and lower arm, which meet at the elbow – to rotate around each other without creating strange blocky shapes.  Of course, if you plan on animating parts of your character using puppet pins, they will be set up differently.  Keep the way your character is supposed to move in mind as you draw them out.

One thing you’ll want to be sure of when drawing in Photoshop is that the background behind your character is transparent.  By default, Photoshop makes a white base layer, so you may need to delete this.

One nice feature about Photoshop and Illustrator files is that you can turn off the visibility for layers.  The layer will still be there when you import the file into After Effects and you can re-enable its visibility.  So, if you want to draw multiple mouths or eyes for your character, you can make them in the same Photoshop file and simply hide the layers.

Another nice feature of working in Adobe software is that you can continue to update your file even after it’s imported into After Effects.  You need to be careful not to change the overall file structure, but you can continue to make alterations right up until you render your finished video.

Overall, Photoshop is a great tool for puppet creation.  The major downside is that the files you create will eventually become pixelated and distorted as you zoom in on them.  If you keep this limitation in mind, you can use it to make almost anything.

Using Illustrator

While Illustrator and Photoshop have similar toolsets and interfaces, they “feel” different in practice.  You can import still images into Illustrator, just like in Photoshop, but the program is really designed around drawing with curves.  You can create gradients and patterns, but you won’t get the same textural results that you do in Photoshop.  Characters created in Illustrator tend to have clean lines, uniform colors, and be composed of relatively simple shapes.

When working in Illustrator, you can actually have multiple groups of shapes within each layer.  When you import the file in After Effects, only the top-level layers will be recognized, so group your shapes accordingly.

Remember to name your layers as you go.  If your puppet has its right eye and left eye on separate layers, name them accordingly.  It’s going to be a frustrating process if you import your character into After Effects and see “Layer 1, Layer 2, Layer 2 copy,” etc.

The benefit of using Illustrator is that you have access to a very full-featured tool for creating layered vector artwork – artwork that can be scaled up as much as you want without becoming pixelated.  The downside is that most Illustrator art tends to be fairly simplistic in terms of color and shape.  If you like a simple aesthetic, however, it’s probably a good choice.

Designing a memorable, well-realized character is challenging, but it can also be a lot of fun.  If you find yourself getting stuck, pick a theme or point of inspiration and start elaborating on it.  If you give your character a personal history, a unique look with a recognizable silhouette, and a style of movement and speech that fits their personality, your character will come to life in exciting ways.

Project 9: Make A Friend

Your assignment this week is to create the character you’re going to use for your final project.  If you haven’t already done so, review the details of the final.  Your character may change a bit by the time the final is actually due and that’s fine – but this should serve as your first pass at designing your lead character.

Your character may be human, animal, an inanimate object, or whatever you like.  You can create it using Photoshop, Illustrator, directly within After Effects, or by hand.  If you choose to draw or paint your character, you should scan it and separate the different layers in Photoshop.

If you aren’t comfortable drawing, you can also create a character by “collaging” in Photoshop – find images of the different parts of your character and assemble them together in the software.  If you take this approach, you will probably have to do a lot of erasing and clone-stamping to get everything to fit together.  I’d ask that you either heavily modify any source images that you use or use images that are “labeled for reuse” in the search tools of Google Images.  You could also take photos yourself.

For some examples, you can either review the files from last week or check out these two skeletons: one created in Illustrator and one created in Photoshop.  Your characters do not need to have as many layers and parts as these; again, think about what your character needs to do and how complex it should be.

However you choose to create it, make sure that it is ready to animate next week!  Send me an image of your character before class.

Categories
Projects

Project 8: Bring a Character to Life

Max

Mike

Dante

Brian

Jon

Categories
Class Business

Final Project Details: Cause and Effect

Start Thinking About the Final

At this point in the semester, you should be fairly comfortable using After Effects.  There’s still a lot of new ground to cover, but you should have a good grasp of the basics.  If you’re still struggling, send me an email at dan014@bucknell.edu and we can schedule a review session.  Everything from this point forward is going to be building on the previous lessons and moving towards the final project.

Your final project is going to be an animated short film, based on the theme “cause and effect.”  You can interpret that theme in any way you like; it’s just meant to be a jumping-off point.  This week, you’ll be designing the main character for your film.  You can start working on your final now, if you like; we’ll touch base on the project again during class in mid-November.

Here are the project details:

  • An animated short film based on the theme of “cause and effect.”
  • It should utilize character animation, involving the character you design in class.
  • It should showcase the skills and techniques you’ve been learning throughout the semester.
  • Between 30 and 90 seconds in length.
  • Any music used should be royalty-free or used with permission.  Check out the “resources” section for some useful sites.
  • The resolution and frame rate should be 1920 by 1080, 24 frames-per-second.
  • It should be exported as a QuickTime movie using the H.264 codec.

That’s it!  I’ve deliberately kept the parameters of the assignment pretty open-ended, so that you have room to interpret things creatively.  For example, you could film a real background and place your animated character into it; or create everything in Photoshop and Illustrator; or draw things by hand, scan them, and import them into After Effects.  Your project could have several characters or just one.  It can be comedic, dramatic, abstract, or scary.

Take some time to think about what kind of project you’d like to take away from this class.  This is a great chance to make something that you can submit to film festivals or share online – if your film turns out well, it can also play at the student showcase at the Campus Theatre!  If you’ve never seen your work projected on the big screen, it’s an extremely cool experience.

Final Project Schedule

October 19 – Project details given, character design is assigned
November 16 – Project check-in, discuss progress in class
November 30 – In-class work time, troubleshooting
December 7 – Final project is due, in-class review and critiques

Grade Breakdown

30 pts. – Creativity and use of theme
30 pts. – Technical proficiency
20 pts. – Meeting project requirements
10 pts. – Formatted and exported correctly
10 pts. – Turned in on time

100 points total

 

 

Categories
Quick Reviews

Quick Review: Exporting Projects

Exporting

The process of turning your After Effects composition into a finished video can be a little confusing.  Let’s quickly review the process.

Your first step should be trimming the timeline so that only the section you want will be exported.  When you create a new composition, you are asked to define its length, but if you need to change its length, you can do so by going  to  Composition>Composition Settings… or using the Cmd+K keyboard shortcut.  Changing the duration in the composition settings window that appears will either add or subtract time from the end of the composition.  However, you can also trim the composition down from within the timeline panel.

At the beginning and end of the timeline, you’ll find blue handles – these define the “work area.”  (There are actually two sets of blue handles – the smaller ones can be used to zoom the view of the timeline in and out.)  You can think of the work area handles as After Effects’ equivalent of an in and out point.  If you drag the work area handles to the section of the timeline you want to keep, then right-click on the lighter area directly between them, you’ll see a few options appear.  Select “Trim Comp to Work Area” to remove everything outside the handles and shorten the length of the composition.  However, even if you don’t want to trim the comp down, you should use the blue handles to choose the area you want to export.

Once you have your work area defined, you should export your composition using the Render Queue.  The Render Queue exists as a panel in After Effects – it may show up as a tab next to the compositions in the timeline (otherwise, you can always find it under the Window dropdown at the top of the screen).

To add a composition to the Render Queue, open the composition in the timeline, then go to Composition>Add to Render Queue.  The name of the composition should then appear in the Render Queue panel.  Before you hit the “Render” button, you’ll need to set a few parameters.  Unless something has been changed, everything in the Render Settings section should be fine at the default values.  The Output Module is where you actually make changes to the file type and codec, so click on that to bring up a window with lots of options.  For our purposes, just click on “Format Options…” and change the video codec to H.264.  Click OK to close each window.  Finally, set the file’s destination by clicking on the text next to “Output To:”.

So, to recap: start by defining the work area you want to export in your composition, then go to Composition>Add to Render Queue from the top menu, click on the word “Lossless” next to “Output Module”, choose QuickTime as the format, click “Format Options…” and choose H.264.  Click “OK” on the two open windows to get back to the Render Queue, click on the blue text (it may say “Not yet specified”) next to “Output To” and choose the destination and name of the file.  Click the blue “Render” button in the corner, and your video will be created.

Categories
Blog Posts

Retro Video Game-Inspired GIFs

16-Bit Goodness

Back to Bits is a collaborative animation project inspired by classic video games.  They recently unveiled “Level 2,” based on games from the Super Nintendo.  Check out the montage and some of the individual animated GIFs below.

Categories
Blog Posts

Fox And The Whale

A Lovely Forest Fable

Here’s a really beautiful short film, written and directed by Robin Joseph.  It features 3D animation, but it has a hand-painted look.  The music, visuals, and pacing all combine to make a meditative, relaxing piece.  The character animation is excellent as well – you might notice that the fox character moves more like a human than the rest of the animals, which helps the audience to identify with him/her.

Categories
Weekly Lessons

Week 8: Introduction to Character Animation

Simple Character Rigging

Now that we know how to parent objects, pre-compose layers, and adjust anchor points, we can move on to actual character animation.  Let’s start with some simple pre-made figures – you can download a few at this link.

A simple puppet might have the figure’s arms, legs, head, and body on different layers.  Complex puppets will break down the figure more and more – you might have separate layers for parts of the face, finger segments, clothing, and more.  Basically, any part of the figure that you want to animate should be on its own layer.

You can import these layers individually, but After Effects is also very good at playing with files created in other Adobe programs.  If you create your puppet in Photoshop or Illustrator, you can import those files with their layer structure intact.  When you import an Illustrator or Photoshop file, simply change the Import As drop-down from “Footage” to “Composition – Retain Layer Sizes.”  (The “Composition” option will work also, but I find “Retain Layer Sizes” easier to work with.)  If you’re using a Photoshop file, another screen may appear with the option to keep or merge your layer styles – I tend to choose “merge.”  Once you’ve imported the file, it will appear as its own composition with each layer separated out.  If the file appears as a single piece of media instead of a composition, double-check your import settings.

With the puppet imported, you’ll want to begin parenting the different parts together – but first, you should think about each layer’s anchor point.  As we discussed previously, a layer’s anchor point is the point around which the layer scales and rotates.  Since we’ll be doing most of our animation using the rotation property, the anchor point is important.  For example, a hand rotates around the wrist, the forearm rotates around the elbow, and the upper arm rotates around the shoulder.  You can use the “pan behind” tool (its icon has four directional arrows in a dashed box – the shortcut is Y) to grab and move anchor points to their appropriate locations.

You can then parent the layers accordingly – in this example, the hand is parented to the forearm, the forearm is parented to the upper arm, and the upper arm is parented to the torso.  If you do this correctly, rotating the forearm will also move the hand and rotating the upper arm will move all three.  I realize that this is probably difficult to visualize, so take some time to play with parenting and anchor points.  Imagine your puppet is a marionette and think about where the hinges should be – that’s where your anchor points go.  Once the anchor points have been set and the layers have been parented, you can begin animating the puppet by rotating and moving the layers.  Don’t forget to turn keyframes on for any properties you want to animate!

One benefit to creating your puppets in Illustrator (or using shape layers within After Effects) is that the puppet can be scaled up infinitely without losing quality.  That’s because Illustrator is a vector-based program, as opposed to something like Photoshop, which uses pixels.  To enable this ability (it is turned off by default), you need to check a box in the timeline that looks like a little sun – if you hover your mouse over it, it will say “For vector layer: Continuously Rasterize.”  For pixel-based artwork, you will start to lose image quality as you scale up, but you can control how After Effects processes the image using the column next to the sun that looks like a pixelated diagonal line.

 

Puppet Pins

While animating using the transform properties can achieve very sophisticated results, the animated characters can sometimes look a little stiff.  When we watch a cartoon, we are accustomed to seeing things move in “elastic” way: stretching as they build up speed and squashing when they land.  We can achieve this effect in After Effects using Puppet Pins.

Set up your character in the same way we went over last time: position the anchor points on the joints, move the layers into position, and parent everything appropriately.  Once everything is in place, it’s time to add some pins.

Puppet Pins are a tool for deforming layers.  When you add pins to something in After Effects, the program generates a “mesh” over the object.  When you move a pin, that mesh shifts and the layer is deformed.  If you move a pin too much, you’ll get some funky results; the image will stretch too much and begin to tear.  Moving a pin just a bit can give some really interesting results, though.

To start adding pins, select the Puppet Pins tool from the menu bar at the top of the screen – it’s the one that looks like a pushpin.  In the timeline, select the layer you want to add pins to, then click on the layer in the composition panel to add a pin.  You should see a yellow dot appear where you clicked.

Every pin you add will “pin down” a part of the object.  That means that the more pins you add, the smaller the area that each pin will affect.  My general rule is to add three pins to each part of the puppet I want to animate in this way.  On an arm layer, I might add a pin near the shoulder, one near the elbow, and one near the wrist.  On a leg layer, I might add one near the hip, one near the knee, and one near the ankle.

Pins have keyframes turned on by default, so you will add a keyframe every time you move a pin.  However, you can still move or rotate the layer itself without adding pin keyframes.  I like to add pin keyframes to accentuate movements; for example, I might add pins to a swinging arm to give the movement some elasticity.  Note that pins are not affected by parenting layers to each other – they move independently.  If you can’t see the pins, you can highlight the layer and click on the Puppet Pins tool again, or find the Puppet section of the layer in the timeline.

Occasionally, your pin may pull the layer apart in an unexpected way.  This is usually because the mesh that the tool generates is not covering the entire object.  When you have the Puppet Pins tool active, you should see some options next to the tool icon at the top of the screen.  Clicking “Show” box next to “Mesh” will reveal the mesh that is being generated to deform the layer.  If your mesh is cutting off part of the object, either add triangles or increase the “Expansion” property.

Puppet Pins open up lots of new creative possibilities.  Use them to make your animations seem even more alive!

Project 8: Bring a Character to Life

This week, I’d like you to start experimenting with character animation.  Download the sample files and create a five to ten second scene with the character (or characters) of your choosing.  Try either traditional keyframes, puppet pins, or both.  If you want to create your own character, don’t worry – we’ll be covering that next week.  As usual, render it as a QuickTime movie using the H.264 codec, upload it to your Google Drive, and send me a download link.  Have fun!

Categories
Projects

Project 7: Stock Footage Remix

Mike

Max

Dante

Brian

Jen

Categories
Blog Posts

Animating Paint

Painting Frame By Frame

If you think animating using keyframes is tedious, imagine creating an oil painting for every single frame.  Loving Vincent is an animated feature about Vincent Van Gogh, created entirely using oil painting.  Around 65,000 paintings were created by 125 artists to make the film.  The film is currently in limited release in the US.

The work that was done for Loving Vincent is stunning, but it’s not the first time this kind of technique has been attempted.  In 1999, the Academy Award winner for Best Animated Short Film was an adaptation of Ernest Hemingway’s The Old Man and the Sea, directed by Aleksandr Petrov and animated by Petrov and his son, who hand-painted roughly 29,000 frames using pastels on glass.

Categories
Weekly Lessons

Week 7: Exploring the Effects

Extra Special Effects

There are a lot of effects built into After Effects and countless more can be added using third-party plugins and scripts.  While there are far too many to discuss them all individually, I thought it might be useful to take a look at a few of them more closely.  Here are a few “must know” effects – and a couple that are just fun to play with.

Curves (Color Correction)

Curves is a simple, but powerful tool that you may already be familiar with if you have experience with photo editing.  Curves gives you control over the color information in an image or video by letting you adjust the red, green, blue, and alpha channels, as well as the overall saturation and brightness.  You simply choose the channel you want to adjust, then click and drag points on the appropriate line.  A small adjustment goes a long way with this effect – dragging a line all the way to the top or bottom of the graph will probably give you pretty bizarre results.  If you want a simpler method of color correcting something, there are also effects for Brightness & Contrast and Hue/Saturation in the Color Correction section – but I think Curves gives the most control.

Glow (Stylize)

This is an effect that’s easy to overuse, because it often just makes things look cooler.  Adding Glow produces a soft aura around the bright areas of an image.  The “Glow Threshold” determines how bright something needs to be for the glow to appear – so to make more of the image glow, you actually set the threshold to a lower percentage.  You can also adjust the radius, intensity, and color of the glow to dial in the exact look you are going for.

Gradient Ramp and Fill (Generate)

Both Fill and Gradient Ramp are simple effects that get used a lot.  Adding Fill to any layer will cover that layer with the solid color of your choice.  So, if you wanted to create a silhouette version of a character you were animating, you could pre-compose the character’s layers and apply a dark grey Fill to the resulting composition.  Gradient Ramp does the same thing, but uses either a linear or radial two-color gradient instead of a solid color.  You can use Gradient Ramp to quickly add a bit of visual interest to an otherwise plain background.  Changing the start and end points of the Gradient Ramp affects where one color stops and another begins.

Fractal Noise (Noise & Grain)

Much like the Gradient Ramp and Fill effects discussed above, adding Fractal Noise to a layer covers that layer completely.  However, instead of a simple color or gradient, Fractal Noise creates a complex black and white noise pattern on the layer.  Changing the “Fractal Type” will allow you to generate a variety of patterns  – some are blocky, some look like smoke, some look like television static.  You can adjust the contrast, scale, and more, but the real magic of Fractal Noise comes from animating the “Evolution” property of the effect.  This causes the noise to change dynamically, which gives really interesting results.  Fractal Noise is a great effect to use when you want to give a project some texture.  Create a solid on top of your composition, add the effect, then change the transfer mode and/or opacity of the layer so that it is barely visible – the result can be really striking.  Fractal Noise has tons of other potential uses as well; you could use it to simulate smoke or water, create a unique background, or combine it with other effects.

Gaussian Blur, Fast Blur, and Camera Lens Blur (Blur & Sharpen)

There are several blurring effects in After Effects, but I use these three the most.  Gaussian Blur and Fast Blur are basically interchangeable – they are simple blur filters that don’t take too long to render.  For a long time, Fast Blur was my go-to because it rendered (imagine this) faster, but recent versions of After Effects have improved the speed of Gaussian Blur and moved Fast Blur to the Obsolete category of effects.  It still works well, though.  For the absolute best results, however, I would recommend Camera Lens Blur.  This effect does a much better job of recreating the kind of blur you get from an out-of-focus camera lens; points of light, for example, are rendered more realistically using Camera Lens Blur than Gaussian Blur.  The downside of Camera Lens Blur is that it is much more processor-intensive and will slow your computer down more than the other options.  One thing to note with all of the blurs is that the edges of the layer you are blurring will soften along with the rest of the image unless you check the “Repeat Edge Pixels” option.

Offset (Distort)

Offset is a very cool effect that can be used for things like endlessly looping backgrounds.  When you apply it to a layer, you can keyframe to “Shift Center To” property to scroll through endless copies of that layer.  If you do this to a layer that is seamless on either the left and right or top and bottom, you’ll have a nice infinite loop.  This is a great way to do something like clouds floating by continuously in the background of your shot.

Audio Waveform (Generate)

This is a neat effect for quickly and easily creating an audio waveform.  It should be applied to a solid or other visual layer – not the audio layer itself.  Once the effect is applied, you can choose the appropriate audio layer from the first dropdown menu.  There are a few different styles to choose from and define the color, size, and position of the waveform.  If the waveform is too small or too large, change the “Maximum Height” property.

Shatter (Simulation)

There are several interesting “simulation” effects, but Shatter is one of the most potentially useful.  While it doesn’t give you all the control that 3D programs do, the Shatter effect allows you to simulate the process of an object breaking apart.  There are presets for glass, bricks, puzzle pieces, and more.  When you first apply the effect, the layer you apply it to will be replaced with a wireframe version – change the “View” mode to “Rendered” to see what the effect actually looks like.  You can make adjustments to factors like force and simulated gravity to alter the effect.  Shatter begins breaking apart a layer from the beginning of that layer, so you’ll have to be thoughtful with how you use it.

Fractal (Generate)

Not to be confused with Fractal Noise, the Fractal effect generates a fractal image using a mathematical formula.  Fractals are patterns that can be zoomed into endlessly — the formula will continue to generate new details as you go.  Why would you want to generate a fractal in After Effects?  I’m honestly not sure, but they look pretty cool.  You can change the type of fractal you generate using the “Set Choice” and “Equation” controls, then explore the fractal using the corresponding menus.  Try using it when you need a weird abstract background or in conjunction with other effects.

CC Snowfall and CC Rainfall (Simulation)

CC Snowfall and CC Rainfall can be used to quickly add “weather” to a scene.  You can dial in settings like the size, opacity, color, and density of the effects as well as playing with forces like wind and random variation.  Both effects look pretty good at their default settings, though.  Note that by default the effects are composited on top of a layer, so you should either pre-compose your scene and then add the effect to the resulting composition or apply the effect to a solid and uncheck the “Composite With Original” box.

Advanced Lightning (Generate)

Rounding out the weather effects is Advanced Lightning, which is just like regular lightning, but with a way cooler name.  In all seriousness, After Effects does a pretty solid job of simulating lighting.  There are several different types to choose from and you can define the size, color, and how many “forks” the bolt has.  If you want the lightning to crackle, keyframe the “Conductivity State.”

Project 7: Stock Footage Remix

Download this clip; it’s fairly generic stock footage of a woman running through a field in slow motion.  For this week’s assignment, I’d like you to take that clip and transform it into something unique.  Use effects, transfer modes, track mattes, transform properties, or any of the other tools we’ve covered in class so far to alter the clip.  You can duplicate the layer and/or add text solids, shapes, and other media.

The purpose of this assignment is to get you to really dig into the library of effects that After Effects has to offer.  You must utilize at least four different effects, but you are encouraged to use more.  You can use the ones discussed in this week’s lesson – or find new ones to experiment with.  Try a bunch out to see what they do.  If an effect doesn’t seem to do anything after you play with its settings, move on to another one – there are a ton to try out.  Get creative and have fun with this – make it funny, weird, scary, or some combination thereof!  Render the finished clip as an H.264 QuickTime movie and send it my way before next week’s class.

Categories
Projects

Project 6: Lower Thirds

Max

Mike

Brian

Jen

Dante

Categories
Blog Posts

Abstract Animation

This Piece Speaks To Me

Animation doesn’t have to be used for narrative films – there is a long tradition of animation being used to create fascinating pieces of abstract art.  Here are a few relatively recent examples, courtesy of Cartoon Brewkoukou by Takashi Ohashi, Elements by Maxim Zhestkov, and Divisional Articulations by Max Hattler.  In addition to the fascinating visuals, pay close attention to how each filmmaker uses sound in their work.

Categories
Blog Posts

How Computers Transformed Animated Storytelling

Does Technique Influence Theme?

Here’s a really interesting look at the evolving themes in animated films from the Just Write YouTube channel.  Beyond the obvious technical differences that computer-based animation brought, this video looks at the ways those technical changes influenced the thematic elements of the films, moving from conservative fairy tales to progressive allegories.

Categories
Weekly Lessons

Week 6: Link Things Up

Making Connections

Last week, we went over some of the ways that layers can interact with each other in After Effects, using track mattes and transfer modes.  This week’s lesson has a similar theme, as we’ll be combining, affecting, and linking layers in new ways.  These techniques will be essential as we begin to work on actual character animation, but they are also extremely helpful when creating motion graphics and text animation.

Adjustment Layers

Adjustment layers are a very cool feature found in After Effects and some video and photo editing programs.  Basically, an adjustment layer is a blank layer in the timeline.  Any effects that you add to an adjustment layer will be applied to the layers beneath it.  Any layers above the adjustment layer will be unaffected.  This allows you to quickly apply effects to an entire scene.  If, for example, you decide you want your composition to be in black and white, you can add an adjustment layer and apply the “tint” effect to it.  Without the adjustment layer, you would have to go to each layer individually and apply the effect.

To create one, go the the Layer drop-down menu at the top of the page and go to New>Adjustment Layer.   An adjustment layer the size of your current composition will be created and placed in the timeline.  After Effects also lets you modify adjustment layers in interesting ways by using masks.  For example, you can use a circular subtract mask on an adjustment layer to create a simple vignette.  Note that while adjustment layers have transform properties, modifying those properties does not affect the layers below – only effects are applied.

If you do want to apply things like scale and rotation using an adjustment layer, it is possible, however.  In the “Distort” section of the effects, there is one called “Transform.”  This is a set of the usual transform properties – anchor point, position, scale, rotation, and opacity – that can be applied as an effect.  If you add the transform effect to an adjustment layer, that effect will be applied to the layers below.

Pre-composing

When you create a new composition in After Effects, it appears in the project panel along with the rest of your media – that’s because compositions essentially are pieces of media, just like stills and video files.  This means that you can drag one composition into another and then add effects, mask it, or manipulate its transform properties.  In fact, it’s quite common to have compositions within compositions within compositions for a complex project.

In addition to dragging one composition into another, you can choose certain layers within an open composition and make a new composition out of them – without ever leaving the timeline you are working in.  After Effects calls this “pre-composing.”

To pre-compose media in the timeline, select the desired layers (command-click to choose more than one layer), right-click and select Pre-Compose….  A menu will appear with options for re-naming the new composition (probably a good idea), leaving or moving the “attributes” of the layers (choose to move them), adjusting the length of the new composition (choose to do this), and opening the new composition (not necessary).

Once the layers have been pre-composed, the new composition will appear in the old composition as a single layer.  It will also show up as a new composition in the list of project media.  If you double-click on the pre-composition, it will open up in the timeline and preview windows.  Pre-composing media is a great way to clean up a chaotic composition (sometimes you just have way too many layers in there), as well as a simple method of applying effects and transformations to multiple layers at once.

Parenting

Parenting is a unique feature in After Effects and it’s incredibly powerful.  When you parent one layer to another, the “child” layer will be affected by the scale, position, and rotation of the “parent” layer.  Parenting does not affect opacity, effects, or masks.

To parent a layer, you use the Parent section of the composition panel.  You can either choose the parent layer from the drop-down menu or use the “pick whip” selector next to it (it looks like a little swirl).  A parent layer can have multiple child layers connected to it – and a child layer can have its own child layers – but a child layer cannot have multiple parent layers.  That probably sounds confusing, but it should quickly make sense once you start playing with it.

Parenting has some very basic and commonplace applications for things like lower thirds and title design.  For example, you could parent a text layer to a solid layer, then animate the solid layer sliding into the frame.  The text will keep its position relative to the solid and slide in with it.  This keeps your animation consistent and means that you only need to keyframe properties on one layer instead of two.

Under the Layer drop-down menu, you can also create a “Null” object (Layer>New>Null Object).  Null objects don’t appear to do anything at first, but they are very useful as parent layers.  You can parent several child layers to a null and then affect them all simultaneously.

Project 6: Lower Thirds

One thing that After Effects is often used for is the creation of “lower third” graphics.  A lower third is a graphic (usually located in the bottom third of the frame) that contains text information about the subject of the video.  Lower thirds are most often used in interview and documentary footage where the viewer needs to know the name and/or other information of whoever is on screen.

This week, you’ll be creating a lower third graphic.  Download one of the videos above and create a lower third for that person.  Here are the parameters:

  • The lower third should be on screen for between five and ten seconds.
  • The graphic should animate on to and off of the screen.  This can be done using opacity, movement, or anything else you like.
  • There should be two lines of text: one of your subject’s name and one of their job or title.  Make something up!

This is a good opportunity to practice and combine the various skills and techniques we’ve been going over – track mattes, effects, easing keyframes, etc..  If you would like some additional generic footage to use, here are some slow motion clips.  You are also free to find footage or still images on your own.  Render the video at 1920 x 1080 resolution using the H.264 codec and send me a download link!

Categories
Blog Posts

Creating Animation In Real-Time

The Future of Animation?

In 2016, The Simpsons used animation software from Adobe to incorporate a live segment into an episode.  During the segment, fans of the show called in and asked unscripted questions to Homer, who answered – while animated – in real-time.

This was done using a piece of still-in-development software called Adobe Character Animator.  Character Animator is included with current versions of After Effects, but launches as a standalone program.  It uses web-cam point tracking to map facial movements in real-time.  Mouth movements are translated to pre-built shapes, that change and move with the action of the actor.  Other gestures, such as blinking or body movements can either be tracked live or mapped to buttons.  When a button is pressed, the corresponding gesture is made.

For the segment on The Simpsons, Homer’s voice actor (Dan Castellaneta) responded to questions will being tracked by a camera monitoring his facial movements.  Other gestures were controlled by the episode director using a keyboard.

You can read more about the Simpsons live animation segment over at Cartoon Brew.

Categories
Projects

Project 5: Word Mark

Jen

Max

Brian

Dante

Brian

Categories
Blog Posts

Behind the Scenes with He-Man

…and the Masters of the Universe

Here’s a fascinating look at one of the most iconic cartoons of the 1980s.  Check out this behind-the-scenes video about the creation of a single shot from the classic action cartoon He-Man.

If you’re a fan, check out some of the other videos on the Official He-Man YouTube page.

Categories
Projects

Project 4: The Bouncing Ball

Max

Brian

Rebecca

Jen

Dante

Mike