How to Create a Flash Banner With Adobe Photoshop CS2

Creating an animated Flash banner is easy with the bundled combination of Adobe Photoshop CS2 and ImageReady CS2. With these powerful programs, you don't even need Flash software to create multimedia .swf files for your webpage or blog. This tutorial will give you the basic foundation to create any type of Flash animation you can imagine.

Difficulty: Moderately Challenging

Instructions

Things You'll Need:

• Adobe Photoshop CS2 with ImageReady CS2

Create and Animate

1. Create a 468 by 60 pixels 72 dpi document in Adobe Photoshop CS2. This is standard Internet banner size.

2. Pick a background color. Go to the "Select" menu and pick "Select All," then go to the "Edit" menu and select "Fill...". Click "OK." To use a background image, copy and paste the image into your new document.

3. Click the "Window" menu and open the "Layers" palette. Click the icon at the bottom of the window that displays the pop-up: "Create a new layer." In the new layer you just created, add the words you want on your banner.

4. Duplicate the layer as many times as you want steps in your animation. In this case, you're going to have the type move across the banner, so click on the first layer and position the type where you want your animation to start. Move the type on each additional layer ahead a little further until you get where you want to end on the top layer. The more layers or steps you create, the smoother the final animation will be.

5. Select "Edit in Image Ready" from the "File" menu. This opens your document in ImageReady CS2 where you will convert your layers into animation frames.

6. Go to the "Window" menu and select "Animation" to bring up the Animation Palette. Click the right arrow button on the right side, scroll up and select "Make Frames From Layers." Click on each frame and turn on the bottom background layer in the "Layers" palette.

7. Use the same menu as the previous step and choose "Select All Frames." Pick one frame and set the time delay to ".1 Sec" for a fast animation or ".2 Sec" for a readable animation. Changing one frame will change all the frames selected. Hit the "Play" arrow at the bottom of the palette to preview your animation. The preview plays slower in ImageReady than it will in Flash, but it shows you how smooth your animation is.

8. Go to the "File" menu and choose "Export" > "Macromedia® Flash™ SWF..." and click the "Generate HTML" checkbox. Click "OK" then click "Save."

9. Open the HTML document with a web browser to see your Flash animation.

Tips & Warnings

• Create each element, type or vector shape, on its own layer so that you can animate it independently. Flash animations work best with type, Adobe Photoshop shapes, or "Smart Objects" imported from vector programs.
• The default frame rate for .swf files is 12 frames per second (12 fps), so keep in mind that your animation will play faster than ImageReady's preview.