| Creating custom cursors (with rollover changes) in flash Download the working .fla file HERE |
|||||||||||
| -create a cursor of your own design, and make it change when the viewer rolls it over a button in your movie. | |||||||||||
|
|
|||||||||||
![]() |
![]() |
||||||||||
| Starting with a new file, Insert-->New Symbol, and create a movie clip titled "cursorup".
This will be your custom cursor, as it appears in its normal state. Center it on the registration point (crosshairs in the window) It can also be a looping sequence. For ease of drawing, you can make it as large as you want and skrink it down later. |
|||||||||||
|
|
|||||||||||
| Return to the main movie window, Insert-->New Symbol again, and create a movie clip titled "cursorover". Center this on the crosshairs as well. This will be the custom cursor that appears when the mouse is rolled over a specific object in your movie. This can also be a looping sequence itself. | ![]() |
||||||||||
|
|
|||||||||||
![]() |
|||||||||||
| Return once again to the main movie window, Insert-->New Symbol, and create a clip titled "cursor." This movie clip will act as "storage" for the two states of your custom cursor just created, allowing you to call up either one when needed.
Give the clip an additional keyframe in frame 2, and double-click a keyframe to bring up the actions palette. Under "basic" actions, insert the "stop" action into each of the two keyframes. |
![]() |
||||||||||
|
|
|||||||||||
| With the two-frame storage movie still open, open the library (apple key-->L). With the first keyframe selected, drag the "cursorup" movie clip onto the stage, lining up the crosshairs. | ![]() |
||||||||||
|
|
|||||||||||
| Place the "cursorover" movie clip into frame two of the storage movie.
At this point you should use onion-skinning to make sure that your up- and over- states are approximately the same size. Select with the pointer, and scale them with the scaling tool as needed. The custom cursor is finished; now you need to write the scripting to put it into use. |
![]() |
||||||||||
|
|
|||||||||||
| Back in the main movie window, double-click the first frame. You need to tell the movie to hide the original, black arrow-cursor as soon as it starts. In the Frame Actions window, from the"Objects" list, go to "Mouse," then "Hide." | ![]() |
||||||||||
|
|
|||||||||||
| Next select Actions-->startDrag from the menus. | ![]() |
||||||||||
| Type in "cursor" as the target, and check the "Lock mouse to center" box.
This tells flash to start dragging the object called "cursor" (the movie clip that stores the up and over states of your custom cursor) by its center point. |
![]() |
||||||||||
|
|
|||||||||||
| Now create the button you want to have change the cursor when it is rolled over. Place it in the first frame of the movie (the keyframe with the script you just made)
I won't go into detail here - you can make any sort of button you want, just so it's an actual button symbol. |
|||||||||||
![]() |
|||||||||||
![]() |
|||||||||||
|
|
|||||||||||
| Now you need to write the script that tells flash what to do when the button is rolled over, i.e. how to change the cursort to the "over" state you made.
Select the button and open the actions panel (window-->actions). From the "actions" sublist, choose "on." change the Event from "Release" to "Roll Over." |
![]() |
||||||||||
|
|
|||||||||||
| Next select "tellTarget" from the Actions menu. Type "cursor" into the target | ![]() |
||||||||||
| Then select "go to" from the Actions menu, and uncheck "Go to and Play" so the added line changes to "gotoAndStop." Type in "2" for Frame.
This makes the movie clip "cursor" change to its 2nd frame - the frame with the over state of your cursor. |
![]() |
||||||||||
| Click on the last bracket - "}" - in the script window, and then select Actions-->on. This time change the Event to "Roll Out." | ![]() |
||||||||||
| Again select "tellTarget" from the Actions menu, using "cursor" for the target. Select "go to" from Actions, uncheck "Go to and Play," and leave Frame at "1." This tells the movie clip "cursor" to return to frame 1, the frame with the original custom cursor. | ![]() |
||||||||||
|
|
|||||||||||
| Now you need to place the "cursor" clip - the one that stores the two states in its two frames - in your movie. Drag it from the library onto the stage. You might want to scale it down at this point - this will scale both "versions" stored in the clip at once.
With the cursor clip still selected, click the "Instance" tab on the palette on the right (or go to menu Window-->Panels-->Instance). Next to "Name" type "cursor." This tells flash that the "cursor" referred to in all the scripting is the custom one you made. |
![]() |
||||||||||
![]() |
|||||||||||
| Test your movie! (flash file below)
If there are problems, check that you have named things correctly, i.e. that "cursor" is spelled the same everywhere, and that all your scripting is correct. |
|||||||||||