Creating the Animation

This is where things start to get fun. Choose Window, Animation to open the Animation palette. Next, click on the Duplicates Current Frame button at the bottom of the Animation palette. This adds a second frame to your animation (see Figure 15.20).

Figure 15.20. Adding a second frame to the animation.

By the Way

ImageReady uses a frame-based animation model, which is a series of individual images (or frames) that play one after the other, giving the illusion of movement. Because you've built your file from the beginning using layers, creating the animation will be a simple task of adding frames and turning layers on and off.

In the Layers palette, turn on the Image 1 layer and the Relax layer (see Figure 15.21). Add another frame in the Animation palette, turn off the Image 1 and the Relax layers, and turn on the Image 2 layer and the Revive layer (see Figure 15.22). Add a fourth frame and turn off the Image 2 and Revive layers, and turn on the Image 3 layer and the Refresh layer (see Figure 15.23).

Figure 15.21. Adding a second frame to the animation.

Figure 15.22. The third frame of the animation.

Figure 15.23. The fourth frame of the animation.

Now you'll add the tagline as a whole to the animation. Add a fifth frame, hide the Image 3 layer, and show all three text layers. Turn on the Background layer as well (see Figure 15.24). If you click the Play button at the bottom of the Animation palette, you'll see the animation in action.

Figure 15.24. The fifth and final frame of the animation.

Whenever you're ready, click on the Stop button to stop the animation from playing. You'll notice that although the animation sequence itself is cool, it really goes too fast to read. That's where timing comes in….

Set the Timing of the Frames

As is often said, timing is everythingand in animation, timing is key. Think of the playing of your animation as an important sentence in a speech. You have to add pauses and adjust the timing so that your emphasis and points are understood.

You want to make sure that the animation pauses long enough so that people can read the text and see the name of the company. In the Animation palette, highlight frame 1 and choose a frame delay of 0.5 seconds (see Figure 15.25). Choose a frame delay of 1 second for frames 2, 3, and 4. For frame 5, choose a frame delay of 2 seconds (see Figure 15.26).

Figure 15.25. Choosing a frame delay for the first frame.

Figure 15.26. All the frames with specified frame delays.

Now play the animation again and see the difference. In fact, you can see an even better representation of how the animation will play by previewing it directly in a browser. From the bottom of the toolbox, click on the Preview in Browser button.

This launches your web browser, and you'll see the animation playing in the browser window, along with other information about the file (see Figure 15.27).