CSDN博客

img Orrico

FLASH时钟(www.lancu.com)

发表于2004/11/4 2:33:00  2387人阅读

分类: 创意|设计

FLASH时钟

2003-7-28 14:12:29

效果描述
用FLASH做的小闹种

知识点
1. fs command
2.简单的avascript
3.基本的action script
4. movie clip的控制

  见过用FLASH制作的实时时钟吗?做一个精美的FLASH时钟放在桌面上,不要太酷哦!

  准备工作
  启动FLASH MX,按Ctrl+J设置尺寸及背景色。
  为了制作更精确,选择【View】菜单中的【Grid】子菜单下的【Show Grid】命令显示网格。同时选择【View】菜单下的【Rulers】命令显示标尺。

  制作时钟各部件
  接下来准备制作时钟各部件。单击Insert菜单下的New Symbol命令(或者按Ctrl+F8)新建一个图符(Graphic),命名为"钟面",进入图符编辑窗口。在工具面板中选择画圆工具 ,圆的边框和填充颜色可以根据个人喜好设定。按住Shift键在编辑区中画出一个正圆形,在属性面板中设置尺寸:W:200,H:200,即圆半径为100。然后按Ctrl+K调出对齐面板(Align)。按下面板右边的To Stage按钮,再单击一下水平居中(Align horizontal center) 和垂直居中(Align vertical center) 两个按钮。如图1所示。此时可以看到圆的中心与场景中心的十字线重合在一起。如图2所示。

 
图1               图2

  用箭头工具单击选中选内部,按Shift+F9调出Color Mixer面板,将填充模式设置为Radial渐变填充。渐变色自选,如图3所示。(由于篇幅有限,这里对美化方面的制作只能一笔带过。)


图3

  接下来制作钟面刻度。新建一层命名为"刻度"。用直线工具画出一条小竖线,设置竖线尺寸为4。按F8将小竖线转化为图符(Graphic),命名为"小刻度"。双击小竖线进入编辑状态。在属性面板中设置竖线的位置X:0,Y:-100(100为圆半径)。
  回到"钟面"图符编辑状态。拖动"小刻度"图符使其中心位置与钟面圆心重合。如图4所示。

   
图4               图5

  选择【Windows】菜单中的【Transform】命令,或者直接按Ctrl+T调出Transform面板。设置旋转角度Totate为30度。然后单击Copy and Apply Transform按钮 。将小刻度图符旋转并复制12次。
  考虑到几个重要的时间点,将3,6,9,12时间点删除,用同样的方法新建"大刻度"图符。不同的是,画小竖线时,将线的尺寸设为6。然后回到"钟面"图符编辑状态。继续按旋转复制的操作步骤,不过旋转角度要设为90度。然后单击工具面板中的文字工具在几个关键的时间点处输入数字。最终得到的钟面效果图如图6所示。


图6

  钟面做好了,现在分别制作时针、分针和秒针。
  选择【Insert】菜单下的【New Symbol】命令,在弹出对话框中选择Movie Clip单选框,并设置电影夹名称为"时针"。如图7所示。

 
         图7               图8

  单击工具面板中的圆形工具,在编辑区中拖出一个椭圆形,然后按住Ctrl键,在椭圆形上缘拖出一个锥形。如图8所示。
  接下来用同样的方法建立"分针"和"秒针"两个电影夹。唯一的区别是秒针比分针长,分针比时针长。

  组装时钟
  时钟各部件都已经做完了,现在将各部件组装起来。
  回到主场景,按F11调出库(Library)面板。将钟面图符拖到主场景中,将当前图层命名为"钟面"。为了保证制作的精确度,在左边的标尺刻度处点住鼠标向右拖出一条垂直参考线。同样在上方的标尺刻度处向下拖出一条水平参考线。将钟面图符的中心跟两条参考线的交点重合。注:在上面的操作过程中,注意选中Snap to Object按钮。
  新建一层,命名为"时针",将库里边的"时针"电影夹拖到主场景中,设置时针中心点在时针底端中心处,设置方法是:点击缩放工具,将中心点直接拖动到目标位置即可。然后移动时针使其中心点跟钟面的中心点重合。时针头指向12时间点。
  再新建"分针"和"秒针"两层,操作方法同"时针"层一样。
  另外"时针"层在最上方,其次是"分针",再是"秒针"。得到的效果图如图9所示。
  在每一层的第二帧按F5插入帧,将每一层都延长到第二帧。


图9

  添加AS
  时钟已经制作完成,怎样让时针,分针和秒针走动起来呢。现在给FLASH加入ActionScript。
  新建一层命名为"ActionScript"。在第一帧里加入如下Action代码:
  time = new Date(); //获取系统日期
  hours = time.getHours(); //获取系统小时数
  minutes = time.getMinutes(); //获取系统分钟数
  seconds = time.getSeconds(); //获取系统秒数
  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; //计算秒针旋转的角度
  代码基本上已经作了注释,这里作一点说明:因为系统的时间是24小时计的,而这里的时钟只有12个小时的,只能以12小时计。 另外系统的0点也就是时钟的12点。
  接下来,在第二帧按F6插入关键帧,在该帧加入下面的Action代码:
  gotoAndPlay (1);
  时钟能走了吗??还不行,还有最后也是最为关键的步骤之一。怎样将时针,分针以及秒针走动起来呢?
  选中"时针"电影夹,按F9调出Action面板,输入如下代码:
  onClipEvent(EnterFrame) {
  SetProperty(this,_rotation,_root.hours);
  }
  再分别选中"分针"和"秒针" 电影夹,分别加入如下Action:
  onClipEvent(EnterFrame) {
  SetProperty(this,_rotation,_root.minutes);
  }

  onClipEvent(EnterFrame) {
  SetProperty(this,_rotation,_root.seconds);
  }
  好了,大功告成,现在按下Ctrl+Enter键测试一下,感觉怎么样?如图10所示。是不是很酷?发挥你的想象,相信你可以做得更酷!


图10

阅读全文
0 0

相关文章推荐

img
取 消
img