1. Create a graphic of a box with clear fill. (box).

2. Put graphic box into a new movie clip (mc_boxes). Align it to x=0 and y =0. Then to the right of the first box, using copy/paste, create a horizontal line of boxes. Change the alpha setting of boxes to decrease as the line progresses to the right.

3. Make another movie clip (mc_boxes_cur). Create a layer (boxesRight) andput mc_boxes on to it. Align it about x=12, y=0. Then create a new layer(boxesLeft) and copy mc_boxes on to it. Apply horizontal flip to this one. Then create 2 more layers (boxesTop and boxesButton) and rotate the mc_boxes accordantly, so the end result looks like a cross with a bright center.

Create another layer (actions). Set the first frame to stop(); and name that frame start.

4. Drag your mc_boxes_cur on to Scene 1, name this instance: newCursor. Create layer (actions), set the first frame to stop(); Click on the newCursor instance and write the following script:

On ClipEvent (load){
Mouse.hide();
StartDrag ("_root.newCursor",true);
}

Thise script tells the movie to hide the real mouse and start dragging the instance of mc_boxes_cur, aligning its center coordinates with the real cursor coordinates.

If you publish your movie at this point, you should see your cursor instead of the mouse moving around inside the flash movie.

5. Now lets add some animation to our cursor. Open up movie clip mc_boxes_cur. On the layer boxesRight copy frame, and paste it on frame Then move the boxes on frame 5 towards the right. Create motion tween. Then copy the 1st frame of this layer to frame 9. Now create motion tween from frame 5 to 9. Do the same (only move the boxes to the left) for layer boxesLeft.

On the actions layer you need to do the following:

Frame 2
name it: overMid
Action script:
Play();

Frame 5
Action script:
Stop();

Frame 6
name it: overMid_back
Action script:
Play();

Frame 5
Action script:
gotoAndStop("start");

6. Create another movie clip (mc_menuButton). There you should have movie clip with your menu item (menuItem) on one layer, and a clear button (the button that has the graphic only on the HIT state) on another. The layer with clear button (button) should be over the layer with the menuItem. Click on the button and put the following script:

On (rollOver){
_parent.newCursor.gotoAndPlay("overMid");
}
On (rollOut){
parent.newCursor.gotoAndPlay("overMid_back");
}

Then put this movie clip on to scene 1 and name this new instance menu.

The script, that you just wrote, tells our new cursor to play its animation, when the mouse is over the menu item. It also tells it to play the animation that makes the boxes go back to center, once the mouse leaves the button.

This is the basic idea of how to create this type of cursor. To enhance it, you can create another tween on mc_boxes_cur moving just the boxes on the right. Then create another button in mc_menuButton, and just tell it on mouseOver to move the boxes to yet another frame. (see the source file for this tutorial) You can also change the color of your menu item when the mouse is over it. (see the source file for this tutorial)