 Animation Shop is the animating program by Jasc that comes bundled with Paint Shop Pro. It may also be purchased separately. This tutorial is probably suitable for any version, however, it was written for Animation Shop v.3 (AS3 is included with PSP 7 and newer versions).
"Animating" is the second step in creating your animation...first you must create the images. This tutorial does not create an image...it just explains two methods for using the Animation Wizard once you've created your images. The Animation Shop Tutorial Index contains a list of my tutorials for creating the images!
The image to animate can be a single file which has 2 or more layers (Method 1) OR it can be 2 or more separate files (Method 2). Use whichever method you're most comfortable with. Either way is "correct".
Note: Animation Shop 3 does not recognize the new .pspimage file format used in PSP 8 & 9. In order to open any .pspimage files in Animation Shop, users will need to create a duplicate file in .psp format (PSP 7-compatible) or one of the other file formats recognized by Animation Shop (such as .gif or .bmp).
 Open Animation Shop from your Programs or from within Paint Shop Pro using the FILE menu or the quick launch button
Setting AS Preferences
Method 1 creates an animation from a single image with 2 or more layers. For this method, your Animation Shop Preferences must be set to "Keep layers as separate frames".
There are some tutorials on the web that will tell you that you should NEVER check the box that says "keep layers as separate frames". That is incorrect. That would not be an option if there wasn't a purpose for it! This method is one reason to keep layers as separate frames!
To check your Animation Shop settings, select:
file > preferences > general program preferences.
Under the layered files tab...."keep layers as separate frames" should be checked, as shown below.
Another preference setting that is very helpful is to have the delay time and the frame number visible under each frame of the filmstrip. Set this preference under the 'Frame View' tab. Check the box that says "display frame numbers, delay time underneath frames".
 The filmstrip is the series of frames that create the animated effect.
The frame number identifies each frame in the filmstrip. It is especially helpful when there's a large number of frames in the animation! Number appears as F:1 under frame.
The delay time is the duration each frame is displayed in 1/100 of a second. A value of 100 will display the frame for one full second. Delay time appears as D:100 under frame.
Layer Frame ~ Method 1: Importing Layers as Frames
The Layer Frame method creates animation frames from one .psp image with 2 or more layers. Each layer in your .psp file will become a separate frame of the animation.
 Select the Animation Wizard button or select from the menu: file>animation wizard
Typical answers to questions in dialog box are as follows:
- Same size as the first image frame (in most cases) next
- Transparent or opaque background color (depending on your image) next
- Upper left corner of the frame, Fill with the canvas color next
- Normally this is "Yes", to repeat the animation indefinitely next
Display time: This is the speed of animated movement. The default setting is 10. Changing it to a larger number will slow the animation. This display time can be adjusted later. next
- Add image....browse to find your .psp file, then select next
- Finish
All frames of the animation filmstrip should now be visible in your workspace. If it looks like its only 1 frame, the image may be in a "collapsed" view. Use your mouse to grab the right edge (turns into double-end arrow) and drag it to the right to "open" the image to view all frames of the filmstrip at once (or as many as will fit screen).
Note: With the Layer Method, you can create a filmstrip without using the Animation Wizard....just open multi-layer .psp file in Animation Shop. The Animation Wizard is just a handy tool which allows you to select all the settings at the very beginning.
If all looks good....move on down to Previewing Animation
Troubleshooting Method 1:
- If some frames appear to be missing...it could be that you had the visibility turned off for that layer when you last closed .psp file. Open the original in PSP and check. Correct the visibility, save and start over.
- If the first frame in your animation is a blank or is a solid block of color...your original .psp image had a separate "background" layer. Using Layer Method, there cannot be any "extra/unneeded" layers in the .psp file. Open the original in PSP and check for "blank" layer. Delete or close visibility for that layer, save and start over with the Animation Wizard.
- Your transparency isn't correct...you selected "transparent" in step 2, but you see a colored background instead of the transparency "checkerboard". See notes below for setting image transparency and background color.
- You're getting error message: "The file cannot be identified as a supported type." Are you trying to open a .pspimage file instead of a .psp file? Remember, users of PSP 8 & 9 will need to create a duplicate file in .psp format (PSP 7-compatible) to use it in Animation Shop.
File Frame ~ Method 2: Importing Separate Files For Each Frame
File Method #2 is used when the images you wish to animate are 2 or more individual files (image #1, image #2, image #3, etc.) rather than the multi-layered file used in Layer Method #1. The files can be in .psp format (with all layers merged) or .gif format or one of the many other formats supported by Animation Shop.
Note: Jpeg files and images with gradient color may get ugly when saving as an animated gif. The number of colors used in a .jpg file is normally 16 million. This must be reduced to 256 or less for .gif animations. I find it's usually best to reduce and adjust the colors in PSP before attempting to animate such an image.
Select the Animation Wizard button or select from the menu.
file>animation wizard
Typical answers to questions in dialog box are as follows:
- Same size as the first image frame (in most cases) next
- Transparent or opaque background color (depending on your image) next
- Upper left corner of the frame, Fill with the canvas color next
- Normally this is "Yes", to repeat the animation indefinitely next
Display time: This is the speed of animated movement. The default setting is 10. Changing it to a larger number will slow the animation. This display time can be adjusted later. next
- Import images....browse to find your files. Select image #1, repeat browse...select image #2, image #3, etc., until you have all the images imported that you will need for your animation. Then select next
- Finish
Previewing Animation
 Select the View Animation button to preview how your animation will look! (or use menu view>animation)
Delay Time: If the animated action would look better if it moved faster or slower, you can adjust the display time of a frame (or maybe all frames) with "Frame Properties". Close the animation preview. Select the frame to be changed (or, for more than one, hold down Shift key to select more). A blue border indicates it is selected. From the the menu, select animation>frame properties. Or, with the pointer tool, right click the frame and select Frame Properties. Changing display time to a larger number will slow the animation, a smaller number will speed it up. Experiment. Change delay time and Preview Animation again. Re-do until satisfied.
 Alignment: If the action looks a little jerky, close the animation preview and enable the onionskin preview using the button shown here or by pressing Shift + O (turn on and off as needed). Onionskin Preview temporarily superimposes a transparent overlay of frame 1 onto frame 2; frame 2 overlays frame 3; etc, for all frames. (This can vary, depending on preference choices...double click Onionskin icon to view preferences).
 Make adjustments to the alignment within each frame that may correct the jerkiness of movement. Use the Mover Tool to reposition and re-align the object(s) in each frame as needed, using the onionskin overlay as a guide.
Transparent Background: I receive a lot of email from people having problems with transparency in Animation Shop. They have followed instructions and selected transparent background using the Animation Wizard BUT when saved, the background is an opaque color!!! First let me say that I also have this problem from time to time!! I don't know why, but the following instructions just won't work for some images!! When all else fails, I send file to PSP to set transparency and start over!!
This is exactly what Jasc says to do to change background color of an animation (quoted):
Select or change the canvas color for an animation as follows:
1. Choose Animation > Animation Properties. The Animation Properties dialog box will appear.
2. Select the Canvas Color tab.
3. Use the Canvas Color tab as follows:
Select the "Transparent" option to have a transparent canvas color.
Select the "Opaque" option to have a non-transparent canvas color. The current canvas color appears in the color box. Left-click inside this color box to display the Color dialog box; right-click inside this color box to display the Recent Colors dialog box. Select the new canvas color using either of these dialog boxes.
After all your corrections and changes are made, enable the view animation button and preview again. Look OK to you? Good! But, wait! Before we save the animation, let's crop it to make the canvas size and the file size as small as possible.
Crop & Optimize
Enable the crop tool. When you do this in Animation Shop, three new buttons appear on the menu bar above the crop tool ....options...crop....clear
 Select the options button. In the crop options dialog box, select surround the animated area, then select OK.
A box now appears in each frame to indicate crop size. Select the crop button (next to options) and your canvas size will be reduced to minimum.
To optimize an animation before using it on a web page, use the Optimization Wizard. to reduce size of the animation file.
SAVE your animation. The default file format is GIF. Select SAVE and a dialog box will appear to give your file a name. After you name file, the Gif Optimizer should appear...... if it doesn't, select File > Gif Optimizer.
Move slider to top for "better image quality" or lower the slider to sacrifice some image quality for a smaller file size.
On this same page of the dialog box, select the customize button.
Review all the tabs and options in the Gif Optimized to customize your preferences.
Some options under "Customize" are:
Number of Colors: Choose the number of colors you want available in the animation. The current number of colors is displayed to the right of the drop down box. The maximum number of colors for GIF format is 256 colors (it says 255 because 1 is reserved by program). If your image uses fewer colors than 256, enter that number for a smaller file size.
Create Palette by: Choice here varies depending on image. I find that Optimized Octree works best for me in most instances. It's a matter of trial and error to see how the different color settings will work best for each image.
Dithering is a technique for simulating a color that may be missing from the file's color palette by mingling pixels of two or colors to create the missing color. Too much dithering can sometimes produce a grainy or mottled appearance. For animations, I try to work within a limited color palette and not use any dithering. It keeps the file size smaller and avoids any odd color jumping!
Removing non-visible elements and writing minimal frames will help reduce file size.
When done customizing, select OK. You will be shown a preview of animation, final file size and estimated load times for different modem speeds. Keep selecting next until done ... finish!
Most of all.....have fun with the animations!! |
