Step by Step Image Ready Animation

For this project you will create a 25 frame animation. The subject matter will be your choice. You can use images from your self portrait project if you want to. Make sure the subject is something fun -you will be looking at it for a while. The Web shows animations at 12 frames per second, so your movie will only be 2 seconds long. It will be jumpy because of it's short length. Don't let that bother you. For this project, I want you to understand the concept - and to have some fun. Making these short animations can be the pay off for all that Photoshop learning you have done.

These directions will teach you how to use Image Ready to create a simple animation. Image Ready has some issues (explained below) so it will be necessary to read through this entire document to understand how to work around those problems.

These examples are created using squares and circles to make the learning curve easier. The animation you create will have images. After you understand how to work with Image Ready, the next step will be to create/find your own images. Be sure to look at the examples from other students.

To start, open Image Ready. You will see that the screen is a lot like Photoshop. Click on File/New and create a small file - in the 2-3 inch range. Fill the background layer with some color. Then, on the layers palette, create a new layer. With that layer activated, use the square marquee tool to create a square of "marching ants". Fill the square with some new color using the paint bucket tool. Now, create a third layer and make a circle with the circular marquee tool. Fill those marching ants with yet another color. At this point your file should look something like the example below.

If you do not see the animation film strip on your screen, click on Window / Animation.

You are now ready to animate.

Look at the animation strip. Notice the buttons along the bottom.

Click on the 'duplicate frame' button. Your animation strip will now look like this:

Please notice that - just like the layers palette - one frame can be active at a time. In this example, frame 2 is the active frame. It is now time to make some changes to frame 2. On the layers palette, activate the layer with the square and move it with the move tool. Then, activate the layer with the circle and move that too. You will see the changes happening in frame 2.

After you have made some changes, click the '"duplicate frame" button on the animation and move on to frame 3. Make changes to frame three using the move tool on the layers palette. After a bit, you will have an animation that could look like this.

You will see a quick simple animation like this:

Easy, isn't it? There is one more tool that makes this really easy - the "Tween" button. Tweening is when the computer generates the movement from one frame to another. It makes up the frames in between. Let's go back to your animation and click that 'duplicate' frame button one more time. In this new frame, make some big changes. See the example here:

I duplicated frame 6 into frame 7. On frame 7 I moved the objects to opposite corners. If I hit 'play' now, the animation will seem jumpy. I will use the 'tweening' button to create the transition for me.

A box will pop onto your screen asking if you want to tween with the previous frame, and how many frames do you want Image Ready to create. You can ignore the other buttons for now. Make sure it is set for 'previous frame' and maybe add about 5 frames. You will see new frames pop into your animation. Try playing it now.

Pretty easy, isn't it?!

Save your animation by clicking on File /Optimize for Web. Image Ready will automatically save this as an animated GIF. For those of you who design web pages, you may want to delete the background (opaque) layer so that there is no background. These objects will 'float in space' and the color of your web page background will show through. This is because the GIF file format will allow for transparency.

Image Ready seems easy - even fun, but now it will get frustrating. Go back to your animation strip and click on a frame to activate it. Activate the layer with the square. Go to Edit / Transform / Rotate. Rotate that one square on that one frame. You will see all the squares rotate on all frames. This is the problem with Image Ready. The frames are linked. Try the same concept with the circle. Activate the layer with the circle and click on Edit / Transform / Scale and make the circle larger or smaller. Again, all the circles change.

This is a quirk with Image Ready. When all the frames are linked as a package, it is difficult for Image Ready to make these transformations to a single frame. If you want to have any imagery rotate (a waving hand, walking legs, wagging tail) or get smaller / larger (a car driving off into the sunset) it is not possible to do that unless you know how to outsmart Image Ready.

How to Out Smart Image Ready

Image Ready will import an animation that has already been made. (It is possible to link several animations together.) Image Ready will also grab a stack of files from a folder. In order to out smart Image Ready, you will create your frames separately in Photoshop. The frames will be saved in a folder on your computer as frame01, frame02, frame03, etc. Then, we will go to Image Ready and grab the folder to animate them.

IMPORTANT!

Before you begin, create a new folder on your computer. Please title it "Frames". If you miss this step, you will be frustrated later. Image Ready likes to grab 'folders' - not individual frames.

After you have created the folder, you are ready to go to Photoshop.

In Photoshop, lets make the same kind of file as we did in Image Ready as described previously. It could look like this:

When you have your first frame ready, click on File/Save as and save it as 'frame01' in the PSD format into the 'frames' folder you created. It is important that you number the name correctly. If you are making an animation that is less than 100 frames, you would title your frames "frame01", "frame02", "frame03", etc. If your movie will be more than 100 frames, you will need to title each frame with two zero's in front : "frame001", "frame002", etc. If there is any chance that your 'under 100' frame movie could possibly go longer than 100 frames, you would be wise to number accordingly for that chance from the start. It is so tedious to have to go back and retitle each frame. If you take care to do this numbering correctly, the order of frames will stack perfectly into your 'frames' folder.

After you have saved your first frame, go ahead and make any kind of change you would like for frame 2. You can resize and rotate if you would like. These files will not be linked together as they were in Image Ready. Each frame/file is a stand alone file.

After you have saved all of your frames into your 'frames' folder, you are ready to go to Image Ready to create your animation.

Open Image Ready and click on File/Import/Folder as Frames.... and go grab your folder. Then, just wait while Image Ready calculates what you have asked it to do. Your animation will show up on the animation strip. You can click on the 'play' button. At this point, your file is still in the PSD file format and will not be viewable on the web (or in e-mail). You need to save it as a GIF file. To do this, click on File/Optimize for Web... and save it as a GIF. The amount of memory used will drop way down. Once it is saved as a GIF, you can post it on your homepage on our class website. You are also required to send a copy to me for my records. And, you can e-mail it to friends.

 

THE QUICKEST WAY TO DO THIS ASSIGNMENT:

The quickest way to complete this project is to work in Photoshop. Move images around on their layers and save each frame / file in a single folder. Remember to create that folder first - have it ready for the frames when you are working. Remember to number your files/frames starting with a zero in the front. (frame01, frame02) This will cause them to stack correctly in your folder. After you have 25 frames (the required amount), go to Image Ready and click on File / Import / Folder as frames and find your folder. After you have played your movie and are relatively happy with it, click on File / Save Optimized As... and save it as a GIF file. You will upload that GIF movie to your home page and to your digital drop box. Send the one to me from your drop box and you will be done. Be sure to check out the examples available on this web site.

Try to have fun. Twenty five frames is not much. The movie will be quite jumpy. The Web plays animated gifs at 12 frames per second, so this will be a two second movie. Please enjoy and create something fun. And please!!! NO squares or circles. I need to see some imagery.

 

The rest of the information below is for some more advanced tricks. You may never need to do the tricks described below. If you feel like you have had enough, you can skip the rest of this and get started on your project. For those of you who enjoy animation, you may want to read a bit more.

This information has to do with combining a couple of animations together and restacking / reordering a batch of frames to get the visual effect of an opposite movement happening. An example is a car driving towards the viewer, moving around a bit, and then driving away from the viewer. The frames for the car coming at us could be the same frames as the car going away from us, just in the reverse order.

Here are some step by step instructions.

To begin with, we will need three folders for three sets of frames: car coming towards us ('frames01'), car moving around in the middle ('frames02") and the car driving away from us ('frames03"). Each set of frames will create a movie. The movies will need to be linked together in the end. Image Ready will link movies in the same manner that it grabs frames. We will need a 'movies' folder - just one - to put the finished movies into. Once the folders are created, you are ready to go to Photoshop to create the frames. Remember that Image Ready will not allow for some imagery to be resized or rotated. We will use Photoshop to create each frame, just like before.

Create a small file - about 2x2 inches - fill the background with a color and this time let's just have one layer. Make a fairly good sized square on that layer. Here is an example:

Let's imagine that this darker blue square is a car. We will make the car drive away from us. This is the first frame and it is ready to be saved. Click on File/Save as and send this to the "frames1" folder with a title of "frame01" . It is important to title this frame with a zero before the number one so that the files will stack in order within the folder.

After you have saved this to the 'frames1' folder as 'frame01', you are ready to make some changes to create frame02. Activate the layer with the square. Click on Edit/Transform/Scale. Make the blue square smaller. Remember to hit your enter key on your keyboard to finish the transformation. Now click on File/Save As and title this one "frame02". Be sure to click on "SAVE AS" not 'save'. If you click on File/Save, you will cover up your first file. Be sure to click on File/Save As and save this one as 'frame02' in the same folder. You now have two frames ready. Keep going until that blue square is pretty small. Please make about 6 frames.

When those 6 frames are saved in their 'frames1' folder, you are ready to go to Image Ready.

Open Image Ready and click on File / Import / Folders as Frames. A box will come up asking you what folder. Select your 'frames1' folder and click OK. It will take just a second to load. Hit the play button as watch the animation you have created so far.

It may look something like this:

The idea I have is to make this 'car' zoom towards us, jump around a bit, then zoom away. This portion of the movie is actually the end. When I save this, I want to save it as the final movie segment. When I save this to the movie folder, I will save it as "movie3". I didn't start with the blue square in it's small size because (as you know) when you scale something larger it becomes pixilated and ugly. Starting with the larger size of square avoids that problem - although it causes the other problem of having to re stack the files.

Click on File / Save Optimized As... and save this to your "Movie" folder as 'movie3'. It is important to send it to the 'movie' folder because we will come back to these movie folder later and merge the movies together.

Here comes a tricky part. If you are familiar with how to rename files, this will be easy. We want to make another set of frames with our blue 'car' coming back at us. We can use the frames we already have made, but they need to stack in the opposite order. If you can get to your file manager / explore feature on your computer, I want you to select all six frames in the 'frames1' folder and copy them to the 'frames2' folder. You now have a duplicate set. Go to the 'frames2' folder and rename each frame with the opposite numbering. Example:

"frame06" is renamed "frame11", "frame05" is renamed "frame12", "frame04" is renamed "frame13", etc.

We want to reverse the stacking order of those frames so that it appears that our "car" is coming back to us.

Open Image Ready and click on File / Import / Folder as Frames... and grab the newly titled frames. Save this version as the beginning of our movie. Click on File/ Save Optimized As and send it as "Movie1" to the 'movies' folder.

You now have the beginning (movie1) and the end (movie3) of our movie. Now we need to make the middle part where the car jumps around a bit. We will use the rotate option to do this.

Go back to your first image you made of the blue square. You will find this in the 'frames1' folder. Go back to Photoshop, click on File/Open and find your folder called 'frames1'. Click on "frame01" and open that up. This will be the original blue square on it's own layer.

With the blue square layer activated, click on Edit / Transform /Rotate and rotate this square to the left. Hit your enter key on the keyboard to finish the transformation, then click on File / Save As... and save this to the 'frames3' folder as 'frame01'. Now repeat the rotate steps to rotate this to the left some more, save as 'frame02' in the third frames folder. Now start rotating it back to the right. Keep going with rotating it and saving it until you have the square positioned back to where it started. You are now ready to open all of your frames in the third frame folder in Image Ready.

Go to Image Ready and click on File/ Import/ Folders as frames... and select your third folder with the frames you just created. Save this movie by clicking on File / Save Optimized as... and send it to your 'movies' folder as 'movie2' (the middle movie). Movie 2 will look something like this:

Now it is time to put all three movies together. Go back to Image Ready. Click on File / Import / Folder as Frames and choose your 'movie' folder that contains the three movies. Image Ready will bundle all three movies. They will look like this:

You can still make some changes with it in Image Ready. Play the movie and watch for the part when the square stops rotating and is about to go small again. Stop the movie from playing and at that point, click the 'duplicate frame' button. Make a few more frames. This will cause the square to appear to pause before it goes away. It will look like this:

Now you know how to out smart Image Ready.

 

A Word About Gif Animation Software:

Image Ready was created to make quick easy animations for the Web. Sometimes it is easier to use a Gif Animator - another piece of software that creates animations. When panning, zooming, rotating and resizing are desired, it is easier to use a Gif animator. There are many available on the Internet. You can do a search for an animator on line by typing the key words “Gif Animator”. Most allow a thirty-day free trial before needing to pay. One such example is Gif Movie Gear, available online from Gamani.com. There is a download for a 30 day free trial. It sells for about $40. You will not need to do this for this project. We will use Image Ready. I only mention this for people who are in Web design, or those who are more serious about making animations. The way it works: you create each frame in Photoshop and save it as a file. When you have created all of your frames/files, you open the Gif Animator and grab them all at once. The Gif Animator will stack them all as frames and create the filmstrip. It is possible to resize, copy and paste additional frames, insert frames, reverse order, etc. All of these things are problematic for Image Ready. A Gif Animator will give many more options than Image Ready. If you think you would like these additional options, you may want to check into something like Gif Movie Gear.