Home>Tutorials>Basics Tutorials>
Animated Arrow
E-mail this tutorial to a friendEmail to Friend

Animated Arrow
Created by: Graham

Every web site seems to have some kind of animation, and what better package is there for simple web-based animation than Paint Shop Pro! This tutorial shows how to make a simple animated arrow.
Standard Toolbar - New (image) button Create a new image, 100 x 100, background white.

Tool Palette - Preset Shapes tool - PSP 6 & 7
Click on the Preset-Shapes tool. In your Tool Options palette, select:
Shape type = Ellipse
Retain style = unchecked
Antialias = unchecked
Create as vector = unchecked
Line width = 6
Line style = Default line
Set your foreground style to Solid Color (click on the little arrow in the Foreground-Style box and choose the icon on the left) and your background style to None (click on the little arrow in the Background-Style box and choose the icon on the right). Then click into your Foreground-Style box and set your foreground color to dark blue; background color doesn't matter. Set both your Textures to None.
Check the "Lock" option beneath your Texture boxes so we don't have to set all these options for every tool we use.
Keep the Shift key pressed and with the right mouse button draw a circle starting at the coordinates (50, 50) and drag out to (86, 86). (Coordinates do not have to be exact. They are just to give you an idea of what to do.)

Tool Palette - Eraser tool

Select the Eraser tool. Settings used:
Shape = Left Slash
Size = 13
Hardness = 100
Opacity = 100
Step = 1
Density = 100
Build up brush = checked

Starting at coordinates (49, 15), erase about 3/4 of the circle by dragging mouse out to (91, 52). This will leave the top slighty pointed and the bottom squared off.

Tool Palette - Draw tool - PSP 6 & 7
Use the Drawing tool to draw an arrowhead:
Type = Single Line
Width = 3
Line style = Default line
Antialias = unchecked
Create as vector = unchecked
Close path = unchecked
Begin first line at (77, 44), drag out to (94, 44).
Begin second line at (77, 44), drag out to (85, 56).
Begin third line at (94, 44), drag out to (85, 56).
Select Paint Brush (settings unimportant) and fill in arrow.

Go to Colors || Set Palette Transparency. In "Decrease Color Depth" box, set:
Palette = Optimized Median Cut
Reduction method = Nearest color
and click on OK.

Next box: "Set the transparency value to the current background color". Click on OK. Then go to Colors || View Transparency.

Standard Toolbar - Copy button

Press Ctrl+A (Selections || Select All) to select image.
Press Ctrl+C (Edit || Copy) to copy image.
Press Ctrl+V (Edit || Paste || As New Image) 3 times to paste image.

Go to Windows || Tile Vertically to place the four images in a square.

Select image #2. Click Image || Rotate:
Direction = Right
Degrees = 90
All Layers = doesn't matter

Select image #3. Go to Image || Rotate, rotate by 180 degrees.
Select image #4. Go to Image || Rotate, rotate by 270 degrees.

Standard Toolbar - Save (image) button

Select and save first image as arrow1, select and save second image as arrow2, select and save third image as arrow3, select and save fourth image as arrow4.

You can save as gif or psp file format as it does not matter at this point in time.

Go to File || Jasc Software Products || Launch Animation Shop. In Animation Shop, go to File || Animation Wizard.


First dialog = Same size as the first image frame.
Click "Next".

Second dialog = Transparent.
Click "Next".

Third dialog = Upper left corner of frame & With the canvas color.
Click "Next".

Fourth dialog = Yes, repeat the animation indefinitely.
Click "Next".

Fifth dialog, click "Add Image".

Find your saved arrow files. Select arrow4, then hold down the Shift key and select arrow1 to highlight and add all images at once. Why did we select arrow4 first? I hear you ask. Well, the reason is that when you click "Open", all images will then open in the correct order with arrow1 at the top and arrow4 at the bottom. ;o)

Click "Open", click "Next", and in the next dialog, click "Finish".

Select View || Animation to watch your masterpiece.

If you wish to change the speed of your animation, click on the frames. Select Edit || Select All. Right-click image 1, click Frame Properties and set "Display time" to 10 or whatever you like.

Save file and use on your web site.

Well done your first animation!