Making a Custom Cursor with CursorXP Pt. 2

Basic animation tutorial for CursorXP

Wednesday, November 22, 2006 by Island Dog | Discussion: Tutorials


Making a Custom Cursor with CursorXP Pt. 2


In the last tutorial we covered the very basics of creating your own cursor using Stardocks CursorXP.  Now lets move on to basic animations.  As mentioned in the first tutorial you will need some software to get your creations going.  Just to recap, the first thing you will need is CursorXP.  You can find the download and more information here.  Next, you will some kind of graphics program to create or modify the graphics needed for your cursor. 

For this tutorial I am using Photoshop CS2, but you can use pretty much any graphics or photo editing program you like.  I always recommend Paint.NET for someone looking for a free solution.  One more very important tool you will need is Aniutil.  This utility is one of the most valuable in my collection.  It allows you to make "animated" PNG or BMP images from multiple static images.  Very handy for creating CursorXP animations, and even for DesktopX objects/widgets also.

Ok, I think we have everything we need, lets get started!

The first thing we need to do is create our animation.  Now there are a couple of ways of doing this, but since this is a basics tutorial we will stick to the method I think is best for beginners.  I'm going to use the same image used in the previous tutorial.  The animation will be the "ornament" changing colors.  This is as basic as you can get, but you can be as creative as you want for your animations.

I created 3 separate PNG's, each with its owned colored ornament, and saved them separately to a folder.

Now open Aniutil.  Click "Process images" and select your animation images.  Hold down the Ctrl button and select all of them at one time, and click "open".  Now just put in the file name you want to use and click save.  Now Aniutil will have saved a "strip" of your three images into one single image.

Open the CursorXP configuration window.  If you are creating a new cursor then select "new theme" from the drop down menu, if you have already started and saved a cursor theme, then just select its name from the drop down list.  Now click "configure" in the upper left side of the window just below the theme choices.

Select which cursor you want to change, for this tutorial we will change the Bush cursor, but you can use apply these steps to any of them.  Once you have the cursor selected click "configure" that's in the bottom right of the window.  From there another configuration window will open.  As shown in the image above, select "Enhanced cursor", and click "Import".  Just select the image strip you created using aniutil. 

Since I used three different images, the "strip" will have three frames, so enter the number 3 in the frames box.  Be sure to enter the correct amount or the animation will not work right.  You should now be at the window below with your selected image.  You should be able to the see the animation in the preview window at the top.

The first thing I notice is the animation is too fast, so click configure again, and adjust the animation interval to 300 ms.  You will find that option under "animation".  Click OK and the animation has slowed down a little, looks good.  In the same way as shown in the previous tutorial you will now select the "click" point in the preview window.  Just move the blue crosshairs over the spot on the cursor that will be your click point.  Now you can click apply and save, and your cursor will be applied. 

I have included a .zip of the image files, so you can experiment with them before starting on your own.  Once again this is just the basics of animation.  You can do some really cool animations with CursorXP, but we all had to start somewhere. 

These two basic tutorials should give you a great start on making your own custom cursors with CursorXP.  There is still more things we can do with CursorXP, but you will have to wait until the next tutorial.  As always, feel free to contact me if you need any help creating your cursor.

Basic non-animated CursorXP tutorial

 

KiloKrash
Reply #1 Wednesday, November 22, 2006 2:13 PM
Wow! I thought creating animation would be a little harder than that. Great Addition! Can't wait for the complete set!
Bichur
Reply #2 Thursday, November 23, 2006 1:45 AM
and......... bookmarked.
DMHolt57
Reply #3 Saturday, March 31, 2007 7:51 PM
Here is my first attempt, drawn with Paint.net 3.5 I have a second set based on laser pointer. This is probably a bit large for most tastes.





Troyx
Reply #4 Saturday, January 12, 2008 7:25 PM
Thanks!!! Sweet tut. Definitely useful.

Just off topic... I was wondering if you knew what program/programs are the really well animated cursors on wincustomize made from. I am assuming Photoshop is a main one but do you know of any 3D animation programs that are useful?

thanks in advance
Kuginh
Reply #5 Friday, January 25, 2008 10:45 PM
3dsmax is a good one. it even lets you render each frame as a png file
voidcore
Reply #6 Tuesday, December 30, 2008 2:24 PM
What i want to know is a basic-to advanced tutorial on scripting the cursor's? anyone up for that? I found this in the forum by Drill'n Boss Some useful tips in this...
I want to change the size of my original files of a cursor set I made, its just too big and I want to cut it down for economy's sake.I used the animutil to make those png strips,but when I scale them the animation 'scrolls'. Open .png strip with your software. I use Paint.net for this but most programs are about the same. Menu>Image>Resize Make sure Maintain aspect ratio is checked. Change Height to where you want it. Now look at the Width, Width / Framecount=NewFrameWidth. If NewFrameWidth is not an even number then round it down or up. Muliply NewFrameWidth by Framecount and enter that number into Width. Press OK.
One more thing, can I and /or how do make an 'if' state? For example: goto another animation if Mouse not pressed for ten seconds Yes you can do that! Let's say your png strip is 5 frames, the first being the normal state and the last 4 being the animation. Use a sript like this: 1,999999 2-4,50 The cursor will stay on frame 1 for 10 seconds then goto animation then back to frame 1.

Rhonin82
Reply #7 Saturday, January 16, 2010 11:53 AM

tnx, I'v been looking for this! Can you please explain how to make a png filmstrip in Photoshop?

BoXXi
Reply #8 Saturday, January 16, 2010 1:59 PM

You would be best using a little program called AniUtil. You just throw all the images you have made into it, and it produces a finished animation from your Photoshop images. So, let's suppose you make an image in photoshop and you want it to rotate. You make the first image, then duplicate the layer. Rotate that layer a few degrees, then duplicate it again. Rotate THAT layer a few more degrees and duplicate it......... etc etc, until you have enough frames to constitute your animation.

Then, save each layer individually using "save for web" in the photoshop menu. Choose to save each one as a .png file and give them numbers or letters such as hand1, hand2 etc......... or hand_A, hand_B etc.

Once you have saved all your different layers as individual images, open AniUtil, browse to where you saved the images and while holding down Ctrl key, click each one to select in order. Click OK and Aniutil will ask you where to save it. Save it in the same folder and name it Hand_ani.

When you open the CursorFX config to make your new cursor, browse to where you saved the ani file and import it. Tell CursorFX how many frames are in the animation, and set the animation speed to your liking. That's it!! you've made an animated cursor!!

Good Luck!! if you need any more help, just ask, I'll do what I can to help.

BoXXi
Reply #9 Saturday, January 16, 2010 2:04 PM

I think the AniUtil program may be included with CursorFX...... not sure. Look in your CursorFX folder.

Rhonin82
Reply #10 Saturday, January 16, 2010 8:29 PM

it is included in cursorfx installation, and I tryed to make an animation the way you discrabed, but after importing it in theme editor it didn't look right. The sequence of selectig png files is o.k. but the animation I get is wrong. Thats why I asked for way to do it in photoshop. tnx for your time anyway

RedneckDude
Reply #11 Saturday, January 16, 2010 10:41 PM

BoXXi
I think the AniUtil program may be included with CursorFX...... not sure. Look in your CursorFX folder.

Comes with DesktopX. At least that's where I found it.

Please login to comment and/or vote for this skin.

Welcome Guest! Please take the time to register with us.
There are many great features available to you once you register, including:

  • Richer content, access to many features that are disabled for guests like commenting on the forums and downloading skins.
  • Access to a great community, with a massive database of many, many areas of interest.
  • Access to contests & subscription offers like exclusive emails.
  • It's simple, and FREE!



web-wc01