|
This week I thought I would give our PC users a
glance at Imageready 7. So I have taken my screen captures on
the PC. Photoshop works on both platforms exactly the same. We
are going to dive deeper into the rollover palette and I am
going to show you how easy it is to add disjointed, animated
rollovers. What this means is that when the mouse rolls over the
button, not only will the button change, but it will also
trigger a little animation in a different portion of the page.
As you can imagine, this has tons of uses. Try this one in
Javascript and it will take you a while longer than Imageready
7.
We are beginning with the same document we used
last week.
Select the first button.
Open the rollover pallette and you will see the
rollover that we created last week.
Open the animation pallette.
On the Rollover pallette, select the Over state.
Now all the changes will only be applied when the mouse rolls
over the object.
Create a new layer. This layer will accommodate
the object to be animated.
Draw a shape into our image area.
Click the new frame button.
Drag the object to a different position.
The object will now move when we rollover.
However the animation would not be very smooth with only 2
frames. Rather than create all the frames, Imageready can do it
for us with a feature called "tweening"
Click the little arrow on the top right of the
animations pallette and choose "tween" (Tween is an old
animation term short for "In-between")
Choose Previous frame and 5 for the frames to
add.
Click ok.
Imageready ha now created 5 in between frames
for us, allowing for a smooth animation.
You will notice a little icon next to the
rollover state. This means there is an animation attached.
Lets see it in the Rollover palette….
Click on the top right of the rollover palette
and when you see the drop down menu, select Palette options.
In the top of the options window you will see a
box "Include animation frames" Check this box and click OK.
Expand the view in the Rollover palette by
clicking the collapse arrow next to the "over" state. You can
now view all the frames of the animation.
Click the preview in browser button.
Roll your mouse over the button and watch the
animation and imagine the possibilities!
If you wanted the animation to run once and then
stop choose "once" in the bottom left of the animation palette. |