FLASH时钟(www.lancu.com)

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