Synchronize Flash Motion Tweens

In this Flash^R tutorial, you will learn how to synchronize several Motion Tween fade transitions. We have been building a Flash slideshow template that contains four placeholder images. At this point, we have added a Motion Tween with a fade-in transition and a fade-out transition to the first image. Now we are ready to build the tweens for the other three placeholder images.

The fade transition is a very common transition used in TV and video. If you look at it closely, you will see that as one image is fading out, another is fading in. We can synchronize this effect by overlapping the transitions.

Let's start building our next animation for image2.

As we did in the last tutorial, we need to convert image2 to a movie clip named "image2".

We will start the animation for image2 on Frame 70 and end on Frame 150. It may be helpful to turn off the visibility of the image1 layer.
Select Frame 1 of the image2 layer. Hold down the F5 key on your keyboard which will add empty frames after Frame 1 and push the frame that contains the image2 movie clip forward. Stop when the frame containing the image2 movie clip reaches Frame 70.
On this Frame 70, right-click and create a Motion Tween. Drag the Tween span to Frame 150.
Add a Keyframe to Frame 80, 140 and 150.
In the Properties panel, set the Alpha to 0 for Frames 70 and 150. Set the Alpha to 100 for Frames 80 and 140.

As you can see, we have overlapped the fade transitions for the two image. As image1 fades out over Frames 70 to 80, image2 fades in.
For image3, we will begin the animation on Frame 140 and end on 210. We will overlap the fade transitions over Frames 140 to 150 and add a fade out transition for Frame 200 to 210.
For image4, we will begin the animation on Frame 200 and end on Frame 280. We will overlap the fade transitions over Frame 200 to 210 and add a fade out transition for Frame 270 to 280.

Now we come to a little problem. We have image4 fading out on the last 10 frames and then the animation goes back to Frame 2 and image1 will fade in over 9 frames. These two transitions combined to span over 19 frames and never really overlap. This will cause the stage to become completely white at the end of the animation. We will fix this in the next tutorial.

Join us in the Digital Art and Design forum.