Animating Artwork

Animating Photoshop (Layer by Layer) in Flash

This lesson deals with animating a Photoshop project. Here's the swf you'll build and here's a student's version of the skills you'll learn. Here's a few other examples: 1 | 2 | 3 | 4 | 5 of what you might try in the future. All students are required to become proficient in animating their digital artwork. One student just showed me his latest rough idea for a Web interface. Very promising!

1 – Right-Click to download the source files for this tutorial and notice that the folder and the psd have the same name

2 – Open pipe_750.psd, turn off visibility of all layers except the background layer, and Save for Web (rename jpgs with sequential names)

3 – Repeat for additional layers -- NOTE: it's not necessary to save each and every layer separately. You've got to use your head to figure a strategy when animating your own images.

4 – Open Flash and set the size and color of the Stage to fit your jpgs and save it in the same folder with the same name as your other files

5 – Import your images to the Library (Shift-Click to select the group) and position the first image on the Stage

6 – Convert to Symbol (MovieClip), Insert Keyframe, Create Motion Tween, and lower the Brightness on the instance of the symbol on Frame 1 (so it fades in from black)

7 – Insert and rename Layers then repeat steps on second layer -- but use Alpha rather than Brightness

8 – Repeat steps on the third Layer

9 – Add Keyrames so the image remains visible for a second or two before fading back to black (here's the swf you should have at this point)

10 – Add Easing (-100) to the first Keyframe of each tween to slow down the transitions (here's the swf you should have after adding Easing -- see the difference?)

11 – The transition is still too fast for the second layer so we'll need to select a range of frames and Insert Frames so the animation slows down (here's the swf you should have after adding frames -- these subtle tweaks are essential to improving your final animation)

10 – The animation could use a little more time between each loop in the animation so add a few frames at the end of the Timeline (here's the final swf)

11 – Continue to refine your timeline to achieve the most elegant result. Different images will demand different animation strategies.

Mac Lab | Digital Art | 3D Design & Animation | Multimedia Production | Tutorials | Students | FAQ | Blog

Just some text to prop the page open. Just some text to prop the page open. Just some text to prop the page open. Just some text to prop the page open. Just some text to prop the page open.