Make a 125 x 125 Ad Button in Flash

Just the other day, I was writing a tutorial about how to create an animated 125 x 125 pixel square button ad in Photoshop^R Elements 7 and I thought that I might make another in Flash^R CS4.

As you can see, I have already created the graphics for this ad. It has a background graphic and five other layers that I will use to create the animation. Each layer has a colored strip with some text describing one of the services that I offer at my design company. I will animate each layer individually to slide on top of the background graphic. The last layer contains the name of my company. After this layer slides in, the animation will repeat.

Open Adobe Flash CS4 and choose Create from Template – Advertising. From the Templates list, choose 125 x 125 square button. This will give you a stage that is only 125 x 125 pixels.
Click File, Import, Import to Library to import our PSD file into Flash. All of the graphics from the PSD file are placed in an Assets folder in the Flash Library.
We have one layer in the Timeline. Let's rename this layer to "Background" and drag an instance of the Background graphic onto the stage. To be sure that the graphic is in the correct position, set the X and Y coordinates to 0.0.
Add a new layer to the Timeline and name it "WebDesign". This is our first slide-in graphic.

Let's have this graphic slide onto the stage over the span of 50 frames. Our Frames Per Second is set by default to 24. Therefore the slide in effect will last slightly over two seconds.
Right-click on Frame 50 of the Background layer and insert a Frame to expand this layer to Frame 50. On the WebDesign layer, right-click on Frame 1 and drag an instance of the WebDesign graphic to the right edge of the stage. We don't want the graphic to be visible on Frame 1, so place it at the right edge of the stage.

Next →

Join us in the Flash forum.