学院首页 软件应用 编程开发 创意设计 认证培训 软件论坛
Flash Fireworks Dreamweaver Photoshop CorelDraw Illustrator FreeHand 3DsMAX AutoCAD

您的位置:学院 >> 创意设计 >> Flash >> Flash实例制作剖析:蝶恋花


Flash实例制作剖析:蝶恋花


  通过这个蝴蝶在花丛中翻飞的实例我们可以学习Flash图层、引导线运动、帧与补间动画等技术。

  主要使用工具:箭头工具(选择工具)、任意变形工具、铅笔工具。

  请大家先看看实例:

/imagelist/2007/120/i82fddhxnvsv.swf

  素材如下:

  

  制作方法如下:

  1、启动FLASH,建新文件:550x400像素。

  

  2、在图层1分别导入背景图和 4个透明背景蝴蝶:文件--导入--导入到库。

  

  3、点窗口--库,打开库。把库里的背景图“蓝花花”拖进舞台调整和舞台一样大小:

点击放大此图片

  4、点窗口--对齐,调出对齐面版,点相对于舞台,水平对齐,垂直对齐。

  

  5、在时间轴第100帧插入帧。锁定图层1。

点击放大此图片

  6、新建图层2,把蝴蝶1 从库拖进舞台,右键点蝴蝶1 --转换为元件(影片剪辑),元件名为蝶1:

点击放大此图片

  7、右健点蝶1--编辑,进入元件编辑区。右键点蝶1 --分离,打散蝴蝶图片:

点击放大此图片

  8、选用任意变形工具,蝶1 图片四周出现8 个小方框,把鼠标放在右下的小方框上,待鼠标变为一个园形箭头,鼠标轻轻向左一拖,把蝴蝶转个方向:

点击放大此图片

  9、移动蝴蝶,使蝴蝶的头部正好在舞台的正中央,右键点时间轴上的第3帧,插入关键帧:

点击放大此图片

  10、在第3帧,用箭头工具框选蝴蝶的一个翅膀:

  

  11、再用任意变形工具,把翅膀压扁:

  

  12、用同样的方法做好另一个蝴蝶翅膀:

 

  13、点第1帧,点修改--组合;点第3帧,点修改--组合。

  

  14、点场景1,返回场景1。为了方便操作,我们把舞台调整为50%:

点击放大此图片

  15、在场景1的第2层,分别在40、60、100帧插入关键帧,并分别在1-40、46-60、60-100帧内任意一个点创建补间动画。锁住图层2,插入引导层:

点击放大此图片

  16、在引导层的第1帧,选用铅笔工具: 选项平滑,画出蝴蝶飞行的轨迹(引导线),用橡皮擦工具在引导线上,在您想要蝴蝶停留的位置上擦出一个小缺口,锁定引导层,打开图层2 的锁:

 点击放大此图片

  17、在图层2 的第1 帧,用箭头工具将蝶1 元件拖到引导线的最左端,蝶1 的中心点一定要压在引导线上:

点击放大此图片

  18、在图层2 的第40帧,用箭头工具将蝶1 元件拖到缺口的左端,蝶1 的中心点一定要压在引导线上:

点击放大此图片

  19、在图层2 的第60帧,用箭头工具将蝶1 元件拖到缺口的右端,蝶1 的中心点一定要压在引导线上:

点击放大此图片

  20、 在图层2 的第100 帧,用箭头工具将蝶1 元件拖到引导线的最左端,蝶1 的中心点一定要压在引导线上:

点击放大此图片

  OK!现在咱们来测试影片吧。这是单个蝴蝶恋花的做法,如果您说,我也要象实例上那样三对蝴蝶飞舞在花丛中,那就不要怕麻烦喔''

  制作第二个蝴蝶

  1、把图层2 和引导层锁好,增加图层3:

点击放大此图片

  2、为了方便操作,图层2 和引导层的眼睛关闭,把蝴蝶2 从库里拖出舞台。重复6'14 步骤得到元件蝶 2:

点击放大此图片

  3、在场景1 的第3 层,分别在35、55、100帧插入关键帧,并分别在 1--35、36--55、56--100 帧内任意一个点创建补间动画。锁住图层3 ,打开引导层和引导层的眼睛:

点击放大此图片

  4、操作方法同第16步。在引导层的第1 帧,选用铅笔工具: 选项平滑,画出蝴蝶2 飞行的轨迹(第二条引导线),用橡皮擦工具在引导线上,在您想要蝴蝶停留的位置上擦出一个小缺口,锁定引导层,打开图层3 的锁:(只要操作正确,引导线画好,蝴蝶元件会自动跑上引导线)。

点击放大此图片

  5、这步操作方法与 17、18、19、20 步相同:

  在图层3 的第 1 帧,用箭头工具将蝶2 元件拖到引导线的最左端,蝶2 的中心点一定要压在引导线上。
  在图层3 的第35帧,用箭头工具将蝶2 元件拖到缺口的左端,蝶2 的中心点一定要压在引导线上。
  在图层3 的第60帧,用箭头工具将蝶2 元件拖到缺口的右端,蝶2 的中心点一定要压在引导线上。
  在图层3 的第100 帧,用箭头工具将蝶2 元件拖到引导线的最左端,蝶2 的中心点一定要压在引导线上。
  注意:不管做多少层,最后一帧一定要对齐,否则全盘乱套。

  好!第 2个蝴蝶也做好了,测试一下。

  第 3、4 个蝴蝶和上面两个蝴蝶做法一样。

  1、同第6 '第13步,分别做好元件(影片剪辑)蝶3、元件(影片剪辑)蝶4。
  2、在第8 步后面把蝶3 蝶4 调小一些。
  元件大小的调整方法:点修改--变形--缩放与旋转,在弹出的缩放和旋转对话框中设置缩放为50'80(随意),确定。
  3、做好了元件蝶3 ,点场景1,不用做引导线,把蝶3 摆放在您认为合适的地方。(参看实例)
  4、做好了元件蝶4 ,点场景1,不用做引导线,把蝶4 摆放在您认为合适的地方。(参看实例)
  5、第5 第6 个蝴蝶更容易做了,把元件蝶3和蝶4 直接拖进场景,随便找地方安装就OK。(参看实例)

  按CTRL+ENTER测试 ,保存*.fly 导出影片*.swf (完毕)。


技术文章快速查找

栏目导航
软件应用
·操作系统 ·杀毒防黑 ·应用软件
·聊天软件 ·网络软件  
Web开发
·ASP ·JavaScript ·CGI
·JSP ·VbScript ·Web服务器
·PHP ·XML  
开发语言
·VB ·VC ·ASP.NET
·Java ·C/C++ ·Delphi
数据库开发
·MySQL ·SQL/Access ·PowerBuilder
·Oracle ·DB2  
网站设计
·Flash ·Dreamweaver ·HTML/CSS
·Fireworks ·FrontPage  
平面设计
·Photoshop ·CorelDraw ·AutoCAD
·FreeHand ·Illustrator ·3DsMAX
媒体动画
·Director ·Authorware ·Maya
·视频处理    


相关软件 产品库推荐
·笔记本 ·台式机 ·服务器
·数码相机 ·手机 ·GPS
·DV摄像机 ·MP3 ·MP4
·CPU ·硬盘 ·内存
·主板 ·显卡 ·显示器
·打印机 ·投影机 ·路由器

晕哦,为什么我的蝴蝶的翅膀不动啊????...
游客 发表于2008-5-22 16:25:53
讲得很明白,像我这样很笨的人也学会了.谢谢...
游客 发表于2008-5-1 15:51:17
对"Flash实例制作剖析:蝶恋花"的评论 - 快速回贴
内容:
  [完成后可按Ctrl+Enter发布]

百度中 Flash实例制作剖析:蝶恋花 相关内容
Google搜索中 Flash实例制作剖析:蝶恋花 相关内容
雅虎中 Flash实例制作剖析:蝶恋花 相关内容
Sogou搜索中 Flash实例制作剖析:蝶恋花 相关内容

相关软件 最新回复帖子:

·Flash实例制作剖析:蝶恋花
·数据库安全基础入门知识简介
·掌握VB中的ADO数据对象编程
·AutoCAD造型实例:十字形螺丝刀头
·嵌入式Web视频点播系统实现方法
·Visual Basic变量的基础学习
·用VB6.0制作画图板
·给AutoCAD的DWG图纸文件瘦身
·用Photoshop通道为漂亮MM照片抠图
·在JSP中访问数据库大全


  相关软件 Flash实例制作剖析:蝶恋花相关文章
Flash文件中多个swf调用的路径问题 Flash制作随意飘飞的彩色肥皂泡
用Flash制作动态放大镜画面效果 实例详解AS代码完成Flash补间动画
谈Flash脚本与时间轴动作的执行顺序 Flash AS代码简单制作飞速旋转效果
设计思考:Flash Web结构浅析 另类技巧妙设置Flash背景颜色
用Flash 8滤镜打造视觉冲击特效 用于Flash游戏地图显示的AS代码
Flash制作精彩“时空穿梭”视觉特效 Flash制作仿苹果界面的互动图标界面
Flash制作精彩的动态画图板 Flash制作彩色线条动态图案生长动画
Flash最常用AS语法及语句总结 Flash实例:80行AS代码打造奇幻光影
Flash制作环形立体旋转的动态文字 Flash ActionScript绘制动态曲线
Flash AS代码实现小球沿路径移动 用Flash的AS脚本生成动态统计饼图