用Flash制作精巧的时钟

liuji3012

liuji3012

2016-02-19 17:16

人生本是一个不断学习的过程,在这个过程中,图老师就是你们的好帮手,下面分享的用Flash制作精巧的时钟懂设计的网友们快点来了解吧!

  时钟是日常生活中必备的物品,有了它我们才可以有计划的进行学习和工作.这次我们用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所示;

  

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com)

  图5 制作时钟的边框

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

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

  

  图6 添加时间数字

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

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com)

  

  图7 在表盘中添加表针

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

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

  在第1帧添加如下Action:

time = new Date();//定义time为Date日期对象hours = time.getHours();//取得当前系统的小时,并赋给变量hoursminutes = time.getMinutes();//取得当前系统的分钟,并赋给变量minutesseconds = time.getSeconds();//取得当前系统的秒钟,并赋给变量secondsif (hours12) {hours = hours-12;}if (hours1) {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);}
展开更多 50%)
分享

猜你喜欢

用Flash制作精巧的时钟

设计创意
用Flash制作精巧的时钟

Flash制作可爱时钟

flash教程
Flash制作可爱时钟

什么是极简主义 如何打造极简风格家居

家居设计 装修设计
什么是极简主义 如何打造极简风格家居

制作精美的flash桌面时钟(2)

flash教程
制作精美的flash桌面时钟(2)

Flash as入门(20):制作时钟的实例教程-Flash actionscript

FLASH flash教程
Flash as入门(20):制作时钟的实例教程-Flash actionscript

2017榻榻米书房设计装修效果图 榻榻米书房设计图片

榻榻米 书房 装修设计 书房设计 平面设计
2017榻榻米书房设计装修效果图 榻榻米书房设计图片

使用Flash mx制作旋转的时钟效果

flash教程
使用Flash mx制作旋转的时钟效果

Flash制作电子日历时钟(2)

flash教程
Flash制作电子日历时钟(2)

2017春夏女装风衣外套流行趋势

服装设计 平面设计 设计 服装搭配
2017春夏女装风衣外套流行趋势

越南插画师Potato Pou古典插画作品

越南插画师Potato Pou古典插画作品

Flash表单制作实例集锦7:Flash聊天室

Flash表单制作实例集锦7:Flash聊天室
下拉加载更多内容 ↓