FLASH制作精美的闹钟(2)

　　

　　图08

　　

　　二、设计旋转指针

　　1．设计指针

　　按快捷键Ctrl F8打开“新建元件”面板，分别创建名为“时针”、“分针”、“秒针”的影片剪辑元件。指针的形状大家随便设计，美观大方即可。但是，有个技术上的问题大家一定要注意：指针在由程式控制转动后，是围绕元件场景中央“?”旋转的。所以设计时，指针的尾部一定要“?”上，如图9所示。

　　

　　图09

　　2．旋转指针

　　下面我们来设计一段控制指针旋转的代码。

　　1). 按快捷键Ctrl E回到“场景1”，新建四个层，分别改名为“钟盘”、“时针”、“分针”、“秒针”。

　　2). 按快捷键Ctrl L打开“库”面板，把库中的“钟盘”、“时针”、“分针”、“秒针”元件拖入相应的层。注意：每个元件的尾部“?”都要附在钟面的盘心上；层的顺序不要颠倒；锁定或隐藏设计好的层，以便设计其他层。如图10所示。

　　

　　图10

　　3). 分别点选“时针”、“分针”、“秒针”三个影片元件，在“属性”面板里分别配置其实例名为“时针”、“分针”、“秒针”。如图11所示。

　　

　　图11

　　4). 新建一个“代码”层，点选该层的第1帧，按快捷键F9弹出“动作”面板，输入如下代码。

　　

function ClockFun() {

　　 // 声明一个名为时间对象

　　 time = new Date();

　　 // 时针每小时旋转30度

　　 hour = time.getHours()*30;

　　 // 分针，秒针每分钟旋转6度

　　 minute = time.getMinutes()*6;

　　 second = time.getSeconds()*6;

　　 // 每过10秒分针度数加1，增加真实性

　　 minute = time.getSeconds()/10;

　　 // 每过2分钟,时针度数加1

　　 hour = time.getMinutes()/2;

　　 // _rotation是影片的角度属性，用来控制影片实例旋转

　　 秒针._rotation = second;

　　 分针._rotation = minute;

　　 时针._rotation = hour;

　　}

　　// 每隔1000毫秒执行一次ClockFun函数

　　setInterval(ClockFun,1000);

　　5). 注意：以下的代码都书写在代码function ClockFun() {……}之间。

　　代码设计好了，快按快捷键Ctrl Enter测试一下吧。怎么样，看到转动的指针是不是很开心，很HA啊，是不是很想接着再往下做啊！那好吧，让我们继续动起来吧。

　　

　　三、设计日期显示

　　1). 锁定其他层。单击“插入图层”图标新建一层，改名为“日期”层。

　　2). 点选“文本工具”，“属性”面板配置见图12所示，“文本填充色”为黑色。

　　3). 按住鼠标左键在钟盘6点的位置正上方拉出一个动态文本框。将该动态文本框命名为“日期”。最终配置如图12所示。

　　

　　图12

　　4). 点选“代码”层的第1帧，打开“动作”面板，再输入如下代码。

　　

// 把系统当前月数值赋给变量months

　　months = time.getMonth();

　　// 假如月数值是个位数，在其前面显示一个零

　　if (length(months) == 1) {

　　 months = "0" months;

　　}

　　// 把系统当前日数值赋给变量dates

　　dates = time.getDate();

　　// 假如日数值是个位数，在其前面显示一个零

　　if (length(dates) == 1) {

　　 dates = "0" dates;

　　}

　　// 在“日期”文本框内显示系统日期

　　日期 = time.getFullYear() "." months "." dates;

　　注意：因为日期对象的月份是从0开始编号的，所以要将其加1才能得到真实的月份值。按快捷键Ctrl Enter测试一下，假如操作正确，应该能够看见日期显示。

　　

　　四、设计星期显示

　　同日期显示的设计方法。新建一个“星期”层。再建一个名为“星期”的动态文本框，字体为宋体，大小为12。将该文本框放在“日期”文本框的下方。点选“代码”层的第1帧，打开“动作”面板后输入如下代码。

　　

// 定义一个数组

　　days = new Array('星期日','星期一','星期二','星期三','星期四','星期五','星期六');

　　// 把系统的星期值赋给变量day（如星期五时，day的值就是5）

　　day = time.getDay();

　　// 在“星期”文本框内显示系统星期

　　星期 = days[day];

　　注意：getDay()方法传回的星期值是从0开始的，为了便于理解，所以对应的元素为星期日。按快捷键Ctrl Enter测试一下。

　　

　　五、设计时间显示

　　同以上步骤，新建一个“时间”层。再建一个名为“时间”的动态文本框。将该文本框放在钟盘的上方。点选“代码”层的第1帧，打开“动作”面板，再输入如下代码。

　　

// 将系统当前小时的值赋给变量hours

　　hours = time.getHours();

　　minutes = time.getMinutes();

　　seconds = time.getSeconds();

　　// 到零点时，显示两个0

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有