Flash实训教程

按照本期教学计划和课时分配，FLASH计划用四个实例教程（8课时）完成本学科的实训教学：（一）.FLASH鼠绘篇、（二）.FLASH滤镜篇、（三）.FLASH MV制作篇、（四）.FLASH动画脚本篇。通过这四个专题教程的讲解和操作训练，力求最大限度地将Flash的知识要点和操作技巧囊括其中，使学生在复习掌握既学知识的同时，更多地了解掌握动画制作的技能、技巧。

（一）.FLASH鼠绘篇：

教学引言：

FLASH鼠绘要掌握的工具并不是很多,本次练习主要以FLASH软件当中的直线工具和选择工具为主要绘画工具，创作单幅卡漫作品。在之前大家看到的诸多卡漫作品里,应该不难看出,卡漫的手法是各种各样的,人物的表现形式也是各种各样的,所以在学习中,不要拘泥于一种方式去表现卡漫人物.

课程要求：

一．按照每次课程教授的内容勤加练习，建议结合所学参考一些相关的卡漫作品，让自己对卡漫有个初步的认识。

二．尽量提交课堂布置的作业，有利于授课老师掌握同学们的学习情况，并有针对性地对大家学习的薄弱方面进行深入讲解。

三．授课中会根据课堂需要调整讲课速度，在每小节结束，请同学们把不明白的地方于课程间隙向老师提出，方便老师有针对性地进行讲解。

四．发挥主观能动性，并不是大家只要完成作业或者跟着老师画完就成功了，课堂授课只是讲解方法，更多的需要同学们多体会和练习，锻炼自己的创造性。

五．在结束后布置相关作业，要求大家发挥想象力自行创作一个卡漫人物，老师加以评审。

六．其他教学注意事项：本次授课严格按照教学计划，并在在课余向同学们发布教学专贴，以文字解说和图片形式公布教学内容，方便同学们查询、讨论和操作练习。

第一节 创建卡通小女孩线稿. 动画制作流程：

一. 使用直线工具和选择工具创建初始线稿,并确定好人物五官及各部位大体比例.

二. 使用新建层,深入刻画线稿.

三. 细致刻画线稿,并创建五官和衣服等内容的线稿. 主要制作步骤：

构思的时候先用PS起的一个草图。

一. 使用直线工具和选择工具创建初始线稿,并确定好人物五官及各部位大体比例.

在制作初始线稿之前，应该先考虑好所绘人物的形。形，即人物的形状和状态，包括姿势等等。绘画的是卡通小女孩，因此要考虑到小女孩的大体特征是小巧，娇小，柔弱，温柔的，根据表情又可以判断女孩主要体现出一种无奈和寂寞的感觉。找到这些对形态和感觉后，再开始绘画（由此看来，我校开设的由美术科班出身的赵青梅老师主教的美术课程，对提高学生的审美情趣、艺术修养和绘画水平，有多么的重要！）。

这个步骤是确定人物的形，因此在作画的时候大胆一点，不要担心画错，也不用太过在意细节，因为下一步我们还要细化轮廓。

第一个步骤： 我们先在FLASH文档[我是在图形元件里]的时间轴上创建四个图层（在鼠绘时将对象的各个部位分置于不同的层，这是一个良好的创作习惯哦！），分别命名为[面部轮廓][五官][衣服][头发]，图层排列如下图，并将图层锁定。

第二个步骤： 打开[面部轮廓层]在人物面部轮廓层使用直线工具绘制出人物的面部，然后使用选择工具将直线拉弯，形成下图的效果。

第三个步骤： 打开[五官]图层，在五官图层使用直线工具和选择工具绘制出人物五官，因为是偏侧面脸，要注意左右两边五官的大小和透视关系，可以使用变形工具进行调节，达到眼睛眉毛高度一致，比例协调。参见下图：

第四个步骤： 打开[衣服]图层，使用直线工具和选择工具画出衣服的大体轮廓。

第五个步骤： 打开[头发]图层，根据人物面部和头部大小，使用直线工具和选择工具勾画出人物的头廓，这里框定的只是人物头发的具体范围。见下图：

二. 使用新建层,深入刻画线稿，并创建五官和衣服等内容的线稿. 将以上线稿修改完毕后，各图层图像合并，放置到时间轴最底层，命名为[线稿图层]，并使用灰色轮廓色。将其余图层分别命名为下图。图层７是用来做眼珠的，大家也可以将这个层命名为［眼珠层］．

这部分就比较简单了，有了底图轮廓的帮助，心里有底，直接使用直线工具和选择工具，在各图层细致地勾画出人物各部分图像即可．这一步骤也是小女孩人物图像状态进行定位，要求在刻画头发部分的时候要有足够的耐心．ＦＬＡＳＨ软件做头发丝效果有点牵强，不过有足够的耐心也能够做出不错的效果．

一．刻画人物面部．

二．刻画人物五官．

三．刻画人物眼珠．

四．刻画人物衣服．

五．刻画人物头发以及头发丝效果．（注意：头发丝走向根据人物头部轮廓和头发外部轮廓走）

本节课到此结束，下一节我们将讲解如何给小女孩线稿进行上色处理。

第二节 对卡通小女孩线稿进行填充上色. 动画制作流程：

一. 采取分层上色的方式进行.顺序按照皮肤.五官.头发.衣服的顺序进行.

二. 对人物光影进行前期刻画. 三. 对人物光影进行仔细调整.

四. 人物刻画完成后,根据自己的创意为人物增加附件和背景. 本节讲解如何给小女孩的线稿上色.

使用工具为FLASH软件当中的调色板和颜料桶工具. 注意事项:

在制作大面积色块的时候注意人物光影和透视. 主要制作步骤：

第一个步骤:分别给各层线稿进行大色块填充.主要是填充主色调.其中,把亮色和暗色用主色调区分开.

第二个步骤: 使用建层划分色区的办法,把面部,头发,和衣服的大色区划分出来.注:使用红色线条,最后好删除.

第三个步骤: 将线条粘贴到各关联图层,之后使用颜料桶工具填充封闭区域.

第四个步骤: 删除红色线条,然后检查图像,对细节处进行细致的调整和刻画,达到满意效果.

到目前为止,小女孩的造型基本上就算完成了,大家可以根据需要增加一些滤镜效果,添加背景和人物装饰,让画面看起来更生动些.参考效果:

教学小结：

1.本篇鼠绘教学，旨在让同学们熟练掌握FLASH各种工具的使用；同时，“鼠绘”也是FLASH初学者必修的一项最基本的技能。 2.鼠绘的流程：

一.先制作人物的大致草稿. 二.根据所绘草稿来细化线稿.

三.结合所绘线稿进行上色和增加其他辅助元素. 提高与创新：

以上的卡通人物制作，是学习FLASH动画的基本技能之一------鼠会。这种鼠绘风格简单；后面的课程将会让同学们尝试绘画一个偏写实风格的人物。其难度会稍大，所绘元素繁琐，有兴趣的同学，可以索要相关操作方法，利用课余时间进行练习。还是要提醒同学们先学好前面基本鼠绘操作，打牢基础后再学习这个课程，兴许难度会小一些。

(二).FLASH滤镜篇

------用Flash8滤镜打造视觉冲击特效

教学目标：

Flash8的新增滤镜功能，为动画的制作带来的极大的方便和意想不到的效果，掌握Flash的滤镜功能的使用，是我们学习动画制作的必要条件。本节课利用Flash 8 的滤镜打造简单好看的图片视觉特效，不涉及ActionScript，适合初学者，希望同学们喜欢。

知识要点：

1.Flash滤镜特效，2.各种命令、面板的打开与关闭、对象属性参数的设置的快捷方式。

教学步骤：

一．先看效果和源文件（演示）：

“兴趣是最好的老师”！通过在几个班的演示，同学们对滤镜效果特效立即产生了浓厚兴趣，产生了强烈的创作欲望，由此开启了同学们的学习之门。这种启发、引领式的教学方法，也是我们当前洛一职专在计算机专业开展的课堂改革的重要环节之一。实践证明，这一教学环节的使用，形式新颖、效果明显。 二．主要操作步骤：

1、新建立Flash文档，然后修改文档属性：

2、按Ctrl+R导入大小适合的一幅图片，然后选择该图片按F8键转变为影片剪辑元件：

选择第20帧、第30帧、第40帧处分别按F6插入关键帧。 3、在第30帧处使用选择工具选择图形，然后按Ctrl+F3打开属性面板，然后选择滤镜设置调整颜色滤镜的参数如下：

4、然后在第20帧和第30帧之间创建补间动画。选择第40帧，然后使用选择工具选择图片，然后按上述方法设置滤镜，参数如下：

然后在第30帧和第40帧之间创建补间动画。之后把该图层加锁。 5、在图层1的上面创建一个新的图层，在第35帧处按F6插入关键帧，然后按Ctrl+R再导入另外一幅图片，然后用鼠标选择后按F8转变为影片剪辑元件：

6、使用选择工具(V)，选择该图片，打开属性面板设置滤镜参数（方法和第3步、第4步设置的参数一样），然后在第45帧处插入关键帧，然后选择该图片，设置发光滤镜（其它参数别改变）：

7、然后在第65帧插入关键帧，选择该图片设置调整颜色滤镜（其它参数别改变）：

然后在第35帧和第45帧之间、第45帧到第65帧之间创建补间动画，然后第80帧按F5插入帧，锁定图层。

8、最后在创建一个新图层，位于最上面，在第65帧插入关键帧，然后打开库把picture1_mc元件放到舞台上，选择该元件然后按Ctrl+F3设置alpha为0%，最后在第80帧插入关键帧，在第65帧和第80帧之间创建补间动画。最终时间轴如下：

动画制作完毕！按Ctrl+Enter测试观看效果！ 三．按照课改要求实施课堂教学：

以上操作步骤在课堂教学中，打破了传统的、以教师的“讲”为主的教学模式，而是首先展示效果和源文件，这样就极大地提高了学生学习的积极性，最大限度地增强了学生动脑、动手的创作欲望！然后，让学生分小组讨论相关的操作要点，选取其中的重点、难点，让学生动手操作；在此基础上由学生总结有关的操作要领和操作技巧。（如：二1班的郭晶辉、白海沙、曹兰方；二5班的郭方方、李楠；二6班王帅、

王鹏、王松梅等同学在动手操作、总结技巧方面做得最为优秀。不仅自己的能力得以提高，同时也引领其他同学进入动画制作的学习高潮。）

教学后记：

本节课的教学，是按照学校课改实施的第一节教学，主要采用了以下七个环节贯穿课堂教学：1.新课导入，项目展示；2.目标展示；3.自主探究；4.讨论交流、检查反馈；5任务实施；6.总结提高；7.创新。这七个教学环节的实施，使整个课堂教学脉络清晰、条理井然有序、学生积极主动、课堂气氛热烈活跃、教学效果明显。本人通过课改的尝试认为，新课堂教学改革势在必行（尤其对我校的计算机教学！），只有这样才能适应当前课堂教学的需要，才能适应课堂教学的主体，才能更有效地完成教学任务。但教学改革绝不是一哄而起、照抄照搬，而是根据学科、对象、教学条件、教学内容，有选择地灵活实施。只有这样才能让教学“活”起来，才是对课改的真正领会和实施。

（三）FLASH MV制作篇

------《老鼠爱大米》

一．课堂引言： 《东北人都是活雷锋》被冷冻了6年，却因为清华学生一个随手制作的Flash MV红遍大中华；只赚便宜不吃亏的\"流氓兔\"原本只是个被抛弃的玩具形象，而如今通过FLASH MV，流氓兔的形象已经流行全世界；讦谯龙通过FLASH MV成为了耐克公司的形象代言人，音乐专辑火热销售……

不过，现在很多初学FLASH的同学一做起MV就会抓耳挠腮，不是想不出好的创意，就是不会制作和设计。其实，这一切并不难，因为做FLASH MV，只要能表达出自己的想法，能让别人看的懂就算成功的。很多FLASH MV很吸引人，但实际的制作方法却很简单，就好比

我们下面要分析的FLASH MV《老鼠爱大米》。好了，闲话少絮，下面我们就开始分析这个动画的制作过程吧。

（以上文字是本文的一个引子，告诉大家，FLASH MV的魅力与威力。）

二．主要操作步骤： 一、首先，打开FLASH，新建一个Flash文档，单击“属性”面板中的“尺寸”按钮，打开“文档属性”面板设置场景大小为550px x 400px，帧频为12，背景为白色。如图1所示。帧频的值为12，就是1秒播放12帧的动画，如果你增加帧频的值，动画播放速度会加快，但你需要设计更多的帧来达到原来要求的播放时间了。

图1

二、．在设计整个动画前，我们先要导入音乐文件，一般为高压缩的mp3格式。具体操作步骤如下。

1．按快捷键Ctrl+R打开“导入”面板，导入歌曲“老鼠爱大米”，如图2所示。按快捷键Ctrl+L打开“库”面板可以看见刚导入的声音文件，如图3所示。

图2

图3

图4

2．现在的声音文件很大，必须对它进行编辑，以减小整个文件的体积。双击“库”中声音文件的小喇叭图标（点到名字就是更名了），如图4所示设置弹出的“声音属性”面板。这样，声音文件的体积就会缩小一半。

图5

图6

3．如图5所示点“插入图层”按钮在“场景1”中新建一层，命名为“声音”层，然后点选该层中的第1帧，在“属性”面板点“声音名称”下拉菜单选择该声音文件，如图6所示。点击图6中的“编辑”按钮，可以打开“编辑”面板对声音效果进行具体设置。“编辑”面板中按钮功能见图7所示。

图7

三、动画中的音乐设置好了，下面就要设计场景中的元件和效果了。首先，我们要设计一块挡板，遮挡住场景的四周，其作用是防止观众看见场景外的动画元件，另外也可以使动画看上去更象是电影（放电影时四周黑黑的）。该动画的挡板大小是2500x2000多，有点大了。

四、动画中的人物应该是作者自己绘制的，很简单。同学们都能自己绘制出来。动画一开始，用到的是“移动渐变”效果，实现图片渐隐效果，其制作方法如下：

1．按快捷键Ctrl+F8打开“创建新元件”面板，创建一个名为“开场动画”的影片剪辑元件，如图8所示。然后在“开场动画”元件的场景中分别绘制三个人物图案，以及输入“文字”。另一种创建元件的方法：先绘制好图案，然后全部选中，按F8键创建为元件。

图8

图9

2．回到“场景1”，新建一层，点选该层第1帧，按快捷键Ctrl+L打开“库”面板，把“开场动画”元件拖入到场景中，然后点选该层的第24帧，按F6键插入一个关键帧。接着，右键点选第1帧，在弹出的菜单中选择“创建补间动画”命令。点选24帧场景中的“开场动画”元件，在“属性”中设置其Alpha值为0%，如图9所示。

五、从第25帧开始又是一个“移动渐变”效果，元件从场景的左下开始移入场景。到第32帧，歌词出现。如果你输入歌词所使用的字

体不是系统中自带的，一定要按Ctrl+B把文字打散为图片，这样在别人的观看时才能正常显示。

当第一句歌词“我听见你的声音”唱到“声音”两个字的时候，作者用了一个手机抖动的效果来表现，这用的还是“移动渐变”效果，只是每隔2到3帧把“手机”元件的位置上下移动下，如此重复。歌词以外的文字，是用来述说剧情的，如果没有这部分文字，整个动画的就显得过于单调，更无情节可言，加上描述剧情的文字动画，不失为一种增加动画耐看度的做法。

六、接下来，都是一些文字和图片的“移动渐变”效果，就不重复讲解了。在制作时，同学们只要灵活运用几个快捷键调出相应的面板进行设计就可以了。如用快捷键Ctrl+T调出“变形”面板调节元件的大小和角度。下面我们来讲解一下动画变形的制作方法。

1．在动画播放到第460帧，动画的第2种效果出现了，就是两个主人公坐在窗下的图案开始由小变大。

2．这种效果的实现也很简单。先创建好元件，调入第460帧的场景中，点选504帧按F6键插入关键帧，然后创建为“移动渐变”效果，接着点选效果的第504帧，按Ctrl+T调出“变形”面板，如图10所示设置，放大元件。你也可以使用“倾斜”和“旋转”功能该改变图片的大小和角度。

图10

七、整个动画，最后一种效果就是“形状渐变”效果（这种效果常用于图案的变形和变色，相对于“移动渐变”那种“物理效果”，“形状渐变”就是一种化学效果），用来表现主人公眼泪的滑落。制作“形状渐变”时，一定要先按快捷键Ctrl+B将元件打散。

“形状渐变”效果的具体实现方法是，在效果的头尾两帧放上不同形状的图案，然后点选头一帧，在“属性”面板中选择“形状”命令，如图11所示。

图11

八、动画做好后，按快捷键Ctrl+Shift+F12键调出“发布设置”面板，如图12所示设置。设置好后，点面板中的“发布”按钮发布。

图12

三．拓展与提高： 到这里，整个动画就解析完了，如果同学们还有所意犹未尽的话，请继续在本实例的基础上发挥自己的想象，将这个动画做得更完美、更精彩！

四．小结：

1.本实例的讲解与制作，目的是让同学们掌握FLASH MV创作的一般思路和基本方法，使同学们的动画制作水平提高到一个新的高度。

2.不同的动画制作高手，其作品的特点、个性都不尽相同，但他们同时都必定拥有相同的特点：那就是娴熟的操作、良好的习惯和清晰的思路。培养同学们良好的创作习惯，掌握基本的操作技能和技巧，也是本实例讲解和训练的主要意图。如：文档、元件、元素属性的设置与编辑、FLASH各种命令的使用、各种工具的使用、代码的运用等等。这

才是学习动画制作的目的。一些同学在操作过程中，这所以无从下手、效率低下，其原因就在于：1.对FLASH相关的操作不熟练；2.没有养成良好的动画制作习惯。

(四).Flash动画脚本篇 ------星座查询器的制作

教学目标： 1.掌握各种类型的图层的使用；

2.理解和掌握Flash动画脚本在动画中的运用； 知识要点： 1.如何给帧、实例和按钮添加动作； 2.常用脚本语句的语法格式、功能和用法。 教学方法及教学思路： 1.本教程依然沿用课改的新教学模式开展教学活动；

2.通过以上的实例讲解与创作，同学们基本已经掌握了Flash动画制作的常规思路和基本方法，所以，为了节省时间，也为了给同学们一个更为自主的创作空间，本实例的讲解，略去了实例制作的准备环节：文档的建立、属性的设置、相关素材的导入等，这些都有意留给学生自行完成。这也正是培养学生能力的一种有效的方法和途径。 主要操作步骤： 1．新建 FLASH 文档，打开属性面板，设置文档尺寸：400× 250 ，其它默认。

2．在时间轴上新建四个图层， 我们将这五个图层自上而下分别命名 “语

句” 、 “选择框” 、 “文字” 、 “星座” 、 “背景” 。

3．新建一个影片剪辑元件取名为“背景”做一个渐变色的背景，大小为 400×250。回到场景，把这个背景剪拖到背景图层的第一帧，在第13帧加一个普通帧。

4．分别在“文字”“星座”层的第二帧~第十三帧插入关键帧，在文字层第一帧输入“请选择你的生日范围”文字，第二~第十三帧输入“魔羯座”“水瓶座”“双鱼座”“白羊座”“金牛座”“双子座”“巨蟹座”“狮子座”“处女座”“天秤座”“天蝎座”“射手座” 。在星座图层分别对应上面的星座插入 12 星座图片。

5．应注意各个星座之间的先后顺序。如果有兴趣，还可以为每个星座加上一些说明和趣味性的文字。都完成后将“文字”“星座”层锁定。 6．选择菜单栏的“窗口——开发面板——组件”命令，打开 FLASH 的组件面板，将其中User Interface下的 ComboBox 和 Button各拖一个至“选择框”层的第一帧，并用变形工具调整大小。

7．用箭头工具选中其中的 ComboBox 组件，打开对齐面板水平中齐。 8．保持 ComboBox 组件的选中状态，打开“属性”面板，可以看到有属性和参数选项，我们在属性选项的“实例名称”文本框中输入对象名称

“xuanze” 。

9．选中参数选项卡中的 labels 选项，在打开的值对话框中通过加号按钮添加各个选项的显示状态，输入各个星座对应的生日范围。

10． 此时可以看见舞台上的 ComboBox 组件发生了变化，测试动画时已经列出了刚才输入的各个值，同时显示五项，其余项可以通过滑动条显示。

11． 退出测试动画状态， 选中 ComboBox 组件， 在属性面板的参数选项卡中双击 “data”选项，然后在打开的“值”面板中输入每个 labels 选项在动画内部真正对应的数值。如图所示：

最终属性面板如下：

12． 选中舞台上的 Button 组件，打开属性面板，将 Button 值改为“提交”然后在实例名称中输入“tijiao”做为该组件的名称：

13． 此时可看到舞台上的 Button组件上的文字显示不是原来的“Button”而变成了“提交” 。在选择框层的第二帧插入一个关键帧，删除舞台上的二个组件，再从“组件”面板中拖一个 Button 至舞台上，同样的方法，将实例名称命名为“fanhui” ，label 选项值改为“返回” ，属性面板如下：

14． 在时间轴选项层的第十三帧按 F5插入帧，使返回 Button组件出现在每一个星座的画面上，然后将该层锁定。

15． 选中语句层的第一帧，打开动作面板输入如下代码：

stop(); //停在第 1 帧等待用户选择

_root.tijiao.onRelease = function() { //如果点击并释放“提交”按钮 x = _root.xuanze.getValue(); //将选择框的 data值赋给变量 x _root.gotoAndStop(x+1); //时间轴跳转到第 x+1 帧并停止 };

16．将语句层锁定， “ 选择框”解除锁定。选中第二帧的返回 Button组件，打开动作面板，输入如下语句代码：

on(click){ //单点击时

_root.gotoAndStop(1); //时间轴回到第 1帧并停止 }

17． 锁定所有图层，时间轴窗口如下图所示。可以看到最上面的语句层中只有一个带脚本的空白关键帧。

18． 保存并测试动画， 可以看到下拉菜单中选择生日提交后， 可获得该生日对应的星座，单击“返回”按钮可退回继续选择。

动画制作完毕，按CTRL+ENTER键测试影片效果。 小结： 1. 本教程是动作脚本AS在影片中的一个应用实例，通过该实例制作，同学们可以体会到AS在Flash影片制作中的重要作用：①.可以使动画产生意思不到的特效；②.可以增加动画的人机交互性，从而也使Flash在动画类游戏制作方面占有一席地位。

2. 在动画中添加AS，首先要选取明确的对象（是帧、还是按钮、还是实例？），其次要掌握一般的语法规则及功能。只有这样，脚本才能发挥应有的功能。