Flash has 2 main types of 'tweening' to assist your animation : Shape tweening and Motion tweening, each have their own pro and cons.
Shape Tweening
Firstly, Shape tweening is where Flash interprets the vector values of your artwork on the first keyframe and the final keyframe and tries to extrapulate the' tween' frames based upon mathematically calculating the changes of those values, this is fine when calculating basic shapes like transforming a Rectangle into a Circle which seems to be of little problem to Flash, however, much more complex shapes will cause unexpected changes to take place on the tween frames leading to transistions that don't resemble either the first keyframe or the last - which isn't any good to you as an animator - but all is not lost and I will endeavour to explain how Shape tweening can be better controlled later in this tutorial.
Motion Tweening
Here Flash first requires that your artwork on the first keyframe is either a grouped object, a Graphic Symbol or a MovieClip, that's because it doesn't calculate the vector values of the object but instead calculates the transform properties of the object's transform bounding box.( i.e. X, Y Position, Width, Height, Rotation, Skew and Transparency of the object.). The limitations of this is that it is less fluid than Shape tweening but that's not to say that you can't create a fluid look to your animation just using Motion tweening it just means you have to think harder about how to achieve your look.
"So what's all this 'Tweening' you keep babbling on about?"
The word Tweening is a shortened animator's term for the 'in-between frames' that complete the animation between two keyframes. They are important in creating fluid, realistic animation.
In the large animation studios of Warner Bros. or Disney the cartoon artists would create the keyframe artwork and also a Tween direction sheet explaining how the animator would like the tween frames to animate to complete the effect, this would be sent off to the Tween artists who's job it was to draw the Tween frames.
In Flash the program gives you a range of tools to help automate this tedious task, although if you like old school animation and perfer to do all the artwork and tweening yourself then there is no reason why you can't ignore Shape and Motion tweening and simply draw the in-between frames yourself, although very creditworthy you'd be a tad foolish to overlook such powerful tools that Flash offers which could dramatically improve your workflow and create just as wonderous cartoons as you could by hand.
So in this tutorial I hope to be able to clarify how to animate in Flash and how to choose the best method to fit your style.
Animating Shapes and controlling the Tweens
As I've explained earlier Flash can't always be expected to get it just right first time that's where you step in a take control of your animation. In the expample below I've demonstrated how Flash can create realistic animation from simple shape tweening.
In the above example I created a Circle by pressing the 'O' key and dragging out an Oval whilst pressing Shift to contrain the proportions to create a circle.Then by left mouse clicking on frame 10 in the Timeline I then pressed the 'F7' key to create a blank keyframe which I then created a Square on the main scene area by pressing the 'R' key then dragging out a rectangle whilst pressing the Shift key to contraint it to a Square. I then right-mouse clicked on frame one in the Timeline and and selected 'Copy Frames' which I then right-clicked on frame 20 and selected 'Paste Frames'. This created the 3 basic Keyframes needed to complete this animation. I left mouse clicked on frame 10 and using the Transform Tool (Q) I rotated the Square shape 45 degrees - this is simply a case of pressing Shift on the keyboard whilst using the rotate handle and dragging the mouse around - you will see that it contrains the rotation to 45 degree angles which is always useful if you need precise rotation.
Now that all the keyframes are as I would like them it was simply a case of left mouse clicking the first keyframe and selecting the Shape tween option from the Properties palette as illustrated below.
What you may have noticed when you added the Shape tween to your image was the other animation options available in the Properties palette for the shape tweening which include: Ease: and Blends: Don't worry about Blends too much we won't really be going into this in this tutorial so leave it on the default setting.
However, 'Ease:' has a very interesting effect as it changes the timing value of your tween so that the animation may start of slower and finish faster, or start off faster and slow down towards the end.
In the case of a bouncing ball as the ball falls to Earth it's velocity will speed up therefore it will, in animation terms, start off slower and gradually speed up - in other words "Easing In" which are denoted by the minus values on the Ease slider. However, as the ball bounces back up it will lose velocity and therefore "Ease Out" denoted by the positive values on the Ease slider as inllustrated in the animation below.
Okay so that explains simple shape tweening but what about tweening more complex shapes as Flash will create to weird in-between frames if the level of drawing gets more complicated. Well to a certain degree we can control how Flash will interpret the vectors of the tween frames by using Shape Hints (Ctrl+Shift+H) these are points of reference that can be placed at vector points on your first keyframe and will be copied to the last keyframe where you can position the hints to match how you want the tween frames to follow those points as illustrated below.
This is still a very simple drawing and the animation is still not perfect even though I've taken the time to place the fingers of this hand on a seperate layer to make things less complicated for Flash to animate. This, more than anything, shows the weakness of Shape tweening as even with hints and a very stylised simple drawing it still struggles to interpret the vectors and may well have been easier to draw each tween frame using Flash's drawing tools. However don't dismiss this technique as it can still be very powerful when employed to better use. In the next section I will explain Motion Tweening which has the benefit of being in some ways more controllable.
Motion Tweens - Controllability versus Flexibility
With Motion Tweening the shape you are animating must be either a grouped object (Ctrl+G), A Graphic Symbol or a MovieClip as the way it animates is to alter the bounding box of the shapes transform properties. While this makes it more controllable it also means you lose some of the flexibility in terms of being able to bend lines with the vector calculations of Shape tweening, but that's not to say you can't make it just as fluid it just means you have to work at it a different way.
The above animation was created by drawing and scanning in 4 main body parts: head, leg, arm and torso. which was imported into Flash and vectorise as explained in my tutorial about creating a Flash cartoon character each of the body parts was drawn using Flash's drawing tools on seperate layers and then converted to Graphic Symbols (F8) and named appropriately (i.e. Head, Arm, Leg, Torso) then the parts where put together on the main stage and the keyframes for the arm and leg were copied to new layers. one set of arm and leg layers above the torso layer and one set of arm and leg layers below to make up both sides of the character. Next each layer was selected in turn and the key Q pressed to activate the Transform tool the centre-point or pivot point of the transform box was repositioned to pivot at the pivot point of the body part. In the case of the arm at the top near the shoulder, the leg at the top near the hip, the head would pivot at the nexk and the torso would pivot about at the naval level.
With all the joints having their pivot point set the frontmost leg was position forward and the rearmost leg extending back, the arms are positioned as opposites to their relative leg positions so the front-most arm would be extending back and the the rearmost extending forward. I added a basic head tilt as well as torso swing to give the animation a bit more dynamism to it. I then moved to frame 10 on the Timeline and having Shift-selected all the layers pressed the F6 key to add a keyframe at frame 10 - these keyframes are copies of the keyrames on frame 1. at frame 10 I rotated the position of each arm and leg to be the opposite of the positions on frame 1 tilted the head backward slightly and lowered the torso - in lowering the torso you have to repositon all the other parts to match the movement of the torso otherwise arms and legs would get detached which is hardly realistic. one the repositioning of the parts was completed it was simply a case of Shift-selecting all the keyframes on frame 1 and copying them to frame 21.
"Why frame 21?" you may well ask - I'll explain this later and it will all make sense.
Firstly Shift-select all the keyframe at frame 1 and open the Properties palette and select the Motion tween. You will notice purply-blue lines now extending between frame 1 and frame 10 in the timeline - this denotes that a Motion tween has been placed linking the keyframes at frame 1 with the keyframes at frame 10. Shift-select the keyframes at line 10 and go back to the Properties palette and add a Motion tween starting at this frame, once again a purply-blue lines extend from frame 10 to frame 21 signifying that all your ketframes are now animated with Motion tweens - Pressing Ctrl+Alt+Enter will now test the scene you have created and should show your character running on the spot.
Now go back to the main scene layer and Shift-select all the layers at frame 20 and press F6 this will create a set of new keyframes at frame 20 based upon the positon of the object at that frame. You can now shift select all the keyframes at frame 21 then right-mouse click and select "Remove frames" this deletes all the keyframes at frame 21. The purpose of this is that the keyframes at frame 21 where simply copies of the keyframes at frame 1 and therefore as the animation looped those keyframes would create a stuttering of the animation flow using the above method means that you can dispense with frame 21 and the animation will loop smoothly.
The example above is very simplistic as you can see by copying the arm and leg the duplicates look like they are on back-to-front, the seams at the joints don't blend perfectly, and to make it more flowing new symbols need to be created for the forearms, calves, hands, feet and perhaps hip and chest area isnstead of a solid torso - as you can see this requires a lot more work, but I will leave this down to you to explore and learn your way around Flash.
One little tip that will greatly help you should you be deciding to output your animations to gif or one of the movie formats. If you created an animation within a Movieclip and simply imported that clip to the main stage when it comes to exporting the animation to gif or avi etc. then it will only play the one frame - even if in the preview Flash plays the entire clip. It is better to animate within a Graphic symbol and when you drag this to the main stage add the same amount of frames to the Timeline as in your animated Graphic symbol layer and it will export perfectly. There are other benefits in that you can chose to play just a part of your animation by setting the start keyframe in the Properties palette and restricting the number of frame in the Timeline to suit that section of animation. That's somthing else to thing about and probably deservant of another tutorial. Sorry that there as been more text than illustrations in this tutorial there was a lot that needed saying and not enough room to illustrate each point.
Finally I'd recommend getting Macromedia Flash Cartoon Animation - Learn from the pros - by Kevin Peaty and Glen Kirkpatrick from Friends of Ed. ISBN 1-9034509-8-5 - which is a superb insight into animating cartoons for Flash explaining all the best techniques and going into greater detail than I could here.
I hope you've enjoyed this tutorial have a look at the others I have done.
Return to Tutorial Page