The Basics of Animation in Imageready

[h1]The Basics of Animation in ImageReady[/h1]

The Basics:
Diagram 1:

Diagram 2:

1.This is the Animation Frame Window, it will add one for every frame in your animation. The first frame will toggle things on and off throughout the whole animations, so it can cause problems along the way if precautions are not taking. This will be explained later.

2.This is the button that defines if you want a animation to go once and stop, or go forever. For the most part while your doing animations, you will want it to go forever.

3.This is the timing of the frame. It will determine the time it stays on one frame. Although it displays 0 sec, it means the fastest ImageReady can have an animation display. While you gain some experience, you will be able to assign values for these, when it is necessary, in an appropriate manner. However, for the time being, we will stick with the 0,.01,.02, 1 second, 2 second, and 5 second toggles.

4.This is the tween function. This is a very quick way to make your animations appear smooth and clean. It will automatically fade in/fade out things that are not or are in the frame you ask it to go to. This will explained in further detail later on.

5.This is the duplicate/new frame. This can be used in 2 ways. In order to duplicate an existing layer, you will drag and drop the frame you want to duplicate onto this icon, which will create a duplicate frame immediately after the frame that was initially dragged. The way to create a new frame, is to simply click the icon. This is exactly
like the layers panel.

6.This serves the same purpose as it does in the layers panel.

7.This drop down menu will designate where you will tween to. This will be described in more detail later on.

8.This will designate the number of frames to be added to your animation. The number of frames directly affects the quality of your animation at the cost of the size. The greater the number of frames, the smoother the animation will be.

The Animation:
This project will show the basic fade in and out animation.

1: Open the document you wish to have something (text/ or an object) fade in and out.

2: Once the file is open, open the layers panel and find the layer you want to have animated.

3: Duplicate the current frame in the animations panel (diagram1-#5).

4: Now go back to frame one and click on the eye next to the layer you want to have fade in and out.

5: Click on the second frame and go to the layers panel and click by the same layer that you removed the eye from, which should cause the eye to reappear. Make sure that the object you want to fade is no longer located on the first layer but is located on the second.

6: Click on frame one and choose a timing for the frame one (diagram1-#6); this will be the frame rate for your animation so in this case a “none” selection, or a 0.1 selection would be the most suitable for this project. If you want an animation that is higher in size, choose 0 seconds, if you want to hold the animation to a particular size limit, .1 seconds is the better choice.

7: Make sure frame one is selected and click the tween button (diagram1-#4). This should bring up a dialog which looks like diagram 2. If you selected .1 seconds put the frame rate to 5, if you selected none/0 seconds, put the frame rate to 10(diagram2-#8). If not already selected, select Next Frame from the drop down menu (diagram2-#7). Once this is done, hit OK.

8: You should now have a total of 7 frames if you put in 5 frames or 12 frames if you put in 10 frames as the value. Now click the second frame and repeat the process which was said in Step 7, but instead of using Next Frame from the drop down menu, use First Frame.

9: You should know have an animation that fades in and out continuously. If it only does it once, make sure forever is selected in the animation palette (diagram1-#2).

10(optional): If you want to create a gif file which can be used on the internet, as most of you would, you have 2 options. One option is using the save as optimized function under the file menu. By selecting this it will save it like any standard program would. The other option is to preview it in browser. You can do so by click the Internet explorer icon ( or whatever internet browser icon is currently selected), which will open up a browser window. You can then right click-> save picture as, and your only option is gif. This is what I prefer since I can see a raw copy before it is saved.

If you like this tutorial, please Click Here to register.

Graphic Addicts Forums