As i said on the previous page, the power of these tools is unrivaled. All the editing powere of photoshop, the worlds premier image manipulatation software, can be used to enhance your gifs. The folowing method is not the most efficient way to animate or the most flexible but it's easy for me to describe and it should allow you to get animating quickly and with minimal fuss.

Step 1 - Make the first frame.

Download this psd (83Kb) and open it in imageready, it will form the basis of my example animation. It should look like:

First up, drag the ball off the left and side of the stage so that it is completely hidden. This image will form your first frame.

Step 2 - Making frame layers

The key to making frames in image ready is layers, They have to remain stationary throughout the frames but but can be hidden or made visible as required. This is like having a flickbook in which you can jump forwards or backwards through the pages at will.

To create the layer which will be the second frame of your animation, Alt-Click (option-click for a apple users) the ball and drag it about 20px to the right. This will copy the ball to a new layer and move it to the new location.

Repeat the above process untill te ball has completely crossed the screen. This should leave you with something looking like:

Step 3 - turning it into frames.

Open up the animation dialogue and call up the animation menu by clicking the button shown below:

Click on "make frames from layers". This will convert each different layer in your image into a frame in the animation. If you now hit the play button (in the animation dialogue) you can see that the animation is almost complete; it just has two problems.

Step 4 - Tidying it up

The "make frames from layers" command has worked a little too efficiently, it has created a frame for our background layer which we want to keep static for all our frames.

Select frame 1, this will bring up a blank yellow image. click on the small dustbin icon at the bottom of the animation dialogue to delete this frame. This will now leave us with an animation of a ball travelling across a transparent background.

In order to reinstate the yellow layer, select layer 1 and then shift-click the final layer in your animation to select all of the frames. Click the blank square furthest to the left of your background layer in the layers dialogue. This should change to an image of an eye and the yellow layer should appear in each frame.

Step 5 - Timing is everything.

The final thing we need to do is set up the timing of the animation. by default there will be a minimal pause between each frame, which is fine for the frames where the ball is in motion but for the first frame where the ball is off screen, i'd like the pause to be a little longer.

Underneath frame 1 you will see a button labeled "0 sec."

Click this then choose 2 sec from the drop down menu.

Your animation is now complete (my final psd is here 686Kb).

Use the play buttons to view it and then make any final alterations as you see fit. for information on exporting your animation, see here.

 

 

 

 

| Home | B3ta | Me | Contact | Flash and stuff | Links |

Site design © Sam Cartwright 2004