Or Five Easy Steps to Making a Photo Fade In and Out

Keyframes signify the beginnings and ends of changes in an image (the bounces of a ball, the fade-in of a photo or a fade-out of a photo, etc.). Mark a frame as a keyframe when you want to start or end a change. Think of keyframes as the brackets, the starts and stops, the beginnings and ends - of a motion, a fade in, a fade out, size increase, a size decrease, etc.

When you set two keyframes - one when a fade starts, another when it ends, Flash does its magic and figures out the middle, the inbetween part. This is called TWEENING.

IMAGES: Use four jpgs [download them from this site here].

1. Open up Flash
2. Stage dimensions = 700 x 500 pixels
3. Background = white
4. Frame rate = 15 fps
5. Choose: File > Import to Library, browse to boats.jpg and open it. Boats.jpg ends up in your Library.

IMPORTANT NOTE: If you grab frames from iMovie or Final Cut Pro to use as still photos in Flash, first save them in a .pict file, then import them into Photoshop to change them to a .jpg. If you don't the picture will be distorted and/or show the video interleaving lines. ALSO: Save all .jpgs for the Web (_File > Save for Web_) before using them in Flash, otherwise they will be too large.

Before you can manipulate images in Flash, you have to change jpgs to symbols. Flash is very picky about this.

Change a jpg to a Symbol
6. Create a new layer (or if one exists with nothing in it, use that one) and name the layer "boats" by double-clicking in the layer and typing in "boats". Then select the empty keyframe (click in the first frame of the layer -- it contains an empty circle) and then click-and-drag boats.jpg from your library onto the stage.

1. Make sure boats.jpg is selected on the stage (a light blue square will appear along its outside border), and choose Modify>Convert to Symbol. A handy shortcut is F8 (Function key 8). In the highlighted box, type boats. Make sure that "graphic" is selected from the choices below. Click "okay", and the jpg on the stage turns into a symbol. A symbol of boats.jpg appears in your library.

[One way you can tell the image on the stage is a symbol is that there's a little circle in the middle of the photo. And, in fact, when you select any of your symbols on the stage, they'll always have the little circle in the middle.] You can check to make sure that symbol boats looks the same as boats.jpg by clicking on boats symbol in your Library Window and seeing the image.

What you're going to do now is produce a Flash movie in which the photo fades in from Frames 1 to 10, stays unchanged from frame 10 to 20, and fades out from Frames 20 to 30.

Set the Keyframes
8. Click on Frame 30, hit Insert > Timeline > Keyframe or hold down the mouse and select Insert Keyframe from the dialog box (this is the end of the whole fading in, fading out Flash movie)

1. Click on Frame 31, hit Insert > Timeline > Blank Keyframe or hold down the mouse and select Insert Blank Keyframe from the dialog box (this is very important later, as it designates the end of the layer's content and prevents Flash from filling in frames when you're copying layers).

2. Click on Frame 10, hit Insert > Timeline > Keyframe or hold down the mouse and select Insert Keyframe from the dialog box (this is where the photo finishes fading in).

3. Click on Frame 20, hit Insert > Timeline > Keyframe or hold down the mouse and select Insert Keyframe from the dialog box (this is where the photo starts fading out)

Set the Fade
12. This is where you apply the fade. Click on Frame 1, and then click on the photo on the screen. (Make sure you've selected the arrow - Selection Tool -- in the Toolbar.) In the Property Inspector, in Color, choose "Alpha" (transparency) on the drop-down menu. Then change the percentage to "1 percent" - that means the photo is transparent.

1. Click on Frame 10, then click on the photo. In the Property Inspector, in Color, choose "Alpha" on the drop-down menu. Change the percentage to "99 percent". (Why 1 and 99 percent instead of 0 and 100? Apparently, the transition is smoother.)

2. Click on Frame 20 to make sure that the Alpha on the drop-down menu is at 99 percent.

3. Then click on Frame 30, on the photo, and, in the Property Inspector, change the "Alpha" to "1 percent".

Set the Motion Tweens
16. One more step. This is where you tell Flash how to do the fade - to set motion tweens between the first two keyframes that bracket the first action to let Flash know that these are the frames in which it has to fill in the action. This is how: Click on Frame 1, hold the mouse down, and when the menu pops up, choose "Create Motion Tween". [Or, you can look in the Property Inspector for "Tween" and choose "Motion" from the drop-down menu.] A thin solid arrow stretches between Frames 1 and 10, indicating a motion tween.

1. Since the photo doesn't change between Frames 10 and 20, you don't put a motion tween between Frames 10 and 20. You put one between Frames 20 and 30, where the photo starts to fade out. So, click on Frame 20, hold the mouse down, and when the menu pops up, choose "Create Motion Tween."

2. Hit return, and watch your movie!

One more important rule
ONLY ONE SYMBOL ON A LAYER. That means that if you're moving one symbol on a layer, you can't add a symbol to a layer that already has a symbol and make it move independently of the symbol that was there first.

The truth about instances
Flash really works with INSTANCES of symbols. Instances is what you call a symbol after you've dragged it onto the Stage. Why is this important? Because you can do anything you want to this instance - shrink it, stretch it, make it disappear - and it doesn't do anything to the symbol from which it came. Which means you can use the symbol as many times as you want.

So, to show you how you can use the same image again, repeat the exercise above, using the same image, but name it boats2 in the new layer. Then, once you've dragged boats onto the Stage in the new layer, make it smaller or larger, whatever…just play.