探析Flash时钟的设计过程

Flash 是由 Adobe 公司推出的交互式矢量图和 Web 动画的标准， 以其优秀的动态性和矢量性而深受全世界闪客的喜爱[1]。

在此之前， 网页是基于 Web1.0 开发， 页面为静态而且枯燥乏味。 为了增加网站的多媒体表现形式以吸引用户， 开发者可谓绞尽脑汁。 比如 Flash ActionScript 超级强大功能[2]， 可 以制作一款效果逼真的 Flash 时钟用于模拟显示时间并具有整点报时功能， 还可以定时提醒， 以免长时间使用电脑和网络对身体造成伤害。 下面就 Flash 时钟的设计过程进行阐述， 以期能够起到抛砖引玉的作用。

1、功能描述

Flash 时钟既可以用数字方式准确地显示当前 的年月日和具体时间， 也可以用指针动态地指示时间， 而且整点会自动报时。 此外， 还可以根据用户的需要进行定时设置， 时间一到， Flash 时钟立刻会发出提醒。

2、Flash 时钟的设计和制作

设计环境为 Flash CS6， 主要是设计时钟的样式， 制作时钟的表盘、 指针和文本框。 利用 ActionScript 来调用系统时间并以数字方式显示于动态文本框中， 最后可以通过输入文本框来进行定时。

2.1、制作 Flash 时钟

（1） 打开 Flash CS6， 新建一个 fla 文档 （ActionScript2.0），设置画面大小为 300*350， 背景颜色为默认。

（2） 打 开库面板 ， 新建一个名为 “ 时钟 ” 的影片剪辑 。选中图层 1， 在舞台上画一个圆形表盘， 再画上时钟的刻度（详细过程略 ）。 在表盘中心正中心添加两个动态文本框 ， 在属性面板中分别设置其变量名为 “timebox” 和” datebox”。 同样， 在表盘正下方写上文字 “定时设置”、 “时” 和 “分”，在紧随 “时” 和 “分” 后分别添加两个输入文本框， 其变量名分别为 “sethour” 和 “setminute”。

（3） 回到场景设计窗口 ， 修改当前时间上的图 层名为“时钟”， 将库中的 “时钟” 影片剪辑拖入舞台创建一个实例 ，设置其状态为水平和垂直居中对齐， 并在 “属性” 面板中为其取实例名 “clock”。

（4） 回 到库面板 ， 分别新建 3 个 “ 时 针 ” 、 “ 分针 ” 和“秒针” 的影片剪辑 （详细过程略 ， 注意旋转中心必须在 3 颗指针的末端）。 在场景窗口同样新建 3 个对应的层并将它们拖入创建实例， 将 3 者的旋转中心对齐时钟的'中央。 在属性面板中分别为 3 颗指针取实例名为 “hourpoint”、 “minutepoint”和 “secondpoint”。

2.2、导入声音素材

导入两个声音文件 3 和 3 到库中。 特别注意， 只有比特率小于 128KB/s 的 MP3 文件才能导入。 分别右键单击两个声音文件， 打开其属性， 把 “ActionScript 链接” 选项下的标识符分别取名为 “baoshi” 和 “dingshi” ,并且勾选 “为 ActionScript 导出” 和 “在第一帧中导出”， 以便后续程序调用。

2.3、ActionScript 设置

选中场景中的实例 “秒针”， 调出动作面板， 在写入下面的 代 码 ： onClipEvent (enterFrame) {secondangle = _nd * 6;setProperty ( " _ndpoint" , _rotation, secon-dangle) ;}。 说 明 ， 秒针转动一圈跳动 60 次 ， 因此每跳动一下转过的角度为 6。 设当前秒数为 second， 则角度 （Angle） 与second 的 关系为 ： secondangle =second*6。 “_root” 表 示主场景， 所有代码均为半角下的英文 （下同）。

选中场景中的实例 “分针”， 调出动作面板， 写入下面的程 序 ： onClipEvent ( enterFrame) {minuteangle = _te*6;setProperty (" _tepoint" , _rotation, minutean-gle) ;}。 说 明 ， 分针转动一圈也是跳动 60 次 ， 因 此每跳动一下转过的角度为 6。 设当前分钟数为 minute， 则角度 （Angle）与 minute 的关系为： minuteAngle=minute*6。

选中场景中的实例 “时针”， 调出动作面板， 编写程序如下： onClipEvent (enterFrame) {hourangle = _ *30 + _te * 0.5;setProperty ( " _point" ,_rotation, hourangle) ;}。 说明， 时针转动一圈有 12 大格， 因此整点位置的角度间隔为 30， 则角度 （Angle） 与 hour 的关系为： hourAngle=houre*30。 实际上， 时钟的时针不仅是在整点时才会跳动， 而是随着分针的变化也在慢慢走动， 因此， 还应将当前分钟数对时针角度的影响加以考虑。 分析得知， 时针 角 度 与 当 前 时 间 的 函 数 关 系 为 ： hourAngle =hour*30 +minute*0.5。

选中场景中的实例 “clock”， 调出动作面板， 编写程序如下： onClipEvent (load) {weekArray = new Array (' 周日 ', '周一 ', ' 周二 ', ' 周三 ', ' 周 ', ' 周五 ', ' 周六 ') ;monthArray =new Array ('1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12') ;timedate = new Date() ;}。 说 明 ， 定义了两个数组型变量 ，即 weekArray = new Array() 表示星期变量， monthArray= newArray() 表示月份变量 ， 设定了两个数组元素的初始值 。 time-date = new Date() 表示定义了一个日期型变量 ， 它 是一个结构型变量， 其中包含有系统当前的日期和时间等信息， 通过对它的读取， 可以获得相应内容。 继续添加以下代码：

onClipEvent (enterFrame) {weekday = ay ();week = weekArray [week]; year = ullYear ();monthnum = onth ();month = monthArray[monthnum];day = ate();hour = -ours(); minute = inutes();second = econds(); timebox = hour + ":" + minute + ":" + second;datebox = year + " 年" + month + " 月" + day + " 日" + " " +weekday;}。

测试动画效果的时候， 发现可以显示时间和日期， 但瑕疵在于无法动态和实时地显示系统当前时间， 还有就是时分秒小于 10 的时候仅显示一位数字， 不符合平时的显示习惯。

需要对进行优化处理。 因此， 在程序的最后添加两条代码 timedate 和 timedate = new Date() 即可。 前者用于删除日期型变量 timedate， 后者用来重新定义日期型变量 timedate,这样可以让变量 timedate 自动更新， 实现了同步和动态地显示系统当前日期和时间。 另外， 在 timebox = hour + " :" + minute+ " :" + second 后添加代码实现时分秒的两位数显示：

f (hour < 10){hour = "0" + hour;}，if (minute < 10){minute = "0" + minute;}，

if (second < 10){second= "0" + second;}

2.4、设置整点报时和定时闹钟

在 “onClipEvent (load) { }” 事件中添加 3 条赋值语句mysound = new Sound() ;baoshi = 0;dingshi = 0; 其 中 mysound =new Sound() 表示定义了一个声音型变量， 借助此变量可以实现对声音文件的调用和播放， baoshi 和 dingshi 是两个 ActionScript调用的标志变量。 在 “onClipEvent (enterFrame) { }” 事件中添加以下代码： if (minute == 0 && baoshi ==) {ch-Sound (" baoshi") ;t() ;baoshi = 1;}， else if (minute<> 0) {baoshi = 0;} 。 说明 ， chSound (" baoshi")表示在声音对象上绑定了一个标识名为 “baoshi” 的声音， 即3 文 件 。 t () 表示播放声音对 象上绑定的声音文件。 上述程序实现了分针指向 12 点开始整点报时(下 同)。 继续在上述代码后面添加程序 ： if (Number (hour) ==_our&&Number ( minute) == inute&& dingshi== 0) {chSound (" dingshi") ; t () ;dingshi= 1;} ， else if (Number (minute) <> _inute) {dingshi= 0;}。 说 明 ， 这段程序的意思是 ， 当主场景中的设置时间变量 sethour 与调用系统时间变量 hour 相等，且主场景中的设置时间变量 setminute 与调用系统时间变量minute 相 等 ， 且从未设置过定时 ， 则调用标识符为 “dingshi”的声音文件并且开始播放。

3、结语

与简单的 Flash 动画模拟， 这样设计和制作的 Flash 时钟不仅具有实时和同步效果， 而且最重要的是基于 ActionScript的 Flash 时钟还具有良好的人机交互性， 即可以动态显示系统时间和整点报时， 而且用户可以按需设置闹钟。

参考文献

[1] 蔡 丽娟 ， 曲国先 . 关 于 Flash 动画中交互性设计的 研究[J] . 艺术与设计 (理论)， 2007.

[2] 胡奇光 ， 吴蓉晖. 基于 Flash ActionScript 3.0 的动画设计的研究 [J] . 计算机与数字工程， 2010.

[3] 王 珍珍 ， 杨雪 ， 傅健. 基 于 Flash Lite 的移动学习资源开发研究 [J] . 现代教育技术， 2009.