flash CS 3 简单的模拟时钟
专注java已6年,欢迎加入java核心技术QQ群:135138817,每周五晚有群主进行技术讲座。
简单的模拟时钟示例说明了在本章中讨论的以下两个日期和时间概念:
■ 获取当前日期和时间并提取小时、分钟和秒的值
■ 使用 Timer 设置应用程序的运行速度
要获取该范例的应用程序文件,请访问
www.adobe.com/go/learn_programmingAS3samples_flash_cn。
可以在 Samples/SimpleClock 文件夹中找到 SimpleClock 应用程序文件。该应用程序包
含以下文件:
函数说明
clearInterval(id:uint):void 取消指定的 setInterval() 调用。
clearTimeout(id:uint):void 取消指定的 setTimeout() 调用。
getTimer():int 返回自 Adobe Flash Player 被初始化以来经过的毫
秒数。
setInterval(closure:Function,
delay:Number, ... arguments):uint
以指定的间隔(以毫秒为单位)运行函数。
setTimeout(closure:Function,
delay:Number, ... arguments):uint
在指定的延迟(以毫秒为单位)后运行指定的函数。
文件描述
SimpleClockApp.mxml
或
SimpleClockApp.fla
Flash 或 Flex 中的主应用程序文件(分别为 FLA
和 MXML)。
com/example/programmingas3/
simpleclock/SimpleClock.as
主应用程序文件。
com/example/programmingas3/
simpleclock/AnalogClockFace.as
根据时间绘制一个圆形的钟面以及时针、分针和
秒针。
定义 SimpleClock 类
此时钟示例很简单,但是将即使很简单的应用程序也组织得十分有条理是一种很好的做法,以
便您将来能够很轻松地扩展这些应用程序。为此, SimpleClock 应用程序使用 SimpleClock
类处理启动和时间保持任务,然后使用另一个名称为 AnalogClockFace 的类来实际显示该
时间。
以下代码用于定义和初始化 SimpleClock 类(请注意,在 Flash 版本中,SimpleClock 扩
展了 Sprite 类):
public class SimpleClock extends UIComponent
{
/**
* 时间显示组件。
*/
private var face:AnalogClockFace;
/**
* Timer 的作用就像是应用程序的心跳。
*/
private var ticker:Timer;
该类具有两个重要的属性:
■ face 属性,它是 AnalogClockFace 类的实例
■ ticker 属性,它是 Timer 类的实例
SimpleClock 类使用默认构造函数。initClock() 方法处理实际的设置工作,它创建钟面并
启动 Timer 实例的计时。
创建钟面
SimpleClock 代码中后面的几行代码创建用于显示时间的钟面:
/**
* 设置 SimpleClock 实例。
*/
public function initClock(faceSize:Number = 200)
{
// 创建钟面并将其添加到显示列表中
face = new AnalogClockFace(Math.max(20, faceSize));
face.init();
addChild(face);
// 绘制初始时钟显示
face.draw();
可以将钟面的大小传递给 initClock() 方法。如果未传递 faceSize 值,则使用 200 个像
素的默认大小。
接着,应用程序将钟面初始化,然后使用从 DisplayObject 类继承的 addChild() 方法将该
钟面添加到显示列表。然后,它调用 AnalogClockFace.draw() 方法显示一次钟面,同时显
示当前时间。
启动计时器
创建钟面后, initClock() 方法会设置一个计时器:
// 创建用来每秒触发一次事件的 Timer
ticker = new Timer(1000);
// 指定 onTick() 方法来处理 Timer 事件
ticker.addEventListener(TimerEvent.TIMER, onTick);
// 启动时钟计时
ticker.start();
首先,该方法初始化一个每秒(每隔 1000 毫秒)调度一次事件的 Timer 实例。由于没有
向 Timer() 构造函数传递第二个 repeatCount 参数,因此 Timer 将无限期地重复计时。
SimpleClock.onTick() 方法将在每秒收到 timer 事件时执行一次。
public function onTick(event:TimerEvent):void
{
// 更新时钟显示
face.draw();
}
AnalogClockFace.draw() 方法仅绘制钟面和指针。
显示当前时间
AnalogClockFace 类中大多数代码都与设置钟面的显示元素有关。在对 AnalogClockFace
进行初始化时,它会绘制一个圆形轮廓,将数字文本标签放在每个小时刻度处,然后创建三
个 Shape 对象,分别表示时钟的时针、分针和秒针。
在 SimpleClock 应用程序运行后,它会每秒调用一次 AnalogClockFace.draw() 方法,如
下所示:
/**
* 在绘制时钟显示时由父容器进行调用。
*/
public override function draw():void
{
// 将当前日期和时间存储在实例变量中
currentTime = new Date();
showTime(currentTime);
}
此方法将当前时间保存在变量中,因此在绘制时钟指针的过程中无法改变时间。然后,调用
showTime() 方法以显示指针,如下所示:
/**
* 以看起来不错的老式模拟时钟样式显示指定的 Date/Time。
*/
public function showTime(time:Date):void
{
// 获取时间值
var seconds:uint = time.getSeconds();
var minutes:uint = time.getMinutes();
var hours:uint = time.getHours();
// 乘以 6 得到度数
this.secondHand.rotation = 180 + (seconds * 6);
this.minuteHand.rotation = 180 + (minutes * 6);
// 乘以 30 得到基本度数,然后
// 最多加上 29.5 度 (59 * 0.5)
// 以计算分钟。
this.hourHand.rotation = 180 + (hours * 30) + (minutes * 0.5);
}
首先,此方法提取当前时间的小时、分钟和秒的值。然后使用这些值来计算每个指针的角度。
由于秒针会在 60 秒内旋转一圈,因此它每秒都会旋转 6 度 (360/60)。分针每分钟都旋转同
样的度数。
时针每分钟都在更新,因此时针能够随着分针的跳动显示出某些时间变化过程。时针每小时
旋转 30 度 (360/12),但也会每分钟旋转半度(30 度除以 60 分钟)。