FLASH编程蝴 蝶 飞 舞.docx
《FLASH编程蝴 蝶 飞 舞.docx》由会员分享,可在线阅读,更多相关《FLASH编程蝴 蝶 飞 舞.docx(13页珍藏版)》请在冰豆网上搜索。
![FLASH编程蝴 蝶 飞 舞.docx](https://file1.bdocx.com/fileroot1/2023-1/31/1208789c-a83a-4578-978f-bc1a1b2604ff/1208789c-a83a-4578-978f-bc1a1b2604ff1.gif)
FLASH编程蝴蝶飞舞
第1章
蝴蝶飞舞
本章要点
本章通过介绍一个非常有趣的实例,来帮助读者熟悉Flash的操作界面,并讲解Flash关键帧动画的制作。
本章主要涉及的知识点有:
时间轴、帧、关键帧、层的概念;对于帧的相关操作,如增加、删除、复制帧;对于层的相关操作,如增加、删除层,层的几种模式等。
本章内容主要包括
ØFlash的操作界面
Ø时间轴的相关概念
Ø帧的概念和操作
Ø层的概念和操作
实例说明
本例将制作一个蝴蝶飞舞的动画。
播放这个动画时,花盆中的小花在长大,伴随着花的开放,一只蝴蝶在翩翩起舞,忽然,小花伸长“脖颈”,将蝴蝶“吞”到“肚”中。
播放的画面如图1.1所示。
图1.1蝴蝶飞舞的运行画面
学习目标
通过本例学习,应能熟悉Flash的时间轴、工具箱、舞台等操作界面,了解Flash的基本操作和概念,掌握帧和层的应用,学会制作关键帧动画,为后面的复杂动画制作奠定良好的基础。
操作步骤
(1)运行Flash,选择【文件】|【新建】命令,创建新的Flash文件,如图1.2所示。
图1.2Flash的操作界面
提示
Flash操作界面的上方是菜单栏和工具栏,左面是工具面板,中间是舞台,所有动画中所有的“演员”都是在这个舞台上表演的,舞台的上面是时间轴面板,下面是动作、帮助、属性面板。
(2)舞台的大小是可以设置的,在图1.2下面的【属性】面板中,单击【大小】旁的按钮
则会弹出【文档属性】对话框,如图1.3所示。
图1.3Flash文档的属性设置对话框
在其中的【尺寸】文本框中输入宽和高的尺寸,该范例为360像素(px)×360像素,这样设置也就是说将来的舞台的大小就是360像素×360像素,在图1.3中还可以设置舞台的背景颜色、帧频等选项,本范例中背景颜色为系统默认的白色,帧频设置为8fps。
单击【确定】按钮完成属性设置。
提示
所谓“帧频”是计算机每秒显示的动画帧的数量。
对于大多数计算机显示的动画,特别是Web站点中播放的动画,8fps(每秒帧数)到12fps就足够了(默认的帧频为12fps)。
(3)双击【时间轴】面板中的文字“图层1”就可以修改图层的名称,将这个图层命名为“Frame”,如图1.4所示。
(4)在工具箱中选择【刷子】工具
,在工具箱下面的【颜色】区域
选择蓝色,在工具箱下面的【选项】区域中选择合适的刷子大小
,在图1.2所示的舞台中画一个框,如图1.5所示。
图1.4图层的命名图1.5用【刷子】工具绘图
提示
工具箱是在制作Flash动画过程中经常要使用的,工具箱中的各工具介绍如图1.6所示。
图1.6工具箱
(5)单击【时间轴】面板中的
,就会新建一个图层,如图1.7所示。
图1.7新建一个图层
提示
在【时间轴】面板的左边有一块区域是对层进行操作的,那么什么是Flash的层呢?
为什么一个Flash一般要分若干个层?
为了便于理解,可以将Flash的层跟我们比较熟悉的电影胶片进行比照,对于电影胶片来说,所有的人物、道具和背景等都是在一张底片上的,可以说电影胶片只有一层,而在Flash中,一般将人物放在一张“透明底片”上,将道具放在一张“透明底片”上,将背景放在一张“透明底片”上,这些不同物体的载体就构成了Flash的层。
如果将这几张透明的底片重叠起来,看到的效果是与这些人物、道具和背景在一层上的效果是一样的。
例如,图1.8、图1.9、图1.10、图1.11和图1.12这5张透明的“底片”,共同构成了图1.13。
图1.8 框架
图1.9 花盆
图1.10 植物
图1.11 蝴蝶
图1.12 背景
图1.13 合成图
其实完全可以将上面5张图中的物体画到一张图中,为什么在一层上可以完成的工作在Flash中要分成几层呢?
以这个例子来说,有些物体在整个动画的过程中是不变的,如框架、花盆、背景等,而有些物体在一些帧中是要发生变化的,如小花要不断的长大,蝴蝶要翩翩起舞。
Flash中的物体很多都是手画的,如果将这些变化的物体分别放在不同的层中,在画这个物体的时候,就不会担心由于自己不小心将其他物体“碰坏”了(在以后的例子中,也经常将一些对象分别放在不同的层,这样更便于维护)。
(6)双击【时间轴】面板中的文字“图层1”,将这个图层命名为“Pot”。
单击这个图层,图层就会变成蓝色。
蓝色的图层是处于编辑状态的。
在Pot图层单击并向下面拖动,Pot图层就会移到Frame图层的下面来,如图1.14所示。
图1.14 调整图层的位置
提示
层是有前后关系的,就像画在两层“透明底片”上的物体,前面的可以挡住后面的一样。
可以利用鼠标直接拖拽来改变它们的顺序。
越靠近上方,层的级别数越高。
层的级别数越高,层中的元素就越显示在前面。
(7)在Pot图层处于编辑状态下时,在舞台上画一个花盆,这时候所画的花盆实际上是画在了Pot图层中,在舞台上显示的效果如图1.15所示。
图1.15 两个图层中的物体显示效果
(8)新建一个Background图层,将其拖到图层的最下面,如图1.16所示。
图1.16 层的模式
提示
层有4种模式,充分利用这4种模式会给调试工作带来便利,节省许多宝贵的时间。
●当前编辑模式:
是由铅笔图标来表示的,说明使用者正在当前层进行绘画、调整、
编辑等。
●隐藏模式:
单击某层眼睛图标下面的小黑点就会出现一个红叉图标。
该模式使当
前层的内容都从舞台上隐蔽起来,这样有利于排除干扰,以便尝试多种方案。
●锁定模式:
单击某层小锁图标下面的小黑点就会出现小锁图标。
该模式使当前层
的元素处于锁定状态,使之不可以被选择工具选中,而且绘画工具也无法在锁定
层上创建对象。
●线框模式:
是由方形线框图标来表示的。
该模式使该层的元素均以轮廓线的方式
显示。
(9)在Background图层中绘制一个背景,效果如图1.17所示。
图1.17 绘制了背景的效果图
(10)新建一个Plant图层,在时间轴的右面有一些刻度和一些数字(1、5、10、15…),与这些刻度相对应的每一层中,都有一些“格子”,这些“格子”是放“帧”的位置,每新建一个层在第一帧的位置就会自动添加一个“关键帧”。
如果在这个关键帧中绘制了内容,这个关键帧就显示一个实心的黑点;如果关键帧中没有内容,就显示一个空心的点,如图1.18所示。
图1.18时间轴上的关键帧
提示
你看过电影的胶片吗?
很长的电影胶片其实是由一张张“照片”组成的,连续播放这些“照片”,电影中的“人物”就动起来了。
同样,“帧”就是Flash中的“照片”,很多帧中的内容连续播放,Flash就活起来了。
时间轴由图层和帧等组成,图层位于时间轴的左侧,而帧位于各个图层的右侧,在时间轴的上端有帧号,时间轴是制作动画的场所。
(11)用鼠标选中图层Plant的第二帧,右击就会弹出一个菜单,选择【插入关键帧】就可以在此图层的第二帧插入一个关键帧,如图1.19所示。
图1.19 插入一个关键帧
提示
用鼠标选中某一帧后按F6键,是插入关键帧的快捷方式。
(12)在Plant图层的第1帧至第10帧和第37帧至70帧分别插入关键帧,在第81帧上右击,在弹出的菜单上选择【插入帧】就可以在第81帧插入一个普通帧,如图1.20所示。
图1.20 插入连续的关键帧和普通帧
提示
单击某一帧,连续按下F6键,就可以从这一帧开始插入连续的关键帧。
用鼠标选中某一帧后按F5键,是插入普通帧的快捷方式,如果已经在第10帧插入了一个关键帧,再在第37帧插入一个关键帧,那么在这两个关键帧中间,系统会自动地插入普通帧。
如果在第70帧插入了一个关键帧,再在第81帧插入一个普通帧,那么在从第70帧到第81帧中间也会自动地插入普通帧。
跟帧相关的操作还有删除帧和复制帧。
删除帧:
用鼠标选中需要删除的帧(在选择的时候,可以同时按住Shift键或Ctrl键,那样可以选中多个连续或不连续的帧),右击,然后从弹出的菜单里选择【删除帧】选项即可。
复制帧:
用鼠标选中需要复制的帧(注意Shift键的使用),右击,从弹出的菜单里选择【复制帧】选项,把选中的帧复制到剪贴板里。
然后,用鼠标选中要把这些帧拷贝到的位置所属的那个帧,右击,从弹出的菜单里选择【粘贴帧】选项,这样就完成了帧的复制。
另外,不妨试试帧的拖拽(同时也可按住Ctrl),那样会很方便地完成帧的复制和移动。
(13)在Plant图层的第1帧至第10帧,分别画上如图1.21所示的内容。
图1.21连续关键帧中的对象
(一)
提示
当单击【时间轴】面板上的某一帧时,就会有一条红色的线在这个位置上显示出来,这个红色的标志叫做播放头,播放头对应的帧和关键帧中的图形就会在舞台中显示出来,可以用这种办法在进行Flash设计的时候对舞台中的对象监视和调整。
如果回车,播放头就会自动连续的向后移动,舞台上就会显示出所做的动画了。
(14)在Plant图层的第37帧至第70帧,分别画上如图1.22所示的内容。
图1.22 连续关键帧中的对象
(二)
(15)单击【时间轴】面板右上角的显示方式
按钮会弹出如图1.23所示的菜单,根据需要可以不同的方式显示时间轴上的帧。
图1.23 帧的显示方式
(16)在Background图层的上面,新建一个层,命名为“Butterfly”,在这个层的第11帧至第41帧插入关键帧,如图1.24所示。
图1.24 新建图层并插入关键帧
(17)在Butterfly图层的第11帧至第41帧中绘制一些蝴蝶飞舞的图,用预览的方式查看,如图1.25所示。
图1.25 预览时间轴上的关键帧
(18)到现在为止,在各层中分别画了窗口、花盆、小花、蝴蝶、背景,单击【时间轴】面板上的第40帧,在舞台上查看一下效果,发现画的窗口、花盆、背景并没有出现,如图1.26所示。
为什么呢?
因为在Frame、Pot、Background三层中只有第一个关键帧中有内容,怎样才能让这些内容在第81帧前都显示出来呢?
在这三层的第81帧添加一个普通帧,再单击时间轴上的第40帧,在舞台上查看一下效果,发现窗口、花盆、小花、蝴蝶、背景都显示了出来,如图1.27所示。
图1.26 舞台上的显示效果
(一)
图1.27 舞台上的显示效果
(二)
提示
普通帧中的内容与它前面的第一个关键帧(包括空关键帧)的内容是相同的,而且,如果对普通帧中的内容进行操作,它前面的关键帧也会发生变化。
(19)选择【控制】|【测试影片】命令,可以测试动画播放时的效果。
提示
Ctrl+Enter键是测试影片的快捷方式。
(20)选择【文件】|【保存】命令,将动画保存到合适的位置,如图1.28所示。
提示
想必每个使用计算机的人都遇到过死机的情况,如果用很长时间做了一个非常好的动画,没存盘就死机了,到时候哭也来不及了,所以每做几步就存一次盘是个好的习惯。
Flash实际上也有人性化的提示,如果做的动画有改动并且还没有存盘,窗口标题栏中文件名的后面会显示一个星号,如图1.29所示。
图1.28 保存文件
图1.29 需要存盘的文件
提示
做动画看来也不是件很难的事——只要把握好关键帧,在层中做好在舞台上演出的“演员”,安排好“演员”的出场时间、顺序、位置就可以了。
其实让一个东西动起来的确不难,但做一个好动画却不是件太容易的事,除了精心地绘制图形外,可能最关键的就是动画的创意了。