building a slideshow with flash

The next step for us will be tweening the animation of the photos fading up and fading out.

If you may have wondered why all of the layers and keyframes are stacked perfectly on top of each other at this point, it is because we are taking a bit of a shortcut by creating all of the keyframes and tweens first, then we will move each piece of the timeline to cascade it out in the last step.

Setting the Alpha (transparency) of the images for the fades

To make the fades, we must first set the transparency to invisible in the first and last frames of our timeline.

To do this, first select all of the keyframes in frame 1 of your timeline using the same method as the last page. Need a refresher? First click on the top keyframe, hold down shift, then click on the bottom keyframe.

Next, and this is important, click once on the image showing on the stage (maybe different than the example):

The reason why we click on the image is to change the options offered to us in the Properties Window. Without clicking on the image, the properties window would only display options for the timeline, not the object on the Stage.

For Flash CS4: In the Properties Window, find the section for Color Effect, and set the style property to Alpha.

Alpha refers to the amount of transparency of the symbols currently selected (which is all of them). Move the slider to set the Alpha to zero, meaning completely invisible.

For Flash 8 and CS3: In the Property inspector at the bottom of the screen, set the Color setting to Alpha.

Alpha refers to the amount of transparency of the symbols currently selected (which is all of them). Move the slider to set the Alpha to zero, meaning completely invisible.

All versions: What we have done is set all of the symbols to be invisible in that first keyframe. Since Flash cannot adjust the transparency of images alone, we had to convert them to symbols in order to do this. We selected all of the keyframes in the timeline, thus selecting all of the symbol in that first keyframe at once.

Next, we are going to these steps, but with the last keyframe — frame 44.

Highlight frame 44 in all layers.

Click once on the image that is displayed on the Stage.

Then set the Alpha to zero in the properties window.

One you have set the last set of keyframes to 44, you have completed setting the in-and-out points of the fades. If you click on the red playhead (click up where the frame numbers are) and drag it back and forth through your project, you will see the images disappear and reappear in the proper keyframes.

Tweening the animation of the fades

A tween refers to "animation" in Flash. We have the alpha set on the correct keyframes, but now we need to actually see the gradation of invisible to visible of the photos.

A tween in Flash works like this: It analyzes two keyframes, sees how they are different from each other, then it will automatically animate the frames in-between the two keyframes. The term "Tween" is a throwback to the days of animation when in-betweeners would do the grunt work of animating the motion. Now Flash does that job.

Click and select all of the keyframes on frame 1.

For Adobe Flash CS4: Click on the Insert menu and select Classic Tween.

For Adobe Flash 8 and CS3: In the property inspector at the bottom of the screen, set the Tween option to Motion.

For all versions: A line with an arrow will appear from one keyframe to the next. This line represents the fade animation. If you drag the red playhead back-and-forth over this section, you will see all of the photos fade up together.

Now follow the same steps in creating a tween for FRAME 35. You do not want to create a tween on the last frame, but rather on 35. This is because we want the animation to go from visible (frame 35) to invisible (frame 44).

Your timeline show look like the one above.