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.
 
PSP5 & PSP6 Foreground/Background Color Palette Set your foreground color to dark blue and your background color to white.
 

PSP5 Tool Palette - Shapes tool 		PSP 5: Click on the Shapes tool. In your Tools Control palette, select:
– Shape = Circle
– Style = Outlined
– Outline Width = 6
– Antialias = unchecked.
 

Tool Palette - Preset Shapes tool - PSP 6 & 7

PSP 6: Click on the Preset-Shapes tool. In your Tool Options palette, select:
– Shape type = Circle
– Style = Stroked
– Line width = 6
– Antialias = unchecked
– Create as vector = unchecked
 
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:

PSP 5:
Brush-Tip tab:
– Shape = Left Slash
– Size = 13
– Opacity = 100
– Hardness = 100
– Density = 100
– Step = 1
Tool-Controls tab:
– Paper Texture = None

PSP 6:
Tab 1:
– Shape = Left Slash
– Size = 13
– Hardness = 100
– Opacity = 100
– Step = 1
– Density = 100
Tab 2:
– Paper texture = None
– 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.
 

PSP5 Tool Palette - Line tool 		PSP 5: Use the Line tool to draw an arrowhead:
– Line Type = Normal
– Width = 3
– Antialias = unchecked
 

Tool Palette - Draw tool - PSP 6 & 7

PSP 6: Use the Drawing tool to draw an arrowhead:
– Type = Single Line
– Style = Stroked
– Width = 3
– 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, click on "Yes" in warning box. 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. Go to 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 || Run Animation Shop. In Animation Shop, go to File || Animation Wizard.
 

Settings:

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".
 

Go to 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 Properties and set "Display time" to 10 or whatever you like.

Save file and use on your web site.

Well done your first animation!