MysticPSP Animation Tutorial 1

This tutorial was written to show you how to ADD to a pre-existing animation.
Part Two will show you how to alter and further manipulate an animation.

You'll need :-
PSP
Animation Shop
Animated Gif "ani-sparkle-fountain.gif" (below)

(Right mouse click over the animation then select
"Save Picture As" to save it on your computer)

Open Animation Shop then
open the file "ani-sparkle-fountain.gif"

Animation Shop is an amazing program. It seems overwhelming at first, but once you get the hang of the basic elements, you can do some great things!

For this tutorial, we'll be looking at how to manipulate a pre-existing animated image. We can add a background, frame and text very easily, using both PSP and Animation Shop.

There are TONS of free animated gif's on the web you can snag and use for sig tags, alphas, etc. The basics presented in this tutorial will show you how to take a neat gif and turn it into something useful! Let's begin.

The opened animation in AS (Animation Shop) has a total of 45 frames. The more frames an animation has, the larger the file size will be. The more we add to it, the more we'll increase the overall filesize. Keep this in mind when working with animations.

As you'll see, the image has a transparent background. The dark outline around the image shows and doesn't look very good on a white background. So, we're going to "hide" the outline by adding a black background to the image later on.

Each frame is labeled with two important facts;
Frame number and Frame duration

The Frame Number is self-explanatory.

The Frame Duration tells you how long (in fractions of a second) that each particular frame of the animation will be visible for in a cycle.

In this animation, each frame as a duration of 6 - 100ths of a second.
To slow down an animation, increase the duration of the frames!
Similarly, to speed it up, decrease the duration of the frames.

First, we're going to make a frame for the image.

To do this, click on the first frame of the animation, so that there is a red and blue border ONLY around Frame One. Right click inside the frame and select "copy".

Go into PSP, right click on the workspace and select "paste as new image"

Select your "Deform" tool.

Press "Delete" to remove the image from the window.

Now, click on "Image - Add Borders" and add a border with a width of 8.
Any colour is fine for the border, we're going to change it in a moment.

You will get a "pop up" window telling you that the image has to be
flattened into a background layer, click "OK".

Choose your "Magic Wand" Tool and select the border.
You will have the "Marching Ants" marquee around the coloured border with a white interior.

Select a Gold Gradient from the Materials Palette and flood fill the selected area with it.
Apply an "Inner Bevel" (Effects - 3D Effects - Inner Bevel) with the following settings:

Go to "Selections - Invert" and you'll see the marching ants marquee change so that it's now around the white interior of the image.

Go to "Layers - Promote Background Layer" and then press Delete.
This will get rid of the white area and you should be left with this:

Press "Control D" to deselect the area.
Select - Copy

Go into AS, right click on the workspace and select "Paste as New Animation"
Right click inside the frame and select "Insert Frames - Empty"
Set it to the following settings:

We needed to add a total of 44 frames so we'd have as many frames for the "frame" as we have for the fountain animation. The default option for Field #2 (Insert before frame:) is 1. But, if we had added the 44 new frames before frame 1, they would have been blank. So, setting field #2 to the number of the LAST frame and selecting "Carry forward contents" at the bottom will add 44 new frames, after frame one, that include the data from the original frame! Complicated but useful!!

Now you have two separate animations. One with the fountain and another with the gold frame. We need to put them together! Go to the top and select "Edit - Propogate paste". This feature of AS allows you to paste something into one frame and AS will paste it in exactly the same spot in every subsequent frame.

Click on the first frame of the fountain animation and press "control - a" to select all the frames.
Do the same for the gold frame animation.

Now, click on the fountain inside the first frame and drag it inside the first frame of the gold frame animation. As long as all the frames were selected, AS will paste each frame into the right spot in the new animation. Now you should have an animation with 45 frames that looks like this:

Next, let's set the background colour to black to "hide" the outline on the fountain.

Make sure all frames are selected.
(Click on frame one and press control-a)

Go to - Animations - Animation Properties - Opaque and choose black.

Then your animation will look like this:
(showing only one frame as an example below)

Let's add our names to it now.

Go into PSP and choose a font you like, using the same gold gradient as the text colour.
Apply an inner bevel to the text the same way you did with the frame.
Copy the text and go into Animation Shop
Right click on the workspace and select "Paste as New Animation"

Once again, make sure all of the frames on your fountain animation are selected.
Click on the text and drag it into frame one of the fountain animation and drop it where you want it.
Animation Shop will paste the name into ALL of the frames.

(note, if the text does not appear in all frames, undo the drag&drop, reselect ALL frames by pressing "control-a" and then go to Edit - Propogate Paste and redo the drag & drop.)

Preview your animation by pressing the "play" button on the toolbar.

If you're happy with it, save!
When the Optimization Wizard dialogue appears, simply choose "Ok" and "Next" without changing any of the settings.

Send in your creations!

If you have any questions about this tutorial, please email me!
Cait

�TagsByCait 2005