Basics Of Animation
From Tutiki
Basics Of Animation
(by DazHadwen)
Well this is only my second attempt at writing a tutorial, so go easy on me guys! In this tutorial you will learn the basics of Animation using Adobe Imageready (This is an animation suite that comes with Adobe Photoshop).
Please Note: Saving files in .GIF format can often decrease the quality of the image.
Firstly I will list and explain the basic terms used when using Imageready:
Frames-These work in a simular way to layers, every movement in an animation is made by a frame.
Tween-This is a tool used to "blend" frames together.
Layers-these work in the exact same way as the layers on Photoshop, when using photoshop you can press the "Switch to Imageready" button to transfer your frames over to imageready. You can also open .PSD files in Imageready.
Rollover- This is when an animation is dependent upon the viewer moving the mouse curser across the image, to begin the animation/effect (This is often used on websites, I will list some examples later in the tutorial).
We will do three types of animation, a blend from one image to another, movement of an image.
So lets get started with the first animation.
Blending one image to another
This is actually suprisingly easy, firstly you will need to find the two images you wish to blend together and open them on seperate layers on Photoshop (preferebly both the same size). I have choose two images I found on Google of the gorgeous Honda Integra.
Now press the "Jump to Imageready" button, alternatively you can press CTRL+SHIFT+M.
Ok now you will see your two layers in Imageready. At the bottom you will see the Frames area, this is what we will be using to create our blend between images. Firstly select the "Duplicates current frame" button.
Now you want to goto over to your layers and press the eye icon to make one of them invisible, so you have two seperate images on the two frames.
Now create a third frame, and make it so that it shows the same as frame one.
Now we need to use the Tween tool I explained earlier. The tween tool is located directly left of the "Duplicate Current Frame" button.
Click onto frame two, and then choose the tween tool. This will bring up a menu. Its upto you what settings you use, the more frames you have the bigger filesize the end result will be.
I'm going to go for three frames.
As you can see this has added three frames between frame one and frame three, each one slowly blending into the next. Now, move to your end frame and repeat the same tweening steps again.
This should give you the same results as me.
You can now press the Play icon (two across to the left of the tween icon) to view your animation upto now.
With the hard work now being done, we can simply choose to change how long each frame stays visible. Its usually a good idea to not change the time of the frames that are in the "blending stages" as this will result in a choppy animation. You can change the time of each frame by pressing the little arrow next to where it says "0secs" and clicking on your desired time.
I have choosen a two second pause for each of my images once the blending has finished as you can see below.
Once your happy with your finished product, you save it by going to File, Save Optimized As (remember as a .gif), and then choosing a file name and place to save your new animation.
Movement of an image
This is done in the same wasy as before, its just a case of spending a little more time setting up the layers. Just for this tutorial, we will be making a square move two four corners of the image (of course you can do alot more with a little imagination!) Firstly open photoshop, and create a simple square).
Switch over to Imageready (CTRL+SHiFT+M).
Now we do almost the same as before, create 4 frames and on each frame place the square in a corner of the image, like I have below.
Like in the previous animation we need to use the tween tool on each of the 4 frames, I'm going to use 5 frames per tween for my animation.
Once finised all four frames, you can save optimized as (remember as a .gif) and you should have something simular to below.
Sorry if all that was a little hard to follow, I tried to explain it all the best I could.
This is only the very basics of animation, with a little imagination and thought you can put together some very nice effects to use with your photos. I hope this tutorial has helped give you an insight into what animation can be used for, as its quite late now I will do the rollover tutorial tommorow.
Hope this helps, Daz
Comments or Questions to this tutorial are always welcome, a discussion and comment thread is located here:
http://www.nikoncafe.com/vforums/showthread.php?t=86234
Mcs 23:00, 31 August 2006 (EDT)
