11. Editing Tweens



Tweens help us create animations more easily. Using tweens we only set the starting point (keyframe) and the ending point (keyframe) of an animation and Flash creates the frames between the keyframes.

In Flash we have 2 types of tweens: Motion tweens (can apply to symbols) and Shape tweens (can apply to graphics drawn in Flash)

Open the file index.fla from template/flash.

You can modify anything you want in the template to adapt it to your needs. What you need to know is that in the timeline we have a layer for each element. On that specific layer we have created the animation of the element using keyframes, actions etc.

To modify the animation you have to set new keyframes or delete others. Let's say we want to modify the way "mainhead" movie clip appear on the stage.

Go to Timeline and select the "mainhead" layer:

This movie clip appears go from 0% alpha (transparency) to 100% alpha, changes its color etc. Let's say we want this movie just to dissolve from 0% alpha to 100% alpha.

Go to timeline and select the frames from 11 to 36. You do that by clicking on the first frame you want to select, pressing Shift key and then clicking on the last frame you want to select:

Then right click inside the selected frames and from the menu choose Remove Frames:

Now the timeline looks like this:

Now we have 2 keyframes. Let's delete the second keyframe too. To do that right click the keyframe and from the menu choose Clear keyframe to transform it into a regular frame.

Now the timeline looks real strange for that specific layer. That's because the only keyframe we have on this layer has a tween defined but it doesn't have a second keyframe in which the tweens ends so it is "broken" and appear as a dotted line.

Go on an remove that tween. Right -click on the keyframe and choose Remove tween:

After that you'll have a clear timeline with only one keyframe. In that keyframe the "mainhead" movie clip is 100% transparent. Add a new keyframe to frame 36. To do that just click on the frame 36 and press F6 or go to the main menu and choose Insert->Timeline->Keyframe.

Now you have 2 keyframes:

In the new keyframe select the "mainhead" movie on the canvas and from the Properties palette select Color->Alpha and set the Alpha value to 100%

Now the "mainhead" movie is visible, but the animation is now ready. We have 2 different keyframes but to create a smooth animation between the 2 keyframes we have to create a tween. To do that click on the first keyframe and from the Properties palette select Tween -> Motion

The animation is ready. But you can adjust it more if you want adding easing or setting intermediate keyframes.