您好!欢迎您光临板框日历时钟的制作原理与过程(下)_迎客松B站!

体育

I

交友

I

论坛

I

会员注册

I

本站搜索

I

收藏本站

当前位置:首页 >>>进阶教程>>>板框日历时钟的制作原理与过程(下)
板框日历时钟的制作原理与过程(下)
发表日期:2012-9-17 13:47:00 出处:迎客松 作者:翠柏 发布人:hsb345 已被访问 4376

板框日历时钟的制作原理与过程(下)

   

    教学目的:通过本节教学了解和熟悉fw软件和flash软件的结合使用,以及日历和时钟as语句的调用与有机搭配,进而创作出另类的个性化的时历动画作品来。

  教学对象:本教材是针对有一定动画制作基础和对属性面板及工具箱、动作面板有所了解的朋友们编制的,因此省略了一些步骤,还望谅解。

    教学要点:fw边框、动作面板、as语句。

   

   

    (二)制作日历时钟

    1.启动FLASH8 软件

    2.确立文档属性 设置动画尺寸为400*600,帧频为12,背景颜色黑,其它默认,点击确定,进入场景1。如图1所示:

图1

    3.导入fw板框 在场景1添加八个图层,共九个图层。自下而上分别命名为:表盘、时针、分针、秒针、表扣、as1、文本、as2、边框。

    选择边框图层第1帧,在场景舞台“右键-粘贴”,导入刚刚在fw软件中复制的板框,全居中。上锁。如图2所示:

图2

    4.创建影片剪辑

    (1)选择“插入-新建元件”,建立一个名为时针的影片剪辑,点击确定,进入元件编辑区。用矩形工具在舞台拖一个竖向的,规格为6*84的,无边框矩形,颜色自定。选中该实例“水平居中-底对齐”。如图3所示:

图3

    (2)选择“插入-新建元件”,建立一个名为分针的影片剪辑,点击确定,进入元件编辑区。用矩形工具在舞台拖一个竖向的,规格为6*120的,无边框矩形,颜色同时针。选中该实例“水平居中-底对齐”。如图4所示:

图4

    (3)选择“插入-新建元件”,建立一个名为秒针的影片剪辑,点击确定,进入元件编辑区。用矩形工具在舞台拖一个竖向的,规格为3*165的,无边框矩形,颜色自定。选中该实例“水平居中-Y轴坐标为-140”。如图5所示:

图5

    4.编辑制作场景 返回场景1,共有九个图层。

    (1)选择表盘图层第1帧,在用文本工具在圆的上方键入12,颜色、规格、字体随意。用任意变形工具选中该实例,水平居中,在将其注册点移到舞台的中心点。如图6所示:

图6

选择“窗口-变形”,打开变形面板,设置其参数,如图7所示:

图7

点击下方的“复制并应用变形”图标11下,舞台显示,如图8所示:

图8

然后,用文本工具分别依次选中各个数字,将其改为相应的数字,如图9所示:

图9

选中表盘所有数字,将其转换为图形元件(如果使用滤镜功能则须转换为影片剪辑),全居中。上锁。注:你也可创建元件来制作表盘

    (2)选择时针图层第1帧,从库中拖出时针影片剪辑到舞台,水平居中,下端对齐舞台中心点。选中时针,命名其影片剪辑“实例名称”为:sz 。上锁。

    (3)选择分针图层第1帧,从库中拖出分针影片剪辑到舞台,水平居中,下端对齐舞台中心点。选中分针,命名其影片剪辑“实例名称”为:fz。上锁。

    (4)选择秒针图层第1帧,从库中拖出秒针影片剪辑到舞台,水平居中,注册点对齐舞台中心点。选中秒针,命名其影片剪辑“实例名称”为:mz 。上锁。

    (5)选择表扣图层第1帧,用椭圆形工具拖一个规格为16*16,无边框的正圆形。全居中,上锁。

    (6)选择as1图层第1帧,右键该帧,打开动作面板,在as编辑区输入,如下语句:

_root.onEnterFrame = function() {
myDate = new Date();
sz._rotation = myDate.getHours()*30+(myDate.getMinutes()/2);
fz._rotation = myDate.getMinutes()*6+(myDate.getSeconds()/10);
mz._rotation = myDate.getSeconds()*6;
};

锁定该图层。   

    (7)选择文本图层第1帧,选用动态文本,在舞台拖出五个文本框,再用静态文本输入相关面容。其文本参考规格上中下分别为26、28、22,其他随意。其参考位置,如图10所示:

图10

自上而下,自左而右分别依次选中各个动态文本框,先后在变量中确定其变量名称为yeahtextdaytextweektexthalftimetext。上锁。如图11所示:
 
 
图11
 
    (8)选择as2图层第1帧,右键该帧处,打开动作面板,在as编辑区输入如下语句:
 
// 创建新的日期对象
time = new Date();
// 把系统当前的时钟值赋给变量hour
// 把系统当前的分钟值赋给变量minute
// 把系统当前的秒种值赋给变量second
hour = time.getHours();
minute = time.getMinutes();
second = time.getSeconds();
milli = int(time.getMilliseconds()/10);
// 如果分钟值是一位数,就在前面加一个0
if (minute<10) {
 minute = "0"+minute;
}
// 如果秒钟值小于10,就在前面加一个0
if (second<10) {
 second = "0"+second;
}
if (milli<10) {
 milli = "0"+milli;
}
// 如果时钟值小于12,则在half文本框里显示AM(午前),否则显示为PM(午后)
if (hour<12) {
 half = "上午";
} else {
 half = "下午";
}
// 把系统的当前年份显示在yeahtext文本框里
yeahtext = time.getFullYear();
// 把系统的当前日期显示在daytext文本框里
daytext = time.getMonth()+1+" 月 "+time.getDate()+" 日";
// 把系统的当前星期显示在weektext文本框里
weektext = "星期 "+time.getDay();
// 把系统的当前时间显示在timetext文本框里
timetext = hour+":"+minute+":"+second+":"+milli;
 
锁定该图层。
 
    此环节完成后的实例显示,如图12所示:
 

图12

自上而下用鼠标将所有图层的第2帧刮黑,右键刮黑处,插入帧。

    5.该作业完成后的时间轴如图13示:

 
图13
 

    6.测试存盘

 

    *说明:

    1.制作中你可以在表盘图层下再添加一个背景图层,放入和制作一个漂亮的背景,以增加时历动画的可观性。

    2.动态文本框在测试中要根据实际情况调整其位置、大小,但不能太小,不然有的内容会显示不出来。

   返回教程上

      最终效果显示:

http://hsb345.16789.net/domName/hsb345/200810211530719874.swf

全屏下载

 

祝你成功!

 

进入更多教程

 

双击自动滚屏 【打印本页】 【关闭窗口
 相关评论:



409948889
(2010-8-26 9:11:00) [111.173.102.]

从风霜岁月老师那里知道这个网站的,不知道怎么注册


书情缘
(2009-10-25 1:05:00) [113.97.23.]

老师 您好!我的时针,分针,秒针不会动  下面的字会动   谢谢老师!


欢天喜地
(2009-4-4 13:11:00) [123.175.21.]

没有想到你怎么短的时间就回答我了,做成功了,谢谢朋友!


hsb345
(2009-4-3 20:47:00)

欢天喜地你好,在场景1将各个图层都延长到第2帧,下边的时间就会动起来了。


欢天喜地
(2009-4-3 19:43:00) [123.175.26.]

老师,我的下面的时间为什么不动啊

 发表评论:共有 15 条评论

身份选择:会员 游客(游客不需要输入密码)
用 户 名: 密 码:
评论内容:
(最多评论字数:500)

迎客松B站 | 设为首页 | 加入收藏 | 联系我们 | 进入管理 | 关于站长 | 本站搜索

联系电话: 联系人:翠柏

琼icp备09005167