|
You are here: Digitope.com > Pixelshop > In Depth > Animated Cursors
How to create animated cursors with Pixelshop
Windows XP supports custom icons for your folders. Using this feature and Pixelshop, you can customize the appearance of your different folders. For example, you can have folder icons for your Picture folder, your Music folder, your Documents folder and so on.
Pixelshop's Create a Folder Icon tool allows you to quickly create these icons from an existing picture.
 
The image we are starting with, and the finished animated cursor (shown here in animated GIF format).
What is an Animated Cursor?
  
A few sample animated cursors included with Windows XP.
An animated cursor is exactly what is sounds like; an animated mouse pointer. Animated cursors consist of a series of icons and optional frame rate, sequence, and author information. The only size supported by Windows is 32 x 32, but any color depth can be used. We’re be creating an Alpha cursor (for more information on the Alpha format, click here).
Above are the single frames that make up the following animated cursor.
Exactly what information do animated cursors have?
An animated cursor can have the following information:
| Property |
What it does |
| Cursor Name |
This can be any string of text. This can be accessed at the Properties dialog. |
| Artist Information / Copyright |
This can be any string of text. This can be accessed at the Properties dialog. |
| Default frame rate |
The default frame rate. If all frame rates are the same, Pixelshop will set this and not use separate frame rates. Frame rates are specified in jiffies (1/60 of a second.) |
| Individual frame rate |
The rate for an individual frame, in jiffies. |
| Sequence Information |
Using the sequence information, you can have an animated cursor that has 4 frames, but 6 animation steps. For example, let's say you have a animated cursor that has 3 frames. You could then have your animation played as 3, 1, 2, 2, 3, 1. This way you don't need to have multiples of the same frame. Click on the Main Toolbar to add or change the sequence information. |
| Hotspot (required) |
The hotspot of your animated cursor. This is the "tip" of the cursor. The default is 0, 0. Click Set Hotspot on the Main Toolbar to set the hotspot. |
How to use Pixelshop to create an Animated Cursor
In this example, we’re be creating a growing/shrinking clover leaf animation.
Simply start Pixelshop and click Create an Animated Cursor on the Welcome screen. A dialog will appear asking you to specify the color depth. Select Alpha (32 bits), and click OK.
The main editing window.
You may have noticed three new buttons appeared on the Main Toolbar; Sequence, Set Hotspot, and Play Animated Cursor. These will be explained later.
Now, click Edit>Paste From, and select your image. (We’re using clover.psd, and Adobe Photoshop file).
Our resized picture.
Right click the picture, and click Resize Selection. Select Pixels as the resize method, and type 32 for the width and height. Click OK. Now, since we’re be having about 12 frames, click the Add Icon button on the toolbar 12 times (we can always delete frames later).
The resize dialog
Now, we have to progressly shrink each frame. Click Edit->Select All (or press Ctrl+A), right click the selection, and click Resize Selection. Resize it to 30x30, and click OK. Drag the image to the centre of the icon. Now, do this for the remaining frames, making each frame 2 pixels smaller than the last one.
The Sequence dialog
We want our animation to start big, shrink, and then grow again. To do this (with copying each frame twice) we need to use a sequence. Click Sequence on the toolbar (a little filmstrip).
You’ll now see an icon list, and the frame list, or play order. Simply drag the first icon from the icon list to the framelist, starting with 1, 2, 3, etc., and then going back to the first one (i.e. 1,2,3,4…4,3,2,1)
The Properties dialog
We’ll now set the name and artist information for our cursor. Click File->Properties. In the name field, type Clover. In the artist field, type Pixelshop.
That’s all! All you need to do now is save your animated cursor.
Our finished product
Here’s the individual frames...
...and the completed cursor
Back to top
|
