Flash 5: Part 3 - Tweening

One of the more important aspects of creating Flash movies is the programs ability to move an object from one location to another, filling in the sections between frames thus creating a smooth animation. This process is called 'motion tween'. Objects may also be tweened along a set path by linking a normal layer to a 'motion guide' layer for the object to follow along. Another of tween is the 'shape' tween which through morphing makes one object appear to change into another shape over a set amount of time. Flash can tween the size, location, and color of these shapes. There are ways to manipulate the location of the points for the tween using a tool called 'shape hints'. Finally we are going to discuss the way of using 'Frame by Frame' animation to create some great effects. All of these effects are an integrate part of the Flash application as it adds animation to Flash files.

First of all let's discuss the most common and straight forward instances of the tween called the motion tween. With this effect Flash can tween the position, rotation, size, and even the color of the instance. This can create a gradual shift in the colors or make an object fade in and out using alpha or tint color.

In order to begin the process of a motion tween we need to first take an object and make sure that it is in fact a 'symbol'. If it isn't a symbol it won't work correctly and will cause much frustration. So, if you create an original object, or import an image, make sure that you turn it into a symbol, (the simplest way is by using F8 on the keyboard). It will then show up in the library for use over and over again as many times as you would like, without increasing the file size.

In order to move a symbol you obviously require a starting point and an ending point for it to move along. Place the symbol that you wish to use on the stage and make sure that there is a keyframe where you want the tween to begin for the layer you are placing it on. Once you have this set up it is then time to create another keyframe further on in the layer where the end of the movement will be located. If once you view the tween and feel that it is too quick or slow it is easy enough to adjust the location of the starting/ending points with a click and drag. Once you have the ending keyframe set you can now click on the symbol and move it to another location where it will finish the tween movement.

At this point you need to tell Flash to fill in the frames between these two keyframes. This can be done in one of two ways. You can select the first frame and select the 'Motion Tweening' option from the Frame Properties panel. Or you can select one of the blank frames between the keyframes and click the right mouse button. A menu will appear, from which you can select the 'Create Motion Tween' option. You can use the timeline to move from one point to another. You'll be able to see the movement of the symbol and how Flash automatically fills in all of the frames between the keyframes.

There is an option to adjust the easing value, (acceleration or deceleration rate), by editing the Frame panel options that are available when you select either the first keyframe or any of the frames in between. In order to begin the motion tween slowly and have it accelerate the animation towards the end of the tween you can enter a value between -1 and -100. If you want the tween to begin rapidly and decelerate the tween towards the end of the animation, adjust the value of the ease between positive 1 and 100. The default rate of 0 keeps the tweening of the frames constant, while easing creates perhaps a more natural appearance of the acceleration or deceleration by adjusting the rate.

Another interesting feature is the ability to have the symbol rotate as it is tweening from one location to another. This option is also set in the Frame Panel that is shown – with the no rotation as the default obviously. Choose 'Auto' to rotate the object once in a direction requiring the least motion or you can select Clockwise (CW) or Counterclockwise (CCW) to rotate the object in the direction indicated, and then easily enter in the number of times you want the object to rotate.

Flash 5 Tutorial: Part 2 - Page 2
Flash 5 Tutorial: Part 1
Motion Path Layer - Page 2