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

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

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

　　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)。至此，我们的时钟模具就完成了。

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有