Create a Custom Animated Cursor for your Flex app
In this Flex tutorial, let’s see how to replace the default arrow cursor with an animated cursor created in Flash using the CursorManager class.
1. Create a new flex project named AnimatedCursor, set the name of the main MXML application file to Main.mxml.
2. Our custom cursor is a swf file, so open Flash and create your own custom cursor. Set the framerate to 24 to match with the Flex framerate. Here we simply draw an arrow by hand and create a tween to change its color which is quite boring but we leave it to you to make a more creative one.
Publish your swf file.
3. Back into Flex, add a Checkbox component that for its change event call the toggleCursor function that we’are going to create.
1.<mx:CheckBox label="Custom Cursor" change="toggleCursor(event)"/>4. Add a Script section. First, embed your swf file that will be used as the custom cursor.
1.[Embed(source="cursor.swf")] 2.private var AnimatedCursor:Class;5. In the toggleCursor() function, we check whether the checkbox is selected.
If true, call the setCursor() method of the CursorManager class and pass it a reference to the class of your embedded swf cursor.
The setCursor() method returns an ID for the cursor being set that you need to store as we’ll need to pass the ID to the removeCursor() method.
1.import mx.managers.CursorManager; 2.private var cursorID:int; 3.private function toggleCursor(e:Event):void{ 4. if (e.currentTarget.selected) 5. cursorID = CursorManager.setCursor(AnimatedCursor); 6. else CursorManager.removeCursor(cursorID); 7.}6. Here’s the final code, run the application to test it.
01.<?xml version="1.0" encoding="utf-8"?> 02.<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"03. verticalAlign="middle" backgroundColor="#FFFFFF"> 04. 05. <mx:Script> 06. <![CDATA[ 07. import mx.managers.CursorManager; 08. 09. [Embed(source="cursor.swf")] 10. private var AnimatedCursor:Class; 11. 12. private var cursorID:int; 13. 14. private function toggleCursor(e:Event):void{ 15. if (e.currentTarget.selected) 16. cursorID = CursorManager.setCursor(AnimatedCursor); 17. else CursorManager.removeCursor(cursorID); 18. } 19. ]]>20. </mx:Script> 21. 22. <mx:CheckBox id="checkBox" label="Custom Cursor" change="toggleCursor(event)"/> 23. 24.</mx:Application>
from 
