Motion for Promotion

Reading

Animation Technique

Some animators spend their lifetimes perfecting one animation technique. Until you narrow down your perfect animation technique, you should be familiar with all your options. For each animation idea, you might want a different approach. Choosing the right technique to amplify your storyline and convey your big idea is crucial. If you choose wisely and use your technique creatively, you can set your project apart from others.

Keep in mind, though, that your animation might be viewed on a variety of screens. If you’re creating the animation for a film festival, ensure the piece has plenty of detail to fill large spaces as many festivals project films on larger screens. If you’re making an internet-based piece, your video might be viewed on a smartphone screen. For something so small, vector graphics or high contract 2D animation read well.

Before you get too carried away, remind yourself how you want your audience to describe the animation by looking back at your creative brief. For example, stop motion, or 2D computer animations work for offbeat comedy, but 3D CGI and hand-drawn animations may be perceived as moody or naturalistic.

Animation and Motion Graphics Techniques

Hand-drawn 

You can create these animations with nearly any material or medium (pencil, paint, ink, charcoal, etc.). Styles range from a traditional Disney cartoon to rotoscoping (using live-action recordings to track movement) to delicate, detailed artwork.

Stop motion

Stop motion animation can use 2D or 3D versions, each with its own flair. The development of stop motion involves shooting frame-by-frame still images while moving objects incrementally between frames. 2D stop motion uses a camera pointed straight down at a flat surface and has a flat, handmade aesthetic. It’s generally considered emotionally expressive and easily adaptable for stories, but paper cutouts can make it feel comedic or even elegant. Using sand or paint with a lightbox can make these animations feel moody and atmospheric. 3D stop motion uses a tripod to hold a camera aimed at the subjects. Found objects can be poetic and have either a humorous or metaphoric effect.

CGI

Computer-generated imagery, as the name suggests, is created in a software environment. 2D CGI can incorporate scanned images into the computer software environment. This animation is clean, highly scalable, and legible for typefaces. With a long history in children’s programming, it feels more innocent and warmer. 3D CGI uses elements that are modeled, rigged, texture, and animated in a virtual space. The hyper-realistic graphics make it an ideal technique for special effects video games and commercials. It can also be quite tricky to master, although highly rewarding.

Animation and Motion Graphics Styles

Fluid transitions

Fluid transitions allow animations to flow smoothly from one scene to the next. These can sometimes appear to be morphing scenes between transitions. These are generally applied to narrative storytelling that unwraps seamlessly from start to finish.

2D/Vector/Kinetic

These are flat designs that are scalable and easily legible because of their vector-based art. They are commonly used for infographics and web design.

Handmade

This style uses materials and textures in the physical world. Hand-drawn and stop motion animations are often used as bases for this style. Handmade styles are ordinarily perceived as vintage or innocent.

Collage

Collage styles combine various elements, such as handmade animation with video footage. These are more frequently used for documentaries and title sequences.

Film and Type

This animation style combines montaged video footage with kinetic type, primarily for non-linear title sequences.

3D

3D animation styles are created with stop motion or 3D CGI with three-dimensional features, such as light, shadows, and gravity, to relate the environment with reality.

Back to your project, you first need to identify the defining characteristics of your dream technique. Then, it would be best to research tools and tutorials about this dream technique to see how you can create your desired effect. Some programs offer a workaround that will capture a crucial element of your design, or you may find a hybrid to incorporate your unique artistry with your chosen technique. If you can’t find a good hybrid technique, you can use a workaround. Try importing still images to your program and use editing tools and panning the camera to make the image “move.” You could also use live-action footage and composite the footage into your project. Most importantly, if you can’t do it alone, hire someone else to do it and give them space to express their own creativity. As people, we experience films for their stories before savoring artistic animations.

Research

The Twelve Principles of Animation

Squash and Stretch

Objects in the physical world have a mass that affects the way they move. In animation, the squash and stretch principle adds weight to the movement. Heavy objects have a more distinct (or longer) gravitational than lighter objects. The object’s volume shouldn’t change to make the animation more realistic, so a stretch in one direction of an object causes a squash in another direction.

Anticipation

The purpose of the anticipation principle is to create energy for a character’s movement or warn your audience for subsequent action. For example, a baseball player will rewind his arm before a pitch. The power comes from rewinding the arm, and the audience knows that the player will likely pitch the ball next.

Staging

With staging, you present the information you want your audience to have in a way that makes it evident. This keeps your audience focused on the relevant information and limit unnecessary details.

Straight ahead action and pose-to-pose

Straight ahead action uses frame-by-frame animations from the beginning to end of a sequence. These look smooth and realistic but also challenging to maintain proportions between frames. Pose-to-pose animation compares the start and end frame poses, then adds interval frames in between.

Follow-through and overlapping action

Most of us were told we could make a basketball shot in gym class by honing our “follow-through” instead of stopping as the ball left our fingertips. The follow-through principle of animation suggests that when your moving subject stops, parts of that subject will continue to move before reaching a complete stop. Overlapping action means that different parts of your subject might move at variable rates. If you think about it, our arms swing at a different speed than our legs move when we run. Another similar idea is “drag,” where parts of your subject will take more time to start moving than other parts.

Slow in and slow out

The slow in and slow out principle highlights the natural inertia of a moving object. A still object beginning to move will need some time to gain momentum, and the same moving object stopping will need time to slow down. Thus, animations use more frames at the start and end of a movement than during the height of momentum.

Arc

Movement generally follows an arc rather than straight or pointed angles. This principle suggests the incorporation of the rotation and curvature of a natural trajectory of motion.

Secondary action

Primary actions are usually accompanied by one or more secondary actions in our physical. For example, when we run, our primary action is the movement of our legs. Secondary actions would include swinging our arms or bobbing our heads. Maybe we frown or crease our foreheads. This principle emphasizes the primary action by supplementing additional movement.

Timing

This principle focuses on the speed of action or how many frames are dedicated to the action. This will add weight, mood, emotion, and personality to your subject.

Exaggeration

Exaggeration imitates natural expressions by keeping them realistic while presenting them with a more extreme form. For example, smashing a character in animation may flatten the subject to a pancake, then the character springs back to regular size. Features could be exaggerated, facial expressions, etc.

Solid drawing

This principle emphasizes the importance of adding volume and weight to a subject by analyzing shape, anatomy, balance, and light.

Appeal

Your audience needs to connect with your characters and story. Adding charisma and interesting characteristics keeps your audience paying full attention to the subject.

In this video, there are many examples of squash and stretch. For example, when Tom is scared, he stretches before squashing back down to hide. Likewise, when the pets run, they elongate before shortening the length of their torsos. The man squishes down with his weight as he walks. Each character has their own charisma and personality, making the overall storyline more entertaining for their fans. 

Shaggy and Scooby are notoriously scaredy-cats. When they run, however, they don’t always squash and stretch. This video showcases the exaggeration and arc principles by using arcs to rotate their limbs and exaggerating the inertia used from their limbs before they start to move. 

Maui’s facial expressions use many of the twelve principles of animation. For example, the squash and stretch principle projects his personality while exaggeration highlights his, for lack of a better word, narcissism. Secondary action might even include the animation of his tattoos. 

The Roadrunner cartoons are a classic. In the first clip here, the roadrunner’s feet move in a circular pattern using the arc principle. Each of the coyote’s movements also follows an arc trajectory. The exaggeration principle is often added to create a comedic effect. 

Stitch wasn’t originally intended to speak in the Lilo & Stitch cartoons, but eventually, the film team added dialogue. Regardless, the character needed to express himself mainly with facial expressions and body language. As a result, his expressions and movements use exaggerated actions and critical moments of the squash and stretch principle. 

Create

My brother recently started a home renovation contracting service, Lawrence Welch Contracting, LLC. I created his logo, business cards, and flyers weeks ago, but now it’s time to start making them more interactive. I turned his logo into a logo stinger which adds some fun to his company and highlights a few of his contracting services. To start, I opened my Adobe Illustrator file with his company logo. I then created a new Illustrator file and labeled it separately. After copying the logo into the new file, I separated each logo component into individual layers. Previously, I made “thank you” notes for his company which incorporated a hammer graphic, so I included a new layer with the hammer graphic. Then, I downloaded a paint roller graphic from Canva.com to use in the animation.

With each component on individual layers, I switched over to Adobe AfterEffects and created a new composition. In this composition, I uploaded the Illustrator file as “Composition – Retain Layer Sizes” to ensure the file would open with individual layers instead of one merged image layer.

Lawrence Welch Contracting doesn’t offer roofing or roof replacement, but I wanted to incorporate a hammer or other tools somewhere in the animation. An off-kilter roof felt like a great opportunity to add some fun movement with tools. Three strikes with the hammer seemed sufficient for this particular logo animation. I recorded the sound of a hammer hitting roofing shingles I found in my garage for the added sound effect. In the initial animation, I didn’t animate a recoil motion after the hammer struck, but the audio recording created an audible second tap. I edited the animation to align with the sound of the hammer’s recoil.

The contracting service does provide interior and exterior painting, so the animation needed to feature the painting service. I started the paint roller graphic on the lower right-hand side of the logo and then started the roller movement after the last hammer strike. The roller moves across the screen underneath the logo, revealing the company name. I used a mask layer in AfterEffects that expands as the roller travels across the screen to create the reveal effect. The sound effect for this took multiple attempts. I painted across a plank of wood with a paint roller on the first attempt, but the audio mostly recorded thumping from the wood plank. With the second recording, I tried to flatten out wall texture spray, but the audio picked up too much background noise to edit out without erasing the sound of the texture. Finally, I tried pouring paint on an old cabinet door and rolling over it. The first roll didn’t pick up much noise, but later swipes led to the final audio used for the animation.

I also made the windows look out of place and animated them to change to normal windows but felt an additional sound effect would be too much noise in the animation.

Previous
Previous

Interface Motion

Next
Next

Stop Motion: Production and Post