1、FLASH动画制作实例教材一、 熟悉Flash界面二、 动画的原理看下面几幅画面: 图2-2 图2-3 图2-4 图2-5图2-2中飞机位于图片的最左边,图2-3中飞机位于图片的中间,图2-4中飞机位于图片的最右边。当我们将这三幅画面依次按照一定速度播放的时候,给我们的视觉效果就是看上去感觉飞机在从左向右飞行,如图2-5所示。动画就是由一系列近似的画面按照一定的顺序和速度进行播放而产生,它是欺骗人视觉效果的一种把戏。三、 帧/关键帧/空白关键帧由动画的原理我们知道,动画就是画面的连续播放所产生的,电影是每秒播放24幅画面,电视则每秒播放25幅画面,Flash默认每秒播放12幅画面(可以修改)。
2、每一幅画面我们都称它为一个帧,记住:一个帧就是一幅画面(暂不管这个画面是真实的还是虚幻的)! 如图2-6所示上面的每个小格子就是一个帧,每个格子都分别代表着一幅画面,播放时按照帧的先后顺序由左向右进行。你也许会问:“上面帧怎么还不一样啊?”对了,正是因为它们不一样才有了帧、关键帧、空白关键帧(也叫白色关键帧)这些名词。空白关键帧我们先看第一个小格子,它里面有一个白色的小圆圈,它就是空白关键帧,里面什么内容都没有,一片空白。用鼠标单击一下该空白关键帧,结果我们在下面的场景里看到的是一片空白区域如图2-7所示:关键帧第二个小格子里面是个实心的小黑点,它就是关键帧,里面有实际存在的内容,用鼠标单击该
3、关键帧(或用鼠标按住帧上面红色滑块向后拖动到该帧),我们看到了一个黑色的圆,如图2-8所示: 看来,关键帧和空白关键帧的区别就在于关键帧有实际的内容而空白关键帧没有。空白关键帧+内容(比如画个圆)=关键帧。可变形为:空白关键帧=关键帧-里面所有内容。读者不妨把图2-8中的圆删除(Ctrl+A,Delet),看它是不是变成了和它前面一样的空白关键帧?帧关键帧后面的灰色部分都是普通帧,普通帧里面没有实际的内容,但是它却能将离它最近的关键帧的内容显示出来。用鼠标点击第三帧,如图2-9所示。看起来它似乎有内容,实际上这一帧是没有内容的,3、4、5帧只不过是把前面离它最近的关键帧(第二帧)的内容显示出来
4、了而已,由此可见普通帧尽管没有实际内容但它却可以用来延续一幅画面的存在时间。说明:图2-9的第五帧 代表普通帧的结束,另外还有一种叫过渡帧,暂时不用知道,后面会结合具体实例讲。这几个概念在Flash制作中非常重要,使用的频率也最高,希望读者一定要弄明白。移除帧与清除帧的区别:用鼠标对着帧点击鼠标右键,在弹出的菜单中有“移除帧”和“清除帧”命令。移除帧就是删除帧,用来将帧连同帧上的内容(如果是关键帧的话)一起删除,而清除帧则是只把帧上的内容清空,帧仍然存在。图形元件和移动渐变按照正常习惯,此时应该讲工具的使用了,但是考虑到读者刚刚理解完上面关于帧的一些枯燥的概念,我讲顺序做了调整。下面我们就放松
5、一下来做一个小动画。一、 制作矩形的变化 启动Flash软件,鼠标单击第一帧,然后点击左边工具箱中的矩形工具,边框选择没有颜色如图2-6所示,填充选择自己所喜欢的颜色如图2-7所示。在工作区按住鼠标左键拖动绘制矩形,如图3-8所示。我们用选取工具 单击一下矩形,执行【插入】菜单下的【转换成元件】命令,将弹出一对话框,在名称中输入“动作渐变”,选择【图形】如图3-9所示。然后确定。此时画面应为图3-10所示。鼠标放在25帧处,点击右键,在弹出的菜单中选择“插入关键帧”,如图3-11。用鼠标单击缩放工具,将矩形调小,如图3-12所示。鼠标点击1到25之间的任何一帧(不能是最后一帧,所以25除外),
6、然后选择下面的“移动”,如图3-13。到此为止一个简单的动画就做成了,按Ctrl+回车进行预览。源文件的位置:光盘源文件移动渐变演示.fla说明:1)图3-11中,在25帧处插入关键帧的意思是复制了前面和它最近的关键帧(此处为第1帧),所以此时第25帧和第1帧完全一样:是关键帧,里面都右一个矩形,连同矩形的大小位置等都一样。2)图3-13中,2到24帧像普通帧一样看似有内容,其实没有,它们是从第1帧到25帧的一个过渡,所以叫做过渡帧。3)以前每次讲这个例子的时候,学生总会问:“图3-10为什么要转换成图形元件?”这个问题后面会讲到,暂时只需要记住当转换成图形元件后,下面要选择“移动”,就可以了
7、。4)在绘制矩形时我们选择边框为无色,这并不是说一定不能要边框,因为一旦要了边框在将矩形转换成图形元件的时候就必须把它和它的边框一起转换,而初学者一般都容易把边框给漏掉。所以,如果要了边框,边框和填充都必须都要选中后再一起转换为图形元件,具体做法是选择箭头工具用鼠标点击一下填充部分,然后按住Shift键不放双击边框即可(按住Shift代表可以选择多个,双击边框表示把边框给选中)。读者可以试试有边框的情况。5)变化的快慢可以控制,Flash默认为每秒播放12帧,所以可以计算出应该在什么地方插入关键帧。如果你做成功的话,相信你对Flash已经有了一定的兴趣,如果你觉得上述例子太麻烦而没有做成功的话
8、,也不要紧,因为我们还没有讲工具的使用,下面我们举个更简单的来加以巩固。二、制作照片的出现效果1启动Flash软件,打开【文件】下拉菜单,选择【导入】命令,在弹出的对话框中选择你的一张照片,如图3-14所示。2用选取工具 单击图片,然后按F8,出现了图3-15所示的对话框。然后单击确定按钮。如图3-16所示。将鼠标放在20帧处,点击鼠标右键,选择【插入关键帧】命令,将出现图3-17。用鼠标单击第1帧,然后单击 按钮,图片周围出现8个控制点,我们用鼠标拖动右下角的控制点,将图片缩小。如图3-18所示。用鼠标点第1帧,在下面属性栏选择移动,如图3-19所示。此时就可以Ctrl+回车进行预览了。我们
9、看到了一张图片由小变大的效果,下面我们接着做让这张照片变大之后再渐渐向右上角消失的效果。在40帧处插入关键帧,移动图片到右上角,如图3-20所示。用鼠标选中图片,在属性栏调整透明度,如图3-21所示。用鼠标点击20到40之间任何一帧,选择属性栏上面的移动,其结果如图3-22所示。好了,此时再按Ctrl+回车试试。源文件的位置:光盘源文件我的照片.fla通过以上两个例子,我们已经感觉到Flash功能的强大,只需要给一个起始状态和一个结束状态,中间的那些状态都交给Flash去做。工具简介1、箭头工具箭头工具主要用来选取对象,以便对该对象进行操作如:删除,移动等。如图4-1,鼠标单击选择该对象后,可
10、用Delet删除,图4-2用鼠标按住不松开,然后拖动到所需要的位置。 另外它还具有切割和变形的功能。当我们用工具箱中的工具绘制出圆、矩形、线条等形状时,用鼠标可以将他们切割。按住鼠标拖动,将不需要的部分选中,如图4-3所示。当鼠标接近我们绘制的图形时,会出现图4-4,这时可按住鼠标拖动来改变它的外形,如图4-5所示。 重新绘制一个矩形,当按住Ctrl键拖看有什么变化,撤消(Ctrl+Z)后再次按住Ctrl键拖看又有什么不同,请读者朋友试一试。2、次选取工具它用来修改由铅笔或钢笔所绘制的线条。当用次工具选取所绘曲线时上面会出现一些节点,如图4-6所示,当鼠标点击节点时,节点上会有控制柄出现,如图
11、4-7,拖动控制柄上的点便可修改线条的形状。 3、直线工具使用直线工具用来绘制从起点到终点的直线,在按下鼠标左键进行拖动时如果按住了Shift键,则可绘制水平、垂直或以45度角度增加的直线。4、套索工具套索工具用来选取不规则的区域以便对所选部分进行操作,如图4-8所示。5、钢笔工具选取钢笔工具,用鼠标左键单击起点,然后移动到下一个位置,按住鼠标左键不放拖出所需的线条,然后再用同样的办法绘出到下一点的线条,双击鼠标代表绘制结束。如果绘制不满意,可用次选工具进行调整。如图4-9所示。 6、文本工具文本工具是用来输入文字信息。选择文本工具,再工作区按住鼠标拖出文本框,输入文字,如图4-10所示。7、
12、椭圆工具用来绘制椭圆,在绘制过程中按住Shift键可绘制正圆,如图4-11所示。 8、矩形工具用来绘制矩形,同椭圆工具一样在绘制过程中按住Shift键可绘制正方形。9、铅笔工具它可以绘制任何形状的曲线,点击铅笔工具后,在工具箱下面有个图标,单击后可选择“平滑”绘出的线条比较平滑。按住Shift键可绘制水平方向或垂直方向的直线。10、画笔工具画笔工具也叫刷子工具,由此可见它用来“刷”一些具有刷子效果的曲线,如图4-11。工具箱下面可以调整刷子的大小和形状。11、缩放工具顾名思义,缩放工具用来改变对象的大小情况,包括长、宽、旋转、倾斜等。下图中的小白点代表旋转的中心点,用鼠标可以改变其位置。 图4
13、-12改变长 图4-13改变宽 图4-14 旋转 图4-15 倾斜12、填充变形工具该工具用来对填充的方式进行调整,如图4-16所示。对该图中的改变填充的控制点进行调整,分别得到了图4-17、图4-18、图4-19。 13、墨水瓶工具给已绘制好的几何图形添加边框或修改已有边框的颜色、粗细等属性。14、颜料桶工具颜料桶工具也叫油漆桶工具,用来对封闭图形的内部进行填充或修改。15、点滴器使用滴管工具可以从场景中选择线条、文本和填充的样式,然后创建或修改相应的对象。从场景中导入一张图片,执行【修改】下的【分解组件】命令将图片打散。此时用点滴器工具点击一下该照片,然后用椭圆工具去画椭圆我们发现我们导入
14、的图片作为了椭圆的填充,如图4-20所示。用填充变形工具进行修改,如图4-21所示。源文件的位置:光盘源文件填充演示.fla说明:导入的图片只有打散才可以使用点滴器工具。16、橡皮擦使用橡皮擦工具可以擦除当前场景中的对象,当选择橡皮擦后,工具箱下面还有擦除模式,各擦除模式效果如图4-22所示。水龙头是用来擦除整块颜色的。17、手形工具手形工具可以将文档窗口中的场景连同对象一起移动。选择手形工具,在场景中按住鼠标左键拖动看有什么变化。18、放大镜选择放大镜工具,用鼠标在场景中点击左键,发现场景以及里面的对象放大了,如果想缩小,按住Alt键的同时单击鼠标左键。按住鼠标左键拖动将需要放大的部分匡住,
15、然后松开鼠标即可。19、笔触色按钮笔触色按钮用来改变线条或所绘几何图形边框的颜色。20、填充色按钮用来改变填充的颜色。形状渐变在第三章学习了图形元件,知道了图形元件需要用动作渐变,那么如果不转换成图形元件又是什么情况呢?启动Flash软件,用矩形工具在场景中绘制一矩形,如图5-1所示。然后在25帧的地方鼠标右键插入关键帧,用缩放工具调整矩形的大小,如图5-2所示。鼠标单击1到25之间单击任何一帧,在属性栏选择“形状”(因为该矩形没有转换成图形元件,所以它还是形状),如图5-3所示。按Ctrl+回车进行预览。源文件的位置:光盘源文件形状渐变演示一.fla结果看到和将矩形转换成图形元件一样的效果,
16、既然如此,那么转不转换成图形元件到底有什么区别呢?转换成图形元件需要用“移动”来创建动画的过渡,而所绘制的形状在不转换成图形元件的情况下,需要用“形状”来创建动画的过渡,二者不可换用。如果将图5-3的“形状”改为移动,1到25帧之间出现了虚线,这说明问题出现了,如图5-4所示。图形元件可以改变其透明度(应该是叫不透明度),所绘形状则不能。图形元件在场景中不能改变其外形,只能在编辑改图形元件时才可以,而所绘形状可以方便地改变其外形。为了更好的理解这一点,读者用鼠标将图5-2中第25帧这一帧里面矩形的形状调整一下如图5-5所示。甚至可以将这一帧的内容删除重新绘制新的形状,读者不妨试一试。而这些是图
17、形元件无法办到的。源文件的位置:光盘源文件形状渐变演示二.fla下面我们利用形状渐变来制作一个弹跳的小球。启动Flash软件,选择椭圆工具,不要边框,填充方式为径向填充,绘制正圆,如图5-6所示。用填充变形工具改变填充的中心点,入图5-7所示。在15帧处插入关键帧,并改变小球的位置,如图5-8所示。鼠标单击1到25之间任何一帧,在属性栏选择“形状”,将简调为“-100”,如图5-9所示。分别在16帧和17帧处插入关键帧,如图5-10所示。用变形工具将16帧的小球高度变小,如图5-11所示。对着第1帧点击鼠标右键,选择“拷贝帧”,如图5-12所示。在31帧处点击鼠标右键选择“粘贴帧”,如图5-1
18、3所示。鼠标单击17到31之间任何一帧,在属性栏选择“形状”,将简调为“100”,如图5-14所示。按Ctrl+回车进行预览。说明:(1) 改变17帧小球外形的原因是因为当小球与地面发生碰撞时小球会变瘪。(2) 调整“简”的作用是让小球加速还是减速。当简为负值时,小球运动速度越来越快;当简为正值时,小球运动速度越来越慢。最后一帧拷贝第一帧是因为小球弹起后的位置与第一帧小球的位置几乎相同。源文件的位置:光盘源文件库演示.fla通过前几章的学习你应该知道了图形元件、形状、移动渐变以及形状渐变(就是改变其外形)之间的关系,并能做出简单的动画效果。库和影片剪辑第一节 库我们知道仓库是用来存放物品的,一
19、旦需要时就要从仓库去提货。Flash里面的库也是如此,它不仅为我们所做的“物品”提供了存放的空间,而且一旦“物品”放进库后,这些“物品”就可以被重复利用。启动Flash软件,在里面绘制一个圆,鼠标选中后按F8键把它转换成图形元件,名称为“圆”,如图6-1所示。此时,物品(你所绘制的这个圆)就自动存放到了仓库中(库)。打开【窗口】下面的【库】,就可以看到你所绘的圆。如图6-2所示。图6-2中的垃圾桶示用来删除你在库中存放的“物品”。打开你以前保存的文件,按F11键调出库窗口,你会发现你所转换成图形元件的矩形、图片以及没有转换成元件的图片都被放进了库中。那么,库中到底能存放那些“物品”,又是怎样被
20、重复利用的呢?库中可以存放三大元件(图形元件以及接下来学的影片剪辑元件和按钮元件)、位图(刚导入的图片)以及导入的声音。在场景中如果需要再次用到它们,就用鼠标直接把它们从库中拖到场景中即可,如图6-3所示。当用鼠标双击库中的元件时可以对它进行编辑,比如双击图6-3中的圆元件,修改它的颜色,如图6-4所示。回到场景后你回发现里面所有的圆的颜色都变成了你所修改的颜色,这是因为它们在库中都是同一个元件。源文件的位置:光盘源文件库演示.fla文件之间还可以共享库。当你在文件一中辛辛苦苦地画了一架飞机,把它保存为了图形元件,结果你在另一个文件二的制作中也要用到它,是不是要重新去画呢?不需要,把两个文件都
21、打开,F11调出库,你回发现它们之间可以公用,将它拖到文件二中就可以了,与此同时该图形元件(飞机)已经复制了一份放进了文件二的库中。第二节 影片剪辑启动Flash软件,执行【插入】菜单下的【新建元件】命令,在打开的对话中输入名称为“火焰”,选择“影片剪辑”如图6-5。点击 按钮。选择椭圆工具,边框选择无色,在调色板面板中选择填充为“径向”(就是从中心向四周填充),如图6-6所示。用鼠标点击左边的滑块(标记1)图6-7所示,然后用鼠标点颜色选取按钮选择黄色,同样的方法将右边的滑块(标记2)设为红色。 绘制椭圆,用箭头工具将外形修改为火焰形状,用改变填充工具修改填充,如图6-8。在第5帧处插入关键
22、帧(别忘了,方法是右击鼠标),用箭头工具改变火焰的形状,然后鼠标放在1到5帧中间,在属性栏选择创建动画方式为“形状”,直接敲回车进行预览,看火焰是否能正常摆动。如果正常,就用同样的方法依次在第15帧和第20帧处创建关键帧,如图6-9所示。其实,我们以上所做的努力都是在给演员(火焰这个影片剪辑)化装,化好装后演员就可以蹬上舞台(场景)进行表演了。回到场景,按F11打开库,将火焰拖到场景中,如图6-10。按Ctrl+回车测试一下影片,一个动态的火焰就出现在我们眼前了。源文件的位置:光盘源文件火焰.fla读者可能感觉很奇怪:场景里面只有一个帧,火焰怎么会动呢?这正是影片剪辑的魅力所在。我们在平时看到
23、的Flash中,有时会看到一朵白云在天空不停第在哪儿循环飘来飘去,它就是影片剪辑,凡是局部在循环运动的我们都可以把它做成影片剪辑。一个影片剪辑就是一个小电影。我们先暂停一下,来讲一下“层”的含义,这是下面将要用到的。层是透明的,为了更好的理解它的含义我们可以把它想象成玻璃,如果在第一块玻璃上写上数字“1”,第二块玻璃上面写上数字“2”,第三块玻璃上面写上数字“3”,当我们把这三块玻璃叠放在一起时,我们不是单独看到了哪一层的数字而是“123”全部显示出来,如图6-11所示。因为玻璃是透明的,所以也就不存在上面会遮住下面的问题。三块玻璃就是三个层,透明而互不干扰,上面还可以继续添加层。双击图层一可
24、以对它进行命名,此处取名为“火焰”如图6-12,回车即可。 图6-12 图6-13点击新建图层按钮就增加了一个新图层,取名为“蜡烛体”如图6-13所示。然后我们就在这一层上面绘制蜡烛体。选择箭头工具,修改属性栏上的背景色为深绿色。用矩形工具绘制一白色矩形,选择墨水瓶工具,调整属性栏上面线条的颜色、粗细和类别,然后点击白色矩形,这样就给白色矩形添加了一个白色粗糙的边框,如图6-14。然后再新建一层,取名为“蜡烛芯”。绘制一黑色小矩形,用墨水瓶添加黑色粗糙的边框,然后将这个矩形和边框一起转换成图形元件并调整其透明度,如图6-15所示。此时,我们发现蜡烛芯把蜡烛体挡住了,看上去不太真实,所以我们需要
25、将蜡烛芯向下移一层。用鼠标按住图层进行拖动就可以方便的改变图层之间的叠放顺序,如图6-16所示。好了,到此为止就做好了, 按Ctrl+回车看一下。如果觉得蜡烛火焰做的不理想的话,可重新编辑它,方法是直接双击蜡烛火焰或按F11在库里面双击“火焰”影片剪辑。如果还想对它进行美化的话,可以给它添加蜡烛油,如图6-17所示。源文件的位置:光盘源文件蜡烛的制作.fla通过上面这个例子的学习,你应该对影片剪辑有所了解,并理解了层的含义。呵呵!是不是有点成就感了?下面我再讲个打字效果的例子以加深对影片剪辑的理解。在做之前我们先分析一下:首先光标在界面上不停的闪动,它是一个细小线段出现和消失的不断循环,由此想
26、到可以把它做成一个影片剪辑;其次,开始光标的不停闪动在等待着文字的出现,一旦文字出现,光标应该立即移到刚出现文字的前面(右侧),继续等待下一个文字的出现,当再有文字出现时,光标又立即移动到这个文字的前面,所以,任何时候光标总是出现在文字前面。由此我们想到用两个层来控制光标和文字。启动Flash软件,新建两层,分别命名为文字和光标,如图6-18所示。打开【插入】菜单,执行【新建元件】命令,名称为“光标”,选择影片剪辑。用直线工具绘制一条垂直方向的黑色小线段作为光标,如图6-19所示。在第3帧的地方鼠标右键选择“插入白色关键帧”,这样第1帧和第2帧都可以看光标,因为第2帧变成了普通帧,它延续了第1
27、帧的时间。在第四帧处插入帧,就使得前两帧光标可见后两帧光标消失,如图6-20。回到场景,把光标从库中拖到场景中,如图6-21所示。按Ctrl+回车键进行预览,是不是已经有个光标在画面上闪动?在光标层和文字层的第5帧分别插入关键帧,在文字层第五帧输入文字“你”,用箭头工具选中第5帧的光标,用方向键移动到文字前面,如图6-22所示。在光标层和文字层的第10帧分别入关键帧,在文字层第10帧输入文字“现”,用箭头工具选中第10帧的光标,用方向键移动到文字前面,如图6-23所示。同样的办法多写几个字,如图6-24所示,这样以来光标总在文字的前面闪动。按Ctrl +回车预览一下。源文件的位置:光盘源文件打
28、字效果 .fla【插入】下面的【新建元件】和【转换成元件】实质上一样,只是操作的先后顺序不同,最终结果是一样的,而且都放在库中。通过这个例子,相信你对影片剪辑有了更进一步的了解。按钮大家平时上网看Flash的时候,往往遇到上面写有“Play”,当我们用鼠标点击一下就可以观看影片了,看完影片时会出现一个“Replay”,点击后可以再次观看影片,而且鼠标放上去的时候甚至会出现不同的状态,比如:变色、移动一下、有声音等现象发生,这里的“Play”和“Replay”就是所谓的按钮。通过以前的例子,你可能已经感觉到在预览时它将会自动循环播放而无法控制,按钮主要就是用来对所做影片进行控制。第一节 制作Pl
29、ay和Replay按钮启动Flash软件,执行【插入】菜单下的【新建元件】命令,命名为“Play”,选择“按钮”,如图7-1所示。 点击 按钮,如图7-2所示。图7-2已经显示了按钮的几种状态,UP是当鼠标没有接触按钮时的状态,鼠标经过是当鼠标放上去时所呈现的状态,Down就是当鼠标按下时所呈现的状态,反应区是给按钮设置一个反应区域或者说给它框定一个范围,当鼠标放在这个范围内的任何地方按钮都会做出反应。用文本工具在第1帧(Up帧)写入“Play”,将颜色调整为黑色,如图7-3所示。在第2帧(鼠标经过帧)插入关键帧,修改“Play”的颜色为红色并将它向左和向上移动一点(最好用方向键控制),然后按
30、一下如图7-4所示。在第3帧(Down帧)插入关键帧,再将“Play”向右和向下移动一点,如图7-5所示。在第4帧(反应区)再插入关键帧,用矩形工具绘一矩形作为反应区域,用该矩形将“Play”覆盖,如图7-5所示。回到场景,此时我们制作的“Play”按钮已经放进了库中,按F11打开库,把它拖到场景中,如图7-6所示。到此为止这个“Play”按钮就做好了,按Ctrl+回车进行预览,把鼠标放上去点击一下看看。现在我们创建一个小动画来让“Play”按钮发挥作用。在第2帧处插入白色关键帧(空白关键帧),执行【文件】菜单下的【导入】命令,在打开的对话框中选择一张图片,如图7-7所示。将导入的图片转换成图
31、形元件,在第20帧处插入关键帧,点缩放工具,选择工具箱下面的等比缩放按钮 ,将图片调小,如图7-8所示。用箭头工具点击2到20帧之间的任何一帧,在属性栏选择“移动”和顺时针旋转1次,如图7-9所示。不妨先预览一下,我们发现整个过程的动画是做好了,但是此时影片仍然处于不可控制状态,现在我们就来控制影片。当打开Flash时,第一帧应该停止下来等待用户去点击“Play”按钮,所以要给第一帧添加一个stop动作。打开【窗口】菜单,选择【动作】命令,就打开了帧动作控制面板,如图7-10所示。用鼠标单击“帧动作”将帧动作面板展开,单击“属性”将属性面板折叠,如图7-11所示。用鼠标单击第一帧,单击“Act
32、ion”,然后单击“MoveControl”,最后双击“Stop”,如图7-12所示。此时再预览一下,我们发现第一帧已经停止下来。接下来我们再给按钮添加动作,鼠标单击一下按钮,在动作面板中双击“on”,接着双击“goto”,在右边的帧处输入数字“2”,如图7-13所示,这样我们就给“Play”按钮添加了动作。这个过程的意思是:当我们点击鼠标按钮释放后,画面将转到第2帧,并从第2帧开始播放。这样,影片就得到了我们的控制。预览一下,点击一下“Play”按钮试试。源文件的位置:光盘源文件Play按钮演示 .fla同样的办法,我们再来做一个“Replay”按钮(参照Play按钮的制作),新建一图层,命
33、名为“Replay”,在20帧处插入一空白关键帧,把库打开,将“Replay”按钮拖到场景中,如图7-14所示。打开动作面板,鼠标点击第20帧(图层1或Replay层都可以),添加“stop”动作,如图7-15所示。鼠标选中“Replay”按钮,给它添加on和goto动作,右边帧处输入数字“2”,如图7-16所示。再预览一下看看“Replay”按钮是否也发挥了作用。源文件的位置:光盘源文件Replay按钮演示 .fla说明:1) 大家经常不知道什么时候给帧添加动作,什么时候给按钮添加动作,因为我们要让第1帧停止下来,所以这时要给这一帧添加动作,我们要用鼠标点击按钮让它开始播放,所以这时就要给按
34、钮添加动作。2) 大家还容易犯的一点错误就是不能正确地添加动作,心里想着给按钮添加结果却添加到了帧上。正确地做法是:当确定给帧添加动作时,就用鼠标点击相应的帧,然后选择动作面板中的动作,当确定给按钮添加动作时,用鼠标点击一下该按钮,然后选择动作面板中的动作。3) 当帧被添加动作后,帧的上面会有一个字母“a”一样的标志 。4) 养成给按钮添加反应区域的习惯。对于用文本制作按钮来说,反应区域就必不可少,否则,只有当鼠标接近文字有颜色的地方按钮才会有反应。!第二节 制作抓图游戏上一节后,我们再来做个小游戏,对按钮进行练习。启动Flash软件,导入一张图片并将它转换成按钮,此按钮不需要编辑,如图7-1
35、7所示。在第2帧处分别插入关键帧并调整图片按钮到如图7-18所示的位置。在第3帧处分别插入关键帧并调整图片按钮到如图7-19所示的位置。我们想做的效果是无论鼠标如何移动都碰不到这个娃娃,我们思想是先让第一帧停止下来,当我们的鼠标一旦接触到娃娃按钮的时候画面立即转到第2帧并停止下来,由于第2帧图片的位置和第1帧图片的位置不同,所以给我们的视觉效果就是娃娃图片跑到右边去了。当鼠标接触到第2帧上的娃娃按钮时,画面转到并停止在第3帧,当鼠标再次接触到第3帧上的娃娃按钮,画面转到并停止在第1帧。给第1帧添加“stop”动作,给第1帧上的娃娃按钮添加“on”动作,右边事件中将“释放” 取消,选择“指针经过
36、”,如图7-20所示。再给第1帧的娃娃按钮添加“goto”动作,右边选择“转到并停止”,帧处输入数字“2”,如图7-21所示。给第2帧添加“stop”动作,给第2帧上的娃娃按钮添加“on”动作,右边事件中将“释放” 取消,选择“指针经过”,如图7-22所示。再给第2帧的娃娃按钮添加“goto”动作,右边选择“转到并停止”,帧处输入数字“3”,如图7-23所示。给第3帧添加“stop”动作,给第3帧上的娃娃按钮添加“on”动作,右边事件中将“释放” 取消,选择“指针经过”,如图7-24所示。再给第3帧的娃娃按钮添加“goto”动作,此时右边是选择“转到并停止”还是选择“转到并播放”已经无所谓了,
37、因为我们最开始就让第1帧“stop”了,帧处输入数字“1”,如图7-25所示。好了,预览以下,看看你能不能把鼠标放到娃娃上面。说明:读者可能会想到如果让每个帧上的按钮不是选择“转到并停止”而是“转到并播放”然后给每个帧添加stop动作是否可以呢?答案是肯定的,读者不妨试试。源文件的位置:光盘源文件抓图游戏.fla通过这一章的学习相信你对按钮有了一个深刻的认识。引导线在前几章的学习中我们所做的动画中元件在相邻两个关键帧之间是沿着直线运动,然而我们在一些Flash中经常看到一只小鸟在天空任意翱翔,还有一朵花瓣或一片树叶随风飘落,它们的运行轨迹并非直线而是曲线。事实上,不管是小鸟的飞行还是花瓣的飘落
38、它们都是按照我们事先做好了的曲线在运动,事先做好了的这种能够引导它们运动的曲线我们把它称为引导线。引导基础知识启动Flash软件,绘制一个不要边框的圆,将它转换成图形元件,如图8-1所示。在25帧处插入关键帧,将图形元件移动到右边并创建动画,如图8-2所示。这就是我们最初学习的图形元件和移动渐变,其预览效果是这个圆从左边直线移动到了右边。下面我们来制作引导线让这个圆从左边曲线移动到右边。点击“添加引导层” 按钮,如图8-3所示。接着我们在新建的引导层上面用铅笔工具绘制引导线,并调整图层1上两关键帧中圆的位置,让图形元件的中心点分别和引导线的起点和终点对齐,如图8-4所示。现在预览一下,我们发现
39、此时圆已经不在沿直线运动,而是沿着我们绘制的曲线在运动。源文件的位置:光盘源文件引导线 .fla明白了引导线的原理,我们现在就来制作一片树叶飘落的效果。启动Flash软件,用钢笔工具在场景里绘制一片树叶并将它转换成图形元件如图8-5所示。在第50帧处插入关键帧,将树叶放到落地时的位置,创建动画并使其在下落时顺时针旋转一次,如图8-6所示。给图层1添加引导层,用铅笔工具绘制出引导线并让树叶在起点和终点时的中心分别和引导线的起点和终点对齐,如图8-7所示。预览一下,一片树叶就飘落下来了。源文件的位置:光盘源文件树叶飘落.fla第二节 用笔描写字的轮廓通过上一节的学习,我们知道了图形元件可以沿着引导
40、线从一端运动到另一端。如果我们需要图形元件(比如飞机)做环形运动,那用什么做引导线呢,我们想到了椭圆工具。启动Flash软件,绘制一个如图8-8所示的图形并转换成图形元件,在25帧处插入关键帧,然后创建动画,如图8-8所示。给图层1添加引导层,在引导层上绘制椭圆,如图8-9所示。我们现在遇到了一个问题:椭圆示封闭的区域,图形元件的起点和终点和谁对齐呢?聪明的读者可能想到了用橡皮擦擦出一个缺口的办法,这正是我们的答案!用橡皮擦将椭圆擦出一个缺口,让图层1两关键帧上图形元件的中心分别和椭圆的两头对齐,如图8-10所示。预览一下,看到飞机已经围绕椭圆在运动了,只是飞机头的方向好象没有改变,不要紧,鼠
41、标点击一下图层1上1到25之间任何一帧,在属性栏选择“使路径适应”问题就解决了,如图8-11所示。此时,再预览一下看看。源文件的位置:光盘源文件环形引导.fla这个例子告诉我们引导线不一定是铅笔画出来的,只要是线条都可以。有了这个例子做基础,下面我们来做一个用笔绘制一个字的轮廓效果。启动Flash软件,将图层1改名为“背景F”用文本工具写一个大写字母“F”,将文本属性的字体设置为ArialBlack,字体大小为150(右边的滑块最多只能调到96,此时可用键盘输入)如图8-12所示。接下来我们来获取F的边缘。选中F执行【修改】菜单下的【分解组件】将F打散,此时F处于选中状态,如图8-13所示。用
42、箭头工具点击F以外的地方以取消选择,如图8-14所示。将F打散后它已经不再是文本而是变成了形状,此时我们就可以用墨水瓶工具给它添加边框了。选择墨水瓶工具,在属性栏设置好属性后点击一下F,我们看到已经给F添加上了一个边框,如图8-15所示。用箭头工具选中F将它删除,这样我们就获得了F的轮廓,如图8-16所示。将用橡皮擦将F擦出一个缺口,如图8-17所示。在2到25帧的每一帧都插入关键帧(按F6可以快速插入),如图8-18所示。新建一图层命名为“画笔”,用工具箱中的工具在第一帧绘制一笔状物作为画笔并转换成图形元件,如图8-19所示。点击一下“编辑元件”按钮可以进行选择要编辑的元件,现在这里只有画笔
43、这个元件,我们对它进行编辑,把画笔的笔尖对着该元件的中心点,如图8-20所示。回到场景,在25帧处插入关键帧并创建动画,如图8-21所示。我们要想办法笔能够围绕F描一圈,这时我们想到给画笔添加一个引导层,让F的轮廓这个引导线去引导它。添加引导层,鼠标放在背景F层的第一帧点击鼠标右键,在弹出的菜单中选择“拷贝帧”,然后在引导层的第一帧点击鼠标右键,在弹出菜单中选择“粘贴帧”,如图8-22所示。这时引导层第一帧的F和背景F层第一帧的F就完全重叠在一起,为在在操作时不会让背景F层受到影响,我们把我们把背景F层隐藏并锁住,如图8-23,用鼠标单击图中的标志处即可实现图层的隐藏显示、锁开。此时我们看到的
44、F就是引导线,因为背景F层已经隐藏了。现在调整画笔的位置让它在画笔层的第1帧和第25帧的中心点(笔尖),分别和引导线F的两端点对齐,如图8-24所示。预览一下,看画笔能否围绕F描一圈。引导效果一旦做好就将引导层锁住并隐藏,此时将打开背景F层的锁打开并让它显示,如图8-25。鼠标放在背景F层的第1帧,由于笔刚开始写时画面上还没有内容,所以用橡皮擦将F全部擦除,如图8-26所示。然后鼠标放到背景F层的第2帧,将画笔后面部分擦处,如图8-27所示。再将鼠标放在第3帧,继续擦除,如图8-28所示。按照同样的方法,对剩下的每一帧分别进行操作直到最后一帧,如图8-29所示。到此为止就做好了,预览一下看看。
45、源文件的位置:光盘源文件环形引导.fla我们来分析一下这个过程。一共有三个层,画笔层是让画笔运动,引导层是让引导线去引导画笔如何去运动,这两层最终产生的效果是让画笔能够围绕F描一圈。我们再来看背景F层,它上面的25帧全部都是关键帧,也就是说这25帧上面共有25个F,除最后一帧外的每一帧我们都用橡皮擦擦过,我们总是让每一帧未擦除的部分和画笔的运动保持同步,这样画笔走到哪里哪里就有线条出现,给我们视觉上的效果就是感觉线条是用笔画出来的,其实,只不是画笔和线条保持了同步而已。由此可以验证我前面的那句话:动画是欺骗人视觉效果的一种把戏。另外,我们将背景F层第一帧的F擦出一个缺口的原因有两个:一是为了引导层,因为引导线F是从这里拷贝过去的;二是为了后来擦除的方便,因为后来的24帧插入的都是关键帧,如果没有这个缺口,那么我们在以后擦除每个F时就不能保证每帧写出F部分的起点是对齐的,这是一个小技巧。思考一下,在这种情况下怎样使得F在写完之后看不见缺口?说明:引导线可以是铅笔或钢笔绘制也可以是圆或矩形工具绘制的线条。1) 引导线是不可见的。