Problem You want to create a cursor that can change state depending on what the user is doing. Solution Create a cursor movie clip symbol with three keyframes labeled up, over, and press. Then, create ActionScript code for the cursor instance such as described in the discussion. Discussion After you have created a basic custom cursor, you may discover that you want the cursor to respond to various events by changing state. When you use the default cursor, for example, it changes from an arrow to a hand icon when the user moves the mouse over an object with button event handlers. When you use a custom cursor, you do not get this behavior inherently. You can, however, create a cursor that responds in the same way. And, in addition, if you want, you can create a special press state for the cursor as wella state that is activated whenever the user clicks the mouse button. The first step in creating an interactive custom cursor is to create the three states within the movie clip symbol. You can do this by doing the following: Rename the default layer in the symbol's timeline to Labels. Define three keyframes on the Labels layer. Label these keyframes (in this order) up, over, and press. Create a new layer named Artwork. On the Artwork layer define three keyframes that match up with the keyframes in the Labels layer. On each of the keyframes of the Artwork layer, place the artwork that corresponds to the state for that label. For example, on the frame that matches up with the up label, place the artwork for the cursor's default up state. If any of the states are animated, then the animation should be contained within another movie clip symbol, and you should place an instance of that symbol at the appropriate keyframe in the cursor symbol. Follow steps 2 and 3 from Recipe 9.11 for creating the custom cursor. Add the following additional code to the keyframe on the main timeline: // Populate the aOverItems array with references to all the objects to which you want the // mCustomMouseCursor to respond with an over state. In this example, the array is populated with // mItem1 and mItem2. You should change those values to suit your own movie. The rest of the code // does not need to change. var aOverItems = new Array(mItem1, mItem2); // Declare a variable to keep track of the current cursor state. var sMouseState:String = "up"; // Stop the playback of the mCustomMouseCursor instance's timeline. mCustomMouseCursor.stop(); // Set an interval at which the checkState( ) function is called. setInterval(checkState, 50); function checkState():Void { // Loop through all the aIverItems references and perform hit tests. If the mCustomMouseCursor // overlaps any of those items, then change the mCustomMouseCursor state to the over state. Or, // if the mouse state is press, go to the press state. for(var i = 0; i < aOverItems.length; i++) { if(mCustomMouseCursor.hitTest(aOverItems[i])) { if(sMouseState == "press") { mCustomMouseCursor.gotoAndStop("press"); } else { mCustomMouseCursor.gotoAndStop("over"); sMouseState = "over"; } return; } } // Otherwise, if nothing else, change the state to the up state. mCustomMouseCursor.gotoAndStop("up"); sMouseState = "up"; } // Add onMouseDown( ) and onMouseUp( ) event handler methods to assign the state based on whether // the user has clicked the mouse. Note that you shouldn't use onPress( ) and onRelease( ) because // that would interfere with other buttons and movie clips in your application. mCustomMouseCursor.onMouseDown = function():Void { sMouseState = "press"; }; mCustomMouseCursor.onMouseUp = function():Void { sMouseState = "up"; };
The only part of the preceding code that you need to adapt for your specific project is the first line of code in which the aOverItems array is defined. The aOverItems array contains references to the objects in the movie to which you want the cursor to respond. In the example, the cursor is told to respond to objects (movie clips, buttons, or text fields) named mItem1 and mItem2. |
