Animating a Banner in Flash

CATEGORIES: Flash, Tutorials | RC | December 05, 2007

This week, I was checking out the Layers Forums and someone wanted to find out how to make a flash animation for a banner. Couldn’t think of a better place to start, so let’s get right to it:

1. Before you start, make sure that you have 2 images ready that are 250px by 250px (made in Photoshop)

2. Click on File-New menu, and select the Templates from the dialog box. This will have sections for commonly used sizes. Select the 250×250 popup from the list.

3. Change the properties of the movie that you are making in the stage to 24fps (you can find it in the property bar at the bottom).

4. Click on File-Import to Library and select the 2 images that you created to import.

If you want to check out the rest of it, click on the link below. I dont want to take up ALL of the space. Have a great Wednesday everyone!

5. On the 1st keyframe of Layer 1 drag the first image onto the stage.

6. Click on Modify-Convert to Symbol. Give the symbol the name image1 and select Graphic as a type.

7. Once that is done, right click on frames 10 and select Insert Keyframe

8. Do the same for Frames 30 and 40

9. Highlight Frame 1, then click on the image on the stage. When you do that, you will see a property in the property bar called Color. If you click on that, you will see a dropdown selection called Alpha. Select that one and drop the alpha to 0%

Now, this means that when the movie starts, it will start with an invisible graphic. At frame 10, the image will appear, and will stay on the stage until we tell it to fade out. Frame 30 is where I want it to start fading out, and frame 40 is where I want it to be completely gone. To do that, highlight frame 40 and click on the image on the stage. Do the same thing you did to the image at frame 1, turning the alpha to 0%. So, now we have.

Frame 1: Graphic at 0% opacity
Frame 10: Graphic at 100% Opacity
Frame 30: Graphic still at 100% Opacity
Frame 40: Graphic at 0% Opacity

10. Once that is all set up, right click in between frames 1 and 10 and select Motion Tween. Do the same between Frame 30 and 40.

Presto! You have an animation of a graphic fading in and out! Now: If you want to add the second animation:

Right click on Frame 41, and select Insert Blank Keyframe. Once that is complete, repeat steps 5-10 going further down the timeline. You can change the speed at which the graphics fade in and out by changing how far apart the keyframes that fade in and out are, as well as the middle keyframes.

Click here to download the source file

Back to Top

Get the latest tips, tricks and news delivered straight to your inbox.

• 
• Dragging an Object Between Documents
• TV Scanline Effect
• Trick to the Glossy Effect
• 3D Text
• Changing Type on a Path
• more tips