Archive for August, 2008

Have you ever wanted to make one of those banners that has several images which blend into each other as they change? Well, they are easier to make than you might think.

Some Brief Preparation

First, decide how long you want each image to be displayed as a regular picture. Then, decide how long you want each fading session between the images to last.

Then, decide what frame rate you are going to use. I recommend something between 24~30 to get a nice smooth transition. Once you have that, convert those first two numbers into frames. To convert it to frames, just multiple the amount of time you want it to last (in seconds) by the fps.

For examples sake, during this tutorial I’ll be using 24 fps, with my images lasting 1 second (24 frames), and each fade session lasting half a second (12 frames).

Now, decide how many images you want to use. Make sure each of those images is the same size. If they aren’t, I recommend either cropping the images to a common size, or you’ll have to fill their back with solid colors.

Creating the Flash

Create a new Flash document. It doesn’t matter if it’s Actionscript 2.0 or 3.0, so I’d go with 3.0.

Now, bring in each of your images as Graphics. If you wanted, they could be Movie Clips, but Graphics will make for a smaller file size. If you need to make any adjustments to their size (like giving them a solid color background to take up the extra space), do that now. Make sure each of them is in your library, but go ahead and delete them all from your stage.

Next, make your Flash document be the size of your final banner, preferably the same size as all of your images.

Now, create one layer for each image that you have, than add one more layer.

Now, on the first layer, you’ll place your first image in frame 1. You’ll then go out however many layers you want it to sit on stage by itself and create a key frame. Then, go out however many layers you want it to be in the blending process and create another keyframe.

On the next layer, starting at the same position as the second keyframe (the first one you made), add a keyframe and place your image on it. Then, at the same position as the third keyframe (the second one you made), insert another keyframe. Now, go out however many frames you need to make that one be on by itself for the amount of time you specified. Then, create it’s keyframes for the fading as well.

You’ll repeat this process until you’ve done it for each of your images. Your frames should look somewhat like stair steps as they go up.

Example Timeline

Now, one the top layer, create a keyframe that starts and ends at the last images fade cycle. Place the first image in these frames.

Almost done. Now all you have to do is on each of the fade sequences, add a motion tween. And now, for the fade sequences, on the layer that is on the bottom sets it’s last keyframe to have Alpha = 0% (Alpha is in the Color drop-down when you click on the object) and end with Alpha = 100%, and on the top one, have it start with Alpha = 0% and go to Alpha = 100%.

So, what you get is when it reaches a point, the one gradually becomes more transparent as the other gradually becomes more visible.

And that’s it, you now have a banner that has images rotating that blend together.

Quick Recap

1. Decide length of time for them to be visible and to fade, and convert that in terms of frames.
2. Create a new Flash Document and set it’s size to the desired banner size.
3. Bring each of your images to the stage, make them graphics, and do any necessary prep.
4. Create layers for each image, than one extra layer.
5. In the first layer, add your first image, then go out as many frames as how long you want it visible and make another keyframe.
6. Go out how many layers you want it’s fade to last and add another keyframe.
7. In the next layer, create a keyframe parallel to the start of the first fade and add the second image.
8. Create another keyframe parallel to the end of the first fade.
9. Create a keyframe out the distance that you want the second image to show.
10. Create it’s fade keyframes.
11. Repeat these steps for each of the images.
12. In the last layer, create frames parallel to the last fade, and place the first image in them.
13. For each of the fades, create motion tweens.
14. For each pair of fades, make the bottom one start at 100% alpha and go to 0%. For the top, do the reverse.

Extra Tweaks

Here are some ideas for extra tweaks you could do to this banner:

• If you wanted to place words or something over your banner, add another layer and place them on top, with the frame going from the start to end of your movie.
• You could actually make the graphics a series of small animations which blend in and out, simply by using Movie Clips (which actually have movie clips within them) instead of graphics
• If you wanted the images to fade to a solid color instead of into each other, space the frames out to remove the overlap (or give it even more space if you want the color to remain for a bit) and set the document to the desired fade color, and presto. You could even use a background image instead of a solid color that it’d go to each time.

Have any more ideas? Leave a comment with them.

On my other site, HTML Blox, a site aimed at helping people learn how to create websites, I’ve started my own small green initiative. I’d like to expand that to all my sites, so I’ve added a link to this menu as well.

It can be found here: HTML Blox - Go Green!