Web Design 2
Flash – Animating Layered Photoshop Images
11/14/08

• For this example, we will simulate that you have a layered Photoshop file named image.psd.

Part 1 – Saving your layers as JPEGs in Photoshop.

• Open your layered image in Photoshop.
• Turn off (uncheck the eyeball) all of the layers except the first one, then choose file, save for web – save it as image1.jpg.
• Turn on the second layer, then choose file, save for web – save it as image2.jpg.
• Continue with these steps until you have turned on all of the layers and saved them as jpgs. Each jpg will be a step in your Flash animation.

Part 2 – Animating in Flash

• In Flash, import image1.jpg to stage.
• The stage size should be the same size as the image size.
• Make sure that the X and Y coordinates in the info panel are set to 0.
• Convert to movie clip (F8). Name it image_mc
• This will be the container in which you animated the image.
• Once inside the image_mc movie clip, F8 to convert the jpg to a movie clip
• Name it image1.
• Go to f20 on the timeline and add a keyframe (F6)
• Add a motion tween.
• Go back to f1, and change the alpha to 0.
• Add a new layer, and name it image 2.
• Add a blank keyframe on F25 on that layer.
• Import image2.jpg to the stage and repeat the process from above.
• Go back to the previous layer and add frames (F5) to the same frame as the ending keyframe on the layer above it.

Part 3 - Creating web page

• Add 3 examples of animated Photoshop files onto 1 web page.

  To do this from Dreamweaver, click insert, media, Flash; then add the swf file.