Flash Fade Transitions for Slideshow

In our last two tutorials, we built a simple Flash^R CS4 slideshow for three images. Now we can add to the basic slideshow by building Motion Tweens for each image that will add a transition effect between our images. The easiest transition to create is the fade-in/fade-out effect. We will build this one first.

Our first step is to convert the first image to a symbol.

On Frame 2 of the Image1 layer, right-click on the image. From the Menubar, click Modify – Convert to Symbol. Give the symbol the name "Image1" and set the Type to Movie Clip. In the Properties panel, set the Instance Name to "Image1".
Now we can add the transition. Right-click on Frame 2 and choose Create Motion Tween. Flash automatically creates a tween the spans the 300 frames for our first image. We need to reduce this to 100 frames. Place your mouse over the blue area at Frame 300. Click and drag the blue span backwards so that it ends on Frame 100.

We want our first image to fade-in for about 10 frames, stay visible for 80 frames and then fade-out over 10 frames. We can control this by adding Keyframes.
Right now, our image is at a visibility of 100% over all 100 frames. Because we want the image to fade-in over the first 10 frames, we need to tell Flash that the end of our first transition will be Frame 10. We can do that by adding a Keyframe to Frame 10 on the Image1 layer. Right-click and choose Insert Keyframe – All.

Now we can set the visibility or alpha of the image to 0% on Frame 2. This will create the fade-in effect. But an alpha of 0% will give us a blank white stage. We don’t want to start our slideshow with this white stage. So let’s set the alpha to about 50% instead.
On Frame 2, click on the image. In the Properties panel – Color Effect section, set the Style to Alpha and the slider control to 50%.
On Frame 10, click on the image and set the Alpha to 100%.

Now, we need to tell Flash to keep this 100% Alpha through to Frame 90. We will do this with another Keyframe.
Right-click on Frame 90 of the Image1 layer and add a Keyframe.
Finally, we can reduce the Alpha on Frame 100 to 50% to complete the fade-out effect. On Frame 100 on the Image1 layer, click on the image and set the Alpha to 50% in the Properties panel.

Test your movie and you should see the first image fade in and out. But the other images remain the same. If you wish, you can repeat this effect for the other two images.

Join us in the Flash forum.

	Diane Cipollo BellaOnline's Flash and Animation Editor