One of the most exciting things about ImageReady is its ability to make GIF animation really easy. At the most basic level, all you need to know to get your first animation out is how to turn layer visibility on and off (we’re hoping you’ve read the previous chap-ters and know this by now).
Unlike other GIF animation programs, though, ImageReady works closely with the PSD format and image layers to create ani-mated GIFs, so if you’ve used any of these other programs (such as Paint Shop Pro), it’s going to take you a little while to learn it the ImageReady way.
To get past the first few hiccups, here’s what you can animate:
❍ Layer Visibility—the simplest animations work on turning layer visibility on and off as the animation moves on. A classic exam-ple is blinking text.
❍ Layer Position—moving layers around can create some
interest-ing effects.
❍ Layer Opacity—change this for cool fade in/fade out effects.
❍ Layer Blending Modes.
❍ Layer Styles—these can be added at any time to any frame with-out upsetting any of the other frames in the animation.
If you’re going to change content in the animation—like turn-ing a blue vase into an orange one—you’ll have to create a new layer for the orange vase and play with the layer visibility or opacity.
10.3.1 A Flashing Banner
We’ve hinted more than a little at how animation is as easy as turning a layer on and off: now we’ll prove it.
Start with a new image ([Ctrl] + [N]) and choose Web Banner from the Image Size drop-down menu. Use the Text Tool ([T]) to type out whatever you want on the banner. Change the font to Impact for a better… well… impact, and the font colour to red. Or you could just skip formatting the text and move on by just using a large font size.
GETTING READY WITH
X
IMAGEREADY PHOTOSHOP
In the Animation Box (if you can’t see this at the bottom left, go to Window
> Animation to enable it), click on the Duplicate Current Frame button to create a new frame for the animation. Select the sec-ond frame in the box, and in the Layers palette, turn off the visibility of the type layer by clicking on the
“eye” icon next to it.
Click on the Play button in the Animation box to preview the animation—it’s
ready! Of course, it’s blinking too fast, so change the frame delay by clicking on the little arrow below the frame’s thumbnail in the Animation box. Here you can choose how long the animation will pause at each frame.
10.3.2 The Magical Graph
We’re now going to animate a layer’s position to create the effect of a graph drawing itself. From the Workshops\Chapter 10 folder on the CD, open Graph.psd. this file has five layers—Arrows, Screen, Graph, Sales Figures (a type layer) and the Background.
What we’ll be doing is using the screen to reveal the graph pro-gressively, to give us an animation of climbing sales figures.
Create a new frame in the Animation box. Keep the second frame selected, and in the Layers palette, select the Screen layer.
Hold down [Shift] and [Ctrl], and use the right arrow to nudge the Screen layer to the right. Keep doing this till the entire graph is revealed. You should end up with one frame that only shows the axes, and another that shows the graph in its entirety.
Start with simple text
Choose a frame delay
Previewing the anima-tion right now is likely to cause considerable bitter-ness—it’s quite the disap-pointment. What we should have done is create more frames and nudged the screen a little bit in each one of them—that would have really conveyed the graph-drawing-itself effect. Fortunately for our lazy selves, we can do that in a snap, thanks to a handy concept called tween-ing. Tweening between (that, incidentally, is how the name comes—“tween”
is the poetic truncation of
“between”) two frames of an animation means that intermediate frames will be added so that the transition between them appears smoother. In our case, we
will tween to introduce a few more frames so that the screen actu-ally appears to move rather than just disappear.
Keep the second frame selected, and click on the Tween button in the animation box. In the Tweening dialog that pops up, you can choose whether you want to use the previous frame as a reference or the first one. You can also decide how many frames will be inserted into the animation, as well as what will be tweened—layer position, opacity, or layer effects. If, for instance, you had Frame 1 where Layer 1 is visible, and Frame 2 where Layer 1 is now hidden, turning on the Opacity option will create inter-mediate frames with Layer 1 fading out. If you turn off the option,
The Empty Document
The Graph magically appears!
GETTING READY WITH
X
IMAGEREADY PHOTOSHOP
ImageReady won’t look at layer opacity at all.
We’ll just accept the defaults for now.
Now that the animation has grown from two frames to seven, preview it again—the effect is much more convinc-ing now, isn’t it? If you want to ensure that the graph is
drawn only from corner to corner, select the individual frames and nudge the Screen layer to where you want it for that frame.
10.3.3 Optimising your animation
Apart from the GIF optimisation you’re going to use on the ani-mation anyway,
ImageReady also optimises the animation even more—
it isn’t going to be just a collection of individual GIFs, you see. To turn on Animation Optimization,
click on the little arrow at the top right of the Animation box and select Optimize Animation from the menu. You will see two checkboxes, both of which are checked by default.
Bounding Box optimisation cuts out only those areas of the image that have changed between frames, and discards the rest. So in the magic graph example, information like the “Status Report”
text or the axes of the graph will only be stored once for the first frame and then reused, rather than being present in every frame.
Redundant Pixel Removal makes every unchanged pixel transpar-ent—while you will still see full individual frames in the Animation box, your final product will be reusing pixels from the first.
The Tweening Options
Optimising the Animation
10.3.4 Exporting the animation You aren’t limited to saving your animations as just animated GIFs anymore—you can export them to the Macromedia Shockwave format as well! Just go to File >
Export > Macromedia Flash SWF to do this. Vector art such as Type and Shapes will remain vector in the SWF format, so you won’t see any distortion when the SWF is resized on the Net.
If you’re working on a PSD and want to take all the layers
into Macromedia Flash, go to File > Export > Layers as Files, and at the bottom, choose SWF as the export format. Each layer will now become an individual SWF file, and when you open these in Flash, each will appear on a different layer for you to edit.
Setting the Export Options
GETTING READY WITH
X
IMAGEREADY PHOTOSHOP