注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

戛戛的动感天空

 
 
 

日志

 
 

如何制作鼠标跟随的鱼  

2008-04-03 22:44:44|  分类: 教程学习 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

朋友你可能见过下面效果的例子,是否也想自己做一个呢?下面我就给朋友介绍一下制作过程.
示例图

1.制作鱼的各组成元件

我们将一条鱼拆分成许多节,根据鱼的外形特点将所有节分成3类:鱼头、带鱼鳍的鱼身和不带鱼鳍的鱼身,将这3个元件都做成带链接的影片剪辑元件。

(1)启动中文版Flash MX,按快捷键Ctrl+F8新建一个影片剪辑元件,并命名为tno。

(2)选择椭圆工具,在元件编辑区中绘制一个无边框的椭圆。

(3)选择箭头工具,选中椭圆,单击常用命令工具栏中的对齐按钮,在出现的“对齐”面板中确定相对于舞台按钮为按下状态,单击按钮使椭圆与舞台中心对齐,如图2所示。

如何制作鼠标跟随的鱼 - 戛戛 - 戛戛的动感天空 

图2 使椭圆与舞台中心对齐

(4)选择箭头工具,将椭圆的轮廓编辑成如图3所示的效果。

(5)选择颜料桶工具,在颜色区选择红色放射渐变色作为填充色,用渐变色填充图形。

(6)选择转换填充工具,单击图形,对渐变色进行调整。鱼头形状和调整渐变色的过程如图3所示。

如何制作鼠标跟随的鱼 - 戛戛 - 戛戛的动感天空图3 修改轮廓和填充渐变色

(7)使用椭圆工具在鱼头旁边的空白区域绘制两颗鱼眼,并用箭头工具对眼睛的形状进行编辑。

(8)使用刷子工具为鱼眼添加两颗黄色的眼珠。

(9)使用箭头工具框选鱼眼,选择“修改”/“组合”命令将鱼眼组合在一起。并可以适当调整它的大小。

(10)将鱼眼拖放到鱼头的合适位置。制作鱼眼的过程如图4所示。

如何制作鼠标跟随的鱼 - 戛戛 - 戛戛的动感天空图4 制作鱼眼

(11)使用箭头工具框选鱼头图形,在属性面板中对其参数作如图5所示的调整。tno元件就做好了。

如何制作鼠标跟随的鱼 - 戛戛 - 戛戛的动感天空 

图5 调整tno元件的参数

(12)按快捷键Ctrl+F8新建一个影片剪辑元件,并命名为fin。现在开始设计带鳍的鱼身。

(13)qi元件的形状稍微复杂一点,但方法与制作tno元件类似,在此不再赘述。绘制好后依然为其填充红色渐变色并进行调整,在属性面板中修改它的参数,如图6所示。

如何制作鼠标跟随的鱼 - 戛戛 - 戛戛的动感天空图6 qi元件及其参数

(14)在时间轴的第1帧上单击鼠标右键,选择“创建补间动画”命令,库中将自动生成一个名为“补间1”的图形元件。

(15)在时间轴上的第8帧单击鼠标右键,选择“插入关键帧”命令;在第16帧也同样插入一个关键帧。

(16)在第8帧上使用箭头工具选中图形,在属性面板的颜色下拉列表框中选择Alpha,将出现在其后的数值框中的数值改为50%,这样,鱼鳍就可以“动”起来了。

(17)按快捷键Ctrl+F8新建一个影片剪辑元件,并命名为ti。下面绘制不带鱼鳍的鱼身,其效果及参数如图7所示。

如何制作鼠标跟随的鱼 - 戛戛 - 戛戛的动感天空图7 ti元件及其参数

2.为元件添加链接

在添加脚本之前,需要先为元件添加链接,以便在脚本中使用attachMovie命令对它们进行调用。

(1)单击库面板右侧的宽库视图按钮,将库面板展开。

(2)在ti元件上单击鼠标右键,在出现的快捷菜单中选择“链接”命令,出现如图8所示“链接属性”对话框。

(3)在“链接属性”对话框中选中为动作脚导出复选框,“标识符”文本框中自动出现默认与元件名相同的链接标识符ti。单击“确定”按钮,链接即添加成功。添加链接的步骤如图8所示。

如何制作鼠标跟随的鱼 - 戛戛 - 戛戛的动感天空图8 为影片剪辑元件添加链接

(4)按照相同的方法为qi和tno元件添加链接,使用默认的标识符。添加完链接的库面板如图9所示。

如何制作鼠标跟随的鱼 - 戛戛 - 戛戛的动感天空图9 添加完链接的库面板

3.添加脚本

下面只需添加脚本,鱼就可以动起来了。

(1)回到主场景,在动作面板中为第一帧加入以下Actions,对“鱼”进行初始化。

n=22;
r=12;
for(i=1;i<n;i++){
 if(i==1){
 attachMovie("tno","tt"+i,(n+1)-i);
 }else if((i==3)||(i==13)||(i==21)){
  attachMovie("qi","tt"+i,(n+1)-i);
 }else{
  attachMovie("ti","tt"+i,(n+1)-i);
 }
}
for(i=1;i<n;i++){
  if(i<20){
 setProperty("tt"+i,_xscale,100+i-0.25*i*i);
 setProperty("tt"+i,_yscale,100+i-0.25*i*i);   
  setProperty("tt"+i,_alpha,100-i*3);
  }else{
   setProperty("tt"+i,_xscale,30);
            setProperty("tt"+i,_yscale,35);
  setProperty("tt"+i,_alpha,15);   
  }
}

2)在时间轴上的第二帧上单击鼠标右键,选择“插入空白关键帧”命令,插入一个空白关键帧。打开动作面板,加入以下Actions,以控制鱼的动作。

tt1._x+=(_xmouse-tt1._x)/r;
tt1._y+=(_ymouse-tt1._y)/r;
ttr1=Math.atan2(tt1._y-_ymouse,tt1._x-_xmouse);
tt1._rotation=ttr1*180/Math.PI;
for(i=2;i<n;i++){
 this["ttr"+i]=Math.atan2(this["tt"+i]._y-this["tt"+(i-1)]._y,this["tt"+i]._x-this["tt"+(i-1)]._x);
 this["tt"+i]._x+=(this["tt"+(i-1)]._x-this["tt"+i]._x)/1.1+7*Math.cos(this["ttr"+(i-1)]);
 this["tt"+i]._y+=(this["tt"+(i-1)]._y-this["tt"+i]._y)/1.1+7*Math.sin(this["ttr"+(i-1)]);
 this["tt"+i]._rotation=this["ttr"+i]*180/Math.PI;
}

3)执行第(2)步后并不能使鱼跟着鼠标动起来,因为随着动画的循环放映将不断为鱼的各段赋初始值。现在我们需要在第3帧的位置插入一个关键帧,并在动作面板中为其加入以下一行Actions
gotoAndPlay(2);


在动画播放到第3帧的时候,将自动跳转到第2帧,构成鱼身的各影片剪辑实例的大小和方向的值将被更新。以此不断循环,一条灵活地跟随鼠标游动的鱼儿就诞生了。
(4).你可以再新建第2层添加荷叶.不在多说了,自己做一个看看吧,不懂的话可以到我博客留言.

戛戛QQ:547939806            Email wrx-123123@163.com

 要想看更多的动画制作,请朋友到我的博客http://wrx-123123.blog.163.com/

.

如何制作鼠标跟随的鱼 - 戛戛 - 戛戛的动感天空

  评论这张
 
阅读(5893)| 评论(57)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017