您的位置:首页网页设计Flash → 用Flash制作精巧的时钟

用Flash制作精巧的时钟

时间:2004/11/7 2:17:00来源:本站整理作者:蓝点我要评论(0)

  时钟是日常生活中必备的物品,有了它我们才可以有计划的进行学习和工作.这次我们用Flash来制作一个精美的小时钟,你可以把它拖到电脑屏幕的一角,使工作中的你可以方便的查看当前时间和日期.



  本实例最终效果如图1所示;




图1 时钟的最终效果




  1.首先启动Flash,新建一个影片,设置影片舞台大小为270px*320px(单位为象素),背景颜色为灰色,颜色代码为#CCCCCC.



  2.首先制作时钟里的时针.新建一个影片剪辑元件,命名为hours,进入元件的编辑区后,使用矩形工具绘制一个细长的无边框的矩形,填充色为灰色,颜色代码为#999999,如图2所示;




图2 制作时针




  3.然后制作时钟里的分针.新建一个影片剪辑元件,命名为minutes,进入元件的编辑区后,使用矩形工具绘制一个细长的无边框的矩形,填充色为深灰色,颜色代码为#666666,如图3所示;




图3 制作分针




  4.最后制作时钟里的秒针.新建一个影片剪辑元件,命名为seconds,进入元件的编辑区后,使用矩形工具绘制一个细长的无边框的矩形,填充色为红色,颜色代码为#FF0000,如图4所示;




图4 制作秒针




  5.新建一个图形元件,命名为outeregde,进入元件的编辑区后,使用前面实例中介绍的方法制作一个圆环,填充色为灰色,颜色代码为#999999,用作时钟的边框,如图5所示;




图5 制作时钟的边框




  6.回到主场景中,将影片默认的图层Layer1重命名为outeredge,然后将元件outeregde拖到舞台上,调整其位置到舞台的中央.



  7.新建一个图层numbers,使用文本工具分别输入从1到12这12个数字,并绕着时钟边框排列其位置,如图6所示;




图6 添加时间数字




  8.新建一个图层clockhands,分别将元件Hours, minutes和Seconds拖到场景中,然后使用椭圆工具绘制一个黑色无边框的正圆,将其放置在表盘的中心,然后分别将时针,分针和秒针放到表盘的中心,使三个表针的下部和中心位置对齐,如图7所示;




图7 在表盘中添加表针




  9.添加图层pagetitle,使用工具分别绘制一个静态文本框和一个动态文本框,在静态文本框中输入时钟的标签:flash时钟,设置动态文本框的文本变量名为time,用来动态显示年,月,日和星期.



  10.最后添加一个图层命名为Action,设置控制时钟运行的Action脚本.



  在第1帧添加如下Action:



time = new Date();//定义time为Date日期对象



hours = time.getHours();//取得当前系统的小时,并赋给变量hours



minutes = time.getMinutes();//取得当前系统的分钟,并赋给变量minutes



seconds = time.getSeconds();//取得当前系统的秒钟,并赋给变量seconds



if (hours>12) {



  hours = hours-12;



}



if (hours<1) {



  hours = 12;



}



hours = hours*30+int(minutes/2);



minutes = minutes*6+int(seconds/10);



seconds = seconds*6;



  在第2帧添加如下Action:



gotoAndPlay(1);



  11.最后一步是给三个表针添加各自的Action,使其可以按照自己的规律进行旋转



给时针添加如下Action:



onClipEvent (enterFrame) {



  setProperty(this, _rotation, _root.hours);



}



  给分针添加如下Action;



onClipEvent (enterFrame) {



  setProperty(this, _rotation, _root.minutes);



}



  给秒针添加如下Action:



onClipEvent (enterFrame) {



  setProperty(this, _rotation, _root.seconds);



}

相关阅读 Windows错误代码大全 Windows错误代码查询激活windows有什么用Mac QQ和Windows QQ聊天记录怎么合并 Mac QQ和Windows QQ聊天记录Windows 10自动更新怎么关闭 如何关闭Windows 10自动更新windows 10 rs4快速预览版17017下载错误问题Win10秋季创意者更新16291更新了什么 win10 16291更新内容windows10秋季创意者更新时间 windows10秋季创意者更新内容kb3150513补丁更新了什么 Windows 10补丁kb3150513是什么

文章评论
发表评论

热门文章 没有查询到任何记录。

最新文章 Flash CS4基础入门 如何在Flash中打开一个定制的浏览器新窗口?学习ActionScript 3.0的6个好处几个小技巧精简Flash文件体积在Flash动画中添加“加为收藏”和“设为首页

人气排行 Flash游戏制作--小熊拼图用Flash实现几种镜头效果Flash制作动画知识:遮罩Flash制作环形文字Flash如何做鼠标指针样式鼠标效果系列教程:游动的鱼Flash制作声情并茂的电子相册实例讲解flashMTV制作全过程(3)