Problem
I want to customize the mouse cursor icon inside my flex application.
Solution
This tutorial explain how to customize the mouse cursor using an image, in this example we used a png file. We starts embedding the png images and make them Bindable, so we can easily use them when the desidered Mouse Event occurs.
Detailed explanation
This is the complete Application code:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="500" height="300" viewSourceURL="srcview/index.html">
<mx:Script>
<![CDATA[
import mx.managers.CursorManager;
[Embed(source="assets/cursor1.png")]
[Bindable]
public var Cursor1:Class;
[Embed(source="assets/cursor2.png")]
[Bindable]
public var Cursor2:Class;
[Embed(source="assets/cursor3.png")]
[Bindable]
public var Cursor3:Class;
[Embed(source="assets/cursor4.png")]
[Bindable]
public var Cursor4:Class;
[Embed(source="assets/cursor5.png")]
[Bindable]
public var Cursor5:Class;
private function changeCursor(e:MouseEvent):void{
CursorManager.setCursor(e.currentTarget.source);
}
private function restoreCursor(e:MouseEvent):void{
CursorManager.removeAllCursors();
}
]]>
</mx:Script>
<mx:Image mouseOver="{changeCursor(event)}" mouseOut="{restoreCursor(event)}" x="314" source="{Cursor1}" verticalCenter="5"/>
<mx:Image mouseOver="{changeCursor(event)}" mouseOut="{restoreCursor(event)}" x="274" source="{Cursor2}" verticalCenter="5"/>
<mx:Image mouseOver="{changeCursor(event)}" mouseOut="{restoreCursor(event)}" x="154" source="{Cursor3}" verticalCenter="5"/>
<mx:Image mouseOver="{changeCursor(event)}" mouseOut="{restoreCursor(event)}" x="234" source="{Cursor4}" verticalCenter="5"/>
<mx:Image mouseOver="{changeCursor(event)}" mouseOut="{restoreCursor(event)}" x="194" source="{Cursor5}" verticalCenter="5"/>
</mx:Application>
For an Italian version of this entry please visit flex-developers.org
Report abuse
