Home arrow Tutorials arrow Interactivity arrow Crosshair Target Custom Cursor
Donate
 
Has KnowFlash helped you?

Donate towards running costs:


Why donate?

Newsletter
Sign up to our newsletter:
 
Enter your email address:
 
flash menu
Tutorials
Video Tutorials
Store
Main Menu
Home
News
Forum
Help/FAQ's
Contact Us
Search
Register
Advertise
Links
Webmasters

Crosshair Target Custom Cursor Print E-mail
Written by Rawpulse   
Tuesday, 28 March 2006
Learn how to make a crosshair taret custom cursor
 
Today you'll learn how to create a custom cursor, to replace the regular white pointer. This is often seen on Flash websites and within games, if the white cursor is out of place or takes away from the theme of the site. This tutorial was made with Flash Professional 8, although most, if not all can be done in previous versions.

For this tutorial, you should know your way around Flash. We are going to replace the cursor with a target. Click here to view an example of the finished product.

So, the first thing to do is set the background color to black, via the Properties menu. Now, on layer 1, select the Oval tool. Turn off the fill color, and ensure the stroke color is red. Set the stroke size to around 4 from the Properties menu. Hold the shift key as you draw your circle, to ensure it stays perfectly round.





Now, draw a vertical line with the same stroke settings, using the line tool. Select the line, and copy it. Place it in a similar position to this:





Paste the line, and position it on the bottom of the circle.





Paste the line two more times. This time they need to be positioned on the left and right hand side, horizontally. To flip them horizontally, select them, and go to Modify > Transform > Rotate 90 degrees CW.





Adjust the four lines so they are symmetrical. To make it a little more realistic, select the Oval tool once more, and add a small red dot in the center.





Now you have finished the cursor. Select the entire target by pressing Control + A. Convert it to a movie clip, by pressing F8. Call it "target". Now we need to add the Actionscript. There isn't much code to do this, but it will be explained afterwards.


Code:

onClipEvent (load) {
 Mouse.hide();
}
onClipEvent (enterFrame) {
 this._x = _parent._xmouse;
 this._y = _parent._ymouse;
}


The first onClipEvent hides the standard white mouse cursor. The second ensures that the position of the movie clip is always updating, and following the invisible cursor. The X and Y is referring to the X axis and the Y axis, which the movie clip moves along.

Now you're finished. Test your movie by pressing Control + Enter. You should be able to see your target following the mouse cursor (which is hidden). To view the example of what it should look like, click here. If you have encountered a problem during this tutorial, tell us about it on the forum, and we'll help you.


Last Updated ( Tuesday, 28 March 2006 )
< Prev   Next >

In association with Coursework Essays , Free Essays , Phishing Scams and Big Red Directory

Copyright Oxford Information Services Ltd 2007