Now that you have learnt how to draw characters and props, it’s time to dwell into the next step of making these characters and props move – Yes we are talking about Animation!

After the great feedback from the last tutorial, Paul is sharing his expertise for Part 2. Here it goes!

“Before I get down to the nuts and bolts of how to animate in Flash, I thought that a quick word on drawing might help those who feel that they are not very good at it. The fact is that you don’t have to be great at drawing to create fun and engaging characters. The important thing is that your audience can easily understand what is going. Therefore, even a poorly-drawn stick man can be as effective (or sometimes, even more effective) than an elaborately designed character. The secret is to use expressions and strong, interesting poses to tell the viewer what your character is thinking.

Expressions are very simple to produce. You will see from Fig. 01 how easily you can alter an expression just by changing a character’s eyebrow position and/or mouth shape. Whilst Fig. 01 uses a very simple character head, the same expressions would work just as well on a more detailed character. If you can master a relatively small number of expressions, you will be amazed how easily your characters will spring to life.

Poses are very important, particularly in ecards. Whilst it would be wonderful to have the luxury of animating every part of a character for each movement in a lavish, Disney-esque style, it would take a very long time. Placing your character in an interesting pose whilst only moving an arm, or a mouth, or whatever can really help. It’s a technique that was spearheaded by William Hanna and Joseph Barbara when TV took over from film and reduced budgets meant that full animation was no longer cost-effective. Their new “limited animation” gave us the joys of “The Flintstones”, “Yogi Bear”, etc. If it was good enough for them, it’s certainly good enough for me!

So, let’s get animating.

There are several ways to animate an object in Flash. The main two that I use are “tweened” animation and “frame-by-frame” animation. Let’s look at tweened animation in this tutorial.
The term “tween” comes from the job in traditional animation of drawing frames in-between the main positions or “keyframes” in a movement. It used to be an arduous task. Fortunately, with careful planning, Flash can do all the hard work for you. Let’s say an arm starts in a backward position and we want it to swing forwards into a forward position. Fig. 04 shows both of the keyframes for the movement as well as the 10 in-between frames (assuming we want the movement to take place over 12 frames).

Let’s go ahead and create this animation in Flash. If you followed the last tutorial, your library should contain a symbol called TurpleArm01. There are 5 stages to completing a simple tween (Fig. 04).

1. We start with a blank stage. You will see that the timeline contains a little white circle on layer 1, frame 1. The white circle represents a blank key frame – a single frame with nothing in it, yet.

2. We go to the library and get TurpleArm01 (click and drag it on to the stage) and move it into the starting position using the scale and rotate tools (see the last tutorial for how to do this). Don’t forget to move the pivot point to the shoulder. You’ll notice that where we had our white circle (blank keyframe) on the timeline, we now have a black circle. This indicates that it is now a keyframe – ie; there is something on the stage on layer 1 frame 1 (ignore that it now says layer 2 on Fig. 06 – that’s my little faux pas from when I put together the graphic. Doh! It will still read ‘Layer 1’ on yours. In fact, you would be well advised to change the name to ‘TurpleArm01’ or similar by double-clicking on the ‘Layer1’ text).

3. There are several ways to complete stage 3, but an easy one is to right-click on frame 12 and select ‘convert to keyframe’. Flash will look back along the timeline and duplicate the last keyframe it sees (frame 1 in this case). Frame 12 will effectively now match frame 1. However, being a keyframe, you will be able to change it without affecting the previous keyframe. Go ahead and move and rotate the arm into our finishing position. If you were to play the animation now, you would see our starting position held for 11 frames, with a quick jump to our finishing position on frame 12. Go to ‘control’>’test movie’>’test’ to check it out. You’ll notice that the frames between our keyframes have turned grey. These are regular frames. They will play whatever is on the preceding keyframe until the playhead meets a new keyframe. Now we can add our tween.

4. Right-click on one of the grey frames and select “create classic tween” from the menu.

5. You will now see that the frames between your keyframes have turned purple, indicating a classic tween. If you test your movie again, you’ll notice that the arm moves smoothly from the starting position to the finishing position. You’ve now created a simple tween. Magnificent!

You can do all sorts of things to refine your tween, particularly ‘easing’. When we move a body part, we don’t do so mechanically at a constant speed, but rather we start off slowly, picking up speed as we get into the movement. Experiment with the easing controls that are available in the Properties panel when you click anywhere on the purple tween on the timeline. Easing really adds a sense of life to what would otherwise look very robotic.Tweens can be used in all sorts of ways. As well as animating body parts, you might use them to move backgrounds or props. But always remember that the more tweens you use in one go, the harder the viewer’s computer has to work and the more danger there is of hanging and/or jerking. A wonderful, smooth movement might look terrible. We don’t want that. As Spiderman’s uncle said, “With great power comes great responsibility!”

Wow! Let’s leave it there for now. I don’t want to overload you and my typing finger is in need of a breather. More tutes soon (if you want them).

Happy Flashing!”

Author of the Post – Paul Solomons, 123Greetings Studio Visualizer.