Adobe Flash Player10.2的发布推出了一个新的强大特性,叫做原生光标。 你现在可以使用基于bitmap的光标,而且是运行在操作系统层面,而不是flash中的显示列表。在这片文章中,你将学会以最少的代码用上这个新特性。
理解原生位图光标
自从Flash Player 5,开发人员可以使用像 InteractiveObject.startDrag 和 Mouse.hide 来定制光标的外形。但是,原来的方式有下面的一些限制:
- 一、使用显示对象的方式,光标会被限制在舞台范围内。当光标移动到舞台边缘的时候,光标并不是完全可见的。
- 二、显示对象光标在flashplayer中渲染是非常耗资源的,因为整个舞台都必须非常频繁的重新渲染。使用updateAfterEvent 方法会导致高CPU使用。
- 三、如果SWF因为一些原因停止一些微秒,鼠标也会被阻碍,导致用户以为是程序没响应。
- 四、总的来说,显示对象方式的光标响应是迟缓的(sluggish)。相对来说,原生光标在用户交互方面会表现更好,看起来更好。
很幸运,使用新的原生光标特性,并不需要写很多代码。你需要稍微多写些AS代码来实现简单的Mouse.hide 和 startDrag 功能.代码非常简洁,而且视觉效果会让你觉得去定制光标的外形和动画的努力是值得的。
实现原生光标
实现原生光标时,只要使用到几个非常简洁和高效的属性。When implementingnative mouse cursors, you'll use several properties that are very concise andefficient. 初步功能用的是flash.ui 包中的MouseCursorData。
下面三个属性用来控制MouseCursorData对象:
- MouseCursorData.data: 一个BitmapData的vector ,用来显示光标
- MouseCursorData.hotSpot: 表示注册点的值,是个Point对象
- MouseCursorData.frameRate: The显示动画序列的帧速这个属性让你可以创建动画光标
创建MouseCursorData 对象后,用Mouse.registerCursor方法赋给 Mouse 对象. 一旦Mouse 对象注册之后,你就可以把引用赋给 Mouse.cursor 属性.
说明: 通过传递一个BitmapData 对象的vector, 你就可以指定一系列位图来创建原生动画光标。
看看下面的代码:
- // 创建 MouseCursorData对象
- var cursorData:MouseCursorData = new
- MouseCursorData();
- // 指定热点(hotspot)
- cursorData.hotSpot = new Point(15,15);
- // 把位图放到 BitmapData Vector
- var bitmapDatas:Vector.<BitmapData> = new
- Vector.<BitmapData>(1, true);
- // 创建位图光标
- // 操作系统限制在32*32之内
- var bitmap:Bitmap = new zoomCursor();
- // 传值给 bitmapDatas vector
- bitmapDatas[0] = bitmap.bitmapData;
- //把位图赋值给MouseCursor 对象
- cursorData.data = bitmapDatas;
- // 用个名称把MouseCursorData注册到Mouse 对象
- Mouse.registerCursor("myCursor",
- cursorData);
- //显示的时候要把名称传给鼠标属性
- Mouse.cursor = "myCursor";
因为操作系统的限制,位图文件不能大于32 × 32 像素。使用更大的图片会失败,而且没有提示。
任何时候都可以停止使用位图而改回系统光标。使用MouseCursor 中的常量,代码如下:
Mouse.cursor= MouseCursor.AUTO;
前面的例子创建了一个静态位图光标,下面创建一个动画光标。流程很简单,提供多个图片,然后指定动画帧速,代码如下:
- // 创建MouseCursorData 对象
- var cursorData:MouseCursorData = new
- MouseCursorData();
- // 指定热点( hotspot)
- cursorData.hotSpot = new Point(15,15);
- // 把光标位图放到 BitmapData Vector
- var bitmapDatas:Vector.<BitmapData> = new
- Vector.<BitmapData>(3, true);
- // 创建位图序列
- // 由于操作系统限制,位图必须在32*32之内
- var frame1Bitmap:Bitmap = new frame1();
- var frame2Bitmap:Bitmap = new frame2();
- var frame3Bitmap:Bitmap = new frame3();
- // 把位图数据放到 bitmapDatas vector
- bitmapDatas[0] = frame1Bitmap.bitmapData;
- bitmapDatas[1] = frame2Bitmap.bitmapData;
- bitmapDatas[2] = frame3Bitmap.bitmapData;
- // 把位图数据赋值给MouseCursor 对象
- cursorData.data = bitmapDatas;
- // 光标动画帧速 (1fps)
- cursorData.frameRate = 1;
- // 注册光标数据到 Mouse 对象
- Mouse.registerCursor("myAnimatedCursor",
- cursorData);
- // 显示的时候要把名称传给鼠标属性
- Mouse.cursor = "myAnimatedCursor";
通过设置MouseCursorData.frameRate 属性,传递一系列BitmapData 对象,Flash Player 自动创建一个指定帧速的动画光标。这是自动完成的,你不需要增加另外的代码。
原生光标demo
下面的demo是一个静态原生光标和动画原生光标。底部的按钮还原为系统光标。
说明: 你需要安装Flash Player 10.2才能看到效果
可以用来做什么
不管是开发游戏还是RIAs,原生光标让你比以前更容易定制光标外形。另外,新的实现增强了应用程序的显示外观和响应,同时减少了在舞台上移动和重绘光标带来的CPU负载。