Google Community - View Single Post

-)RaZeR(- · 05-30-2005, 06:05 PM

Note: This tutorial, or really set of tutorials, is designed to teach the basics of animation in Adobe ImageReady. As with all graphic design the most important thing is creativity. This tutorial is meant to give readers the knowledge required to make their own unique animation in ImageReady. I will cover the basic interface for animation and ways to create several of the commonly used effects. It is up to you to apply this information in your own work, hopefully in a creative and unique way. This is not a tutorial of a single technique, but really a tutorial of a program. As such it is meant for those new to the program and focuses on basics.

ImageReady Basics
Adobe ImageReady is essentially Photoshop's sidekick animation program. The general appearance and setup is almost identical to Photoshop's. Imagready is missing a few of Photoshop's features, such as some adjustments, but it has a key feature required for animation, so for optimal use it is best to design in Photoshop and only use ImageReady for animation. In ImageReady you get a window called the 'animation window' where, suprisingly enough, all of the animation is done.
If the animation window is not visible on your screen, go to window, then click the option animation.
http://img283.echo.cx/img283/7056/imagetut5co.gif
As this is the most important part of ImageReady, as well as the only part that is truly unique from Photoshop, I have broken it down into the 9 important aspects, numbered 1-9.
1. The frame you are currently working in. This is always highlighted in blue.
2. Other frames have a grew box around them. These should not be affected by changes you make in your selected frames.
3. This bar changes the number of times your animation will be shown. If it is on one, then your animation will go once and stop. If it is on forever it will restart everytime it finished. You can chose any number of repetitions by selecting the other option.
4. This option changes the amount of time the frame will be on the screen for. If it is at 0 sec. then the frame will disappear almost instantly, making animation seem smooth. If you wish to have it pause on a frame, you may select any number of seconds from the list, or simply choose your own by selecting other.
5. This is the tween feature, which will be explained in depth later.
6. This option, which looks like a piece of paper being peeled back copies the previous frame. This can be used to create new frames, just as the similar looking button creates a new layer in the layer window.
7. Similar to layers, the trash can deletes frames.
8. This is the test animation area. Pressing play will make your animation play in ImageReady. The skip arrows move forward or backwards one frame, while the double backwards arrows return you to the first frame.
9. This is a master button that lets you make almost any change to your animation, including things that have their own button, and a few that do not.

In each frame you make the change that you want the animation to do. To make sure that the changes happen only in the frame you are working with it may be necessary to turn off Propagate Frame 1 Changes on any layers you are animating. As a habit I would do this to any layers you plan on animating before doing any animation so as to avoid realizing you made changes throughout the animation that you only wanted in one frame. To turn this off, right click on the layer and turn it off.
http://img102.exs.cx/img102/9378/image-tut3.gif
That should cover most of the basics, now it's time to get to the fun part: animating.

Frame by Frame Animation
The simplest of animation is done by creating each separate frame yourself. This can create any effect in ImageReady, but it may be a tedious process depending on what you want to make. Certain effects require frame by frame animation. These effects will be the focus of this section.

Written/Typed Text

One of the simplest of frame by frame animations is making text appear as though it is being written or typed across your screen. I

will use this effect as a basic example for making a useful frame by frame animation.

Start with any pdf (Photoshop) image with text on it. I'll use this as a simple example:
http://img290.echo.cx/img290/7569/example26nq.gif
Start by duplicating the text layer. Lower the opacity of the bottom layer to around 50%. This layer will be used as a guide for repositioning letters. Next rasterize the text layer that is at 100% opacity so that you can cut out parts of it. Select the first letter with a marquee or a lasso tool. Then edit>cut (ctrl x) the letter out of the current layer and edit>paste it (ctrl v). Pasting it will automatically put it in a new layer. The letter may now be in the center of your image, instead of where it fits in the text. Simply move it using the move tool back to where it belongs. Repeat this process for each letter of your text. You can now delete or turn off the text layer with lowered opacity. When you finish you should have a seperate layer for each letter. Now would be a good time to turn off Propagate Frame 1 changes on your new layers.

At this point your layer window will look something like this:
http://img290.echo.cx/img290/7061/example8fa.gif
Now create/copy one frame for each letter you have in your text with one extra frame. In the first frame turn off all of the text layers. Your layer window will now look similar to this:
http://img289.echo.cx/img289/4151/example32ih.gif
And your animation window will look similar to this:
http://img289.echo.cx/img289/3994/example48pq.gif
In the second frame turn on the layer that contains the first letter of your text. In the second frame turn on the first two letters, and so on until you reach your final frame where all letters should be visible. Change the final frames time to around 2 sec. All other frames should still be at the default 0 sec. If they are not, change them to 0 sec.
Your animation window should now look similar to this:
http://img287.echo.cx/img287/1908/example52me.gif
Test your animation by hitting the play button. The text should appear like this:
http://img287.echo.cx/img287/1126/example67lx.gif
With this basic setup you can create a few more advanced effects.

Select all the frames except the first and the last by selecting frame 2 and holding shift then selecting the second to last frame (in this case frame 6).
http://img269.echo.cx/img269/5476/example75yb.gif
Copy these frames by clicking the copy frame button. This will duplicate all of the selected frames. Now drag these to the end of your animation.
Then, using the animation 'master button' (number 9 in the animation bar explanation), select "Reverse Frames". This will now make the letters disappear in reverse order to the way they appeared. Test your animation by hitting play, it should look similar to this now:
http://img262.echo.cx/img262/2663/example83xl.gif
You may want to increase the pause on the first frame where there is no text to a second or two so as to add a break between the text disappearing and appearing.

You can also make the text disappear from left to right instead of right to left. To do this create as many new frames at the end of your animation as there are frames between your first and your last frame (number of letters minus one). In the first of these frames make all except the first letter visible, then in the second frame have all except the first 2 letters visible, etc. You should end with an effect like this:
http://img264.echo.cx/img264/2262/example93xk.gif
Again, you may want to increase the pause on the first frame where there is no text to a second or two so as to add a break between the text disappearing and appearing.

As with every tutorial, it is up to you to find a creative way to incorporate the techniques and information presented in a creative and unique way. You can try to apply these techniques to more than text, or find new ways to use them. The possibilities are endless

Blinking Objects

Making things blink is probably the easiest of all animations in ImageReady, however the concept has several applications, many of which can be slightly more complicated. At the most basic level, to make something blink, simply have the layer that it is on appear in one frame, and disappear in the next. Not a very tough concept. Standing alone, blinking often accomplishes little, but it can be incorporated into other things to make them more interesting.
For example, something like this line blinking does very little:
http://img266.echo.cx/img266/8946/example119ig.gif
This image was created by having a layer with a line on it turn off and on with the frames appearing for .2 sec.
However, if you add this to text appearing like in the previous section, then it can create an effect like the blinking line that appears in a word processing program:
http://img278.echo.cx/img278/1151/example107ee.gif
All I did to create this last image was take animation similar to the text appearing animation and mix it with the simple animation of a line blinking. As most of this has already been explained, I won't go into detail about it. You should be able to create a similar effect with the information you already have.

Tweens
To enhance animation you can use the tween feature. Tweens take two unique frames and automatically fill in additional frames needed to make the animation smooth. Tweens are extremely useful as they allow you to skip having to create every individual frame by hand. Instead you can simply create the first and last frame, and then let ImageReady make all of the ones in between.

When you click the tween option you get a menu that looks like this:
http://img128.exs.cx/img128/1679/image-tut4.gif
Once again I will break this down, this time by function instead of numbers.
Tween With - this option simply chooses which frames are tweened. Previous Frame means that whichever frame you have selected and the one before it are tweened. Selection means that, if you select two frames, the two you select are tweened. First Frame tweens your current selection with the first frame.
Frames to Add - this option changes the number of frames ImageReady adds in-between your selected frames. This is the most commonly adjusted option, as you want to use as few frames as possible to maintain a low file size, but you need several frames to make animation smooth.
Layers - this allows you to animate any changes you have made or only ones on a layer of your choice. Usually this will remain on All Layers.
Parameters - this is the option that decides what parts of a layer or layers is tweened. If you have all three boxes checked, then your tween will include all of your changes. There are very few situations where you would not want to tween all of the parameters.

The most common uses for tweens is fading or moving text, images or layers.

For an example of fading I will use this text:
http://img34.echo.cx/img34/3522/example143vc.gif
Note: fading is not limited to text, it can be applied to pretty much anything.
Fist make 2 frames. One with the layer containing your text/image visible, and one where it is not. Your animation window should look similar to this now:
http://img34.echo.cx/img34/2731/example159fq.gif
Now select both frames by holding shift and clicking on them. Press the tween button. Leave all the settings at their default and press okay. Your animation will now look similar to this:
http://img201.echo.cx/img201/2002/example164om.gif
As you can see, the text/image smoothly fades out. At this time you may want to change the frame time to 1 or 2 seconds for the frames where the text/image has either fully appeared or disappeared.
If you have file size limitations, you may want to only have 2 or 3 tweened frames instead of the default 5. Usually 2 or 3 is enough for a fading effect, and it will help lower file size.

That is really all there is to a simple fading tween. With this technique you can make text/images/layers both fade out, fade in, or fade between two different layers. Just try out different things.

Another way to use tweens is for making images/text/layers move. This time I will use a simple arrow as an example:
http://img219.echo.cx/img219/1392/example179cc.gif
Now create a new frame. In this frame move the layer with your image/text (in this case the arrow) to wherever you want the endpoint of your animation to be. I'll just move it over to the other side:
http://img219.echo.cx/img219/9692/example186kv.gif
Once again select both frames and click the tween button. Again I will use the default 5 frames, however more or less may be required depending on the distance your object is being moved.
Test your animation. Your object should now move smoothly like this:
http://img227.echo.cx/img227/441/example190kn.gif
That is really all there is to motion with tweens. Now just find some creative ways to apply tweening into your animation and you are almost ready to be a master of ImageReady. There is only one more thing you need to know, optimizing and saving your work.

Optimization in ImageReady
The very last thing you need to know about in ImageReady is how to save your work in a way that can be used. Unlike Photoshop, there is not "Save for Web..." option. Instead there is "Save Optimized". Optimized is the exact same thing as save for web except the options for it are in a separate window like the layers or animation window. To open this window go to

Window>Optimize. The window looks like this:
http://img287.echo.cx/img287/9701/example129de.gif
There are a lot of things you can adjust here to change your file size, however, there is a way to make it all very simple. The first thing to do is make sure you are set to Gif. Gifs support animation, while Jpegs do not. Next click on the button that looks like an arrowhead pointed to the right in the top right corner of the window. From here, select "optimize to file size." This will create a window that looks like this:
http://img267.echo.cx/img267/1690/example130se.gif
Choose "Current Settings" so that you remain with a Gif. Then all you have to do is type in the highest file size you need or are allowed to have in any situation. ImageReady will automatically mess with the more complicated optimizations stuff to give you the set file size.

To lower file size one of the things ImageReady may do is lower the quality some. If it is lowered too much to the point where the image becomes grainy, or just bad looking, then you will need to find other ways to lower file size. Try to simplify your animation, or remove a few unnecessary frames. If you used tweens you may be able to remove a few tweened frames and still maintain the animation. Really, just try playing around with your image in ways that may simplify it.

Once you have your optimization set all you have to do is go to File>Save Optimized As... This will save your optimized image.

That ends the tutorial. Hopefully by now you have enough understanding of ImageReady and some examples of what it can do to create some cool animation of your own. For a final time, remember to use this in a unique and creative way, and have fun animating!

05-30-2005, 06:05 PM	#24 (permalink)
-)RaZeR(- Googler Join Date: May 2005 Posts: 63 Thanks: 0 Thanked 0 Times in 0 Posts	Creater Unknown ( not me ) Note: This tutorial, or really set of tutorials, is designed to teach the basics of animation in Adobe ImageReady. As with all graphic design the most important thing is creativity. This tutorial is meant to give readers the knowledge required to make their own unique animation in ImageReady. I will cover the basic interface for animation and ways to create several of the commonly used effects. It is up to you to apply this information in your own work, hopefully in a creative and unique way. This is not a tutorial of a single technique, but really a tutorial of a program. As such it is meant for those new to the program and focuses on basics. ImageReady Basics Adobe ImageReady is essentially Photoshop's sidekick animation program. The general appearance and setup is almost identical to Photoshop's. Imagready is missing a few of Photoshop's features, such as some adjustments, but it has a key feature required for animation, so for optimal use it is best to design in Photoshop and only use ImageReady for animation. In ImageReady you get a window called the 'animation window' where, suprisingly enough, all of the animation is done. If the animation window is not visible on your screen, go to window, then click the option animation. http://img283.echo.cx/img283/7056/imagetut5co.gif As this is the most important part of ImageReady, as well as the only part that is truly unique from Photoshop, I have broken it down into the 9 important aspects, numbered 1-9. 1. The frame you are currently working in. This is always highlighted in blue. 2. Other frames have a grew box around them. These should not be affected by changes you make in your selected frames. 3. This bar changes the number of times your animation will be shown. If it is on one, then your animation will go once and stop. If it is on forever it will restart everytime it finished. You can chose any number of repetitions by selecting the other option. 4. This option changes the amount of time the frame will be on the screen for. If it is at 0 sec. then the frame will disappear almost instantly, making animation seem smooth. If you wish to have it pause on a frame, you may select any number of seconds from the list, or simply choose your own by selecting other. 5. This is the tween feature, which will be explained in depth later. 6. This option, which looks like a piece of paper being peeled back copies the previous frame. This can be used to create new frames, just as the similar looking button creates a new layer in the layer window. 7. Similar to layers, the trash can deletes frames. 8. This is the test animation area. Pressing play will make your animation play in ImageReady. The skip arrows move forward or backwards one frame, while the double backwards arrows return you to the first frame. 9. This is a master button that lets you make almost any change to your animation, including things that have their own button, and a few that do not. In each frame you make the change that you want the animation to do. To make sure that the changes happen only in the frame you are working with it may be necessary to turn off Propagate Frame 1 Changes on any layers you are animating. As a habit I would do this to any layers you plan on animating before doing any animation so as to avoid realizing you made changes throughout the animation that you only wanted in one frame. To turn this off, right click on the layer and turn it off. http://img102.exs.cx/img102/9378/image-tut3.gif That should cover most of the basics, now it's time to get to the fun part: animating. Frame by Frame Animation The simplest of animation is done by creating each separate frame yourself. This can create any effect in ImageReady, but it may be a tedious process depending on what you want to make. Certain effects require frame by frame animation. These effects will be the focus of this section. Written/Typed Text One of the simplest of frame by frame animations is making text appear as though it is being written or typed across your screen. I will use this effect as a basic example for making a useful frame by frame animation. Start with any pdf (Photoshop) image with text on it. I'll use this as a simple example: http://img290.echo.cx/img290/7569/example26nq.gif Start by duplicating the text layer. Lower the opacity of the bottom layer to around 50%. This layer will be used as a guide for repositioning letters. Next rasterize the text layer that is at 100% opacity so that you can cut out parts of it. Select the first letter with a marquee or a lasso tool. Then edit>cut (ctrl x) the letter out of the current layer and edit>paste it (ctrl v). Pasting it will automatically put it in a new layer. The letter may now be in the center of your image, instead of where it fits in the text. Simply move it using the move tool back to where it belongs. Repeat this process for each letter of your text. You can now delete or turn off the text layer with lowered opacity. When you finish you should have a seperate layer for each letter. Now would be a good time to turn off Propagate Frame 1 changes on your new layers. At this point your layer window will look something like this: http://img290.echo.cx/img290/7061/example8fa.gif Now create/copy one frame for each letter you have in your text with one extra frame. In the first frame turn off all of the text layers. Your layer window will now look similar to this: http://img289.echo.cx/img289/4151/example32ih.gif And your animation window will look similar to this: http://img289.echo.cx/img289/3994/example48pq.gif In the second frame turn on the layer that contains the first letter of your text. In the second frame turn on the first two letters, and so on until you reach your final frame where all letters should be visible. Change the final frames time to around 2 sec. All other frames should still be at the default 0 sec. If they are not, change them to 0 sec. Your animation window should now look similar to this: http://img287.echo.cx/img287/1908/example52me.gif Test your animation by hitting the play button. The text should appear like this: http://img287.echo.cx/img287/1126/example67lx.gif With this basic setup you can create a few more advanced effects. Select all the frames except the first and the last by selecting frame 2 and holding shift then selecting the second to last frame (in this case frame 6). http://img269.echo.cx/img269/5476/example75yb.gif Copy these frames by clicking the copy frame button. This will duplicate all of the selected frames. Now drag these to the end of your animation. Then, using the animation 'master button' (number 9 in the animation bar explanation), select "Reverse Frames". This will now make the letters disappear in reverse order to the way they appeared. Test your animation by hitting play, it should look similar to this now: http://img262.echo.cx/img262/2663/example83xl.gif You may want to increase the pause on the first frame where there is no text to a second or two so as to add a break between the text disappearing and appearing. You can also make the text disappear from left to right instead of right to left. To do this create as many new frames at the end of your animation as there are frames between your first and your last frame (number of letters minus one). In the first of these frames make all except the first letter visible, then in the second frame have all except the first 2 letters visible, etc. You should end with an effect like this: http://img264.echo.cx/img264/2262/example93xk.gif Again, you may want to increase the pause on the first frame where there is no text to a second or two so as to add a break between the text disappearing and appearing. As with every tutorial, it is up to you to find a creative way to incorporate the techniques and information presented in a creative and unique way. You can try to apply these techniques to more than text, or find new ways to use them. The possibilities are endless Blinking Objects Making things blink is probably the easiest of all animations in ImageReady, however the concept has several applications, many of which can be slightly more complicated. At the most basic level, to make something blink, simply have the layer that it is on appear in one frame, and disappear in the next. Not a very tough concept. Standing alone, blinking often accomplishes little, but it can be incorporated into other things to make them more interesting. For example, something like this line blinking does very little: http://img266.echo.cx/img266/8946/example119ig.gif This image was created by having a layer with a line on it turn off and on with the frames appearing for .2 sec. However, if you add this to text appearing like in the previous section, then it can create an effect like the blinking line that appears in a word processing program: http://img278.echo.cx/img278/1151/example107ee.gif All I did to create this last image was take animation similar to the text appearing animation and mix it with the simple animation of a line blinking. As most of this has already been explained, I won't go into detail about it. You should be able to create a similar effect with the information you already have. Tweens To enhance animation you can use the tween feature. Tweens take two unique frames and automatically fill in additional frames needed to make the animation smooth. Tweens are extremely useful as they allow you to skip having to create every individual frame by hand. Instead you can simply create the first and last frame, and then let ImageReady make all of the ones in between. When you click the tween option you get a menu that looks like this: http://img128.exs.cx/img128/1679/image-tut4.gif Once again I will break this down, this time by function instead of numbers. Tween With - this option simply chooses which frames are tweened. Previous Frame means that whichever frame you have selected and the one before it are tweened. Selection means that, if you select two frames, the two you select are tweened. First Frame tweens your current selection with the first frame. Frames to Add - this option changes the number of frames ImageReady adds in-between your selected frames. This is the most commonly adjusted option, as you want to use as few frames as possible to maintain a low file size, but you need several frames to make animation smooth. Layers - this allows you to animate any changes you have made or only ones on a layer of your choice. Usually this will remain on All Layers. Parameters - this is the option that decides what parts of a layer or layers is tweened. If you have all three boxes checked, then your tween will include all of your changes. There are very few situations where you would not want to tween all of the parameters. The most common uses for tweens is fading or moving text, images or layers. For an example of fading I will use this text: http://img34.echo.cx/img34/3522/example143vc.gif Note: fading is not limited to text, it can be applied to pretty much anything. Fist make 2 frames. One with the layer containing your text/image visible, and one where it is not. Your animation window should look similar to this now: http://img34.echo.cx/img34/2731/example159fq.gif Now select both frames by holding shift and clicking on them. Press the tween button. Leave all the settings at their default and press okay. Your animation will now look similar to this: http://img201.echo.cx/img201/2002/example164om.gif As you can see, the text/image smoothly fades out. At this time you may want to change the frame time to 1 or 2 seconds for the frames where the text/image has either fully appeared or disappeared. If you have file size limitations, you may want to only have 2 or 3 tweened frames instead of the default 5. Usually 2 or 3 is enough for a fading effect, and it will help lower file size. That is really all there is to a simple fading tween. With this technique you can make text/images/layers both fade out, fade in, or fade between two different layers. Just try out different things. Another way to use tweens is for making images/text/layers move. This time I will use a simple arrow as an example: http://img219.echo.cx/img219/1392/example179cc.gif Now create a new frame. In this frame move the layer with your image/text (in this case the arrow) to wherever you want the endpoint of your animation to be. I'll just move it over to the other side: http://img219.echo.cx/img219/9692/example186kv.gif Once again select both frames and click the tween button. Again I will use the default 5 frames, however more or less may be required depending on the distance your object is being moved. Test your animation. Your object should now move smoothly like this: http://img227.echo.cx/img227/441/example190kn.gif That is really all there is to motion with tweens. Now just find some creative ways to apply tweening into your animation and you are almost ready to be a master of ImageReady. There is only one more thing you need to know, optimizing and saving your work. Optimization in ImageReady The very last thing you need to know about in ImageReady is how to save your work in a way that can be used. Unlike Photoshop, there is not "Save for Web..." option. Instead there is "Save Optimized". Optimized is the exact same thing as save for web except the options for it are in a separate window like the layers or animation window. To open this window go to Window>Optimize. The window looks like this: http://img287.echo.cx/img287/9701/example129de.gif There are a lot of things you can adjust here to change your file size, however, there is a way to make it all very simple. The first thing to do is make sure you are set to Gif. Gifs support animation, while Jpegs do not. Next click on the button that looks like an arrowhead pointed to the right in the top right corner of the window. From here, select "optimize to file size." This will create a window that looks like this: http://img267.echo.cx/img267/1690/example130se.gif Choose "Current Settings" so that you remain with a Gif. Then all you have to do is type in the highest file size you need or are allowed to have in any situation. ImageReady will automatically mess with the more complicated optimizations stuff to give you the set file size. To lower file size one of the things ImageReady may do is lower the quality some. If it is lowered too much to the point where the image becomes grainy, or just bad looking, then you will need to find other ways to lower file size. Try to simplify your animation, or remove a few unnecessary frames. If you used tweens you may be able to remove a few tweened frames and still maintain the animation. Really, just try playing around with your image in ways that may simplify it. Once you have your optimization set all you have to do is go to File>Save Optimized As... This will save your optimized image. That ends the tutorial. Hopefully by now you have enough understanding of ImageReady and some examples of what it can do to create some cool animation of your own. For a final time, remember to use this in a unique and creative way, and have fun animating!