Hotball's Wormouse Page



Carved Marker

Creating an Animated Cursor

In this example, we demostrate how to create an animated cursor, step by step.

We use the four clock images in the images directory. The files are named clock_01.png, clock_02.png, ... and so on. The animated cursor consists of four frames, and runs at four frames per second. That is, the whole animation takes one second to complete.

At first, click the "Create Cursor" button to show the "Select Cursor Type" dialog box. Select "Animated" and click the "Next" button.

Select Cursor Type

Now the "Animated Cursor Editor" is displayed. Click the "Import Images" button, and select all four files in the images directory.

Image loaded

The imported images are automatically given frame numbers, which increased by 1 by default. Since the animated cursor runs at 20 frames per second, you can see the animation runs too fast in the preview box. It takes only 1/5 second to complete a cycle (4 frames in 20 frames per second).

To makes it runs at 4 frames per second, each frame need to occupy the time of five frames. Therefore, the frames should be numbered as 1, 6, 11, and 16. Click on the second frame, its frame number (2) is displayed in the "Frame #" box. Replace it with "6," and click "Set" button.

Set frame number

You may notice that the second frame now become the fourth frame, that is beacuse the new frame number assigned to it. It can be confusing at times, so sometimes it is better to start to set frame number from the last frame, instead of the first (or second) frame. Now set the frame numbers for the other two frames as well.

Set frame number 2

Now you may notice something not quite right in the preview box. The animation looks "jumpy." That is because the length of the animation is determined by the frame number of the last frame, which is 16. Therefore, the last frame occupy only one frame time, not four frames. To fix this, import the last frame again, and set its frame number to 20.

Import the last frame again

Now click on the preview box to set the hot spot position. You can choose any position, but it is generally better to set the position in the center, or somewhere with significant feature. In this example, the hot spot is set at the top on the top-left side.

Hot spot set

Now click the "Next" button and save this cursor to a Wormouse cursor file. You have completed your first Wormouse animated cursor now.

Note that you can import the same image for several times, as in this example. That is, you can use the same image at different time (frame number). You will need this for some repeating animation. When saving the cursor file, Wormouse will save only one copy of any image, so importing the same image for several times will not increase the cursor file significantly.


Copyright © 2003, 2004 Ping-Che Chen (e-mail: hotball.chen 'at'