关于我们 广告服务 社区论坛
设为首页 加入收藏

行业新闻
服 务 器
模版下载
建站指南
冲浪宝典
办公软件
网站运营
操作系统
QQ 专题
网页制作
安全防御
视频教程
网络编程
SEO专区
软件下载
图像设计
Cisco
网页特效
Wap 技术
联盟赚钱
网页素材
 首页 | 企业建站 | 网页制作 | 网站运营 | 网络编程 | 图像设计 | 冲浪宝典 | 操作系统 | SEO专区 | 联盟赚钱 | Cisco

欢迎来到e天下网络首页>>图像设计>>FLASH>>正文|Flash制作美丽的蜻蜓飞舞效果动画

Flash制作美丽的蜻蜓飞舞效果动画

[ 来路:网页教学网      时间:2007-7-10 3:36:05    点击: ]

 

  演示效果:

点击这里下载源文件

  制作步骤:

  1.新建立一个Flash文档,修改其属性如下图所示:

  2.在主场景中把图层1改名为back,这是背景层,我们选择矩形工具绘制一个550*300的矩形正好和舞台重合,在这里要使用混色器面板,设置线性填充效果如下图:

  3.之后我们新建一个元件,画一些草,为了让动画效果更好你可以让草也动起来,在这里我制作的是一个静止的图,如下图所示:

  4.接下来我们制作蜻蜓动画,蜻蜓动画其实只是蜻蜓的四个翅膀在动,所以我的方法是先建立翅膀静止的元件,然后建立翅膀动的元件,然后组织成为一个蜻蜓电影剪辑元件.绘制过程如下:

  美化一下翅膀:

  组织成一个蜻蜓,把翅膀旋转一下就可以了!在此不详细叙述.

  继续美化蜻蜓身体:

  美化一下蜻蜓的翅膀:

  组织成一个效果较好的蜻蜓:

  5.这时我们新建立一个电影剪辑元件,命名为trans,绘制一个小的白色矩形,效果如下(注意我已经将显示比例调到了200%):

  6.回到主场景,新添加一个"草"层,然后把我们制作的草拖出来,连续拖出两次,使草看起来错综复杂,效果如下:

  7.新建立一个图层"蜻蜓",然后把蜻蜓电影剪辑从酷中拖出来,依次重复5次,打开属性面板,分别给蜻蜓命名实例名为fly1,fly2,fly3,fly4,fly5,效果如下:

  8.新建立一个图层"trans",然后把蜻蜓电影剪辑从酷中拖出来,依次重复5次,打开属性面板,分别给蜻蜓命名实例名为transp1,transp2,transp3,transp4,transp5,效果如下:

  9.新建立一个图层"action",按F9打开动作面板添加如下指令代码:

probability = 30;
scene_width = 550;
scene_height = 300;
speed = 0.03;
MovieClip.prototype.smoothMove = function (speed, targetx, targety) {
 this._x += speed*(targetx-this._x);
 this._y += speed*(targety-this._y);
};
MovieClip.prototype.rotateTo = function (targetx, targety) {
 var diffX = targetx-this._x;
 var diffY = targety-this._y;
 this._rotation = Math.atan2 (diffY, diffX)*180/Math.PI;
};
_root.transp1.onEnterFrame = function () {
 if (random (probability) == 0) {
  target1X = random (scene_width);
  target1Y = random (scene_height);
 }
 this._visible = 0;
 this.smoothMove (speed, target1X, target1Y);
};
_root.fly1.onEnterFrame = function () {
 this.smoothMove (speed, transp1._x, _root.transp1._y);
 this.rotateTo (_root.transp1._x, _root.transp1._y);
};
_root.transp2.onEnterFrame = function () {
 if (random (probability) == 0) {
  target2X = random (scene_width);
  target2Y = random (scene_height);
 }
 this._visible = 0;
 this.smoothMove (speed, target2X, target2Y);
};
_root.fly2.onEnterFrame = function () {
 this.smoothMove (speed, transp2._x, _root.transp2._y);
 this.rotateTo (_root.transp2._x, _root.transp2._y);
};
_root.transp3.onEnterFrame = function () {
 if (random (probability) == 0) {
  target3X = random (scene_width);
  target3Y = random (scene_height);
 }
 this._visible = 0;
 this.smoothMove (speed, target3X, target3Y);
};
_root.fly3.onEnterFrame = function () {
 this.smoothMove (speed, transp3._x, _root.transp3._y);
 this.rotateTo (_root.transp3._x, _root.transp3._y);
};
_root.transp4.onEnterFrame = function () {
 if (random (probability) == 0) {
  target4X = random (scene_width);
  target4Y = random (scene_height);
 }
 this._visible = 0;
 this.smoothMove (speed, target4X, target4Y);
};
_root.fly4.onEnterFrame = function () {
 this.smoothMove (speed, transp4._x, _root.transp4._y);
 this.rotateTo (_root.transp4._x, _root.transp4._y);
};
_root.transp5.onEnterFrame = function () {
 if (random (probability) == 0) {
  target5X = random (scene_width);
  target5Y = random (scene_height);
 }
 this._visible = 0;
 this.smoothMove (speed, target5X, target5Y);
};
_root.fly5.onEnterFrame = function () {
 this.smoothMove (speed, transp5._x, _root.transp5._y);
 this.rotateTo (_root.transp5._x, _root.transp5._y);
};

  10.时间轴最终效果如下图所示:

  实例讲解完成!祝你好运,有不明白的地方可以与我联系:qq:76312395

::::站长友情提示:多花一分钟学点什么都好::::

 

上一篇:两只蝴蝶飞舞动画,Flash制作方法  下一篇:Flash制作一个模仿Acdsee浏览图片的效果

 ::热点信息::

 

= = 免责声明 = =

① 欢迎转载我网所刊信息,请注明“来源:E天下网络”。
② 凡本网注明“来源:XXX(非E天下网络)”的作品,均转载自其它媒体,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如因作品内容、版权和其它问题需要同本网联系的,请在30日内进行。
※联系方式:Airtofly@163.com

::推荐文章::

 

Photoshop 轻松打造神秘银河系

::网页制作::

 

初学:什么是DIV+CSS?有什么
网页制作实例CSS用一张图片实
用CSS控制图片自适应大小的方
小技巧:CSS列表标签出现问题
CSS网页设计中使用背景图片须
想让DIV居中,如何编写CSS的
总结两年以来使用DIV网页排版
DIV CSS技巧:对CSS命名的一
更多内容..

 

 

关于我们 广告服务 友情链接 合作伙伴 社区论坛 免责声明

Copyright © 2007   21kn.com Inc. All rights reserved.e天下网络工作室

网站白天客服QQ:26875416 (非24小时)  合作QQ:597004688    粤ICP备06026423号