Flash tutorial: Custom mouse pointer

This entry was posted on Thursday, March 6th, 2008 at 1:11 am and is filed under Flash, Flash Tutorial, Tutorials, Web Design.

You can follow any responses to this entry through the RSS 2.0 feed. Responses are currently closed, but you can trackback from your own site.

Level: This is a beginner lesson, but I will assume that the reader is familiar with the basic use of the Flash software including stage, timeline, drawing tools, property window, etc..

Version: I will be using Flash CS3 and AS2 (athough tut is compatible with earlier versions of Flash) and instructions are for the Mac. Windows users would use the PC counterparts for specific instructions on Flash Menu/Shortcut instuctions.

Description: In this tutorial, I will explain how to make a pointer or scope that could possibly be used for a shooting or target game. As with many things in Flash, there are different ways to accomplish this, but I found this to be pretty straight forward and simple. In future tutorials, I will be explaining more steps on how to create a target shooting game, but this is a starting tutorial and will get you acquainted with Flash and ActionScript.

Demo: Custom Mouse Pointer Flash Tutorial: Demo

Let’s get started!

Select “File > New” (command-”N”) and select Flash File (ActionScript 2.0) to open a new Flash document file. Save the file, and give it the appropriate name. I will call this “target_tut_1.fla”. Feel free to change the document dimensions (“Modify > Document or “command-J”), to whatever you like, but I chose to use 300 x 300 pixels.

The first thing I will do is draw the pointer or “scope”, similar to what you see in the movies when a sniper looks through the scope of a rifle. Select the “Oval tool” from your tool box, and use a red stroke, with no fill. Draw a small circle on the stage (Tip: holding shift when you drag the mouse will create a perfect circle). Select the entire circle and go to “Modify > Convert to Symbol” (F8). Give this an appropriate name (I will use “mc_scope”) and select the “Movie Clip” radial. Your circle is now a symbol. We will now need to edit the symbol to complete the “scope” look. Double click on the circle to bring you into the symbol. Select the entire cirlce (Tip: you will see white dots in the circle as opposed to a blue square around the circle if you are in the symbol editing mode when the shape is selected). Add a new layer to the symbol, and choose “Edit > Past in Place” (command-shift-V) to add another circle to the new layer. Select one layer (either one, it doesn’t matter), and scale this circle to 50%. (Tip: to easily scale an object, use the “Transform” pallette: “Windows > Transform” (command-T).

—- ads by google —-

We now have one smaller cirlce inside a larger one (Fig. 1)… we now need to add the crosshairs. What we want to do is draw a cross in the center of the circle. One easy way I do this is select the outer circle and choose the transform tool. What this will do is give you a box around the outer circle with “handles” (small squares used to manipulate or “transform” the object) on all corners, and at the halfway point of each dimension. These can be used as qucik visual in order to drag guides out and find the exact center of the circle. Simply drag a top and side guide and drop on the handles at the center points of the box (Fig 2, the green lines are Flash guidelines). Now, using the line tool, we can draw a vertical and horizontal line through the circles on the guide lines (Tip: hold “shift” while dragging to create a perfectly straight line). You want to extend the lines beyond the edges of the outer circle. A little lenghty desciption here, but you should now have your scope image.

Return to the main stage (clicking “scene 1″ under the timeline). Click on the symbol once to select it, and with it selected, give the symbol an appropriate instance name in the “Properties” window. A personal preference of mine is to give it the same instance name as the symbol name, in this case “mc_scope”, but it is important to note that symbol name and instance name do not refer to the same thing. I will be writing a mini-tutorial on the difference between a “symbol” name and an “instance” name, but until then, feel free to leave a comment. Now that we have given our symbol an instance name, it’s time to get to the fun part…. adding the ActionScript!

On the main movie timeline, add a new layer and name it “actions”. (Tip: Although not absolutely necessary, it is good practice to always place your actions layer on the top layer of your document). On the first keyframe of the “actions” layer, insert the following code:

_root.onEnterFrame = function() {

mc_scope._x = _xmouse;
mc_scope._y = _ymouse;
}

(Tip: Where the code reads “mc_scope”, you would need to change to whatever you used as the instance name for your movie clip symbol.)

That’s it! We are now done! You can go ahead and test your movie. Cool huh? What? you thought there would be long lines of crazy, confusing code? Nope. Just a couple lines. Pretty simple, right?

Ok, so did you think I was going to leave it at that without explaining the code? Of course not! Here we go….

_root.onEnterFrame = function() {

The “onEnterFrame” command is telling the Flash player to perform the actions within the curly brackets whenever the playhead is on that frame.

mc_scope._x =_xmouse;
mc_scope._y = _ymouse;
}

The code between the curly brackets is what is controlling the X and Y position of the instance “mc_scope” and matching it up to the X and Y postion of the mouse. Sound confusing?

Basically, _xmouse is the X position of the users mouse on the stage… and therefore _ymouse is the Y position. Whenever the user moves their mouse on the file, these numbers will change. What we are doing is simply saying “whatever the X and Y position of the users mouse is, make that the X and Y postion of mc_scope as well”. Simple as that!

When you test the movie, you will see your mouse pointer on the stage, and wherever you move the mouse pointer, your scope will follow. I left the mouse visible to give you a better visual of what exactly is happening with the code. However, what we probably want for a more “realistic” look is to “hide” the mouse pointer and just have our scope be our mouse pointer. To do this we simply add the following line of after the opening curly bracket:

Mouse.hide();

This, as you can probably guess, “hides” the mouse pointer from the stage. However, the X and Y coordinates of where the mouse pointer would be are still established, so our code is still operating the way it should be.

Now, we are done with the first stage of a target game. Again, as with many tasks in Flash, there are multiple ways to do things, and this is just one, but I hope you found this exlpanation helpful, and I hope to continue writing more tutorials to finish a complete target shooting game.

As always, comments are welcome, whether you have question or maybe you have a better way to do this, I’d love to hear it!

Source Files: Flash tutorial: Custom mouse pointer

If you liked this tutorial, check out the second part: Adding the bullet animation and learn to play a movie clip with the mouse click in Flash.

Tags: design tutorial, flash design, flash development, Flash Tutorial