Creating a Basic Animation
Have you ever wished you could create a simple animation to share with your friends or to add to your Web site? Well, believe it or not, but it’s a fairly simple process once you get the hang of it. This tutorial will walk you through the steps, so let’s get started!
The first thing you will need is some sort of animation software and preferably, a type of graphic creating software as well. I would recommend Jasc’s Paint Shop Pro (PSP), which is often sold bundled with Animation Shop. Both programs can be purchased at most software stores, such as CompUSA, or it can be downloaded online at Download.com or Jasc.com. These sites allow you to try the software out for 30 days before purchasing.
There are many other types of graphic and animation software, but for this, I will demonstrate using Paint Shop and Animation Shop. Here’s an example of what you can do with this software:
To create the animation, I first started out with three different images. Feel free to save the images below to practice with.
Above, I have the images open in Paint Shop. You can create your own images or edit an existing image using PSP. The key is to keep the size of the image the same and centered in the same place of the canvas.
Your images are now ready to go. Now, go to File, Save As. Save all the pictures you want to use in your animation as a .GIF. This is the file type that is most commonly associated with animations. To do this, click the drop down menu next to Save As Type and scroll until you see Compuserve Graphics Interchange (*.gif) (as illustrated above). Click it, and hit the Save button.
It’s also recommended that you save each animation in some sort of sequence. For example, I named mine stickpersonani1.gif, stickpersonani2.gif and stickpersonani3.gif. This will keep them grouped together, so you won’t forget any elements of your graphic.
Now, you can close down Paint Shop and open up your animation software.
Once you have Animation Shop open, also open your image files. (Hint: to do this quickly, once you’ve gotten to File, Open, hold down the Shift key, select the first image of your series and while still holding Shift, select the last image of your series. This will select all of the images you need for your animation without having to open them one by one. If they aren’t in order, hold down the Ctrl button and select each one separately).
Now your images should be in front of you, looking similar to the screenshot above.
Now for the fun part, you get to begin the actual animation process! Place your cursor over the outer edge of the window of your first image, hold it down and drag it across the screen. Think of this as the canvas for your entire animation. Each box with crosshatching in the background is a slot for your next image.
There are two ways to move the next image in your sequence into the next frame. I like to do it the easy way. Simply place your cursor over the image, click it and hold down and then drag the image and drop it into the box. The other way is to select the image by clicking and copying it, then by going to Edit, Copy. Now, click the last image in your animation (it should be outlined in blue and red, like the image above) and go to Edit, Paste, After Current Frame. This also comes in handy when you use the same image twice in an animation, as I did.
Once you have your images laid out in the correct sequence, there are a few things you’ll need to do to finish the process. The drop down menu above appears when you right click one of the images in your animation. There are five options on this menu that you will most likely use every time you create an animation: Frame Properties, Animation Properties, View Animation, Import Image Transition and Insert Image Effects.
First, let’s look at Image Transitions and Effects.
This step and the next one are not mandatory for creating a basic animation, but they can be fun additions!
Selecting Import Image Transitions gives you the option to add some nifty effects to your graphic. These effects change the way your first image changes into your second image. For instance, if you want one image to fade into another, you can choose Fade from the Effect drop down box. Play around with the different effects and decide if you want to add one to your image. To the left of the Effect drop down box is Transition Length and Frames Per Second. If you toggle these two options, you can change how quickly or how slowly your image changes. Keep in mind that the slower your animation goes and the more frames it has, the longer it will take to load. It will also take up a lot more space in megabytes. A very slow fade applied to each image might look nice on the computer, but it might not be the best idea for a Web page, because it could take minutes to load.
Once you’ve selected your transition, hit the OK button and that transition will be added to the selected image. Keep in mind that the software will only add the transition to the frames you have selected. If you want to add the same transition to every frame of the animation, hold down the Shift key, click the first image and then click the last image before you apply the transition.
Image Effects are very similar to Image Transitions, except they only affect each isolated frame. Follow the same steps as above for Image Transitions to apply one of these.
The next step is to select the speed of your animation. Right click your first frame and choose Frame Properties. You should see a box like the one above. By changing the number in the Display Time box, you are telling your animation to show each frame for every 100th of a second. You’ll want to play around with this until you get the right speed for your project. The software is always at 100 by default, which is quite quick. For my stick figure animation, I used a speed of 20. When I’m creating animations using text, I set the properties between 100 and 250.
The last step is to set the animation properties. Once again, right click one of the frames in your animation (it doesn’t matter which one this time) and select Animation Properties. A window that resembles the one above will open. Click the Looping tab. For some reason, the software is on Play It # Times by default. If you want your animation to loop a certain amount of times and then stop, keep that item selected and type in the amount of times you want it to repeat. However, for the most part, people want their animations to loop continuously. If you fall into this category, select the radio button next to Repeat the animation indefinitely.
After that, you’re done creating your animation! All that’s left is to do is save the image. Go to File, Save or click the disk icon in the tool bar. When you save, you’ll also see a series of windows before the process is finished. Here’s an overview of what the information means and what you should do with it.
Animation Quality vs. Output Size – It’s defaulted on Better Image Quality and it is best to leave it alone.
Optimization Progress – The software is compressing your images. If your file is large, it could take some time. At the bottom right hand corner of the window, it will say “Press Next to continue” when it is ready.
Optimization Preview – This will show you your animation in two different boxes. The first is your animation before you started the steps toward saving it and the other is how it will look once you are finished with this process. If the quality is lower, you may want to go hit the Back button and change some of the settings you selected earlier.
Optimization Results – This is an overview of how long it will take your file to load, depending on your Internet connection speed. For instance, the dancing stick figure I created would take less than a second to load on computer with a 56k modem (the average speed of dial-up) or Cable/DSL, etc. Make sure to pay attention to the loading times for 56k and ISDN. These are the speeds most Internet users are on. If your animation takes an excessively long time to load on 56k, you may want to go back and take out a few transitions or even some frames from the image.
You’re finally done! Congratulations on creating your first animation! It is now ready to be uploaded to the Web, used in a PowerPoint presentation or whatever you have in mind for it!
~ Kimberly Lawson