In the first lesson of the basic mini-course “Fundamentals of Animation in Actionscript 3.0” you will learn about:

1. What is animation
2. How to Achieve the Illusion of Movement Using Frames
3. About the possibilities of frame-by-frame animation
4. About the features and advantages of software animation

Adobe Flash is essentially an animation machine of sorts. Already in his very first versions, he created it using the Tween concept. It consists of the following:

• two key frames with different contents are created on the timeline (the positions of objects, their shape, color, etc. change);
• Flash creates all intermediate (transition) frames independently (Fig. 1).

Here's what it looks like in Adobe Flash CS6.

But this lesson and the course in general are not only about Tween, but about a powerful language that is built into Flash and is called ActionScript. By studying it, you will learn a lot of useful and practical things, especially in sections such as imitation of real world physical phenomena and mathematical calculations. Obviously, this kind of knowledge will give you complete control when creating interactive applications, which you could never achieve with Tween alone.

But before we get into the specific techniques, techniques, and formulas that will help you animate objects using ActionScript, let's take a closer look at the idea of ​​animation, some of the basic techniques, how they are used, and how to make it more interesting. , and most importantly dynamic.

What is animation?

So what exactly is animation? The definition of this concept can be found in many dictionaries. Here, for example, is one of them, which Wikipedia gives:

Translated into everyday language animation means movement. If we expand this definition somewhat, we can say that animation is a change in time. This is especially true for visual (visible) changes. Movement is a change in position in time. At one moment in time the object was in one place, and a minute later in another. Theoretically, he was also at intermediate points between the beginning and end as time moves.

But an object doesn't have to change its position to be considered animated. He can simply change his outer form. In the 90s (scary to say, the last century!) computer programs that did morphing were popular.

For example, you have two pictures: a girl and a tiger. The program creates a smooth transition/animation between them (morphing).

The program Sqirlz Morph 2.1 was used to create this flash video.

When morphing, an object can also change its size or location. For example, this way you can create the illusion of a growing tree, a spinning ball, or a color change in an object.

Linking animation to time is an important concept.

Without visible movement or change, there is no animation, and therefore no sense of time for the viewer!

You've probably seen many times a camera where there is no movement, for example, an empty room or a cityscape.

In such a situation, it is difficult to say what is in front of you: an ordinary photo or a video clip. As you watch, you suddenly notice small changes in the frame: slight movement, a change in the flow of light, or a shift in shadow. Even such small changes clearly tell you that time is passing and that if you continue to watch, something else may change. If there is no change over the next period of time, you will again feel like you are looking at a photograph. Therefore, the absence of time in the frame means that the picture will remain unchanged.

All of the above brings us to a very important conclusion: animation, movement arouse our visual interest.

Everyone remembers Leonardo da Vinci’s painting “Mona Lisa” - a masterpiece of painting, one of the most famous paintings in the world art history.

It can be assumed with a high degree of probability that an ordinary person will get bored after just a few minutes of inspection and very soon begin to look for the next object to “study”. But, start showing him the latest Hollywood blockbuster and he won’t notice how a couple of hours will fly by. That's the power of animation!

How to create the illusion of movement in stop-motion animation

Let's go back for a second to the definition of animation we introduced above:

Animation is a technique for creating the illusion of moving images (movement and/or changing the shape of objects - morphing) using a sequence of still images (frames) replacing each other with a certain frequency.

The authors of such definitions are forced to introduce the word illusion into them. It often happens that only the illusion of movement exists in those types of art or media that we encounter in life. Therefore, this is the time to introduce the concept of personnel.

In theory, all types of visual animation use frames - a sequence of pictures or photographs quickly shown to the viewer to simulate movement or change.

What you see on a computer screen, TV screen or in a movie theater is based on frames. It all started with the first animated films, where individual pictures were drawn on sheets of transparent film, and the first films, where the same technique was used to show a series of photographs.

The concept is simple: you are shown a sequence of pictures, one after another, that are slightly different from each other and your brain connects them together into a single moving picture.

Then why should we call it the illusion of motion?

If you see a girl walking down the street on your monitor screen, is that not movement? Of course, this is only an image of a girl, and not a real object, but this is not the main reason why we consider such movement an illusion.

Remember when I talked about an object that at one moment in time is in one place, and a minute later in another? At the same time, I said that it moves in real space. It is only this kind of movement that we can call real. Objects move in space smoothly, and not abruptly, as happens in all types of frame-by-frame animation. In them, the object does not move from one place to another; he disappears and then appears elsewhere in the next shot. The faster he moves, the longer such jumps are.

If I showed you a photo of a girl in one place, and a few seconds later another photo of the same girl, but in a different place, then you would say that these were two photographs, and not an animation.

If I showed you a few photographs of her in motion, you would still say that this is just a series of photographs.

If I showed you a number of photographs fairly quickly, it would not change the fact that they are still photographs, but you would begin to perceive them differently.

Your brain would begin to see them as a moving girl. In fact, such a representation is no different from the first two photographs, i.e. there is no real movement in them, but at a certain moment the brain gives up and buys into this illusion. Naturally, this effect has been very well studied in the film production industry.

After the research, it was found that at display speed 24 frames per second, the viewer perceives them as a single moving picture. If you show it more slowly, the image begins to “jump” annoyingly and the illusion of movement is destroyed. If you accelerate to 50 frames per second, then this will not add realism to the image (although in software animation, when the viewer interacts with the picture, the response will be faster and the movement of objects at high speeds will be more “smooth”).

The frame concept makes three things possible:

• storage
• transmission
• and show

Obviously, you can't store, transfer and then show a real girl walking down the street, but you can store her image/photo or a series of them, and then transfer and show them. This way, you have the ability to play animation almost anytime, anywhere, as long as you have access to your saved photos and the ability to display them.

It's time to give a more general definition of the frame. Until now, when talking about it, we meant a photograph, picture or drawing. Now let's count like this: a frame is a recording of a system at a certain point in time.

This system could be:

• a landscape photograph you took from your own window;
• a collection of virtual objects (a record, in this case, would be their shapes, sizes, colors, locations, etc. at a certain point in time. Thus, your movie would turn from a series of pictures into a series of records of descriptions of pictures. Instead of just show a picture, the computer takes such a description, creates a picture from it and then shows it);
• frames containing specific programs.

Block programming

Since the computer can calculate on the fly, you can do without a long list of descriptions for frames. You can simplify everything by describing only the first frame and establishing rules for creating all subsequent frames. Now the computer not only creates a picture from the description, but:

• first creates a description,
• then generates an image based on this description
• and at the end shows this picture.

Just imagine how much space you could save using this approach! Pictures always take up a decent amount of disk space and network bandwidth. And 24 images per second can simply become too much to bear. If you can boil everything down to one description and definition of the rules, you have the opportunity to reduce the file size by hundreds of times.

90 times out of 100, even the largest program with rules for how objects should move and interact takes up less space than one medium-sized picture. Therefore, one of the first effects that was noted when studying software animation is its economical in terms of file size.

There is definitely a trade-off. If your system starts to grow and the rules become more and more complex, then the computer must spend more and more resources to process each subsequent scene, and then also a significant amount of time to display them on the screen.

If you try to maintain a certain frame rate, then it sometimes does not leave time for your processor (milliseconds) to “digest” it all. Therefore, if the computer cannot render the scene in time, the playback quality (frame rate) will suffer. On the other hand, regular picture-based animation cares little about what's in the scene and how complex that picture is. It just shows the next picture in time and that’s it.

Benefits of Software Animation

The next advantage of software animation over frame-by-frame animation that we'll discuss now goes much further than just file size. It is already an established fact that software animation in most cases is used precisely as dynamic.

You've probably watched the movie Terminator 2: Judgment Day. At the end of the film, each time the Terminator disappears into the melting pot with the phrase “I’ll be back.” He does it in cinemas, on TV and on DVD. Even pressing the “Stop” or “Pause” button, you are not able to stop it. And that's because an ordinary film is nothing more than a sequence of pictures. At the end of this film they (pictures) show the Terminator disappearing into the inferno and that’s all they can do.

Now let's move from Terminator to a regular flash site. In the late 90s, when Flash was rapidly gaining popularity, only the lazy did not want to use its capabilities on their website:

• moving, appearing and disappearing forms;
• accompanying music;
• a sudden call for something;
• an emerging spot of light or shadow.

Back then, such things were new, so I wanted to exclaim: “Cool!” To be fair, not all of these sites were really cool. Looking back today on what I saw then, I can say that only two or three of them really stick in my memory.

The duration of the animation on them was no more than a minute. This was only enough for me to watch them three times in a row. Were they bad? No, it’s just that after several viewings the attention weakened, because there was nothing else to watch, like in a film about the Terminator. And here we can talk about a certain paradox - in films of this kind, the animation does not change, every frame, from the first to the last, is predetermined.

Let's return to software animation. It doesn't have to be dynamic. You can create an object and use code to locate it in the scene and then make it move along it. In such a situation, every time such a clip is run, the same code will run, causing the same movement. And, obviously, there is no dynamics here.

What if you take the same object and, using a code, randomly determine the location of this object, the direction of its movement and speed? In such a situation, after starting the video each time, we will see something different from the previous one.

But there is a third option. After starting the video, will the time of day, month and year be determined and based on these data a scene will be built, for example, a winter morning, a summer afternoon or a September evening?

And here is the fourth. During the film, the viewer, using the mouse or keyboard, could change certain factors at will? This would allow him to interact with objects in the scene. Such a film would be far from what we are used to seeing, right? It would even be possible to save the Terminator!

A virtual reality

It's possible that The most interesting aspect of dynamic animation is the application of the laws of mathematics and physics of the real world to the objects created in it. Not only can you make such an object move in a random direction, but you can also simulate the effect of gravity on it. As a result, it will begin to fall. When the fall ends, he will hit the ground and rebound, but to a height not equal to the one from which he began to fall. Eventually, he will stop jumping and remain lying on the “ground.”

After this you could allow the user to interact with it:

• "grab" it with the mouse
• or move using the keyboard.

Once the user begins to interact with it in this way, he will have the full feeling that it is a real physical object.

You can see this for yourself by playing with the red ball below.

By creating an animation like this, you make the user feel like they're not just watching the frames move, but that he is in some space created by you. How long will he be there? Yes, just as long as he is interested. The more opportunities you give him to interact, the longer he will stay there, and then return many times.

Results

In this introductory lesson we discussed:

• animation basics;
• differences between frame-by-frame and program animation;
• main advantages of dynamic animation.

This is conceptual, basic knowledge on the basis of which all subsequent material will be built. free mini-course “Basics of Animation in Actionscript 3.0”».

In the following lessons I'm going to talk about some tools that you can use in your work. The most obvious use for all of the information that will be discussed in this course is to create games. It is clear that they require the greatest interaction with the user, where he is required to solve certain problems and achieve set goals.

But the information in this course can be successfully used for your professional work as a web designer. For example, to create an interesting menu on a website, banner advertising or applications (programs) for the education system.

What type of animation is of greater interest to you personally? Write about it by leaving a comment below. Also, if you have any questions while studying this lesson, then don’t hesitate to ask, I will be happy to answer them.

See you in the next lesson!

Please enable JavaScript to view comments.

Hello dear readers. In his article I talked about the use of speed lines, with which you can create the illusion of an object moving with acceleration. Also in the article a technique was demonstrated using standard motion animation and a gradient fill during the appearance of the object. If you don’t remember or haven’t read these articles, I advise you to read them. Today I want to continue the topic of motion animation in Adobe Flash and show not the linear movement of objects, as was before, but movement along a trajectory.

First, I will demonstrate how this technique works using a simple example.

Create a new document with size 600 by 200 pixels. Name it First_animate. Background color blue or any other. For those who don’t remember, you first need to create a new Action Script 3.0 document. (File - New Ctrl + N). And then in the properties panel (Ctrl + F3) set the working window size and background color.

Rename the first layer to " An object". Create an oval on it ( O). Without deselecting the object. press the key F8 and assign it as a symbol. Name object1.

Create a second layer above the " An object", name it " Trajectory". On this layer, draw the trajectory of the ball with a pencil.

Right click on the layer " Trajectory" and select " Guide". A hammer icon will appear on the left. Now pull the layer "An object" under layer " Trajectory“, this way you will connect them with each other.

Now let's go back to the work area. Place our object at the beginning of the path. Create keyframes for the layer "An object" and layer "Trajectory" on frame 30. Place the ball at the end of the path. (The demo version includes a wireframe view of the layer "An object").

Now right-click on the first frame of the layer " An object" and select " Create a classic motion tween". After this we can test our animation ( ctrl + Enter).

Now, let's see what we can do with this knowledge. Let me give you another simple example. Let's assume. that we need to draw a kite. who flies across the sky.

Let's create a new document of size 600 by 200 px. Fill it with a gradient from blue to yellow. To do this, let’s create a layer at the very beginning, which we’ll call “ Background“, draw a rectangle the entire size of the work area (that is, 600 by 200 pixels) and fill it with a gradient. I already wrote in the article how to work with gradients.

Click "Insert - Create Symbol (ctrl + F8)". Set a name kite. Draw a kite. This is not difficult to do, it looks like a rhombus.

To make our kite look realistic. Let's define its movement in the symbol itself kite. This will be the kite swaying up and down and the ribbons developing. We will do the swinging at the expense of , developing ribbons at the expense of . Let's deal with the ribbons first. Their animation will be similar to the contour animation of the form (the ribbons, by the way, are drawn with the tool Brush and are suitable for this manipulation), which I wrote about in the article

Laboratory work No. 2

Information

Animating an object means making it smoothly change its properties. The state of an object is characterized by its size, color, position in space, shape. When you create a simple animation of an object using Flash tools, these properties change. Flash allows you to draw flat, two-dimensional objects.

When creating animation, time must also be taken into account. A time scale is used to keep track of time . Each cell of the scale corresponds to one abstract unit of time. This is not a minute or a second - these are frames. This is a point in time that corresponds to a snapshot of the state of objects.

If the time scale is not on the screen, then you need to run the command W indow → Ti m eline(Window → Artboard)

Flash allows you to create a movie by drawing each frame individually, just as cartoonists did in the old days. This animation is called frame-by-frame. There is another type of animation, when only the initial and final frames of a certain fragment are created, and the program completes all the intermediate frames itself. This type of animation is called automatic (tweened animation).

Flash supports the following animation types:

ü Motion animations. You can use motion tween controls to set object properties, such as position and alpha transparency, in one frame and then again in another frame. Flash then interpolates property values ​​for frames between the specified frames. Motion tweens are useful when the animation consists of continuous movement or transformation of an object. Motion tween appears in the timeline as a continuous range of frames, which can be selected as a single object by default.

ü Classic animation. Classic animation is similar to motion tweens, but is more complex to create. Classic animation allows you to create some animated effects that cannot be achieved using animated frame ranges.

ü Inverse kinematics poses. Inverse kinematics poses allow you to stretch and rotate shape objects, and connect groups of character instances to move them simultaneously for natural movement. You can place a shape object or related instances in different ways on separate frames, and Flash will interpolate the positions in the intermediate frames.

ü Form animation. When you animate a shape, a shape is drawn in a separate frame on the timeline, and in another frame that shape is changed or a new shape is drawn. Flash then interpolates the shapes for the tween frames, creating an animation of one shape flowing into another.

ü Stop-motion animation. This animation technique allows you to specify different objects for each frame of the timeline. This technique is used to create an effect that makes it appear as if frames from a movie are being played out quickly. This technique is useful when creating complex animations where the graphical elements of each frame must be different.

Identifying Animations on the Timeline

Flash differentiates tween animation from frame-by-frame animation in the timeline by showing different indicators at each frame of content.

The following frame content indicators appear on the timeline:

ü A range of frames with a blue background indicates motion animation. A black dot in the first frame means that the animation range has a target object assigned to it. Black diamonds indicate the last frame and other property keyframes. Property keyframes are frames that contain changes explicitly defined by the user. You can choose the type of property keyframes to display by right-clicking the animation range and choosing Show Keyframes → Type from the context menu. By default, Flash displays all types of property keyframes. All other frames in the range contain interpolated values ​​related to the animation properties of the target object.

ü A range of frames with a green background indicates the use of an inverse kinematics (IK) pose layer. Pose layers contain IK wireframes and poses. All poses are marked on the timeline with black diamonds. Flash interpolates the wireframe positions in frames between poses.

ü A dotted line means that the classic tween is broken or incomplete, such as missing the last key frame.

ü A black dot indicates a separate key frame. The contents of the light gray frames after the individual keyframe remain exactly the same, unchanged. These frames contain a vertical black line and an empty rectangle in the last frame of the range.

Example 1. Animating an object's movement

1. Draw some object, for example, a rectangle, in the corner of the frame.

The first frame of the timeline has changed - a thick black dot has appeared in it. This is a sign that the frame has become key. In a key frame, the system captures the object along with all its properties. Only in a keyframe can you edit object properties.

2. Right-click on this frame and select the command in the context menu that opens Create Classic Tween.

3. A blue frame appeared around the object, and in its center there was a circle with a cross.

4. The drawn object has turned into a so-called symbol.

Frames located between the start and end keyframes are grayed out. A solid arrow appears between keyframes.

6. In the last key frame (it should be selected - highlighted in black), use the Selection Tool (Pointer) to move the object to a new position, for example, to another corner of the frame.

The description of object movement is completed. We need to check if everything worked out correctly. Deselect an object by clicking outside its boundaries. Press the Enter key - the object begins to move.

To change the speed of an object's movement, you need to move the final key frame: to speed up the movement - to the left (decreasing the time allotted for movement), to slow down - to the right (increasing the range of time during which changes in the characteristics of the object occur).

To move a key frame you must do the following:

ü select the layer on which the object is located;

ü hover the mouse cursor over the key frame and hold down the Ctrl key (the cursor will turn into a double-headed arrow);

ü press the left mouse button and, without releasing it, move the frame.

Example 2: Animate object resizing

1. Draw an object, for example, a rectangle and apply the animation rules outlined above to it:

ü create animation in the first key frame – Create Motion Tween;

ü in the last key frame of the animation – Insert Key frame →Zoom.

2. Select the last key frame and resize the object by 1.5 - 2 times using the Free Transform Tool.

3. Press the Enter key.

Example 3: Animate an object's color change

1. Create a new file, draw an object and apply the rules for creating classic motion animation to it.

2. Being in the final key frame, select the object, i.e. left-click on it with the Selection Tool active

A Color Effect field appears in the Properties panel.

Example 4. Animating an object's transparency change

1. Create a new file, draw an object and apply the rules for creating motion animation to it.

2. While in the final keyframe, select the object.

A Color Effect field appears in the Properties panel.

If you select the Alpha (Transparency) option in the drop-down list, an additional field will appear in which you can set the transparency value as a percentage (100% is a completely opaque color; 0% is completely transparent).

Thursday, October 09, 2014 13:07 + to quote book

Many of you who work on flash drives know how to do classic motion animation. This places an object at a specific point in the first key frame and then moves it to another key point. On the Timeline, a certain number of simple intermediate frames are created between these key points.
The animation object moves from one key point to another strictly in a straight line.

How to make an animation object move along a given path. To do this, this trajectory, firstly, must, of course, be specified. Secondly, bind our object to this trajectory. Such a trajectory in flash is called a Guide.

And so, let’s look in more detail at how to create the movement of an object along a given trajectory. We will animate autumn leaves.
To do this, let's create a new Flash document Action Script 3
File - Create

Next, on the Timeline of the Main working field (Editing frame 1), create 2 layers
1. Background
2. Leaves
The Main Workspace timeline (Editing Frame 1) will look like this.

Save the created project under some name, for example “Falling Leaf”

We import any picture with an autumn background and the AI ​​file “Leaf” into the Program Library, which can be downloaded from the attachment below

The attachment:

File - Import - Import to Library

After downloading, the Library will contain the following files

Using the "Arrow" tool, drag the background image onto the "Background" layer on the main Working field Editing Frame 1 from the Library and either change the size of the Working field to fit the size of the picture, or transform the size of the picture to the size of the Working field.

After you click “OK” in the dialog box for creating a new symbol, you will be taken to the “Sheet” symbol editing window. Rename Layer 1 on the Timeline to "Animation Sheet"
From the Library, using the "Arrow" tool, add the graphic symbol "Sheet" to the Working field of the "Sheet" symbol.

On the Timeline, on the “Animation Sheet” layer, click on frame 140 and, calling up the context menu, select “Insert Key Frame”.

Intermediate frames appeared between frames 1 and 140. Now click on any frame between the first and one hundred and fortieth and, in the context menu that appears, select the “Create classic motion animation” item. After this, such an animation will be created automatically.

We do not touch the leaf added to the Workspace for now, but continue to work with the Timeline.
On the Timeline, click the 140th (last and key) frame of our animation and, calling up the context menu, also select the “Create classic motion tween” item. This way we include the last 140 key frame in the classic tween we created.

Now it’s time to create the trajectory along which our “Falling Leaf” object will fly.
To do this, click on the “Animation Sheet” layer and, calling up the context menu, select “Add a classic animation guide.”

After this, we will see that a new layer has appeared on the Timeline - “Guide”, and the “Animation Sheet” layer is “subordinate” to this layer.

Now, the trajectory for the movement of the object, created on the "Guide" layer, will be a guide to the action (movement) for the "Animation Sheet" layer, that is, all the classic motion animation created on the "Animation Sheet" layer will occur along the trajectory depicted on the "Animation Sheet" layer. Guide".
The “Guide” layer is a working layer and all graphics placed on it will not be displayed when publishing a flash video.
So let’s create (draw) on the “Guide” layer some kind of trajectory for the autumn leaf to fall from top to bottom.
To draw a trajectory, use the “Pencil” tool in the “Pencil mode with anti-aliasing” mode and, selecting the “Guide” layer and its first frame, draw a curved line for the required trajectory.

After the guide line is created, go to the “Leaf Animation” layer, select the first key frame and begin creating a classic motion animation for a falling leaf. To do this, use the Arrow Tool to place the leaf at the beginning of the trajectory we drew. In this case, the registration point of our leaf (in our case, the registration point is in the center) must be!!! is located on the guide path line.

At the same time, click again on the first frame of the “Animation Sheet” layer and make sure that it is selected. Now open the "Properties" tab and find the "Animation" section there. Check the checkboxes as shown in the picture.

On the "Leaf Animation" layer, click the 140th (last) key frame and use the Arrow Tool to place our autumn leaf at the end of the drawn path. In this case, the registration point of the leaf graphic object must also be located on the line of the movement trajectory.
Or, if snapping to the “Guide” works for you without any problems, then when you click the last frame of the animation, the leaf will automatically move to the end of the guide.

After that, click on frame 140 again to make sure that it is selected and by opening the “Properties” tab in the “Animation” section, also check the checkboxes as indicated in the picture.

Click again on any frame on the “Leaf Animation” layer, for example frame 40, and make sure that our leaf moves strictly along the drawn path.

If everything is fine, then the animation of the “Falling Leaf” along the given trajectory has been created and you can return to the Main Working Scene - Editing Frame 1.
While on Editing Frame 1, select the “leaves” layer and using the Arrow Tool, drag the “Leaf” video from the Library onto it, placing it at the very top of the background image.

For the "Leaf" video, apply the "Shadow" filter with the following parameters. Let me remind you that the "Filters" section can be found on the "Properties" tab.

By holding down the Shift+Ctrl keys, you can multiply the “Leaf” video and get several falling leaves. You can use the Free Transform Tool to resize and rotate the Leaf video so that the leaves don't fall exactly the same way.

By holding down the Ctrl+Enter keys, we view the resulting flash video. If everything suits you, then save the flash drive as a project in FLA format
File - Save
Exporting the flash video for further publication
File - Export - Export video

What is a cartoon like when there is no action? What will become of a cartoon that doesn't tell a story? You've probably seen how artists in the studio draw sketches from a live model. Such classes are very useful for understanding anatomy and how muscles behave in movement. However, the specifics of the transmission of such movement do not provide complete clarity! It is limited to reproducing real life, nothing more. Movement and activity are depicted completely differently in animation. Therefore, knowledge of how to draw the body correctly is not enough. It is especially important to master techniques that will “revive” the form. This is exactly what we will talk about in this course!

What is important to know

When an artist is working on a character who finds himself in a certain situation, it is important for him/her to create action first. Any scene you place your character in should help the viewer see the intent behind their action. See motives, feelings, skills (or lack thereof) and personality as a whole. This goal must be achieved even in the complete absence of dialogue. This is where drawings have an advantage: we can play with body language and inflate emotions to the limit. You won't have to fork out money for actors, studio, or other expenses. Enough paper and pencil. There is no limit to the imagination!

To achieve these results in animation, you need to aim for two things:

• Simplicity;
• Rhythm.

Gradually we will understand what role each of them plays in the composition of a painted scene.

1. Motion curve

A "motion curve" is an imaginary path along which your character's body moves. It is characterized by simplicity and intensity. This brilliant technique will help you achieve your desired goal when planning your drawings. With it you will be able to create a dramatic effect. Keep this in mind the next time you sketch characters in action.

The movement curve should be smooth and have direction so that it is obvious to us what each character intends to do.

Notice how strange the design looks based on complex motion curves.

An example of a motion curve being used incorrectly is where the line does not fit into the context as desired.

In the cartoon we see a perfect example of simplicity and rhythm. The motion curve gives the artist the ability to enhance the effect of his scenes. Consider the curve before you even start drawing the proportions of the characters. I assure you that the final drawing with movement will more than satisfy you.

To understand exactly what techniques and methods will help breathe life into cartoon characters, we need to get acquainted with the theoretical principles on which these techniques are based.

2. 12 Basic Animation Principles

In 1981, two of Disney's greatest animators (Frank Thomas and Ollie Johnson) wrote the book The Illusion of Life. They introduced the audience to the "12 Basic Concepts of Animation" that the studio has been using since the 1930s in an attempt to create the most realistic animation possible. Although these concepts were developed for use in traditional animation, they remain the same today - even in digital projects.

The basic concepts are as follows:

• Squash and stretch
• Preparation or anticipation (Anticipation)
• Staging
• Straight ahead action and pose to pose
• Inertia and overlapping action
• Slow in and slow out
• Arch
• Secondary action
• Timing
• Exaggeration
• Final drawing (Solid drawing)
• Attraction (Appeal)

It's not my goal to overwhelm you with a full range of animation techniques, so let's focus on the most important ones and try to understand how they can liven up a "boring" design.

Compression and stretching

This is the main, if not the most important, technique that we must use in creating character movement dynamics. The whole concept comes down to squeezing and stretching the proportions of a character or object according to movement. This technique allows us to add weight and fluidity to the movement. See how it is applied to an object:

Notice the physics of a bouncing ball: as it accelerates downward, its shape stretches. When the ball hits the ground, it is stretched horizontally (which emphasizes the force of gravitational attraction).

The example above illustrates this technique perfectly. It's unlikely that in real life you'll see a ball deformed like that when it bounces, but in animation it works great!

An example of how this technique is applied to facial expressions: Notice that the shape of the top of the skull does not change, and only the lower jaw extends downwards.


The same technique is applied to action. You can immediately see that the character is carrying a heavy load. Notice that the entire lower half of the body is compressed, while the upper half is stretched.

Amazing, right? This technique brings us to the next topic:

Exaggeration

There is not much to say here, since the principle is obvious in itself. Exaggerated gestures and body positions create dramatic effect - this is a mandatory rule of animation. Imagine what happens when we are surprised or frightened - our body reacts spontaneously from surprise. The same thing should happen with a cartoon drawing, but with a much more pronounced result!

Notice how the character's eyes pop out of their sockets and his body seems to be frozen. This is an exaggerated representation of a natural reaction that can be observed in life.

According to Disney studio rules, this technique must believably reflect life, but in a more extreme form. Exaggeration involves changes in the physical characteristics of a character or an element of the scene in which they are found. However, remember, it is important for you to clearly understand what kind of movement you are illustrating using this technique, so as not to mislead the viewer.

Exaggeration: Pay attention to the character's trajectories. They help to emphasize the point of application of force with which he is trying to lift the load. This will definitely convince the viewer that the ball is extremely heavy!

Preparation or anticipation

Preparation or anticipation is a technique used to prepare the viewer for an action that is about to occur. It is used to prepare movement or the appearance of an object, character, etc., the so-called preliminary set of energy, which often precedes the climax.

A classic example of preparation: the character is about to run and leave the stage!

Theoretically, preparation is created from an instantaneous movement, which is simultaneously opposed by a movement in the opposite direction. In animation, this involves, for the most part, preparing for the actual action and returning to complete the cycle.

Notice how we add action in the animation above: there is a brief anticipation of movement at the beginning, which then serves as the impetus for movement. We then observe how the body returns from motion to a state of rest.

Setup is a technique used in animation to make the viewer expect the effect that a scene will produce - whether it be static or animated. As an exercise, try to find other examples where this technique is used.

Targeting and Emphasis

In animation we call "targeting" the effect that precedes "accent". Both are necessary to make the expression of surprise stand out. They are performed according to the following algorithm:

• The character sees something amazing;
• Anticipation arises (the head quickly drops);
• The moment of “emphasis” takes place, the head rises up.
• The character returns to its original state.

Let's see how this algorithm works.

Step 1

We start by drawing a character with a joyful or natural expression:

Step 2

The character sees something amazing and, in anticipation of the moment, lowers his head down and closes his eyes. This movement increases the impression that he is seeing something incredible!

Step 3

Step 4

The character calms down and returns to its original state.

During this process, animators use a technique called timing scene in which intermediate phases are added to create a smooth transition between frames.

Here we see the use of a "squeeze and stretch" technique that adds mobility and momentum to the movement. In real life, the only moving part of our skull is the lower jaw, which opens and closes. But in animation, everything can stretch - even the head!

We'll come back to "timing" a little later.

Slow entry and slow exit

It is quite natural that when we are preparing to make a sudden movement or perform any action that requires effort, our body needs a certain amount of time to concentrate the energy required for this action. The result is instantaneous acceleration (or constantly uniform, depending on the movement). This makes the animated character look believable, and the number of key frames and phases varies depending on the frequency - a more exaggerated picture of what is happening in real life.

When we want to emphasize a particular movement in an animation, we place more frames at the beginning and end of that movement - but also include fewer phases in between. This creates a slow entry and a slow exit. This principle is widely used in animation when we want to draw a character's movement between distant body positions - for example, jumping up.

Advice: If you are a web designer and work with transitions to create animations on website pages, you have probably come across the concept of "timing", for which the function is used Transition in CSS3. This feature uses Smooth In and Smooth Out, among other parameters, to describe the speed curve in the animation. Likewise, if you work in After Effects, you'll probably notice in the menu Keyframe Assistant commands “Smoothly smoothly”, “Smooth entry” and “Smooth exit”. In one case or another, if you have used these options, it means that you are already applying the famous principle of animation in your projects!

Attraction

Attraction can be described by the words “charismatic” or “personal appeal”, which the artist endows with his characters. It doesn’t matter whether the character is positive or negative, a hero or a villain, a man or a woman - the most important thing is that the viewer can identify with them. Physical traits also influence a character's behavior and personality. Therefore, when a character takes an action or expresses an attitude towards something, it is important for us to think about how his/her physical, social or cultural qualities will harmonize with this behavior/attitude.

See how the drawing above specifically reflects each character's attraction. To emphasize certain features, small details are enough, for example, a woman's silhouette or the elongated face of a butler and a tense, but always elegant pose. The important thing here is to understand the nature of each characteristic as you add them to your scenes.

Observe what specific movements and actions each character makes to reveal themselves to the viewer. Will they behave like a sensual woman? How's the thief? Like a scammer? How's the butler? How's the waiter? How's the stylist? Which specific What features distinguish this particular character? What clothes are they wearing? We must constantly observe the nuances of people's behavior in real life in order to use these details to our advantage.

Let's quickly go through each of the remaining principles to achieve a general understanding:

Staging

Staging is created to direct the audience's attention to an important component in the frame. Additional scenarios or objects may be used in the production. Essentially, this technique is necessary to focus attention on what is most important and remove all unimportant details. This concept is used a lot in comics. Color, light, and camera angle are used to focus the viewer's attention on the most important details.

I added the car into the frame to emphasize the meaning of what was happening. Now we have clear context and everything becomes clear!

Through Action and Pose to Pose

"Action-through" means a detailed storyboard of an animation scene from beginning to end. "Pose to pose" refers only to the drawing of key frames, the gaps between which will later be supplemented by phases. The interesting thing is that the first technique is only used in 2D animation. But the Pose to Pose technique is still used in film storyboarding and 3D animation.

Inertia and Overlap

Inertia refers to the continuation of movement of individual parts of a character's body due to the movement of the entire body. For example, some parts of the body continue to move despite the fact that the character has suddenly stopped. “Overlapping” is a technique due to which some parts of the body move with a certain delay from the main one. For example, the body, limbs or hair move at a different time interval compared to the head. Combining these two techniques allows you to create more realistic animations.

Notice how the hair and T-shirt move at different speeds, following the movement.

Arch

When a character's movement follows a specific path, we call it an "arc". Imagine the cyclical movements of the hands of an orchestra conductor, or the sequence of movements of a speed skater, or an Olympic athlete performing a high jump. Each of them makes many movements that merge into a chain of smooth sequential elements. If at any point you break this chain and force your character to do something that doesn't fit into it, your animation will look weird.

Background action

Background action is added to the main action in the frame to enhance the effect you want to create. Imagine a character walking down the street and not paying attention to what is happening around him. At the same time, cars speed past him to emphasize the danger. Or imagine the look of doubt on the tightrope walker's face. These are examples of background actions in the frame that emphasize its meaning.

Timing

"Timing" means calculating the number of drawings that make up a certain action. For example, an object or character that moves slowly or with difficulty is usually a heavy character. Timing dictates the number of frames and phases you need to draw to convey the scene believably. You will need to do the same thing to draw a light object.

Timing is an extremely important concept in animation, and is widely used to create characters and their actions.

Final rendering

The final drawing refers to the accuracy of the drawings on paper. Drawings must have weight and volume in order to be seen and interpreted correctly. At the same time, we are not talking about detailed drawing to make the drawing realistic. We're talking about how you present your theoretical knowledge of drawing to the public. An artist who has mastered the basics of design can create the illusion of volume in his drawings, even in a 2D sketch. This is the art of the illusion of verisimilitude.

Some animation styles require extreme realism in the depiction of objects, clothing, and other objects in order to represent the scene to the viewer. For example, this could be a certain historical period, which must be depicted down to the smallest detail. For this reason, knowledge of the theoretical and practical foundations of drawing and human anatomy is irreplaceable.

The Tuts+ platform has several articles and courses written by different authors that will help you go deeper into the basics of drawing. There you can go through different drawing styles and become a complete artist.

3. Sequential movements and gait cycles

According to Ken Harris, animator at Warner Bros., "Walking is the very first thing to learn." Learning to make a cartoon character walk exactly the way you want is the most difficult task in animation. There are several ways, and they differ depending on the size, complexity, context and intensity of the scene.

Curiously, walking is nothing more than an attempt to support yourself in an upright position. In other words, we try to avoid falling to the ground! Imagine a baby trying to stand upright... by leaning forward, he may take a reflexive step.

Adults walk confidently and, as a rule, do not take sudden steps. In fact, we barely lift our feet off the ground. Our movements are kept to the necessary minimum; the main goal is to move the body forward.

In animation everything is different. A character's walk can tell a whole story. Therefore, we will use exaggeration techniques and timing to achieve the desired result.

Let's analyze the simplified process in the figure below:

Example of a simple gait cycle: the body rises slightly upward in transfer stages.

Notice that the arms move opposite to the legs; and when the body rises up in the swing stage, one leg is straight.

Now we fill the gaps with additional phases and complete the main walking cycle in the animation:

Different types of walking and running

As I mentioned, in animation (and in life) there are different walks, and they can be used to convey the desired feelings and desires of the characters. Different templates convey this:

Famous Animation Patterns: These were created based on the book Cartoon Animation by Preston Blair. I'm sure you are familiar with these pictures from various cartoons.

Example walking step: The body moves up and down all the time.

Differences in the walking of four-legged animals

The movement of four-legged animals is a more complex topic because you need to monitor the movement of the front and back legs. Smoothness of movement will make your work more difficult, but it is worth learning from examples of movements in real life.

The gait of a cartoon animal is a simplified interpretation of what happens in the real animal world. Muscles and joints occupy different positions depending on the phase of body movement:

Look above how the front and hind legs behave in transfer stages body: the head drops slightly as the hind leg moves forward. The opposite occurs during the swing of the front paw.

There are other types of animal gaits in animation that follow their own rhythm. Let's look at two of them below:

Exercise. Try to find the motion trajectories in the pictures above. Also note that the canter is a brilliant example of the use of compression and extension.

An example of an animated gallop. The front paws initiate the movement and provide the necessary impulse.

Realistic rendering of a walking or running cycle depends on several factors such as weight, height, intent... The most important thing here is to observe these movements based on real life examples.

Drawing walking and running is a rather complex topic that deserves a separate course dedicated only to it. Some animals, such as horses, have differences in their anatomy that causes their legs to move differently. Check out the "Hoofed Animals" section in my, there will be more details there. If you want to take a deeper look at horse movements, check out this book by Monika Zagrobelnaya.

Putting it all together

Before we wrap up, I've created an animation sequence that combines examples of several of the techniques discussed above. Can you tell which one is used?

End!

The role of traditional animation in the art of the 21st century is actively debated today. Modern animation studios like Pixar or Dreamworks still use at least 90% of the techniques described above. The ability to bring a drawing to life - whether through pin-ups, comics or animation - is a beautiful thing. If we can get a child to believe that an animal can talk and act like a human, that's amazing. When the viewer's emotions awaken, no words can express the feelings that the artist experiences at that moment.

Carlos Gomes Cabral

I"m a product from the madness of the 80"s, living in the city of Rio de Janeiro (Brazil). I"ve been fond of arts, comics and music since I was a child, I dedicated myself to several projects at the same time and I hate sitting still. With a Bachelor's degree in IT, I"m currently working for a technology mobility company. I"m also in love with motion graphics, HTML5, web design and UX trends. You can find me on Twitter (@cgcabral).