Tradigital Animate CC

12 Principles of Animation in Adobe Animate

Stephen Brooks

• Publisher: CRC Press
• Year: 2016
• ISBN:
  9781317748069
• Edition: 1
• Topic: Informatik
• Subtopic: Digitale Medien

Learn how to bridge the gap between the traditional animation principles and digital software.

Tradigital Flash: 12 Principles of Animation in Adobe Flash brings the essentials of traditional animation and Adobe Flash together. The early masters of animationcreated a list of 12 principles which are important for anyone who wants to create interesting and believable animation. Digital animation continues to make incredible technological advancements that give animators the capability to produce visually stunning work. New technology, however, also has a tendency to create an environment where animators are so focused on adapting to the new workflow that they tend to dismiss these fundamental animation principles… which often leads to poor and lifeless character animation. Tradigital Flash helps you focus on these principles while using the program's wide array of features to create believable animation, consistently.

Tradigital Flash joins three other Tradigital books covering Maya, Blender, and 3ds Max. This new volume in the series approaches the topic in a different way, giving readers both a practical look at the software, and providing a theoretical understanding of the genre.

• Learn a new principle in each chapter, the Flash tools most related to it and how to put it all together.

• 
  
  

• A plethora of examples demonstrate the good methods which animators should use in Flash, how to avoid the bad ones and ways to create a workflow that works for you.

• 
  
  

• An easy-to-follow approach with examples throughout the book that build on each other, showing how the principles act together.

• 
  
  

• A companion website www.rubberonion.com/tradigital-animate features more examples, downloadable FLA resource files, video tutorials.

Key Features

• Every chapter teaches you a principle, shows you the corresponding tool or tools, and shows you how to all put it together.
• A wide array of examples demonstrate the good, bad, and sometimes ugly procedures an animator can practice with Flash.

• 
  
  

• A follow-along approach, where examples throughout the book build on each other, showing how the principles act together.

• 
  
  

• A companion website features more examples, downloadable swf resource files, video tutorials.

• 
  
  

Chapter 1

TIMING

Image 1.0 My Friend the Computer #1: Three, Two, One… by Stephen Brooks (RubberOnion.com).

INTRODUCING
Timing

Timing is the very basis of animation. At its core, to animate is to take something that is not alive and, in the words of Captain Jean-Luc Picard, make it so. We all know that animation is displaying sequential images in time to make them move, but the timing of it all will affect the mood of the action. A batter hitting a baseball at “real-time” speed will evoke a different response from the viewer than watching that same action in “slow-mo.” Just as the type of music playing during a scene will change its feeling, so too will Timing.

Think of Timing as the heartbeat of the character. Is it erratic? Calm? Intense? Lazy? It will define what you do. If you have a shot of a boxer being punched in the face with a duration of only 0.5 seconds, think of how the drama of the shot will change if it takes 1 second to elapse or a slow-motion-style 5 seconds. Timing is at the beginning of this book because it should be the first thing on your mind when you start to animate. Ask yourself, “how long should this take to happen?”

In this chapter, we will cover technical terms such as frame rate, tween, as well as get a further look at some aspects of Adobe Animate we covered in the book’s Introduction like the shape tools, timeline, and Properties panel. We’ll also begin our work with understanding symbols so that you will learn how to draw a simple shape, move it around, and get an understanding of what Timing encompasses and how to use Animate CC to implement this principle in your animation.

A WORD ABOUT
Graphics Tablets

There are some of you out there who might not have a graphics tablet for drawing, which I can understand. One of the appeals of Animate CC is its affordability whereas a tablet would be another purchase to add to the list. This book will not force you to draw on a tablet, but I would recommend it for no greater reason than it helps preserve the connection your brain has made between the art you imagine and the art you make. That connection is deeply rooted in almost everyone, stemming from when you started drawing ducks on your parents’ walls with cheap, unwashable, wax crayons.

Image 1.1 Wacom Intuos4XL

By working through the bouncing ball exercises using Animate’s shape and movement tools, you can connect the concepts of the principles to that animator part of your brain—and then that to the program. Once you feel like you want to move beyond that, try doing the exercises over again by drawing each frame with a graphics tablet. For now, however, let’s go step by step through the timing exercise with the bouncing ball and learn some of the program on the way.

BOUNCING BALL Timing

Note: Animate’s layout is covered in this book’s Introduction. If you are uncertain as to what and where the timeline, tools and stage are, please refer back to the section “Introducing: The Program.”

Image BB1.0 Pictured: Flash CS6 when the Oval and Rectangle tools were docked together.

Setting Up

If you haven’t already done so, open Animate CC and create a new document (File > New). The only things that truly matter right now are the width, height, and frame rate. For our purposes we will use 1920 for the width and 1080 for the height. Anyone who has a hi-def TV out there that says 1080i or 1080p—that’s this resolution. As for the frame rate, for the remainder of this book we will be working in 24 frames per second (henceforth known as fps). Once you select OK, your document is created. If you made a mistake, not to worry! Locate the Properties panel. If you don’t locate this panel for some reason the hotkey combination to bring it up is Cmd+J on Mac and Ctrl+J on PC. There you can see the size and fps settings which can be altered at any time to get the settings you want. These affect the entire document, meaning there’s only one value for each setting in a document such as the one you just created.

Before we get too far, let’s save this bad boy right now; we’ll be working in it a lot. Choose an obvious name like “bouncing ball 1 – timing.” We will be saving a new file for every chapter so that as we progress we won’t lose the work from previous chapters. (Pro tip: select File > Save As … and put a 1 at the end of your file name, and periodically do the same but with increasing numbers to create “mile marker” files. In the event of a computer crash, power outage, cat unplugging cord, you won’t lose much work at all. It’s helpful on bigger projects.)

Because of our resolution being so high, some computer monitors may not be seeing the whole stage right now. To show the entire stage, locate the Zoom control drop-down menu on the top-right corner of the stage. It should currently be set at 100%. Select that drop-down menu and click “Show Frame.” You should now see the stage surrounded by gray work area. As mentioned in this book’s Introduction, only the things inside the stage will appear in the final video that exports. So for the purposes of this bouncing ball exercise, the “ground” will be the bottom of the stage.

Now that we’re all set up, it’s time to get started with animating!

PART I
“Drawing The Ball”

1. In the toolbar, select the Oval Tool (O). If all you see is a square like in Adobe Flash CS6 or below, click and hold on it until a popup appears with subset tools and select the circle. Don’t worry about the color right now. Image BB1.1

Image BB1.1

2. Click and drag on the stage somewhere in the top left to draw a circle. This shape will be the ball that we will be bouncing ever so wonderfully. (Pro tip: hold Shift as you’re dragging to force Animate CC to draw a perfect circle). Image BB1.2

Image BB1.2

3. Choose the Selection Tool (V) from the toolbar and double-click the circle we just drew to highlight all of it.

4. Right-click the now highlighted circle and select Convert to Symbol … (F8). A popup will appear, asking for some information. Name it “ball,” select Graphic from the Type drop-down menu, and make sure the Registration point is in the middle. Click OK. Image BB1.4

Image BB1.4

Interlude

A quick note: you might be wondering what the difference is between the symbol types in step 4 and why we chose “Graphic.” The symbol types will be explained in the closer look section later in this chapter. We won’t get into the Registration point until much later, but to satisfy any nagging curiosity, it’s basically the default pivot point. But now, let’s talk about the ball you just created. Take a look at it. How long do you think it will take to fall to the ground (bottom of the stage)? Whatever answer you just gave to that question has determined how large the ball is. We have drawn one ball of a certain size, and it is already a certain distance from our ground. How long it takes the ball to reach the ground tells us how big the ball is around. For instance, given the size I drew mine (which you can see in the provided *.fla file), if you said “1 second” then it’s about the size of a beach ball. If you said “0.5 second,” it would be a softball. “3 seconds?” The NYC Times Square New Year’s Ball with all the lights and expensiveness—you get the point. Timing affects a great deal in physics; you want to understand why so you can break the rules to the greatest effect.

Image 1.2 Depending on the timing of a fall, the same size circle could represent a range of sizes.

The trick here is to use your brain as a simulator. You drew your bouncing ball already; now close your eyes and imagine it bouncing. Without even thinking about it you have come up with how long it will take the ball to hit the ground and how long it will take to bounce back up. I could tell you to do that with anything. Think of an asteroid. Now close your eyes and make it explode into a magnificent spectacle. Do the same thing with a chipmunk (those unholy creatures who eat the tomatoes right off the vine that someone tried very hard to cultivate). That’s your imagination at work—the world’s greatest render machine. So if you go back to the bouncing ball, the goal is to take that information you created in your imagination and use it in our t...