Flash鼠标事件控制实例绕定点旋转技巧

Flash鼠标事件控制实例绕定点旋转技巧/摘要：在flash中通过在时间轴上插入关键帧和创建补间动画可以轻松实现实例的旋转功能，通过编辑实例的中点还可进一步实现实例绕定点旋转，进而可以方便的引用到其它软件中。

关键词：关键帧；切点；中心点

在flashplayer中为增强交互性，可以尝试利用鼠标事件来控制实例旋转的角度，但这并不轻松，笔者发现在鼠标事件中设置实例的_rotation属性时，旋转的中心并不是预先编辑的实例中心，而是按照flash默认的元件的基准点（左上角）来旋转，所以在确定旋转角度的同时还应对实例的位置（_x与_y属性）进行调整。以下通过一个简例来说明这一技巧。

目标：通过鼠标移动实现切线绕切点任意旋转，达到切线随鼠标移动而旋转的视觉效果。

步骤：1）新建文件“qiexian”，设置背景为蓝色，在图层“背景”上插入关键帧，添加坐标系、曲线、切点等背景元件，并在帧动作中加入代码stop()；如图1。

图1

2）增加图层，命名为“转动”，插入关键帧，添加影片剪辑元件“qiexian”，并命名实例名为“qiexian”；如图2。

图2

3）提取切点M0的属性信息，如图3，提取切线属性信息，如图4；

图3

图4

4）为影片实例“qiexian”动作填写代码，保存并发布文件。

代码释义：

onClipEvent(mouseMove){

//鼠标事件

xx=_root._xmouse;yy=_root._ymouse;

//变量xx，yy分别记录鼠标位置的横坐标与纵坐标

if((xx-249.9)*(xx-249.9)+(yy-295.4)*(yy-295.4)<=52885.5){

//(249.9,295.4)为M0点的坐标，52885.5为M0D的长度的平方，用于设定鼠标的响应区域为以M0为圆心，以M0D为半径的圆形区域。

if((xx>=161.7)&&(yy<=216.2)){

//（161.7，216.2）是A点的坐标，以A为坐标原点建立直角坐标系，分四个象限分别处理（如图5），因为Math.atan()的返回值在

_Rotation的范围为，各个象限表达式不统一。

setProperty(“/qiexian”,_rotation,(Math.atan((yy-216.2)/(xx-161.7))*57.2975));

//旋转角度为鼠标位置相对于A点的倾角（如图5），乘以57.2975将弧度转化为角度。

setProperty(“/qiexian”,_x,161.7-(Math.cos(Math.atan((yy-216.2)/(xx-161.7))+0.73168)-Math.cos(0.73168))*118.541);

setProperty(“/qiexian”,_y,216.2-(Math.sin(Math.atan((yy-216.2)/(xx-161.7))+0.73168)-Math.sin(0.73168))*118.541);}//（如图6）旋转后切点的位置由M0移至M1，不能达到绕定点旋转的视觉效果，须将直线平移，使M1与M0重合，其中0.73168为AM0的斜率，118.541为AM0长度。

elseif((xx<=161.7)&&(yy<=216.2)){

//第二象限

setProperty(“/qiexian”,_rotation,(-90-Math.atan((xx-161.7)/(yy-216.2))*57.2975));

setProperty(“/qiexian”,_x,161.7+(Math.cos(0.73168)-Math.sin(0.73168-Math.atan((xx-161.7)/(yy-216.2))))*118.541);

SetProperty(“/qiexian”,_y,216.2+(Math.sin(0.73168)+Math.cos

(0.73168-Math.atan((xx-161.7)/(yy-216.2))))*118.541);}

图5

Elseif((xx<=161.7)&&(yy>=216.2)){

//第三象限

setProperty(“/qiexian”,_rotation,(180+Math.atan((yy-216.2)/(xx-161.7))*57.2975));

setProperty(“/qiexian”,_x,161.7+(Math.cos(Math.atan((yy-216.2)/(xx-161.7))+0.73168)+Math.cos(0.73168))*118.541);

setProperty(“/qiexian”,_y,216.2+(Math.sin(Math.atan((yy-216.2)/(xx-161.7))+0.73168)+Math.sin(0.73168))*118.541);}

elseif((xx>=161.7)&&(yy>=216.2)){

//第四象限

setProperty(“/qiexian”,_rotation,(90-Math.atan((xx-161.7)/(yy-216.2))*57.2975));

setProperty(“/qiexian”,_x,161.7+(Math.cos(0.73168)+Math.sin

(0.73168-Math.atan((xx-161.7)/(yy-216.2))))*118.541);

setProperty(“/qiexian”,_y,216.2-(Math.cos(0.73168-Math.atan((xx-161.7)/(yy-216.2)))-Math.sin(0.73168))*118.541);}}}

作品自评：代码中将A点作为基准点划分象限，确定旋转角度、调整坐标，较为流畅地实现了目标。由于鼠标响应圆形区域的圆心与坐标系的原点不重合，造成鼠标响应区域的不对称。如果将基准点选在M0点，而实际又是以A点作为旋转中心点，造成区域讨论更为复杂，难以实现任意旋转。

参考文献：