悠闲 的个人主页 注册

【】最简单的鼠标跟随动画的制作过程

导语:

修改
字体调整: | |

发表于2007年07月19号 21点 阅读 3736 评论7 点赞0 ©著作权归作者所有

                   最简单的鼠标跟随 (老手不宜)

    我学习动画的时间不长,对代码的学习更是一半解,下面的内容,仅供初学flash朋友参考。                       

                   第一节   单元件的鼠标跟随 
    鼠标跟随,是flash动画里很有意思的一个内容。单元件鼠标跟随,是不能再简单的跟随示例,其制作过程如下:

1,打开flash面板,点文件---导入到库,导入一个GIF格式的小动画(注意这类小动画不要直接导入现场)。

2,在现场第一层第一桢,将上面的小动画从库里导入现场,同时在属性面板里影片剪辑下面的空格里,填写影片剪辑名称(实例名称):mc。这个名称可以随意起,但一定要记住和后面代码里保持一致。

3,点黑第一桢,打开动作面板,填写以下代码:

mc._x=mc._x+(_xmouse-mc._x)/4;
mc._y=mc._y+(_ymouse-mc._y)/4;

在上面的代码中,mc._x 代表元件mc 的x 坐标,mc._y 代表元件mc 的y 坐标,_xmouse代表鼠标的x坐标,_ymouse代表鼠标的y 坐标。 

从公式中可以看出,新的x坐标,等于原来的x坐标加上:鼠标的x坐标减去原x坐标的差再除以4所得的商数。就是说,鼠标的x坐标移动a厘米,元件的x坐标就要跟进a/4厘米。y坐标同此理。

4,在第二桢插入关键镇,打开属性面板,填写如下代码:

gotoAndPlay(1);

动画完成,测试,导出。

说明:1,第一桢的公式可简化为:

mc._x+=(_xmouse-mc._x)/4;
mc._y+=(_ymouse-mc._y)/4;

           2,除数4要根据现场效果改变,如2,5 ,7,8等等。

 

                  第二节 多元件鼠标跟随
  我们现在再来做一个多元件的鼠标跟随:
1,写四个字:向你学习,并且把它们分别转换为4个元件。
2,在第一桢,把4个元件,导入现场,影片剪辑名称分别命名为:m1,m2,m3,m4。
导入时最好从第4个开始依次导入。因为最后一个总是在最上面。
3,点第一桢,打开动作面板,填写以下代码:
m1._x+=(_xmouse-m1._x)/4;
m1._y+=(_ymouse-m1._y)/4;
m2._x+=(m1._x-m2._x)/4;
m2._y+=(m1._y-m2._y)/4;
m3._x+=(m2._x-m3._x)/4;
m3._y+=(m2._y-m3._y)/4;
m4._x+=(m3._x-m4._x)/4;
m4._y+=(m3._y-m4._y)/4;

   上面的代码,其道理和我在上一篇所讲的是一样的,元件1跟鼠标,元件2跟元件1,元件3跟元件2- - - 。
4,在第二桢插入关键桢,加动作代码:
gotoAndPlay(1);

第二桢代码很简单,但万万不能缺少。

 

              第三节 需要左右转向的鼠标跟随
有时候,鼠标牵引的对象,是需要适时转向的,例如上面的例子。当鼠标向右时,马就要跟着回头,否则就要退着走。这就要求我们给元件定一个条件,要它在适当的时候转身。这个条件是通过if(如果)语句来下达的,在下面的制作过程中,我会详细介绍。
    动画制作过程如下:
1,将一个动物行走的GIF动画导入库,再从库里导入到现场,在属性面板中填写影片剪辑名称(也叫实例名称):h。
2,点第一桢,打开动作面板,填写代码:
h._x+=(_xmouse-h._x)/10;
h._y+=(_ymouse-h._y)/10;
if (_xmouse>h._x) {h._xscale=100;

}else{h._xscale=-100;}

   除了影片剪辑名称不同,上面两行代码和第一节几乎是一样的。因为这一个例子也是一个元件跟随鼠标。除号下边的数字,要根据测试的情况调整,这个数越大,元件距鼠标越远。
  下面两行给出了转向的条件。式中,h._xscale表示元件h的方向。当_xscale=100时,元件方向为正(即导入时的方向,当_xscale=-100时元件为反方向。
   为了便于大家理解,我把这两行的内容翻译成中文:
如果(鼠标的x坐标大于元件h的x坐标){元件h的方向为正}否则{元件h的方向为反}

3,在第二桢,插入关键桢,加代码:
gotoAndPlay(1);

测试,导出。

                第四节 多元件左右转向鼠标跟随
  在上面3节的基础上,多元件的左右转向鼠标跟随,应当不是很难的问题了。我上面作了一个3元件的转向鼠标跟随,更多的元件,依次类推就是了,3元件的转向鼠标跟随制作过程如下:
1,导入元件,填写实例名:m1,m2,m3。
2,在第一桢填写动作代码:
m1._x+=(_xmouse-m1._x)/6;
m1._y+=(_ymouse-m1._y)/6;
m2._x+=(m1._x-m2._x)/4;
m2._y+=(m1._y-m2._y)/4;
m3._x+=(m2._x-m3._x)/4;
m3._y+=(m2._y-m3._y)/4;

if (_xmouse>m1._x) {m1._xscale=100;
}else{m1._xscale=-100;}
if (_xmouse>m2._x) {m2._xscale=100;
}else{m2._xscale=-100;}
if (_xmouse>m3._x) {m3._xscale=100;
}else{m3._xscale=-100;}
 
上面6行,是说明互相跟随关系的。
下面的6行,要求所有元件根据和鼠标的位置关系,适时转向,写好前两行,后面可以复制,再改一下元件名称就可以了。

3,在第二桢插入关键桢,填写代码:
gotoAndPlay(1);

测试,导出。

 代码解释:
1, _xscale :表示在x 轴上的缩放比例和方向。大小从-100到100。
  当_xscale 的值为正数时,方向为正方向, 当_xscale 的值为负数时,方向为反方向。例如:
 -xscale=50,表示元件的宽度缩小到百分之五十,运动方向为正方向。
 
2,_yscale :表示在y 轴上的缩放比例和方向。大小从-100到100。 当_yscale 的值为正数时,方向为上方向, 当_yscale 的值为负数时,方向为下方向。例如:
 -yscale=-50,表示元件的高度缩小到百分之五十,运动方向向下方。

3,m1._x : 最简单,但是最基本的!分解如下:
m1---元件m1。元件名称可以随意起,最好是英文字母。
.  -----  的。
_x----x坐标。
m1._x ----解释为: 元件m1  的 x坐标。
n._y   ---- 解释为: 元件n  的 y坐标。
中间那个英语的句号很重要,我专门用“的”来表述它。

 
4,_xmouse:鼠标的x坐标。 注意和元件写法的区别,第一是次序不同,第二是中间没有哪个点(英语中的句号)
  mouse——中文词义是老鼠,鼠标。
  _ymouse: 鼠标的y坐标。

 

                 第五节 单元件转向鼠标跟随

   单元件转向鼠标跟随,在做完上面4节的练习之后,x,y坐标的跟随,已经没有问题,这时你只需再加上转向的命令,让元件转动,并且转动的角度和鼠标转动的角度一样。转动的图例,用在如小鱼游水类的动作效果很好。我因为没有这类小动画,只好自己画了一个。制作过程:
1,图层1第一桢导入元件,填写实例名称,填写动作代码:
mc._x+=(_xmouse-mc._x)/6;
mc._y+=(_ymouse-mc._y)/6;
mc._rotation=57.3*Math.atan2(_ymouse-mc._y,_xmouse-mc._x);

2,在第二桢插入关键桢,加如下代码:
gotoAndPlay(1);

测试,导出。

说明:
上面的代码中:
mc._rotation --- 元件mc 的转动(角度),转动的角度是以度数为单位的。
57.3--- 与一弧度(弧度也是角度的单位)相当的角度数。
Math --- 这里可理解为数学表达式。
atan2--- 在flash 软件里,atan2和它后面小括号里的内容,是一个和与反正切函数有关的,求角度的表达式。稍后我会专门解释,您现在可以先照抄,以后慢慢理解。

gotoAndPlay(1);
这句话用的最多,我来分解以下:
go --- 动词,走,去,离开 ---。
to --- 介词,往,向,到---。
And---连词, 和,并且 ---。
Play---动词,播放,玩,扮演 ---。
(1)--- 第一桢。
   这是一个命令句, 可理解为:走,去播放第一桢!这样影片就会不断接到这个命令,并且按第一桢的动作代码执行,在用桢动作代码的动画中,如果没有这一个看似简单的命令,光有第一桢,任何动画都懂不起来!

 

                   第六节 多元件转动鼠标跟随
多元件转动的鼠标跟随,和多元件转向的跟随的道理一致,这里就不赘述。上面,我做了个只有两个元件的例子,在这幅图中,只有鱼身和鱼头两个元件,但已经可以说明问题。其制作过程如下:
1,导入元件,注意要先导入鱼身(ys),再导入鱼头(yt),因为后导入的在上层。第一桢的动作代码:
yt._x+=(_xmouse-yt._x)/6;
yt._y+=(_ymouse-yt._y)/6;
yt._rotation=57.3*Math.atan2(_ymouse-yt._y,_xmouse-yt._x);
ys._x+=(yt._x-ys._x)/2;
ys._y+=(yt._y-ys._y)/2;
ys._rotation=57.3*Math.atan2(yt._y-ys._y,yt._x-ys._x);

  在上面的代码中可以看到:鱼头跟着鼠标转,鱼身跟着鱼头转。元件yt和ys的距离可以通过改变式中的除数(本例中为2),或改变元件的注册点来改变。

2,第二桢的代码:
gotoAndPlay(1);

说明:
本例中鱼身转动的代码也可以用鱼身直接跟着鼠标转动的形式来写,效果一样。
ys._rotation=57.3*Math.atan2(_ymouse-ys._y,_xmouse-ys._x);
在有多元件跟转的情况下(如同时拉动几条鱼),建议采用这种方法,因为可以彼此复制,更方便一些。

 

        最简单的鼠标跟随第一至第七小节的总结:
   在以上的六节中,我讲述了3种跟随的动作:
1,行走跟随。
2,转向跟随。
3,转动跟随。
  行走跟随的一般原则:
元件1跟着鼠标走,元件2 跟着元件1走,元件3跟着元件2走。
  转向跟随的一般原则:
元件1跟着鼠标转向,元件2 跟着元件转向,元件3跟着元件转向。
 转动跟随的一般原则:
元件1跟着鼠标转动,元件2 跟着元件转动,元件3跟着元件转动。
  在实际运用中,常常可以采用简化的原则:
即:所有元件跟着鼠标走,所有元件跟着鼠标转向,所有元件跟着鼠标转动,其效果往往与按一般原则作出的相差无几。
  简化的行走代码:
  m1._x+=(_xmouse-m1._x)/3;
   m1._y+=(_ymouse-m1._y)/3;
   m2._x+=(_xmouse-m2._x)/4;
   m2._y+=(_ymouse-m2._y)/4;
   m3._x+=(_xmouse-m3._x)/5;
   m3._y+=(_ymouse-m3._y)/5;
  以下类推。 注意改变最右边的除数,以调整元件的先后。除数越大,元件离鼠标越远!
   简化的转向代码:
  if(_xmouse>m1._x)  {m1._xscale=100}else{m1._scale=-100};
   if(_xmouse>m2._x)  {m2._xscale=100}else{m2._scale=-100};
   if(_xmouse>m3._x)  {m3._xscale=100}else{m3._scale=-100};
  以下类推。我在第4节的实例中就用了上面的办法。
   简化的转动代码:
  m1._rotation=57.3*Math.atan2(_ymouse-m1._y,_xmouse-m1._x);
   m2._rotation=57.3*Math.atan2(_ymouse-m2._y,_xmouse-m2._x);
   m3._rotation=57.3*Math.atan3(_ymouse-m3._y,_xmouse-m3._x);
   以下类推。
  简化的代码,在填写时,先写完一行后,下面的可以采用复制,粘贴的办法完成。

 

         

(注:您的设备不支持flash)

声明:以上内容仅用户个人行为,不代表本站(老小孩社区)观点,如有侵权或其他行为用户自己承担相关责任与本站无关。【举报文章】
点赞0 收藏 1 推送到圈子 分享
微信扫二维码分享

等0人点赞

本文作者

加好友
评论字体大小调节: | |

精选留言

您需要登录后才能回复

登录立即注册

请选择你想添加的收藏夹

新建收藏夹

收藏夹名称

©2017 老小孩网站版权所有 | 沪ICP备08012383号    举报电话:021-64323922
×
×