logo
g Text Version
Beauty & Self
Books & Music
Career
Computers
Education
Family
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
Money
News & Politics
Relationships
Religion & Spirituality
Sports
Travel & Culture
TV & Movies

dailyclick
Bored? Games!
Nutrition
Postcards
Take a Quiz
Rate My Photo

new
Action Movies
Bible Basics
Houseplants
Romance Movies
Creativity
Family Travel
Southwest USA


dailyclick
All times in EST

Full Schedule
g
g Flash and Animation Site

BellaOnline's Flash and Animation Editor

g

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 Del.icio.us 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


print
Printer Friendly
bookmark
Bookmark
tell friend
Tell a Friend
forum
Forum
email
Email Editor


Content copyright © 2014 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


g features
Motion Particle Systems - Introduction

Particle Fog in Motion 5 - Scene Graphics

Motion 5 Parallax Effect - The Graphics

Archives | Site Map

forum
Forum
email
Contact

Past Issues
memberscenter


vote
Poetry
Daily
Weekly
Monthly
Less than Monthly



BellaOnline on Facebook
g


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


BellaOnline Editor