Animation Basics
Why Animations?
- Animations make layouts interactive, and are much more appealing to people. They are eye-catching and even a small animation can make a BIG difference.
- Sometimes layouts can come alive with animations, this depends on how you use them, and that's basically why you would want to use them. They also sometimes show something UNIQUE since not many people use them.
- FLASH? You might ask. One thing I have noticed is the numerous animations done through FLASH. This is bandwidth-saving but ESPECIALLY in layouts that are professionally done and with sites using flash this is a BAD idea: Not all browsers and computers support Flash. Just like not all computers use 1024x768. Either make a layout that can either use/not use flash, or avoid using it.
- So Basically animations are easy, can be very much personalized and work on every browser/computer.
Some Tips to Note
- If you have a site with high bandwidth usage already, try not to use animations unless the quota is high enough to take it. Animations can leech bandwidth like crazy, especially if you have a layout where the page with the animation keeps loading over and over again!
- Properties of animations are very important. I will discuss this in a second, but basically, you want to make sure that you are using the RIGHT type of animation in the right scenario. TRY not to use too many animations, they slow computers, leech bandwidth, and can be overwhelming. Using them as a light touch-up looks nice.
- Before you do anything, go to DOWNLOAD.com and download Jasc Software's Animation Shop 3.0. It's a free trial download for 30 days and some uses, usually mine lasts a couple of months so if it runs out you can download it again, or just find something that starts with a "c" and ends with a "k". :). I'll be explaining the tutorials through Adobe Photoshop CS2, but any program, even paint will work, imageready does animations as well, if you can do that, no problem. In actuality, I used Jasc in the beginning, but imageready is much easier for me. here is a nice tutorial link of using imageready for animations. Most of this tutorial is about making frames for the animations, so I prefer you follow along in Jasc in the beginning. The good thing about Jasc is that since it's all about animations you can get the ins/out of doing it and THEM do more complicated things in imageready, making your life easier.
The Basics
- Animations are animated by using seperate frames and putting them together. Animation shop does the putting together, but you have to make the frames, which is the key to them, and actually really nice, since you can do whatever you think of.
- Before you start, you need to figure out three things:
2.) What the Animation will DO
3.) How the Animation will END
Example
I want the Animation to start like this:
I want it to highlight all the transparent crosses one by one until this:
Finally, I want it to decrease gradually and end up again like this:
To follow along with this tutorial, you can download the frames for the animation here.
- After you have figured this out, you need to figure out the largest FRAME SIZE. Animations are one frame size, you can put different sized images in them, but already know what the frame size is, or else your animations can be incredibly off.
- Know what you are animating and have a brief idea how you are going to do it. Make sure to think of the frame size, and if you are repeating the animation, the LOOP. Looped animations are the best since they are what truely bring the animation to life. You don't want something repetitive, but the problem with Loops is you need to make the transition from the ending to the starting again. That takes a lot of work >.> and thinking!
- Color or no color? Do you want the background of the animation at hand to be transparent or with a backgroud. If your animation is to be blended into the background or have an odd shape, use the background. Or, make sure you can outline it, so that it doesn't look scrappy at the end. However, if it is squared or something pretty solid that can do with a transparent background, do it that way. You'll see in the example tutorials what I mean by this later. In the example above, I used transparent background, since the crosses are transparent before the animation are put on it. This is because they are just normal crosses with solid colors.
- That's all for the basics, look at the various examples to get a better idea :).
How to put together things in Animation Shop
- Usually when I make animation frames I number them, and then put them together in animation shop. So here is how you basically use Animation shop to put them together. In the example tutorials I won't show you again, though I might be making references to it. Keep in mind all of the above steps and also one new one: the repeat LOOP
- Note: I know some of you already know how to use this software, if you do, don't need to read through this. Also if you want to see the frames of an animation, you can save the animation and opening it in Jasc will show you all the frames :) It's really cool! The following example is done with the same avatar image used above.
