flash代码实例 《模拟时钟》

第28课时

代码实例《模拟时钟》

案例说明：

曾经在网页上看到过很多漂亮的时钟，本课将制作一个动画实例“模拟时钟”，动画播放后它会调用计算机的当前时间，并在此基础上继续计时。画面如图1、图2所示：

图1动画播放画面1 图2动画播放画面2

授课教师：文韬

教学目的：通过本案例的学习，让学生能够掌握提取系统时间的函数和设置影片剪辑的属性；

教学重点：设置影片剪辑的属性、提取系统时间的函数；

教学难点：提取系统时间的函数；

教学过程：

一、案例分析

我们要制作的是典型的象闹钟一样的时钟：圆圆的“身体”，长短粗细各不一样的的秒针、分针和时针。那么，首先要做的就是先将这些元件制作出来。

二、制作时钟元件

1．新建一个FLASH文档，设置舞台尺寸为270*320，背景为白色。如图3所示：2．新建一个名为“钟面”的图形元件。如图4所示：

图4 新建“钟面”元件

图3 设置文档属性

3．打开视图菜单下的网格。这样做的原因是为了在后面的制作过程中对位置的感觉更

好一些。如图5所示：

4．选择椭圆工具，按住Shift

键画一个线条颜色为黑色、粗细为

10、无填充颜色的正圆，大小为：

240*240，居中对齐。如图6所示：

5．新建一个名为“时针”的影

片剪辑元件。如图7所示：

6．选择矩形工具，在“时针”

元件编辑窗口画一个大小为8*80、

无边框颜色的黑色矩形长条。将矩形

下方尾部放置在编辑窗口的中心点。

如图8所示：图5 打开网格视图

图6 绘制钟面图7 创建“时针”元件

7．用以上相同的方

法制作“分针”元件和

“秒针”元件，注意它们

依次变长变细，指针底部

与中心点对齐。“分针”

大小为：6*100；“秒

针”大小为3*110 如图

9、图10所示：

图8 绘制时针

图9 绘制分针图10 绘制秒针

图11 在舞台上摆放各元件图12 设置钟面的数字

8．返回主场景，将当前图层改名为“钟面”。打开库，将“钟面”图形元件放置在舞台上。新建一个图层，命名为“指针”，再将几个做好的指针组件拖出，按照秒针、分针、时针由上到下的顺序依次摆放，并且分别输入实例名称“miao”、“fen”、“shi”。如图11所示：

9．新建一个图层，命名为“钟面数字”，将该图层拖到最底层。使用文本工具在相应的位置写上1——12的数字。至此，整个时钟的画面就完成了。如图12所示：

三、添加代码

新建一个图层，命名为“AS”，在第1帧输入以下代码。如图13所示：

_root.onEnterFrame = function() {

var mydate = new Date();

setProperty("shi", _rotation, mydate.getHours()*30+mydate.getMinutes()*0.5);

setProperty("fen", _rotation, mydate.getMinutes()*6);

setProperty("miao", _rotation, mydate.getSeconds()*6);

};

图13 输入代码

四、测试影片

到这里，就完成了“模拟时钟”的动画案例制作，按CTRL+ENTER键进行测试。如果没有问题，则保存文档。

五、课后小结

本节课主要学习了如何设置影片剪辑的属性、如何使用函数来提取系统当前的时间，以及案例的制作。

六、上机作业

完成“模拟时钟”案例的制作。