Set custom cursor using the CursorManager
Line Break
Author: Roelof (11 Articles) - Author Website
Roelof is a SAP Consultant specialized in Front-End development. In his spare free time he is either developing on the web, playing basketball, watching soccer, travelling or just being lazy. He is also the co-owner of Flex-Blog.com.
After my previous post about setting the busy cursor, I decided to write a next post about custom Cursors. In our example we use an Image as a Cursor source, but you can also use a SWF file.
The CursorManager allows you to use your custom cursors in a very simple way. The most important method is the setCursor() method, which can be used as follows:
1 | CursorManager.setCursor(myCursor); |
View Source is enabled for this example (Right Mouse -> View Source).
Scroll down for the full source code.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | <?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo" width="400" height="160" viewSourceURL="srcview/index.html"> <fx:Script> <![CDATA[ import flash.events.*; import mx.controls.Button; import mx.managers.CursorManager; //If you want you can also insert an SWF file as cursor! [Bindable] Embed("cursors/cursor1.png")] private var myCursor:Class; private var myCursorID:int; private function toggleButtonHandler(event:MouseEvent):void { var toggleButton:Button = event.target as Button; if ( toggleButton.selected ) { myCursorID = CursorManager.setCursor(myCursor); } else { CursorManager.removeCursor( myCursorID ); } } ]]> </fx:Script> <mx:Panel paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10" horizontalAlign="center" verticalAlign="middle" title="Custom Cursor Example" > <mx:Button label="Toggle" toggle="true" click="toggleButtonHandler(event);" /> <mx:Text text="Click the button to display or hide the custom cursor."/> </mx:Panel> </s:Application> |
Related posts:
- Set busy Cursor using the CursorManager
- Looping over an ArrayCollection with Cursor Example
- Flex Custom Event Example
Written by · Filed Under Examples
Was this post useful to you?
(4 votes, average: 1.75 out of 5)
Loading ...Comments
2 Responses to “Set custom cursor using the CursorManager”
Hi Roelof,
Thanx for this article. There 2 issues i find in this.
One is the custom cursor is having some offset in both x and y direction from the actual cursor. Is there a way to correct this offset?
And other thing is, when you take the mouse over a text field(in your case text which is below the button “Click the button to…”) , there are 2 cursors visible , custom as well as a system cursor. Is there any way to hide the system cursor?
Regards,
Sunit.
Hi Sunit,
Issue 1 can be solved using the offset parameters of the method setCursor. Code will look like this:
myCursorID = CursorManager.setCursor(myCursor, 2, -5, -5);
I can see Issue 2 in this example, but can not reproduce this in the new Flash Builder 4. So it might have been a bug.
Regards,
Roelof