Home
Username:
Password:
Adobe CS2 Power Projects Tutorials

ImageReady Basics / Creating Animations




Visitors to VTC.com will be able to view all introductory videos for each training course.
Free Trial Members will gain access to first three chapters for each training course.
Full Access Members have full access to VTC.com’s entire library of video tutorials.


Learn More

Subtitles of the Movie

And finally here in ImageReady we're going to create an animation because our website just isn't quite cheesy enough. So your going to want to make sure that your layers pallet is open and that this folder for banner and background element is open as well because we are going to animate the top of this banner. Let's go to the Window menu and open up the animation pallet. Now just as in the days of Disney, animation is still created in the same way. It's a series of still images in an order that when played quickly through them gives the illusion of movement. So what we're going to do to this image is fade in this Vacuum Princess logo from 0% opacity to 100% opacity. So let's make the first state of our animation by taking the opacity and dropping this down to 0%. Now if your in an alternate view by the way you probably won't be seeing this. Notice as I go to the optimize view I'm not seeing what I'm seeing as I'm animating here. So we'll need to go to the original tab. And also too, I went to the View menu and under the Show submenu I turned off slices so that it's not as noisy. Just a little digital housekeeping there. Now let's create another state of animation by hitting this button. Basically that just duplicates the current frame of animation. But now what I'm going to do is take the opacity up to 100% so that we are seeing our logo - if we wanted to go from 0% and then gradually fade in to 100%. Well if we play this back now by hitting this little Play icon here we'll see that it just kind of flashes. It's pretty cheesy but it's not exactly what we are looking for. So I'm just going to stop this. And what we need to do is have it go gradually from one to the other. So we've created the before and after and what we want ImageReady to do is create the frames in between. We do this through a command called Tween. Now I'm serious. I didn't make that up. I know it's kind of a cute little name, very fun to say. But I did not make that up. That's really what it's called. So if we go down here we'll see that - just like I said - it's a Tween button. That's what it is. So go ahead and hit that. What we want to do is Tween this frame with the next frame and let's actually add 10 frames to give us a little bit smoother of a fade in. Let's keep this applied to all layers. And we could animate position, opacity or effects or all three. I'm going to select opacity because that is all that we are animating right now. But be aware that you can also animate position. You can animate stuff moving around. You could also animate effects which is really cool to experiment and play with. If you wanted to animate a glow coming on for example, or something getting beveled and embossed or 3D, coming to life as it were. You could animate that with effects as well. Extremely cool. Right now we're only doing opacity, probably the simplest and cheesiest one we could do. So, go ahead and hit ok. And now all these frames are automatically created for us. Select frame one. Hit the play button. And look at that. Oh that's cool. Vacuum Princess never seemed so awesome and cheesy. Now be aware that we can go to this dropdown where it says zero sec. That stands for zero seconds. So we could select how long we want these frames to delay for. So I'm going to set this to maybe one second so it holds on nothing for one second before it moves along. Let's scroll down to our last frame and change that one to two seconds. So that way maybe it holds and it doesn't really annoy our users that much - gives them time to see the logo before and then after. So let's hit play now. There's our one second delay. Then it fades on and holds. Much cooler. I'm going to stop that. And that's how easy it is to animate in ImageReady. But remember as you go to output this. If you select to save this as a JPEG you will not get that animation. Only in GIF's do we get that animation from ImageReady and not JPEG's. So there's our little world wind tour of ImageReady. I hope you enjoyed it. I'm sure Vacuum Princess rockers appreciate us giving them a tribute to their website. Long live heavy metal folks. Let's go ahead and move on to Adobe Bridge, the great file browser that comes with any program in the Creative Suite.

Tutorial Information

Course: Adobe CS2 Power Projects
Author: Chad Perkins
SKU: 33760
ISBN: 1-933736-82-8
Release Date: 2007-05-17
Duration: 8 hrs / 111 lessons
Work Files: Yes
Captions: For Online University members only
Compatibility: Vista/XP/2000, OS X, Linux
QuickTime 7, Flash 8

VTC Sign up & Benefits

  • Unlimited Access
  • 98,729 Video Tutorials (23,265 free)
  • Video Available as Flash or QuickTime
  • Over 1026 Courses
  • $30 for One Month Access
  • Multi-User Discounts Available