ANIMATION ON THE INTERNET

Your first moving 'GIF'

How to Open and use Paint Shop Pro Animation Program

In PSP5 or 6 click on File (menu)- drop-down list, go to "RUN ANIMATION SHOP".
In PSP 7 click on File (menu) - go to Jasc Software Products, then "Launch Animation Shop".

A box will open on top of PSP, this is the animation program connected to Paint Shop Pro.

Wizard Opening In Animation click File then Animation Wizard. This will start Animation Wizard. Determine if you want the "Same size as the first image frame" or "As defined here"We are using the same size for ours.

Choosing the "Same size as the first image frame" radio button matches the size of all subsequent frames in the animation to the size of the first frame without changing the aspect ratio (width-to-height ratio) and the remainder of the page will be left grayed out.

Choosing the "As defined here:" radio button enables the Width and Height edit boxes for you to set the exact dimensions of the frames in the animation. Dimensions are measured in pixels. If you choose "Define the area", you will need to place the height and width numbers in the boxes. Once you have determined the size, click the next button.

Either Transparency or Canvas color:

Choosing the Transparent radio button will allow any images behind your animation to show through in the canvas. The default setting for indicating a transparent canvas in Animation Shop is a gray and white tiled pattern. We will use this setting as we already have a white background on our GIF's therefore we don't need to set the background right now (you can go back and change this later if you keep this animated gif and want it transparent.

Choosing the Opaque radio button allows you to choose a color for the canvas of your animation. The canvas will be as large as the dimensions you set in the previous Wizard dialog box.

To choose a canvas color other than the default shown in the Wizard dialog box, click the Set Canvas Color button. Animation Shop will open the Color dialog box. Select a color of your choice. A good decision if you have a single colored background page is to set the background the same color, then you will not have to worry about making a transparency gif.

Position the Frames wizard Opening
If you have included images of different aspect ratios (width-to-height ratios) and sizes, the position wizard page will assist you in placing these images in their frames. You have two options.

Choosing the "Upper left corner of the frame" radio button will align all images with aspect ratios different than the first image in the upper left corner of their respective frames.

Choosing the "Centered in the frame" radio button will center all images in their frames. We will be using this setting.

If the dimensions of an image are smaller than the first image, "space" around the outside of the image can be filled in one of two ways.

Choosing the "With the canvas color" radio button uses the default canvas color to fill in around the smaller-sized image.

Choosing the "With the preceding frame’s contents" radio button fills in the "space" around the smaller image with the contents of the previous frame.

Checking the "Scale frames to fit" check box re-sizes the image to fill the frame, while maintaining the aspect ratio of the image.

Set the Animation Properties

You set the looping and delay animation properties in this properties wizard page.

Choosing the "Yes, repeat the animation indefinitely" radio button will continuously cycle your animation.
We will be using this setting.

Choosing the "Repeat it __ times" radio button allows you to set how many times the animation will be repeated.

NOTE: Not all browser's currently support this feature.

You indicate the delay time for each frame in the delay time edit box. All frames in the animation will be set to the same delay time. These values can be changed later when you are editing your animation. We will set our for 30 and edit the last one to 25 before we save the final animated gif.

Add Your Images
You must include at least one image to create an animation in the Animation Wizard.

wizard open


We will place the GIF's in the following order, non -flood filled boxes from sizes 2 up to 12 then flood-filled boxes from size 12 down to 2. Using a reversed order. In your folder they may not be listed in this order, so you may have to move them into a correct order by using the move up and move down tools.

Back to OUR Animated Box's property item
We now have the 12 box's in the animation program almost ready to animate.

For the animation that we created here, we set the animation rate at 30 except the last frame needs to be set at 25. The reason for the slightly faster speed on the last frame, is to recreate a circular rotation of the colors without a break. If you want to try to see the animation "as it is now" go to VIEW drop-down list and click on animation.
Do you see a break between the red square and the smaller lined square? It may not be much but enough to say, "this is not a smooth running animation". Something is "off" and I just can't put my finger on it. This can be so frustrating.

To change the Rate of Speed

colored 
squares

On the last Frame Number "12" place the mouse cursor over it, and RIGHT MOUSE CLICK this brings up another box, scroll down the list to the PROPERTIES and click on it. Yet another box will open and will show you the DISPLAY TIME. Here is where you change the rate of speed to 25.

That is the basics of the animation wizard to loading your pictures into frames. Now we will view the animation we just made. To view your animation go to the "VIEW" (menu) drop-down list and click on animation.

If yours doesn't look exactly like this one, (because you changed the order of the colors, don't worry). What is important is that the size of the animated gif, the clarity and the design are created equal to view on the net. Remember: Pixel Size, Clarity, Color reduction are all important not necessarily the order, (well at least not on this one!!)

Saving our 'GIF'

Once you have viewed the animation, corrected the speed, and are ready to save, go to the file (menu) drop-down list and click on Optimization Wizard.

Animation Shop offers an optimization process that lets you determine the level of image quality of your animation versus the output size of the file. This process is initiated whenever you save a new animation file or save an edited file. You can also initiate optimization without actually saving the file by choosing Optimization Wizard from the File menu.

You will be given a series of wizard pages to respond to. As you finish with each wizard page, click the Next button to move to the next wizard page. You may move forward or backward at any point in the process by clicking the Back and Next buttons at the bottom of the pages.

The Animation Quality verses Output Size

Optimizer Animation Shop offers an optimization process that lets you determine the level of image quality of your animation versus the output size of the file. This process is initiated whenever you save a new animation file or save an edited file. You can also initiate optimization without actually saving the file by choosing Optimization Wizard from the File menu.

You will be given a series of wizard pages to respond to. As you finish with each wizard page, click the Next button to move to the next page. You may move forward or backward at any point in the process by clicking the Back and Next buttons at the bottom of the pages.

Step 1: Select the Output Type

The Optimized Output dialog box will provide the following choices:

Clicking the appropriate radio button, either "Animated GIF File" or "Animation Shop Animation (MNG) file" will determine the file type

Clicking the "Replace the current animation with the optimized version" radio button will overwrite the current animation in your computer’s memory with the optimized version.

Clicking the "Create a new animation from the optimized animation" radio button will create a new animation in your computer’s memory that has not yet been saved.

Optimizer Step 2: Select Animation Quality

When a file is optimized, you can choose whether to preserve the quality of the images in your animation and consequently save a larger file, or sacrifice some image quality for a smaller file size. Animation Shop offers you four levels of optimization, indicated on the slider button in the Animation Quality Versus Output Size dialog box. As you move the slider button, you will see the optimization setting details change with each level.

Selecting the "Use these settings when saving UN-optimized files" check box to skip the optimization interface and have Animation Shop automatically optimize with the current settings during each save.

You can change the optimization details by clicking the Customize button. The Customize Optimization Settings dialog box will appear, with two settings tabs available: Colors and Optimization. In the Colors tab, indicate how many colors you want available in your animation by choosing an option from the Number of Colors drop down box. Animation Shop tells you how many colors your animation is currently using just to the right of the drop down box.

In the "Create palette by" area of the dialog box, choose the color palette Animation Shop should use when optimizing your animation. Indicate the color reduction method Animation Shop should use in the "Reduce colors by" area of the dialog box. In the Optimization tab, you can:

Control the size of your animation file by checking the "Remove Non-Visible Animation Elements" check box.

Select the "Write Minimal Frames" check box prompts Animation Shop to compare each frame to the previous frame and, if possible, write a smaller frame containing only the pixels that have changed. This optimization is the default in all quality levels.

Select the "Map Identical Pixels To Transparent" check box to make use of the transparent color for better compression. It is the default in all quality levels.

Select the "Allow per frame palette's" check box allows the optimizer to decide if a color palette should be written for one or more individual frames in the animation. Choosing this check box will increase the size of the file, but may also increase the image quality.

We are going to select next, because we have a small animated object and won't need a lot of adjustments on this one. But for others you may have to work with the above items.

Optimizer Final Results

optimizer Here you will see the file size, (current, optimized, and % of Change that was created using this Optimizer, as well as the times to download per modem speeds.

Step 3: View the Results The Optimization Results screen provides useful information about your file if you are planning to incorporate it on a World Wide Web page. The Current File area displays information about your animation as of your last save. The Optimized File area shows you the download times for your animation file from a server to a user’s computer at various modem speeds. Click the Finish button when you are ready to proceed. Your file will be modified per your optimized settings and the Optimization Wizard will close.

Saving the newly created animated 'gif' with SAVE AS: The SAVE AS box will open, give it a name (it should have a .gif extension already selected, if not scroll to find "CompuServ Graphics Interchange(*.gif) click on it). I saved mine as animatedsqr1.gif Note: the first part says animated; this also helps me to remember that it is animated. NOTE:

The following part of the lesson is the Picnic Basket animation's I created with Paint Shop Pro Animation and some explanations.

Animation Lesson Next

Copyright
*Copyright © 1997-2003 Granny-Wicked & Ralph
*All Rights Reserved
This page was last updated on April, 2003