Toxiclab.org

Custom cursor

18.1.2006, 14:7
Submited in: Flash | Total Views: 41007

In this tutorial, I will show you how to create Custom cursor in Flash. You will also learn how to use instance name, how to apply action script code on cursor using the action script panel and more.






Example:



Step 1

Open Flash, and than in  Properties Pannel (Ctrl+F3), click on size icon (Ctrl+J), set  Height to 300, Width to 200, color to  whatever you like  and ok.



Step 2


Double click on layer1 to change its  name in cursor.After that, create a new layer above the cursor layer and name it hotspot and action. See the picture below.



Step 3

Lock the all  layers, except cursor layer, click on the cursor layer and draw a new cursor like it is shown on the picture below.



Step 4

Take the Selection Tool (V). Select the cursor that you just created and press F8 key (Convert to Symbol) to convert this cursor into a Movie Clip Symbol. See the picture below.



Step 5

While the new made Movie Clip (cursor) is still selected, go to the Properties Panel (Ctrl+F3) below the stage. On the left side, You will find the Instance name input field there. Call this Movie Clip cursor.




Step 6

Double-click on the movie clip on stage with the Selection tool(V).You should now be inside the Movie Clip. After that, double click on layer 1 to rename its name in cursor, and then, create a two new layers above the cursor layer and name it actions and label. See the picture below.



Step 7

Click on frame 5 of cursor  layer and press F6 key(Changing points). Then change the color of cursor in red.





Step 8

Click after that on frame 10 of cursor layer, and press again F6, but  this time change the color of cursor in green.





Step 9

Click on the first frame of label layer and in Properties Pannel (Ctrl+F3) for  <Frame Label> type blue. Than click on frame 5 of label layer, press F6 key and for  <Frame Label> type red. See the picture below.



   

Step 10

Click on the first frame of layer actions,open the Action Script Panel (F9),and type:

stop ();





Step 11

Then click on the fifth frame of layer action and press again F6 key. After that, open the action script Panel again and type again:

stop ();

Do that also for the tenth frame of layer action.



Step 12

Go back on the main scene (Scene 1). Unlock the hotspot layer and draw circle like it is shown on the picture below.



Step 13

While the circle is still selcted, press F8 key (Convert to Symbol) to convert this circle into a Movie Clip Symbol.

Step 14

While the new made Movie Clip (cursor) is still selected, go to the Properties Panel (Ctrl+F3) below the stage. On the left side, You will find the Instance name input field there. Call this Movie Clip hotspot.



Step 15

Unlock layer action ,click on the first frame and enter the following action script code inside the actions panel:
_root.cursor.swapDepths(1000);
_root.onEnterFrame = function() {
Mouse.hide();
cursor._x = _root._xmouse;
cursor._y = _root._ymouse;
}
_root.hotspot.onRollOver = function() {
_root.cursor.gotoAndStop("red");
}
_root.hotspot.onPress = function() {
_root.cursor.gotoAndStop("green");
}
_root.hotspot.onRelease = function() {
_root.cursor.gotoAndStop("red");
}
_root.hotspot.onRollOut = _root.hotspot.onReleaseOutside = function() {
_root.cursor.gotoAndStop("blue");
}

Download example (46 KB)

Are you a website owner?
Click here to register and submit your tutorials!

Browse by category


Most popular tutorials


Resources Worth visiting


Friends