分享
 
 
 

利用Flash制作一个可以自由拨动的时钟模具

王朝other·作者佚名  2008-05-19
窄屏简体版  字體: |||超大  

曾经因几位小学老师相邀为她们做课件,其中有好几节课都是关于时钟的认识,为了能够让小学生充分地认识时钟,不得不制作多个带有时间刻度的钟面。我记得小时候,多媒体教学还没有出现,老师为了能让我们对时钟有个直观的认识。用一块纸板和小棒做时钟模具,然后拨动给我们看,让我们来接触它,认识它。于是,我就思考,能不能通过多媒体来做一个时钟模具,可以自由拨动。经过多方思考,终于完成了。主要思路如下:

首先我们来分析一下拨动指针的过程:

1. 鼠标按下某一指针(时针或分针)。

2. 鼠标拖动,此时指针随鼠标转动。

那么如何能让指针随鼠标转动呢?如图1所示:假如鼠标开始在A点,然后将鼠标移动B点,只需要计算出∠AOB,然后将指针转动∠AOB的度数。

3. 释放鼠标,指针停止转动。

通过以上过程,我们能够初步模拟出拨动指针的效果。

那么如何获得所转动的角度呢?首先让我们先来看看在Flash中坐标是怎样设定的(如图2所示),场景的左上角为坐标原点(0,0),假如场景设为400×400。则右下角坐标为(400,400)。如果我们需要线OA转到OB,在数学中我们会通过一系列的函数运算求得,但是在Flash中我们大可不必如此,因为Flash中SetProperty函数所设定的角度值并不是相对影片开始所在的位置,而是相对于OC的(平行于X轴并经过影片剪辑的参照点),也就是只要求出∠COB的值就行了,而对于这个问题是很简单的。设B点坐标为(350,350),我们只要用B点坐标减去圆心O点的坐标所得(△x,△y),然后通过Arctan(△y/△x)就可以得到∠COB的值。同样从OB转到OA也是如此,只要求出OA相对OC的值就可以求出。在Flash中,我们同样以图2为例,OC向下转动为正值,一直到OC的反向线上终止;而向上转动为负值,同样也到OC的反向线上终止,因此OC的反向线的圆的交点与OC所在的度数有两种方法表示,分别为180°与-180°。由于我们所求的值与此保持一致,因此也不要求我们对所求值的符号做任何改动。

具体算法就是:∠a=Arctan(Ay-Oy/Ax-Ox),其中A为指针转动后的位置与圆边相交的点,而O点为圆心所在的坐标点。

我们已经清楚了主要的算法和过程,那么在Flash中我们又将如何实行呢?现在我们先来看看我们在Flash中用到的主要函数的具体意思。

一、 Math.atan2(y x)

以弧度为单位计算并返回y/x的反正切值。返回值表示相对直角三角形对角的角,其中x是邻边边长,而y是对边边长。由于最后返回的是弧度。因此要求我们将其转化为角度。Math.atan2(y,x)*180/math.PI

二、SetProperty″target″propertyvalue/expression

当影片播放时,更改影片剪辑的属性值。Target为更改目标的路径,Property为要设置的属性,Value/Expression为属性的新值或值的表达式。

所要准备的都已就绪,现在就让我们进入实战阶段吧!

1. 打开Flash,新建文件,改其场景大小为400×400。

2. 插入一个影片剪辑命名为分针。

3. 点击直线工具,绘制出一条高为100,粗为4.5,垂直向上的蓝线。使其底端对其中心十字架(这里也就是设定我们前面提到的参照点)。

4. 同样方法创建时针。颜色为红色,长为80,宽为8。

5. 导入一张没有指针的钟面。再建立两个图层分别从库中将时针和分针拖到主场景中。命名为Shizhen、Fenzhen。

6. 将两个指针分别定位到钟面的中间。

7. 编码。由于两个指针的功能相同,因此通过函数来减少代码的大小。在第一帧中加和如下代码:

logo=0; //判断鼠标是否按下变量

function zhuan(mm)

{x=_xmouse; //将当前鼠标的横坐标赋给x

y=_ymouse; //将当关鼠标的纵坐标赋给y

m=math.atan2(y-200,x-200) *180/math.PI; //求得转动角度,由于钟面的中心点坐标为(200,200),大家可以根据实际情况设定。

setProperty(mm,_rotation,m); //指使影片剪辑转动

右击时针影片剪辑,添加动作如下:

on (press) {logo=1;}

//由于我们需要鼠标按下与拖动都发生触发事件,因此以Logo作为变量来控制鼠标是否按下,如果鼠标按下Logo为非零

on (release, releaseOutside) {logo=0;}

//鼠标释放Logo为零

onClipEvent (mouseMove) { //鼠标移动则运行下列代码

if(logo==1) //判断鼠标是否按下

{_root.zhuan(_root.shizhen);} //调用Zhuan函数

}

对于分针我们只需将_root.zhuan(_root.shizhen)改为_root.zhuan(_root.fenzhen)。至此,我们的时钟模具就完成了。

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有