要想制作双历指针式钟表,就要先制作电子表,利用系统函数获得当前的时间和日期,利用动态文本框显示变量值。然后分析秒针、分针、和时针的旋转角度与时间的关系,通过这个数学模型,我们就能做出双历指针式钟表。
发上来之前我又加了个声音,请参考源码,下面的讲解没说加声音的方法,先看看效果:
[全屏欣赏]第一步:我们来制作一个钟表动画剪辑符号,实例名为:“clock”;在此符号的编辑环境中,分五层,主要就是钟表的模样,这里不做具体讲解,自行参考源码。给出文本框的变量:表盘下方的显示时间框的变量为“timebox”,表盘上的左边的变量为“weeks”,右边的变量为“days”。刻度的制作需要一定的技巧:先过圆心画一条垂直直线,在Transform面板中的旋转项中填入6,按复制按钮复制29次,利用表盘(不同色的圆)来切割刚才的直线组,将圆外的线头删掉,将圆缩小95%,把圆内的线段删掉,得到了秒针的刻度。别的刻度的制作方法类同。
第二步:在钟表实例上捆绑如下代码:(后面有逐行的解释)
onClipEvent (load) {
weekArray = new Array(''星期日'', ''星期一'', ''星期二'', ''星期三'', ''星期四'', ''星期五'', ''星期六'');
timedate = new Date();
}
onClipEvent (enterFrame) {
week = timedate.getDay();
weekday = weekArray[week];
day = timedate.getDate();
hour = timedate.getHours();
minute = timedate.getMinutes();
second = timedate.getSeconds();
if (hour<10) {
hour = "0" + hour;
}
if (minute<10) {
minute = "0" + minute;
}
if (second<10) {
second = "0" + second;
}
timebox = hour+" : "+minute+" : "+second;
weeks = weekday;
days = day;
delete timedate;
timedate = new Date();
}
//————————
下面是逐行的解释:
onClipEvent (load) {
weekArray = new Array(''星期日'', ''星期一'', ''星期二'', ''星期三'', ''星期四'', ''星期五'', ''星期六'');//建立一个数组,共七个元素
timedate = new Date();//建立一个新的时间对象
}
onClipEvent (enterFrame) {
week = timedate.getDay();//返加0~6,0时取“星期日”;1时取“星期一”…….
weekday = weekArray[week];//从数组中读取中文显示,参看上一句的解释
day = timedate.getDate();//当前的日期,返回值为1~31
hour = timedate.getHours();//当前的时,返回0~23
minute = timedate.getMinutes();当前的分,返回0~59
second = timedate.getSeconds();当前的秒,返回0~59
if (hour<10) {
hour = "0" + hour;//假如时小于10,前面显示加“0”
}
if (minute<10) {
minute = "0" + minute;//同上
}
if (second<10) {
second = "0" + second;//同上
}
timebox = hour+" : "+minute+" : "+second;//显示在动态文本框中
weeks = weekday;//同上一句
days = day;//同上一句
delete timedate;//删除时间对象,目的是实时显示时间
timedate = new Date();//新建时间对象
}
第三步:制作时针、分针和秒针,转换为动画剪辑符号,分别起实例名:“hourpoints”;
“minutepoints”;“secondpoints”。放在三个新层中,再新建一层,在表盘中心画一个红心,使表针绕着红心转。
在加代码之前,我们先来分析一下表针和时间的关系:秒针转一圈共走60次,因此每走一次转过的角度为6;设当前的秒数为sencond,则角度Angle与sencond的关系为:
Angle=sencond*6
分针与此类似:Angle= minute *6
时针转动一圈共有12格,因此整点的角度间隔为30度,可得出:Angle=hour*30;但是时针并不是仅在整点才走,而是随着分针的变化在缓缓前进,所以要将当前分钟数对时针的影响考虑进来:用白话来说,假如分钟为60,则时针肯定是转过1*30=30度;假如分钟为30,则时针应该转过30/2得到15度;假如分钟为120,则时针肯定是转过2*30=60度;假如分钟为150,则时针应该转过2*30+30/2=75度。所以得出结论:Angle=hour*30+ minute/2。
第四步:首先给秒针实例加如下代码:
onClipEvent (enterFrame) {
secondsangle = _root.clock.second*6;
//把钟表符号中的秒针对应的角度值赋值给变量“secondsangle”
setProperty ("_root.secondpoints", _rotation, secondsangle);
}//设置秒针的旋转角度
//————————
而后给分针实例加如下代码:
onClipEvent (enterFrame) {
minuteangle = _root.clock.minute*6;
//把钟表符号中的分针对应的角度值赋值给变量“minuteangle”
setProperty ("_root.minutepoints", _rotation, minuteangle);
}//设置分针的旋转角度
//————————
最后给时针实例加如下代码:
onClipEvent (enterFrame) {
hourangle = _root.clock.hour*30+_root.clock.minute/2;
//把钟表符号中的时针对应的角度值赋值给变量“hourangle”
setProperty ("_root.hourpoints", _rotation, hourangle);
}//设置分针的旋转角度
第五步:总结:要实现指针式双历钟表,要把握的知识包括:FLASH的日期型函数和变量的使用,文本框的设置,时间显示的调整,数组的简单应用,以及如何实时的、动态的显示时间;最主要的是利用指针的角度与当前时间的函数关系,才能使时钟准确的指示时间。从中可以看出,假如推理不出这个函数关系,就做不成。所以我们应该多学习一下,多练练自己的逻辑思维能力。
想要源码在这:
点击浏览该文件