How to Make a Flash Animation Banner with Photoshop? - Digital Web

You can make a Flash animation banner in Adobe Photoshop by using it with Photoshop's companion program, ImageReady. ImageReady has specialized features such as animated GIF creation, image optimization, image slicing, rollover effects and HTML generation that bring a Flash animation to life.

You can build a layers composite banner in Photoshop, and then edit it to web readiness with ImageReady. Toggle between the two programs and fine-tune the graphics, then save it in the SWF format in ImageReady to create a banner that is viewable on the web.

How to Make a Flash Animation Banner with Photoshop?

1. Create a banner image in Photoshop. Open a new document and make the canvas size 400 px (pixels) by 500 px, the standard banner size.
2. Create new layers that reflect how you want the banner to change when the mouse rolls over it. Click "Layer">"New">"Layer", or the right arrow from the Layers palette.
3. View the banner effects by turning the layers on and off . Do this by clicking the eye icon next to each layer in the Layers palette.
4. Switch to ImageReady by clicking on the button at the bottom of the Tools palette. ImageReady will open the file with the Photoshop layers intact.
5. Click "Window">"Animation" to open the Animation palette. A horizontal window appears with a box for frame number one and a time display beneath it.
6. Click the New Frame icon at the bottom of the Animations palette. (It's to the left of the trashcan in the menu bar of the Animations palette) Choose all visible elements for the frame by clicking the eye icons in the Layers palette.
7. Repeat the "new frame/show layer" sequence to create all the frames for your banner. Turn on all the layers to see the various layer states in the Animation window.
8. Click the slice tab in the Web Content menu and designate a URL for the banner, a name for the slice, "alt" text tags for search engine optimization and other parameters.
9. Preview the banner by clicking the test button in the Tools palette. Save the file for web use. Click "File">"Save Optimized", and name the optimized file. ImageReady does all the work of creating the html file for a Web banner. Copy the html document and the new folder containing the images to the same location on your web server.