用Flash制作时钟教程

用Flash制作时钟教程
--------------------------------------------------------------------------------
制作时钟的基本方案:
一,时钟的基本组成:
1,时针.
2,分针.
3,秒针.
4,AS脚本.
5,表盘(刻度,数字).
6,三针交叉点遮盖.
二,制作五个元件,在元件里编辑:
1,制作时针
2,制作分针
3,制作秒针
4,制作表盘
5,制作三针交叉遮盖.
三,在场景的舞台里加6层,在舞台里编辑(顺序:从下向上数):
1,第一层AS
2,第二层表盘
3,第三层时针
4,第四层分针
5,第五层秒针
6,第六层交叉遮盖
下面分别详细叙述制作过程:(如果你有一定基础,在本文最后有:
简化教程)
打开FlashMX,看文字菜单行下侧是否有"快捷工具",如果没有,
点<窗口><工具拦>勾选<主要拦>,备以后使用.以下有使用这里的
<对齐工具>,第一次使用<对齐工具>需要把<相对于舞台>下方的按
钮压下去!
1,时针制作过程:
直接点文字菜单的<插入><新建元件>,<名称>写"时针",<行为>
选<影片剪辑>.
在编辑区里,用左侧<工具>的<矩形工具>绘制无边黑色"长方形",
打开属性面板.
选工具里的<黑箭头>,压住鼠标套住"长方形"后松手,属性里出现宽高. 将宽设置为6,高设置70.
使用<主要拦>里的<对齐工具>第一行,用2(水平中齐)6(底对齐).
元件制作完,不用保存,自然进入库里,想修改元件,必须先打开库,
对准库里元件名右击,点<编辑>.
2,分针制作过程:
直接点文字菜单的<插入><新建元件>,<名称>写"分针",<行为>选
<影片剪辑>.
在编辑区里,用左侧<工具>的<矩形工具>绘制无边黑色"长方形",
打开属性面板.
选工具里的<黑箭头>,压住鼠标套住"长方形"后松手,属性里出现宽高. 将宽设置为6,高设置85.
使用<主要拦>里的<对齐工具>第一行,用2(水平中齐)6(底对齐).
3,秒针制作过程:
直接点文字菜单的<插入><新建元件>,<名称>写"秒针",<行为>选
<影片剪辑>.
在编辑区里,用左侧<工具>的<矩形工具>绘制无边红色"长方形",
打开属性面板.
选工具里的<黑箭头>,压住鼠标套住"长方形"后松手,属性里出现宽高.
将宽设置为2,高设置120.Y值设置-100.
使用<主要拦>里的<对齐工具>第一行,用2(水平中齐)6(底对齐).
4,表盘制作过程:
直接点文字菜单的<插入><新建元件>,<名称>写"表盘",<行为>选
<影片剪辑>.
在编辑区里,用左侧<工具>的<橢圆工具>绘制无边淡灰"圆形",
打开属性面板.
选工具里的<黑箭头>,压住鼠标套住"圆形"后松手,属性里出现宽高.
将宽设置为210,高设置210.
使用<主要拦>里的<对齐工具>第一行,用2(水平中齐)5(垂直中齐).
5,刻度制作过程:
继续在表盘制作里,加上第二层,在上,下,左,右,用<线条工具>绘制四
个短线条,线条宽度设为1,长度设为10-20
先制作一个,制作完成后,压住鼠标套住"短线条"后松手,对准短线条
右击点<复制>(有的叫拷贝),在其他位置右
击点粘贴,得到相同的短线条,布置到上下位置.
再在其他位置点粘贴,又得到一个相同的短线条,压住鼠标套住"短线条" 后松手,点<修改><变形><顺时针旋转90>
对准横的短线条,右击复制再粘贴一个横的短线条,布置在左右.
6,数字制作过程:
继续在表盘制作里,加上第三层,(锁住其他层),用工具中的<A>字母,
在编辑区写上"12",回到工具的黑箭头后,
再点工具中的<A>字母,在编辑区写上"3",这样重复操作,再写上"6""9". 摆放到适当位置.
(也可以不要12.3.6,9.写上:1,2,4,5,7,8,10,11更艺术点,这不是固定的,
看你艺术水平了)
7,三针交叉点遮盖制作过程:
三针交叉点露出来不好看,需要装修遮盖.以下同制作表盘一样,只差圆的直径尺寸.
直接点文字菜单的<插入><新建元件>,<名称>写"三针交叉遮盖",<行为> 选<影片剪辑>.
在编辑区里,用左侧<工具>的<橢圆工具>绘制无边黑色"圆形",打开属性面板.
选工具里的<黑箭头>,压住鼠标套住"圆形"后松手,属性里出现宽高.
将宽设置为12,高设置12.
使用<主要拦>里的<对齐工具>第一行,用2(水平中齐)5(垂直中齐).
到此为止,元件制作完毕.以下回到"场景编辑"
1,场景属性设置(或是说:文档属性):点<修改><文档>,宽:218,高:218.
其他暂不变.
2,增加层,共6层,每层只一帧就可以.顺序由下向上,第一层层名:AS,
第二层层名:表盘,第三层层名:时针,第四层层名:分针,第五层层名:秒针,
第六层层名:交叉遮盖.
3,AS层:对准第一帧,打开<动作-帧>面板,复制以下AS代码,粘贴在里面:
_root.onEnterFrame=function(){
myDate=newDate();
hour._rotation=myDate.getHours()*30+(myDate.getMinutes()/2);
min._rotation=myDate.getMinutes()*6+(myDate.getSeconds()/10);
sec._rotation=myDate.getSeconds()*6;
};
4,表盘层:打开库(按F11),点表盘层第一帧,把库中表盘元件拉到舞台,
点对齐工具第一行的:2和5.
5,时针层:点时针层第一帧,把库中时针元件拉到舞台,再打开属性面板,
用XY坐标对位置.X=106,Y=39.实例名称:hour
6,分针层:点分针层第一帧,把库中分针元件拉到舞台,再打开属性面板,
用XY坐标对位置.X=106,Y=24.实例名称:min
7,秒针层:点秒针层第一帧,把库中秒针元件拉到舞台,再打开属性面板,
用XY坐标对位置.X=108,Y=9.实例名称:sec
8,交叉遮盖层:打开库(按F11),点交叉遮盖层第一帧,把库中三针交叉遮盖元件拉到舞台,点对齐工具第一行的:2和5.
到此为止,全部完成,点<控制><测试影片>,看到问题关闭<测试>窗口,调整,
再<测试影片>,满意为止.
简化教程:
1,以下使用元件编辑,用绘图方法,分别制作,时针,分针,秒针,表盘,刻度,
数字,三针交叉遮盖等元件:
时针:用矩形工具,做无边黑色矩形,宽=6,高=70.水平:居中,垂直:底边对中.
分针:用矩形工具,做无边黑色矩形,宽=6,高=85.水平:居中,垂直:底边对中.
秒针:用矩形工具,做无边黑色矩形,宽=2,高=120.水平:居中,垂直:Y=-100.
表盘:用椭圆工具,做无边淡灰色圆形,宽=210,高=210.水平:居中,垂直:居中.
刻度:在表盘元件里,加一层,用线条工具做成放射形类似钟表黑色刻度盘.
数字:在表盘元件里,再加一层,用文字工具写四次,分别写:12,3,6,9,选字体
字号和颜色.
三针交叉点覆盖:是修饰物,该交叉点遮盖上更好看,用椭圆工具,做无边黑色
圆形,宽=12,高=12.水平居中,垂直居中.
2,进入舞台场景编辑:建6层,由下向上的层名:AS,表盘,时针,分针,秒针,
三针遮盖.
把AS代码粘贴点AS层第一帧.(提示:AS控制对象就是三针,所以三针,要冠以实例名称,看下面制作)
把表盘元件从库中拉进表盘层第一帧,居中.
把时针元件从库中拉进时针层第一帧,水平居中,垂直:针底居中.实例名称
设置:hour
把分针元件从库中拉进分针层第一帧,水平居中,垂直:针底居中.实例名称
设置:min
把秒针元件从库中拉进秒针层第一帧,水平居中,垂直:针中心居中
(和中心点不同).实例名称设置:sec
把三针交叉遮盖元件从库中拉进交叉遮盖层第一帧,居中.
3,反复测试调整.加上其他装修饰就更漂亮了,如果要想要更多功能,
AS就不一样了,元件也要多了......,这只是入门!
看到画面上静止的时钟，你是不是想让它动起来，那么我来教大家做一个转动的时钟。

使用Flash mx中的时间对象制作一个转动的时钟，该时钟时、分、秒针的转动与系统的时间一致。

有兴趣就跟着来做。

开始制作：时钟画面的组成元素有时、分、秒三个电影夹子[ S,F,M ]，时间的刻度图形符号两个[ a、b ]，时间的输出文本框一个[ text ]。

回到主场景中，在实例面板中将时、分、秒影片的名称写为：S、F、M；将时、分、秒针影片在轴点对齐，而且都指向12点。

点击文本工具在文本框属性面板中设置为[动态文本]，变量名为[ text ]
有了以上的步骤，下面，我们就让时钟转动起来：
第一步：在时间线双击第一帧，在弹出的动作面板中加入以下代码：
mydate = new date ()；//定义一个时间对象的实例
hour = Number(mydate.getHours())；
hour = hour%12；//当前时间转化为12小时制
minute = Number (mydate.getMinutes())；//获取当前分数
second = Number (mydate.getSeconds())-1；//获取当前秒数
h = (hour*30+minute*0.5+second*0.0833)%360；//将当前时针处于初始位置的转动幅度赋予变量h
m = (minute*6+second*0.1)%360；
s = (second*6)%360；
setProperty ("s", _rotation, h)；
setProperty ("f", _rotation, m)；
setProperty ("m", _rotation, s)；
angle = s；
angleh = h；
anglem = m；//将当前时、分、秒针的初始角度分别赋予三个变量第二步：在第二帧插入关键帧，在动作面板中加入以下代码：mydate = new date()；
day = mydate.getDate()；
month = mydate.getMonth()+1；
second = mydate.getSeconds()；
week0 = mydate.getday()；//获取当天星期( )
is (Number(week0) == 1) {
week0 = "一"；}
is (Number(week0) == 2) {
week0 = "二"；}
is (Number(week0) == 3) {
week0 = "三"；}
is (Number(week0) == 4) {
week0 = "四"；}
is (Number(week0) == 5) {
week0 = "五"；}
is (Number(week0) == 6) {
week0 = "六"；}
is (Number(week0) == 0) {
week0 = "日"；} //以上把获取的星期数字号码转换成大写
is (day<10) {
day = "0"+String(day)；} //将一位数的日期号码转换成两位
is (moth<10) {
month = "0"+String(month)；} //系统的月份从0开始计数，故要进行转换
text = mydate.getSullYear() +"."+month+"."+day+"＼t星期"+week0；
is (s != second) {
s = second；
angle = angle+6；
setProperty ("m", _rotation, angle)；//设置秒针的当前位置；每一秒秒针的转动角度为6(360度 /60秒)度
anglem = anglem+0.1；
setProperty ("f", _rotation, anglem)；
angleh = angleh+0.0083；
setProperty ("s", _rotation, angleh)；
}
第三步：在第三帧插入关键帧，并在动作面板中加入以下代码：
gotoAndPlay (2)；
一个转动的时钟就做好了，来看一下你做的时钟是不是酷极了！
制作思路：首先获得系统时间，然后乘以相应的度数，实现钟表的功能。

步骤1：
绘制时针(hc),分针(mc),秒针(sc)，其中hc,mc,sc是实例名。

步骤2：
加入AS代码：
_root.onEnterFrame = function () {
var now:Date = new Date();
var hour = now.getHours();
var minute = now.getMinutes();
var second = now.getSeconds();
//首先获得系统的时，分，秒
hc._rotation = hour*30;
mc._rotation = minute*6;
sc._rotation = second*6;
/*小时：一圈是360度，共12小时，每一小时30度
分钟：一圈是360度，共60分钟，每一分钟6度
秒钟：一圈是360度，共60秒钟，每一秒钟6度*/
};
Flash充电：常用的Date()类方法
(1).getFullYear()//返回形式2007年份
(2).getMonth()//返回形式1～12月份
(3).getDate()//返回形式1～31日期
(4).getDay()//返回形式1～7星期
(5).getHours()//返回形式0～23
(6).getMinutes()//返回形式1～59
(7).getSeconds()//返回形式1～59
第一种方法
步骤1、制作一个圆
步骤2、制作元件时针、分针、秒针，拖入到舞台并对实例分别命名为hc mc sc
步骤3、在第一帧中输入：
function displaytime()
{
date = new Date();
dh = date.getHours();
dm = date.getMinutes();
ds = date.getSeconds();
sc._rotation = ds * 6;
mc._rotation = dm * 6;
hc._rotation = dh * 30;
} // End of the function
setInterval(displaytime, 1000);
说明：
/*小时：一圈是360度，共12小时，每一小时30度
分钟：一圈是360度，共60分钟，每一分钟6度
秒钟：一圈是360度，共60秒钟，每一秒钟6度*/
第二种方法：
步骤1、制作一个圆
步骤2、制作元件时针、分针、秒针，拖入到舞台并对实例分别命名为hc mc sc
步骤3、在第一帧中输入：
date = new Date();
dh = date.getHours();
dm = date.getMinutes();
ds = date.getSeconds();
sc._rotation = ds * 6;
mc._rotation = dm * 6;
hc._rotation = dh * 30;
步骤4：在第12帧插入关键帧，加脚本：gotoandplay(1)
一.建立文档，其属性为：高350px，宽300px，背景色：深灰或浅黑。

二.制作组件
（一）制作时钟指针（下简称指针）：
1.插入－>新建元件。

名称：时钟指针；行为：电影剪缉。

点“确定”进入元件编缉区。

2.在工具箱中设置填充色为深黄色。

选择矩形工具在编缉区内画一无笔触色的柱状矩形。

3.用箭头工具向下拖曳柱状矩形的下边中点，使下边成圆弧状。

4.用箭头工具移动柱状矩形的左上角，使之与右上角相重叠，使原来的柱状矩形成指针状。

5.选中指针，并使之成垂直状。

其方法是：窗口（菜单）－>变形－>在“旋转”文本框中输入“-3度”—>回车。

6.用箭头工具移动指针，使指针的旋转轴心（下方）位于与编缉区的注册点位置。

7.复制指针。

选中指针－>复制—>粘贴。

8.保持复制的指针被选中的情况下，单击工具箱“颜色”中的“填充色”按钮，在弹出的面板中，单击右上角的按钮，打开“颜色”面板，适当增加“亮度”的数值，使复制件的颜色较原件稍浅。

9.移动复制的指针，覆盖在原件上并稍向左上方偏移，使指针具有三维效果。

如图1。

10.返回主场景。

（二）制作钟壳
1．插入－>新建元件。

名称：钟的外壳；行为：电影剪缉；点“确定”。

2．在工具箱的“颜色”项中设置：笔触色为黄色；填充色为无。

3．选择椭圆工具，在编缉区中画一个椭圆。

注意掌握其长，短轴的比例。

4. 选中上一步所画的椭圆，将其转换为可填充图形。

方法是：修改（菜单）－>形状>将线条转换为填充。

5. 继上一步再次打开：修改（菜单）—>形状>扩散填充。

在出现的对话框中“距离”输入8px,并选择“扩散”单选框，点“确定”，把“转换为填充图形的线条”扩大。

6. 改变填充色，使扩大后的线条成深黄色。

7. 仿照制作指针的第7－9步，制作具有三维效果的钟壳。

如图2所示。

8. 返回主场景。

（三）制作刻度盘
1. 插入－>新建元件。

名称：刻度盘；行为：电影剪缉；点“确定”。

2. 打开“库”，将“钟的外壳”拖到“刻度盘”编缉区中，调整其大、小和位置，使其注册点和编缉区中的注册点相重合。

3. 选择线条工具，按住上档键（Shift），从钟壳的上沿内侧，向下画一条竖线到钟壳的下沿内侧。

竖线的中点要通过注册点。

4. 选中该竖线，复制29根线段。

其方法：窗口（菜单）－>变形,在“变形”面板的“旋转文本框”中输入6，单击位于面板右下角，左边的“拷贝并应用变形”
按钮，每按一次就复制一条线段，并旋转6度，共按29次，复制29条线段，把圆周分成60等份
5. 用椭圆工具在刻度盘的中央画一个无笔触色，填充色为任意色的椭圆，然后用缩放工具调整其大小，使之覆盖中心部分的线条。

6. 选中该椭圆，按清除键（Delete），删除椭圆，仅留下周边的用作“刻度”的线段,并选用擦线条的“橡皮”工具擦净多余的线段。

7. 用缩放工具把整点位置的刻度线适当拉长。

用文本工具选用“Arial Black”字体。

字体颜色为深黄，在3，6，9，12整点位置处输入相应的数目字。

如图4所示（至此刻度盘已制作完成。

如欲美化钟面。

可以自行用文本工具写些文字，也可导入一些适用的MC或图画，权作“商标”。

在我的源文件中，导入的是蛛蜘精老师“光芒四射”的“钻石”元件。

和写了“shanke”(闪客)字样。

在这里就不赘述了。

）图4：。

7. 返回主场景
三．组装三维时钟及输入脚本
（－）组装三维时钟
1. 插入－>新建元件。

名称：时钟；行为：电影剪缉。

点“确定”进入元件编缉区
2. 打开“库”，将“刻度盘”拖到“时钟”编缉区中。

3. 再将“时钟指针”拖入，用缩放工具适度调整“指针”的大小，移到“刻度盘”内并调整其位置，使它的注册点位于时钟的中心位置，作为“分针”。

选中“分针”击鼠标右键，从中打开其属性面板。

在“实例名称”中命名为min 。

4. 按上述第2－3步的类似方法，安装“时针”和“秒针”，并分别命名为hour 和sec 。

用缩放工具调整时使“时针”比“分针”适度短些，宽些。

使“秒针”比“分针”细长些。

5. 返回主场景。

6. 从“库”中将“时钟”拖放到场景编缉区内。

打开属性面板，在“颜色”选项上选“高级”，再按右侧的“设置”按钮，按个人的喜好调整颜色和Alpha(透明度)的值。

（二）输入脚本和测试影片
1．右击位于场景中的“时钟”，在快捷菜单中打开“动作”面板，用“专家模式”
书写以下脚本：（对下面简释脚本语句所写的中文字，也可不写入脚本。

）//创健日期对象
onClipEvent (load) {
timer = new Date();
}
//读取系统时间，并转换为时针旋转的角度使时针转动。

onClipEvent (enterFrame) {
//读取日期对象的时，分，秒
Hour = timer.getHours();
Minute = timer.getMinutes();
Second = timer.getSeconds();
//把24小时制转换为12小时制
if(Hour>12){
Hour=Hour-12;
}
if(Hour<1){
Hour=12;
}
//把时,分,秒转换为旋转角度
Hour=Hour*30+int(Minute/2);
Minute=Minute*6;
Second=Second*6;
//设置时针,分针,秒针的旋转角度,使时针转动
setProperty("hour",_rotation,Hour);
setProperty("min",_rotation,Minute);
setProperty("sec",_rotation,Second);
//删除和重建日期对象,实现时钟动态显示时间delete timer;
timer=new Date();
}
2. 测试影片。