当前页面位置: » 丰搜网 » 文档中心 » 详细内容
flash时钟的制作方法
实例简单分析：
这个例子是有一定难度的，主要用到了flash5强大的actionscript语言。我们在设计好时钟的各个元素之后要做的最重要的事就是对他们进行编程。当然，这种编程相对于其他一些高级语言来说是很简单的了，所以读者你如果没太接触过也不要惊慌，只要跟着讲解一步一步的做，一点一点的理解就一定会彻底搞懂的。我们在这里主要用的是一些提取系统时间的函数和一些其他控制元素属性的action。
好的，废话少说，现在就开始吧！
具体制作步骤：
一、制作时钟各个部件
先交待一下，我们要制作的是典型的闹钟一样的时钟：圆圆的“身体”，长短依次的递减的秒针、分针、时针。现在我们要做的就是先将这身体和指针打造出来。
1）file>new或者直接点击工具栏上的new图标新建一个文件。
2）选择modify>movie或者ctrl+m唤出movie properties面板，调整影片的尺寸规格为270×320（当然咯，你也可以自己定义你喜欢的尺寸）。
3）insert>new symbol或者ctrl+f8唤出symobl properties面板，新建一个outeregde的graphic（图形）组件。
4）选择view>grid>show grid或者ctrl+’打开网格显示开关。这样做的原因是为了在今后的制作过程中对位置的感觉更好些。
5）好了，现在点击工具条中的oval tool或者直接按o键选择椭圆工具。按住shift键画一个圆，这个圆要大些（注：按住shift画圆可以画出正圆来，同样按住shift画矩形画出的是正方形）。
6）利用箭头工具（arrow tool）选中,接着点选工具栏中的对齐（align）按钮，在弹出的选择框中先点击最右方的那个to state扭，让其陷入，再分别选择align horizontal center和align vertical center按钮，作用是将这个圆形放置到场景的中心来。
7）重复以上的动作，做一个小一些的正圆（这就是钟的内表面了），也同样放置到场景的中心。
8）再一次选择箭头工具（arrow tool）（图 arrow）选择这个小圆内部色块，按下delete键。哈哈！工作区中是不是出现了一个漂亮的圆环呢？恭喜你！钟的表面已经做好了！不过要注意看一下这个内圆壁的相对于网格的位置呦，待会用的着的。
现在该做指针了，相对于圆环来说，指针简直就是easy!
9）再新建一个movie clip组件(为什么不是graphic呢？哈哈，因为待会要对其进行编程控制的)sencond。
点选工具条上的矩形工具ranctangle tool（直接按键r）画一个矩形长条。要求是一个竖着的长方形，细一些。
10）用subselect tool（直接按键a）将其选中，接着点选工具栏中的对齐（align）按钮，在弹出的选择框中先点击最右方的那个to state扭，让其陷入，再分别选择第一行的align horizontal center和align bettom edge按钮，作用是将这个矩形下方尾部放置到场景的中心来。
我们这样做是因为待会要用action让其旋转，而现在定义的中心就是待会旋转的中心。
11）用同样的步骤制作分针minutes和时针hours，注意的是它们依次变短变粗（这样才有真实感嘛！呵呵）。
上面我们已经把闹钟的零部件做好了，零零散散一大堆都摊在桌子上怎么行，还是赶
快组装好吧！
1）来到主场景，选择window>library或者ctrl+l,唤出我们可爱的library(库----这里放了我们做好了的一些组件)。
2）好的，先用鼠标拖出outeredge组件放置在场景中，将当前层改名为outeredge。再将几个做好的指针组件拖出，按照顺序（当然是按时、分、秒的顺序由上到下咯）依次摆放，将当前层的名称改为clockhands，便于记忆。
3）好了，都摆好了！咿？左看右看怎么好像怎么不舒服呢？好像缺了点什么呢？-----哦！苹果一拍大脑，哈哈，原来没有钟上的数字！（真实蠢呀！）赶紧添上。新建一层（不会？倒!就是那个选择insert>layer或者直接点击层标识位置下的那个insert layer按钮），改名为numbers。（双击该层即可改名）
4）再利用text tool（直接按键t）在相应的位置写上数字：3、6、9、12。界面终于完成了！(注意：以上各层都请在第2桢位置选择insert>frame或f5插入桢)
三、添加action
action是flash所拥有的一种特殊的语言，可以说是面向对象的吧！操作起来较一些高级语言来说要直观简单。flash3时代的action是很少的，可以说当时的flash很少涉及编程思想。而flash4的action有了一定的增加，虽然不够丰富，内置的函数还不多，但利用它及辅以javascript等其他脚本语言调用，flash已经可以创作数不尽的奇妙效果了。而flash5的推出，无疑是将action功能推为了flash这个软件的主要功能。众多而强大的函数，使我们仅仅运用flash5内置的action就可以完成很多原先想也不敢想的效果。这个时钟的例子就是完全运用了flash5内部的函数来实现的。下面给予详细说明：
1）如果工作区中没有action面板，请选择window>action（或者ctrl+alt+a）唤出frame action面板。好了，我们要开始编程了。
2）新建一层，改名为action。这层我们添加action。
3）将鼠标定义在时间线的第一桢上，我们要对它添加action，做一些初始化工作。
按一下aciton面板右上的箭头选择expert mode（ctrl+e）专家模式进行代码输入（一共有两种编辑模式，还有一种是normal mode，是用选择的方法来输入的，我们今天用的是直接输入代码的方式）。
将以下代码输入，我给你详细的解释：
time = new date(); //获取系统日期
hours = time.gethours(); //获取系统小时数(24小时制,0-23)
minutes = time.getminutes(); //获取系统分钟数
seconds = time.getseconds(); //获取系统秒数
if (hours>12) { //假如系统时间大于12，系统时间可能是用24小时表示的
hours = hours-12; //系统时间数减去12赋予hours变量，因为我们的钟是12小时的
}
if (hours<1) { //假如系统时间小于1
hours = 12; //则hours变量为12，因为钟上没有0点的说法
}
hours = hours*30+int(minutes/2); hours变量=前面给的小时数+分钟数/2 ，这里是在计算时针应该旋转的角度
minutes = minutes*6+int(seconds/10); // minutes变量=前面给的分钟数+秒数/10 ，这里是在计算分针应该旋转的角度
seconds = seconds*6; //seccondes变量=前面获得的秒数×6,因为钟有360度
接着，对时针进行添加如下action（讲鼠标定位于时针上）：
onclipevent (enterframe) {
setproperty (this, _rotation, _root.hours); //当该movie clip开始工作时，设置当前对象（当然是这个指针了）的角度为根目录下hours变量的值。
}
同样对分针和秒针分别添加如下action:
onclipevent (enterframe) {
setproperty (this, _rotation, _root.minutes);
}
onclipevent (enterframe) {
setproperty (this, _rotation, _root.seconds);
}
4）好了，最后我们还要在action层的第二桢插入一个空白桢（insert>blank frame或f7），添加action: gotoandplay (1);为的是能够循环侦测系统时间并设置变量值，已达到时钟动态运行的目的！
谢天谢地！终于完成了，你是不是迫不及待了呢？快按ctrl+enter来看看效果吧！哈哈！是不是帅呆了！
