Fireworks动画--飞机和降落伞

  现在我们来学习用Fireworks制作动画,为了使动画看起来更加真实,我们采用飞机和降落伞的照片作为素材,同时还可以学习套索工具的使用和外部图像的输入方法。在本例中,你将要实际接触到动画制作必不可少的概念--- Layer(层)、Frame(帧)、Symbol(符号)和Instance(引用),以及如何合理地使用它们。如果你能仔细地按照下面的方法操作,本例的动画十分精彩,近似于一段电影画面。

  第一步:导入飞机图片并去掉背景。打开一个新文件,Width=250,Hight=120,背景色为#0066FF。选择File > Import(导入外部文件),在目录中选择飞机的照片(本例使用的照片已事先调整好大小,为GIF格式)。在工具箱中选择套索工具的Polygon Lasso,用鼠标细心地沿着飞机的外部轮廓一小段连着一小段地选取, 当选取的路径首位相连时,击下鼠标左键,轮廓线变为虚线。然后在主菜单中选择Edit > Cut,就把选取的飞机图像剪下并存入剪贴板中,再选择Edit > Deselect,Edit > Clear,清除掉剪下以后剩余不要的照片。

  第二步:把飞机图像变为Symbol。选择主菜单的Edit > Paste,就把刚才剪下的飞机图像拷贝到了画板上。点击一下飞机图像,选择Modify > Group,再选择Insert > Convert To Symbol,把飞机图像变为一个符号,在出现的对话框中,Name栏输入一个名字,如Plane(不要输入中文名),Type选择Graphic,再点击OK,就把飞机图像变成了一个Symbol(符号)。

  选择Edit > Clone,克隆出一个飞机的Instance,把新的飞机拉到上面一些,再选中原来的(第一个)飞机,选择工具箱中的Trasform按钮,拖动出现在第一个飞机周围的方框角上的小方块,把它调到较小,再把克隆出的(第二个)飞机拖到左上方画板边沿以外的位置,按着Shift键,把两个飞机都选中。

  第三步:让飞机飞起来。选择Modify > Symbol > Tween Instances,在出现的对话框中,Step栏改为20,表示飞机从右下方飞到左上方的过程要用到20帧,勾上下面的小方框,点击OK。

  选择Window > Frames,打开帧面板,出现了一个有22行的帧编辑框,按着Shift键把他们全部选中,点击帧面板右上角的小三角形,选择Properties,在出现的对话框中把20改为10,使每一帧的播放时间由0.2秒变为0.1秒,再勾上下面的小方框。在帧面板的任意位置点一下鼠标,飞机的动画就完成了。按下屏幕右下角的播放键看一看,你会看到飞机由远处飞来,飞得越近就显得越大,最后从画面的左上方飞出。

  第四步:降落伞的第一阶段。本例的设计思想是,飞机刚要飞出画面以前,有一副降落伞从飞机上降下,降落伞的下降过程分为三个阶段:未张开时快速掉下,未张开到迅速张开,张开以后缓慢摇摆下降。本步骤为它的第一阶段。点击Frame面板左边的Layer(层),打开Layer面板,你会看到已经有了Web Layer和Layer1两个层,而Layer1(第一层)上放的就是我们前面做的飞机动画。点击Layer面板右上角的小三角形,选择New Layer(建立新层),弹出一个对话框,如图。

  不必改动它,点OK,就会在Layer面板上加入Layer2(第二层),降落伞就将放到这一层上。

  点击Layer面板上部的Frame信息框,选中Frame18,再选中Layer2,选择主菜单File > Import ,输入降落伞的照片(已经事先做成了GIF格式的透明图片),然后仿照以上第二步和第三步的方法,把降落伞图像变为一个Symbol,取名Parash,并在其下方克隆出第二个降落伞图像,把两个图像都调整到最小,第一个移到紧靠飞机下腹位置,第二个移到它的左下方适当位置,然后选择Modify > Symbol > Tween > Instaces,帧数输入7,就完成了降落伞的第一阶段制作。编辑这一层时,为了不影响已经做好的第一层,可以把第一层加上锁(点击Layer面板中Layer1那一行眼睛图标右面的空格),图中已表示出来。

  第五步:降落伞的第二阶段。在Layer面板中,选择Frame 26(即已做好的最后一帧),然后选中图上的小降落伞图像,又克隆出另一个降落伞,并把它调整到较大,移动到紧靠前一个小降落伞的旁边,同时选中这两个降落伞图像的引用。

  选择Modify > Symbol > Tween Instances,帧数改为2,勾上下面方框。

  第六步:降落伞的第三阶段。选定Layer面板中的Frame 29(第29帧),在图中又克隆出另一个降落伞,并把它调整到稍大,同时略微旋转一个角度,拖动它到前一个降落伞左下方,同时选中两个降落伞。

  再选择Modify > Symbol > Tween Instances,帧数改为6。

  在Layer面板中选择Frame 36,重复以上步骤,但第二个引用要移动到前一个的右下方一点。再选择Frame 43,再重复以上步骤,但要把把新克隆的降落伞大部分移到画面以外。

  最后,打开Frame面板,同时选中Frame 29以后直到最后一帧(按着Shift键),点击右上角的小三角形,选择Properties,把数字10改为20,即把降落伞第三阶段的下降速度减慢一倍。

  至此,本实例全部完成,按下屏幕右下角的播放键看看效果,如果你的电脑不太高级的话,可能感觉整个稍慢,但是当你输出成为Animated GIF(GIF格式的动画)后,再播放时速度就可以了,效果不错吧?
  下面是这个动画中的两帧,最后一副实际上是整个动画,但是如果你不自己动手去做的话,就只有书上的图片,它怎么能动起来呢?
 

时间: 2024-11-03 11:43:34

Fireworks动画--飞机和降落伞的相关文章

Fireworks动画制作:飞机和降落伞

今天我们来学习用Fireworks制作一个精彩的动画,从这个例子中我们可以学习套索工具的使用和外部图像的输入方法,同时你还会实际接触到动画制作必不可少的概念如Layer(层).Frame(帧).Symbol(符号)和Instance(引用),以及如何合理地使用它们. 为了使动画看起来更加真实,我们采用飞机和降落伞的照片作为素材,如果你能仔细地按照下面的方法操作,就能做出和本例一样近似于电影画面的精彩动画. 第一步:导入飞机图片并去掉背景.打开一个新文件,Width=250,Hight=120,背

Fireworks动画优化与导出详解

详解|优化 制作GIF文件的软件很多,常见的有Animagic GIF.GIF Construction Set.GIF Movie Gear.Ulead GIF Animator等.Fireworks MX 2004在制作GIF动画上有着强大的功能.动画制作完成之后,就需要我们对其进行优化以达到最佳的显示效果,并且经过导出设置以及预览等步骤,最终将其导出为GIF动画格式.下面我们就来看看GIF动画的优化和导出过程. 一.优化动画 GIF动画的优化与我们在第五章提到的对其他图像的优化方法一样,可

Fireworks动画制作基本类型

Fireworks在Gif动画制作和处理上有它独到的强大功能和灵活简便性,它的内置指令能够生成的动画形式比较简单,大致可以分为两个类别:一是基本运动类,二是特效运动类,但是只要我们熟练掌握,并添加进自己的创意,一样能做出很酷炫的动画效果. 注意:在本篇中只针对软件直接生成的动画效果进行分析,不做手工分帧动画的讨论. 提示:在FW中有两种"符号"可以通过软件内建指令产生运动及其它变化的效果.一是"图形符号(Graphic Symbol)",二是"动画符号(A

Fireworks动画类型及制作详解

详解 我一直认为FW比之PS强大的地方主要体现在两点上,一是向量图形编辑模式与位图编辑模式的完美整合, 二就是纯图形处理功能与GIF动画制作功能的整合.至于说在软件的使用简便性上的对比,我现在到觉得无益 探讨,盖因对于某一软件使用操作的得心应手完全取决于使用者的喜好.续论上述两个优势.图形模式混合处 理这一功能,ADOBE在PS6中以经引入,我们抛之不谈.就动画处理图形处理的整合上来说,PS比之FW仍有相 当距离.现在就让我们共同走进FW中来仔细了解一下FW在动画处理上的强大功能及其灵活简便,并

Fireworks 动画头像制作

现在做一个让头发动起来!眼睛眨起来的效果!有点类似一篇我读过的flash教程!呵呵-- 1.原型照片!缩到自己想要的比例! 2.把头发去掉! 3.用钢笔细心的画出头发!注意要把头发里面不要空白! 也要填起来!因为过会头发还要摆呢! 4.选择Reshape Area Tool!然后参数设置如图! 5.细心的画一下!动一点点!呵呵--头发就动了!就用这种方法!再来两到三次!头发幅度逐渐加大!就样就形成了头发动起来的效果! 6.眼睛没有别的办法!这就是我自己点出来的! 最终的效果:

Flash实例教程:漫天流星耀夜空

  新建影片,宽为300,高为300,背景色为黑色.新建元件"流星",使用rectangle tool设置stroke color为无,fill color为白色,画一个矩形,再利用arrow tool调整矩形边框使其如图所示.新建元件"流星动画",从library中拖拽"流星"元件到layer 1,在effect面板中设置其alpha=0%,分别在第20,45帧建立关键帧,单击第20帧,将元件alpha 值调整为100%,分别调整第20与45帧

Fireworks礼花动画制作教程学习

  Fireworks 不仅具备编辑矢量图形与位图图像的灵活性, 还提供了一个预先构建资源的公用库,本教程是关于Fireworks礼花动画制作教程的讲解,该文章中包括动画制作的8个步骤,以下请看正文: 1. 新建一文档,画布大小为 200 * 200,底色为黑(#000000). 2.用画圆工具画一个圆形,大小为 10 * 10,Fill 为 None,调节 Stoke . 3.选中刚画好的圆形(其实这时已经就是静态的礼花了),按 F8 键转换为 Animation Symbol. 4.调节弹出

在Fireworks中制作淡入淡出动画效果

淡出|淡入 淡入淡出动画效果 用fireworks做的淡入淡出效果,有人说看PNG格式看不出真正的步骤,所以在此补上这样一篇教程. 对象的淡入淡出效果是firewoks可以创建的普通效果之一,对两个链接对象进行插帧的时候,其中一个对象的不透明度设置为0%,一个对象的不透明度设置为100%,就可以获得淡入淡出效果. 制作步骤: 一.首先新建一个文件,画一个圆,在FILL面板中设置edge:feather:10,设feather的目的是在运动过程中边缘不至于太生硬,影响效果.点中圆,按F8键,选择t

Fireworks创意遮罩动画制作

本例使用Fireworks遮罩效果制作动画,对遮罩层的制作是本例的关键. 本实例用到的一些基本操作包括:钢笔工具.帧(Frames)面板.羽化填充(Feather).遮罩(Mask). 制作这类遮罩层有两种思路: 1.将人物脸部精确的抠出来,转成灰度,然后使用反色.用这种方法做的效果可能是最好的,能够以人物面部的明暗影响滚动的文字,使文字若隐若现,但完全在Fireworks中做是比较困难的,尤其是在抠图上最好能借助Pototshop,以达到最完美的效果. 2.使用圆形工具和钢笔工具绘制出脸部的大