为你的Flex应用程序创建一个自定义动画光标

来源:互联网 发布:中兴软件南昌公司如何 编辑:程序博客网 时间:2024/04/26 06:28

在本次Flex指南中,让我们看看如何在Flash中使用CursorManager类创建一个动画光标来替换默认的箭头光标。

 

View DemoDownload Source

1. 创建一个新的Flex项目名为AnimatedCursor,设置主MXML应用程序名为Main.mxml。

2.我们的自定义光标是一个swf文件,因此请打开Flash来创建自己的自定义光标。帧率设置为适应Flex帧率的24在这里,我们只是简单手工绘制一个箭头并创建一个补间动画来改变它的颜色,你也可以自己开动脑筋,来创建一个更有创意的动画,然后发布您的swf文件。 


3. 返回到Flex,添加一个CheckBox组件,当其发生变化时调用我们即将创建的toggleCursor方法。

1.<mx:CheckBox label="Custom Cursor" change="toggleCursor(event)"/>

4. 添加一个脚本。首先,嵌入您的SWF文件,将其作为自定义光标使用。

1.[Embed(source="cursor.swf")]
2.private var AnimatedCursor:Class;

5. 在toggleCursor方法中,检查复选框是否被选中。
如果为true,调用CursorManager类的setCursor方法并把它的引用传递给你嵌入的swf光标。
setCursor方法返回一个ID用于光标的设置,你需要存储这个ID,以便我们以后用在removeCursor()方法里。
01.import mx.managers.CursorManager;
02. 
03.private var cursorID:int;
04. 
05.private function toggleCursor(e:Event):void{
06.         if (e.currentTarget.selected)
07.              cursorID = CursorManager.setCursor(AnimatedCursor);
08.         else CursorManager.removeCursor(cursorID);
09.}

6. 下面是最后的代码,运行该程序进行测试吧。


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>

网上兼职赚钱 欢迎加入Taskcity佣兵计划
原创粉丝点击