Tom Morello

This article is out of date! Find the new version here.

Intro

In this tutorial, we'll look at an advanced file and look into some of the techniques used. While we won't build the file step by step, we will examine the design, rig, animations, and state machine. For a more in-depth look, dive into the source file and look around.

Design

1. Use simple shapes

Notice the majority of the character uses simple shapes.

Use simple shapes

The arms and legs have additional vertices added to account for the knees and elbows.

Use additional vertices for knees and elbows

Strokes with rounded end caps are used to create the fingers.

Use stokes for fingers

Notice the guitar cable is split into multiple shapes to give the cable a 3D effect.

2. Rim lighting

Rim lighting helps your character stand out in the composition.

Duplicate shapes and change their color to easily light one or multiple sides.

Use gradient strokes on your shapes. As the light falls off, turn down the opacity or select a darker color.

3. Background & effects

Use gradients with multiple stoppers to create a base for the background.

Use blend modes to create unique effects such as lens flares, color shifts, and framing.

Lens flare with Overlay mode

Color shift with Screen mode

Framing with Color Burn mode

Rigging

Start with a basic skeleton.

Add in additional bones for accessories.

Ensure the bones have the proper hierarchical relationships.

Set up IK constraints to make controlling the legs easier.

For the best performance, bind and weight only the shapes that will be influenced by two or more bones.

Use parent-child relationships for shapes or groups that only use a single bone.

Ensure all objects are nested under a Root group before animating. This group will allow you to control the transform properties of the entire composition, even if you've already added some animations.

Animation

Animate the idle first. Let the control bone do most of the work.

Add secondary motion to make the animation more interesting.

If you are planning on using the animation in the state machine, be sure to key all objects (bones, shapes, paths, ect...) in their current position. This will ensure the character can return to the proper pose when switching between states.

Use the bones to help you achieve the proper poses, then edit the timing.

Once you are happy with the main poses and timing, add in secondary motion.

State Machine

Create a new state machine with the plus button in the animations list.

Drag your animations onto the graph.

Add transitions.

Add an input.

Configure transition conditions.

Test and make any changes necessary.