Photoshop Tutorials, Flash Tutorials, 3Ds Studio Max Tutorials, Web Design Tutorials


Software Tutorials

Featured Free Templates
View All Templates!
Preview  |  Download
Name: metamorph_flame
Downloads:
Preview  |  Download
Name: metamorph_skyandclouds
Downloads:
View All Templates!
Recommended Hosting:
Host Unlimited Domains on 1 Account
1500GB storage and 15000GB bandwidth for $6.95/mo!
Recommended Hosting:
Host Unlimited Domains on 1 Account
1500GB storage and 15000GB bandwidth for $6.95/mo!
:: Free Website Templates
Preview  |  Download Preview  |  Download Preview  |  Download
Name: metamorph_sunset Name: metamorph_flower Name: metamorph_waterfall
Downloads: Downloads: Downloads:

Do You Like Our Website? Share With Others!
GoogleGoogle slashdotYahooMyWebDiggTechnoratiDelicious
Page: 12345678910111213141516171819202122232425

Welcome To WebDesignTutorials.net Flash Tutorials Area - Custom Cursors



Download Flash File
Learn how to create a custom cursor for your flash movies

Picture 1

Step Open up a new flash document and create 3 layers. Name them actions, hotspot, and cursor. Lastly change the frame rate to 24 fps. First we are going to create our cursor, then add some interactivity and finally add all of the actions to the movie to make this thing run.

Picture 2

Step To create the cursor draw a simple white cross as seen in the movie above by drawing two 18px lines, rotate one of them 90 degrees and place it over the other. Select both lines and hit F8 to make it a movie clip. Open up the movie clip for editing. Highlight the cursor and set the x and y positions to -9. This will center the cross instead of having the cross positioned at the top left corner. Next make three layers. Name them labels, actions, and cursor. Make sure the cross is on the layer named cursor. Now create keyframes on each layer at frame 5 and frame 10 by highlighting that frame and pressing F6.

Picture 3

Step The next thing we are going to do is setup the frame labels so we can navigate through the movie clip much easier than using frame numbers. To add a label simply select the frame on the labels layer and in the property box there is a spot for a frame label on the left hand side. Give frame 1 a label name of white, frame 5 a label name of red, and give frame 10 a label name ofblue. Also add a stop(); action on frames 1, 5, and 10 on the actions layer.

Picture 4

Step The last thing we need to do to setup the cursor is to change the color of the cursor on the red and blue layers. Highlight the cross on frame 5 and change the line color to red. Now highlight the cross on frame 10 and change the color to blue. Finally go back to the main timeline and give the cross an instance name of cursor_mc.

Picture 5

Step The next thing we are goiing to is setup the hotspot to add some interactivity to the cursor. To do this we are going to make a simple white box. The dimensions for the box in the movie above are 100 x 75. Select the box and hit F8 to make it a movie clip. On the main timeline give the box an instance name of hotspot_mc.

Step Now we are going add the actionscript and put this whole thing together. Add the following actionscript to actions layer in the main timeline.

_root.cursor_mc.swapDepths(1000);
_root.onEnterFrame = function() {
	Mouse.hide();
	cursor_mc._x = _root._xmouse;
	cursor_mc._y = _root._ymouse;
}	

We are doing a couple of things here. First we tell flash to put the cursor on layer 1000 to make sure that it is above all of our other objects in the movie. Then in our onEnterFrame event we are telling flash to hide the actual mouse cursor in the flash player. The reason we do this on every frame is because occasionally when you click on the hotspot the cursor will reappear until you roll out of the hotspot or release out of the hotspot. However we don't want the cursor to appear at all. Lastly we tell flash to update the cursor's position every frame to the current mouse position. And that is all you need to do to have a custom cursor. Now we will add some more interactivity to our new cursor.

Step We are going to add a few events to our hotspot to control our cursor. Add the following code right under what we added in the previous step.

_root.hotspot_mc.onRollOver = function() {
	_root.cursor_mc.gotoAndStop("red");
}
_root.hotspot_mc.onPress = function() {
	_root.cursor_mc.gotoAndStop("blue");
}
_root.hotspot_mc.onRelease = function() {
	_root.cursor_mc.gotoAndStop("red");
}
_root.hotspot_mc.onRollOut = _root.hotspot_mc.onReleaseOutside = function() {
	_root.cursor_mc.gotoAndStop("white");
}	

Hopefully all of this is fairly easy to understand, but let's get into it. We first setup our rollover action. We simply tell flash that everytime the mouse rolls over our hotspot we want the cursor movie clip to change to red. Next we tell flash that everytime the mouse is pressed on our hotspot we want the cursor to turn blue. And finally we handle the release action and the rollout action.

Step So there you go, you have created your very own custom cursor. You can add this technique seamlessly to any flash movie to add some nice interaction.


Advertisements
Graphic Software, Flash Templates, Free Stock Photos, Web Templates, Web Design, Corporate Web Design, Royalty Free stock Photo, Affordable Website Design, Submit site, Add Url, Stock Photos, Survey Software, Anti Virus Software, E mail software, Computer Software

Premium Partners
  Free Website Templates - Flash templates, Affordable Website Design, Website Templates, Website Redesign, Custom Website Design, Web Design Tutorials, Flash Tutorials, Promotion Tutorials - that is what we do. Metamorphosis Design Studio offers quality, free and low cost web site templates for your business and personal life, we also offer affordable web design and site re-design.
  Vertex Website Tempales - It saves tones of time and money to use pre-made web designs to build your web site. You need a web site but you don't want to pay thousands dollars to professional web design companies? Our web templates is just for you! They are designed to be easilly edited by your favorite html editor, like MS FrontPage
  Photoshop Tutorials - Learn how to build stunning web pages using Adobe Photoshop, Macromedia Flash MX and 3D Studio Max software. The step-by-step approach makes it so easy, that even beginners can produce great web pages. Get started with these tutorials covering everything from page layout to content tips.
Free website templates and paid web templates are great tools to make your websites look perfect! You will save time and money with our flash templates and free website templates Our visitors are satisfied with the quality of our free and paid website templates! Please visit our free website templates and paid website templates sections. We offer free web templates, free web layouts, free web page templates and other stuff for free download. All templates come with the html and external css file so you may easily edit HTML with your favorite HTML editor. Feel free to download our free web templates for your personal websites.

Terms of use depend upon the website template vendor.
Home  |  Submit Tutorial  |  Top Sites  |  Free Templates  |  Website Templates  |  Privacy Policy  |  Contact Us
All Right Reserved by WebDesignTutorials.net