Flash5晋级之闹钟制造

网络与通信

陈高林

本文是为已经学了一段时间Flash的朋友们而写的。因为这些朋友大多不满足只会使用Flash工具栏的现状，都迫不及待地想尝尝Flash编程的味道了。现在，我就教大家用Flash 5自带的脚本语言ActionScript制作一个漂亮的多功能闹钟。这个Flash闹钟的功能有：显示时间、日期、星期；整点报时、定时闹铃。你可以把闹钟的时间设置在午夜12点闹铃，到时候它便提醒你应该休息了。
好了，言归正传。下面我们就开始制作这个可爱的小闹钟吧。

一、设计钟盘

1. 设计盘面
①按快捷键“Ctrl+M”，打开Movie Properties设置面板。然后把Background属性里的颜色设成暗红色(#6666CC)，最后在Dimensions属性里，把场景大小的值设置成400px×400px。
双击第一层，把该层的名字“Layer 1”改为“钟盘”。
②选中工具栏中的画圆工具并去掉填充色。然后按着“Shift”键加鼠标左键在场景中拉出一个空心圆来。用选择工具选中这个圆，接着单击工作界面右下角的Info面板图标打开Info面板。在信息面板中把这个圆的大小设成360px×360px，X轴，Y轴的值都设成20px。
③选中画好的那个空心圆，先按快捷键“Ctrl+C”(复制)再按快捷键“Ctrl+V”(粘贴)新增一个空心圆。然后在信息面板中把这个圆的大小设成270px×270px，X轴，Y轴的值都设成65px。这样便可以使两个圆的圆心重合。紧接着选择Stroke面板，把线条的宽度设成3。
④选择Fill面板，在下拉菜单里选中Radial Gradient选项。然后拖动两个小滑块，把它们的位置对调。然后把白色小滑块的颜色换成#880000。接着在两个小滑块之间靠近左边1/3的地方单击一下鼠标左键，这样便会新增一个滑块。接着用鼠标左键按住黑色小滑块，用它拖出颜色填充面板后松开。这样便可以删除这个滑块。最后把两个小滑块都向右移，最终设置如（图1）。

二、旋转指针的设计

1.指针制作
按快捷键“Ctrl+F8”，弹出Symbol Properties设置框。然后分别新建三个名为时针、分针、秒针的Movie Clip实体。其实，指针的形状大家各有所爱。而且设计它们没有什么技巧，讲起来也麻烦。所以这里我就省去指针的制作。不过，有几个技术上的问题请大家一定要注意：指针在加入程序后，是围绕组件场景里的小“+”字旋转的。所以大家在设计的时候一定要把指针的尾部附在小“+”字上。
2.让指针转起来
下面我就给大家编写一段代码，这些代码可以控制指针进行一定的角度旋转。
①在场景里新建三个名为时针、分针、秒针的层，然后把时针、分针、秒针这三个影片组件拖入相应的层。把它们尾部的小“+”字附在钟面的盘心上。
②按快捷键“Ctrl+I”打开面板。分别选中时针、分针、秒针三个影片组件，并在Instance面板里分别把它们命名为hour，minute，second。
③再新建一个层，命名为Actions。然后双击第1帧，在弹出的Frames Actions面板中写出如下的代码：
time = new Date();
hour = (time.getHours()-1)*30;
minute = time.getMinutes()6;
second = time.getSeconds()6;
minute = minute+time.getSeconds()/10;
hour = hour+time.getMinutes()/2;
setProperty ("/second",_rotation, second);
setProperty ("/minute",_rotation, minute);
setProperty ("/hour",_rotation, hour);
它控制电影实体以实体的中心(小“+”字)进行一定角度的旋转
④选中Actions层的第2帧，然后按下快捷键F7新建一个空白关键帧。选中其余各层的第2帧，按快捷键F5插入空白帧。这样做可以形成一个回路，让time里的数据被实时更新，指针角度值也就能不断更新，实现旋转功能。
行了，代码的设计好了，快按快捷键“Ctrl+Enter”试试效果吧。怎么样，转了吧。你是不是很开心？是不是很想再接着往下做啊？Let’s go：

三、设计日期显示

1.单击工作界面右下角Character面板的图标，打开Character面板，并进行设置，字体颜色为黑色。(（图3）)

四、设计星期显示

同第三大步骤的方法。先新建一个“星期”层。再建一个名为weektext的动态文本框，字体大小为13。然后把它放在日期显示框的下面。然后双击该层的第一帧，写出如下的代码：
days = new Array('星期日'，'星期一'，'星期二'，'星期三'，'星期四'，'星期五'，'星期六');
day = time.getDay();
week =days[day];
weektext = (week);
按快捷键“Ctrl+Enter”测试一下，看看日期是不是可以显示了。

五、设计时间显示

同第三大步骤的方法。先新建一个“时间 ”层。再建一个名为timetext的动态文本框，并进行如（图4）的设置。然后把它放在钟面的上方。然后双击该层的第1帧，写出如下的代码：

六、设计整点报时

1.按快捷键“Ctrl+F8”新建一个名为bells的Movie Clip实体。接着双击该影片内的第1帧，写入stop；命令。接着单击“Windows”菜单下“Common Libraries”菜单中的Sounds库命令，打开Flash 5自带的声音库。选中第2帧并按下F7键新建一个空白帧。然后在Sounds库里选中一个声音，按住鼠标左键把它拖入第2帧的场景里。这就是以后整点报时的声音了。当然，你也可以换上一段音乐，不过文件不要太大，机子会吃不消的。
2.在Scene 1里新建一层，命名为“报时”。接着把bell影片拖入到该层中，然后你会看见一个白色小圆圈(选中后变成黑色，测试时不可见)。选中它，并在Instance面板里把它命名为bells。记住，这一步很关键。双击该层的第1帧，加入如下代码：
minutetimes = time.getMinutes();
secondtimes = time.getSeconds();
if (secondtimes ==0&&minutetimes==0)
{
tellTarget ("/bells")
{
gotoAndPlay (2);
}
}

七、设计闹铃

1.首先我们要进行定时时间输入框的设计。在Scene 1里新建一层，命名为“闹铃框”。
2.打开Character面板，并进行如（图5）的设置。选中“闹铃框”层，然后用文本工具在钟面的右边拉出一个文本框。选中这个文本框并打开Text Options面板。在第一个下拉菜单中选择Input Text选项，第二个下拉菜单中选择Single Line选项。在Variable：参数框里把它命名为cinhour。选中Border/Bg复选项，让文本框显示白色的底色。如果你觉得不好看，你可以用Rectargle Tool做个“垫子”。把Max Chars参数框里的参数设为2。这样一个允许单行，输入两个字节的输入文本框就做好了。