70
U
sing H
elp
| C
on
t
en
ts
| Inde
x
B
ack
404
Adobe Photoshop Help
Creating Rollovers and Animations (ImageReady)
U
sing H
elp
| C
on
t
en
ts
| Inde
x
B
ack
404
To move states between slices and image maps:
Drag the state up or down in the Rollovers palette. When the highlighted line appears in
the desired position, release the mouse button.
To delete rollover states:
•
To delete one state, select a rollover state, and either click the Trash button on the
Rollovers palette or choose Delete Rollover State from the Rollovers palette menu.
•
To delete all states in a rollover, choose Delete Rollover from the Rollovers palette menu.
Creating and editing animations
You use the Animation palette, in conjunction with the Layers palette and Rollovers
palette, to create animation frames from an original, multilayer image. You can assign a
delay time to each frame, use the Tween command to generate new frames, and specify
looping for the animation. The number of frames you can create is limited only by the
amount of memory available to ImageReady on your system.
About animation
An animation is a sequence of images, or frames, that is displayed over time. Each frame
varies slightly from the preceding frame, creating the illusion of movement when the
frames are viewed in quick succession.
An image can have multiple animations that are associated with different rollover states.
For example, adding an animation to the Normal rollover state causes the animation to
play when the Web page is first loaded by a Web browser. Adding an animation to another
rollover state causes the animation to play only when the Web user performs the specified
action (such as placing the mouse over the rollover or clicking on the rollover).
Using the Animation palette
The Animation palette lets you create, view, and set options for the frames in an
animation. You can change the thumbnail view of frames in the Animation palette—using
smaller thumbnails reduces the space required by the palette and displays more frames in
a given palette width.
Displaying the Animation palette Choose Window > Animation. A check mark indicates
that the palette is showing.
Using the Animation palette menu Click the triangle in the upper right corner of the
palette to access commands for working with animations.
Changing the size of animation thumbnails Choose Palette Options from the
Animation palette menu, select a thumbnail size, and click OK.
Adding frames
Adding frames is the first step in creating an animation. If you have an image open in
ImageReady, the Animation palette displays the image as the first frame in a new
animation. Each frame you add starts as a duplicate of the preceding frame. You then
make changes to the frame using the Layers palette.
Note: Always create and edit frames in Original view. While you can view frames in an
optimized view, the editing options are very limited.
122
U
sing H
elp
| C
on
t
en
ts
| Inde
x
B
ack
405
Adobe Photoshop Help
Creating Rollovers and Animations (ImageReady)
U
sing H
elp
| C
on
t
en
ts
| Inde
x
B
ack
405
To add a frame to an animation:
1 In the Rollovers palette, select the state in which you want to display an animation.
(See “
U
sing the R
ollo
v
ers palett
e
”
on page
398
.)
Adding an animation to the Normal state will cause the animation to play when the image
is loaded in a Web browser. Adding an animation to another type of state will cause the
animation to play when a user activates the state.
2 Do one of the following:
•
In the Animation palette, click the Duplicate Current Frame button or choose New
Frame from the palette menu.
•
In the Rollovers palette, click the Create Animation Frame button or choose New
Animation Frame from the palette menu.
Note: If the Create Animation Frame button and the New Animation Frame command are
not visible in the Rollovers palette, select Include Animation Frames in the Palette Options
dialog box. (See “
U
sing the R
ollo
v
ers palett
e
”
on page
398
.)
3 Modify the image for the frame using the Layers palette. (See “
A
b
out w
or
k
ing with
la
y
ers in r
ollo
v
ers and anima
tions
”
on page
396
.)
Selecting frames
Before you can work with a frame, you must select it as the current frame. The contents of
the current frame appear in the document window.
You can select multiple frames, either contiguous or discontiguous, to edit them or apply
commands to them as a group. When multiple frames are selected, only the current frame
appears in the document window.
In the Animation palette, the current frame is indicated by a narrow border (inside the
shaded selection highlight) around the frame thumbnail. Selected frames are indicated by
a shaded highlight around the frame thumbnails.
To select the current frame:
Do one of the following:
•
Click a frame in the Animation palette.
•
Click a frame in the Rollovers palette. If necessary, expand the state that contains the
animation to view its frames. (See “
U
sing the R
ollo
v
ers palett
e
”
on page
398
.)
•
In the Animation palette or the Layers palette, click the Forward button to select the
next frame in the series as the current frame.
•
In the Animation palette or the Layers palette, click the Backward button to select
the previous frame in the series as the current frame.
•
In the Animation palette, click the Select First Frame button to select the first frame
in the series as the current frame.
To select multiple frames:
In the Animation palette, do one of the following:
•
To select contiguous multiple frames, Shift-click a second frame. The second frame and
all frames between the first and second are added to the selection.
102
U
sing H
elp
| C
on
t
en
ts
| Inde
x
B
ack
406
Adobe Photoshop Help
Creating Rollovers and Animations (ImageReady)
U
sing H
elp
| C
on
t
en
ts
| Inde
x
B
ack
406
•
To select discontiguous multiple frames, Ctrl-click (Windows) or Command-click
(Mac OS) additional frames to add those frames to the selection.
•
To select all frames, choose Select All Frames from the Animation palette menu.
To deselect a frame in a multiframe selection:
Ctrl-click (Windows) or Command-click (Mac OS) a frame to deselect it.
Editing frames
You can use the Animation palette or the Rollovers palette to target the image content of
a frame for editing.
To edit the image content of a frame:
1 Select a frame. (See “
S
elec
ting fr
ames
”
on page
405
.)
2 Modify the image for the frame using the Layers palette. (See “
A
b
out w
or
k
ing with
la
y
ers in r
ollo
v
ers and anima
tions
”
on page
396
.)
Rearranging and deleting frames
You can change the position of frames in an animation and reverse the order of selected
contiguous frames. You can also delete selected frames or the entire animation.
To change the position of a frame:
1 Select the frame you want to move in the Animation palette or the Rollovers palette.
2 Drag the selection to the new position.
Note: In the Animation palette, you can select and change the position of multiple frames.
(See “
S
elec
ting fr
ames
”
on page
405
.) However, if you drag multiple discontiguous frames,
the frames are placed contiguously in the new position.
To reverse the order of contiguous frames:
1 Select the contiguous frames you want to reverse.
2 Choose Reverse Frames from the Animation palette menu.
To delete selected frames:
Do one of the following in the Animation palette or the Rollovers palette:
•
Select Delete Frame from the palette menu.
•
Click the Trash button , and click Yes to confirm the deletion.
•
Drag the selected frame onto the Trash button.
To delete an entire animation:
Select Delete Animation from the Animation palette menu or the Rollovers palette menu.
Copying and pasting frames
To understand what happens when you copy and paste a frame, think of a frame as a
duplicate version of an image with a given layer configuration. When you copy a frame,
you copy the configuration of layers (including each layer’s visibility setting, position, and
other attributes). When you paste a frame, you apply that layer configuration to the desti-
nation frame.
77
U
sing H
elp
| C
on
t
en
ts
| Inde
x
B
ack
407
Adobe Photoshop Help
Creating Rollovers and Animations (ImageReady)
U
sing H
elp
| C
on
t
en
ts
| Inde
x
B
ack
407
To copy and paste layers between frames:
1 Select the frame you want to copy in the Animation palette or the Rollovers palette.
Note: In the Animation palette, you can select and copy multiple frames. (See “
S
elec
ting
fr
ames
”
on page
405
.)
2 Choose Copy Frame(s) from the Animation palette menu or the Rollovers palette menu.
3 Select a destination frame or frames in the current animation or another animation.
4 Choose Paste Frame(s) from the Animation palette menu or the Rollovers palette menu.
5 Select a Paste method:
•
Replace Frames to replace the selected frames with the copied frames. When you paste
frames into the same image, no new layers are added to the image; rather, the
attributes of each existing layer in the destination frames are replaced by those of each
copied layer. When you paste frames between images, new layers are added to the
image; however, only the pasted layers are visible in the destination frames (the
existing layers are hidden).
•
Paste Over Selection to add the contents of the pasted frames as new layers in the
image. When you paste frames into the same image, using this option doubles the
number of layers in the image. In the destination frames, the newly pasted layers are
visible, and the original layers are hidden. In the nondestination frames, the newly
pasted layers are hidden.
•
Paste Before Selection or Paste After Selection to add the copied frames before or after
the destination frame. When you paste frames between images, new layers are added
to the image; however, only the pasted layers are visible in the new frames (the existing
layers are hidden).
6 Select Link Added Layers if you want to link pasted layers in the Layers palette. Use this
option when you need to reposition the pasted layers as a unit.
7 Click OK.
Tweening frames
You use the Tween command to automatically add or modify a series of frames between
two existing frames—varying the layer attributes (position, opacity, or effect parameters)
evenly between the new frames to create the appearance of movement. For example, if
you want to fade out a layer, set the opacity of the layer in the starting frame to 100%; then
set the opacity of the same layer in the ending frame to 0%. When you tween between the
two frames, the opacity of the layer is reduced evenly across the new frames.
The term “tweening” is derived from “in betweening,” the traditional animation term used
to describe this process. Tweening significantly reduces the time required to create
animation effects such as fading in or fading out, or moving an element across a frame.
You can edit tweened frames individually after you create them.
Example of using tweening to animate warped text
78
U
sing H
elp
| C
on
t
en
ts
| Inde
x
B
ack
408
Adobe Photoshop Help
Creating Rollovers and Animations (ImageReady)
U
sing H
elp
| C
on
t
en
ts
| Inde
x
B
ack
408
To create frames using tweening:
1 To apply tweening to a specific layer, select it in the Layers palette.
2 Select a single frame or multiple contiguous frames.
If you select a single frame, you choose whether to tween the frame with the previous
frame or the next frame. If you select two contiguous frames, new frames are added
between the frames. If you select more than two frames, existing frames between the first
and last selected frames are altered by the tweening operation. If you select the first and
last frames in an animation, these frames are treated as contiguous, and tweened frames
are added after the last frame. (This tweening method is useful when the animation is set
to loop multiple times.)
Note: You cannot select discontiguous frames for tweening.
3 Do one of the following:
•
Click the Tween button in the Animation palette.
•
Select Tween from the Animation palette menu.
4 Specify the layer or layers to be varied in the added frames:
•
All Layers to vary all layers in the selected frame or frames.
•
Selected Layer to vary only the currently selected layer in the selected frame or frames.
5 Specify layer attributes to be varied:
•
Position to vary the position of the layer’s content in the new frames evenly between
the beginning and ending frames.
•
Opacity to vary the opacity of the new frames evenly between the beginning and
ending frames.
•
Effects to vary the parameter settings of layer effects evenly between the beginning
and ending frames.
6 If you selected a single frame in step 2, choose where to add frames from the Tween
With menu:
•
Next Frame to add frames between the selected frame and the following frame. This
option is not available when you select the last frame in the Animation palette.
•
First Frame to add frames between the last frame and first frame. This option is only
available if you select the last frame in the Animation palette.
•
Previous Frame to add frames between the selected frame and the preceding frame.
This option is not available when you select the first frame in the Animation palette.
•
Last Frame to add frames between the first frame and last frame. This option is only
available if you select the first frame in the Animation palette.
7 Enter a value, or use the Up or Down Arrow key to choose the number of frames to add.
(This option is not available if you selected more than two frames. In this case, the
tweening operation alters the existing frames between the first and last frames in the
selection.)
8 Click OK.
64
U
sing H
elp
| C
on
t
en
ts
| Inde
x
B
ack
409
Adobe Photoshop Help
Creating Rollovers and Animations (ImageReady)
U
sing H
elp
| C
on
t
en
ts
| Inde
x
B
ack
409
Specifying looping
You select a looping option to specify how many times the animation sequence repeats
when played.
To specify looping:
1 Click the looping option selection box at the lower left corner of the Animation palette.
2 Select a looping option: Once, Forever, or Other.
3 If you selected Other, enter a value in the Set Loop Count dialog box, and click OK.
Specifying delay for frames
You can specify a delay—the time that a frame is displayed—for single frames or for
multiple frames in an animation. Delay time is displayed in seconds. Fractions of a second
are displayed as decimal values. For example, one-quarter second is specified as .25.
To specify a delay time:
1 Select one or more frames.
2 In the Animation palette, click on the Delay value below the selected frame to view the
Delay pop-up menu.
3 Specify the delay:
•
Choose a value from the pop-up menu. (The last value used appears at the bottom of
the menu.)
•
Choose Other, enter a value in the Set Frame Delay dialog box, and click OK.
If you selected multiple frames, specifying a delay value for one frame applies the value to
all frames.
Note: Delay time may not be accurate during an animation preview in ImageReady.
For an accurate preview of delay time, preview animations in a browser.
Adding layers to frames
When you create a new layer, it is visible in all frames of an animation. To hide a layer in a
specific frame, select the frame in the Animation palette, and then hide the desired layer in
the Layers palette.
You can use the Create Layer for Each New Frame option to automatically add a new layer
to the image every time you create a frame. The new layer is visible in the new frame but
hidden in other frames. Using this options saves time when you are creating an animation
that requires you to add a new visual element to each frame.
To add a new layer every time you create a frame:
Choose Create Layer for Each New Frame from the Animation palette menu. A check mark
indicates that the option is turned on.
61
U
sing H
elp
| C
on
t
en
ts
| Inde
x
B
ack
410
Adobe Photoshop Help
Creating Rollovers and Animations (ImageReady)
U
sing H
elp
| C
on
t
en
ts
| Inde
x
B
ack
410
Setting the frame disposal method
The frame disposal method specifies whether to discard the current frame before
displaying the next frame. You select a disposal method when working with animations
that include background transparency in order to specify whether the current frame will
be visible through the transparent areas of the next frame.
Illustration of frame disposal methods:
A. Frame with background transparency with Restore to Background option B. Frame with
background transparency with Do Not Dispose option
The Disposal Method icon indicates whether the frame is set to Do Not Dispose or
Restore to Background . (No icon appears when disposal method is set to Automatic.)
To choose a disposal method:
1 Select a frame or frames for which you want to choose a disposal method.
2 Right-click (Windows) or Ctrl-click (Mac OS) the frame thumbnail to view the Disposal
Method context menu.
3 Choose a disposal method:
•
Automatic to determine a disposal method for the current frame automatically,
discarding the current frame if the next frame contains layer transparency. For most
animations, the Automatic option yields the desired results and is, therefore, the
default option.
Note: Choose the Automatic disposal option when using the Redundant Pixel Removal
optimization option, to enable ImageReady to preserve frames that include transparency.
•
Do Not Dispose to preserve the current frame as the next frame is added to the display.
The current frame (and preceding frames) may show through transparent areas of the
next frame. To accurately preview an animation using the Do Not Dispose option,
preview the animation in a browser.
•
Restore to Background to discard the current frame from the display before the next
frame is displayed. Only a single frame is displayed at any time (and the current frame
will not appear through the transparent areas of the next frame).
A
B
Documents you may be interested
Documents you may be interested
