g Text Version
Beauty & Self
Books & Music
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
News & Politics
Religion & Spirituality
Travel & Culture
TV & Movies

Bored? Games!
Take a Quiz
Rate My Photo

Natural Living
Folklore and Mythology
Distance Learning

All times in EST

Clairvoyance: 08:00 PM

Full Schedule
g Flash and Animation Site

BellaOnline's Flash and Animation Editor


Flash Fade Transitions for Slideshow

In our last two tutorials, we built a simple FlashR 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.

  1. 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".

  2. 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.

  3. 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.

  4. 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%.

  5. 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.

  6. Right-click on Frame 90 of the Image1 layer and add a Keyframe.

  7. 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.

Add Flash+Fade+Transitions+for+Slideshow to Twitter Add Flash+Fade+Transitions+for+Slideshow to Facebook Add Flash+Fade+Transitions+for+Slideshow to MySpace Add Flash+Fade+Transitions+for+Slideshow to Digg Flash+Fade+Transitions+for+Slideshow Add Flash+Fade+Transitions+for+Slideshow to Yahoo My Web Add Flash+Fade+Transitions+for+Slideshow to Google Bookmarks Add Flash+Fade+Transitions+for+Slideshow to Stumbleupon Add Flash+Fade+Transitions+for+Slideshow to Reddit


RSS | Related Articles | Editor's Picks Articles | Top Ten Articles | Previous Features | Site Map

For FREE email updates, subscribe to the Flash and Animation Newsletter

Past Issues

Printer Friendly
tell friend
Tell a Friend
Email Editor

Content copyright © 2018 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Diane Cipollo for details.


g features
Subtle Animation Website Trends

Wix Editor - Background Video

Video on Wix Websites

Archives | Site Map


Past Issues

Note: BellaOnline uses cookies to help provide a consistent user experience. Our advertisers may use cookies to help customize ads. Please contact us with any question about our cookie use.

Summertime Foods
Corn on the Cob
Burgers on the Grill
Apple Pie


| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2018 Minerva WebWorks LLC. All rights reserved.

BellaOnline Editor