FLASH动画设计说明书

广州大学市政技术学院

2012届毕业设计(论文) 设计题目动画短片—新世纪龟兔赛跑

学院广州大学市政技术学院

系别信息人文系

班级专业

学号

学生姓名

指导教师

毕业论文（设计）诚信保证书

我已经照论文指导老师的要求，熟悉和理解了我校关于“二级学院全日制学生毕业论文（设计）规范化规定”文件的精神和有关要求，愿意在毕业论文（设计）中诚实守信，绝不抄袭、剽窃他人论文、设计及其他智力成果,引用材料注明出处,参考书目附在论文(设计)篇尾。如有违反愿意接受相应处理。

保证人：

二○一○年三月

目录

前言 (3)

第1章概论 (4)

1.1 FLASH简介 (4)

1.2 FLASH 发展趋势 (5)

第2章剧本设定 (7)

2.1故事大纲 (7)

2.2故事主要内容 (7)

第3章设计构思 (8)

3.1 人物设定 (8)

3.2 场景设定 (8)

第4章设计技术 (9)

4.1 图形绘制 (9)

4.2 填充图像 (10)

4.3 图片原件 (11)

4.4 影片剪辑原件 (12)

4.5 按钮原件 (13)

4.6 引导层动画 (14)

4.7 遮罩层动画 (15)

4.8 声音处理 (16)

第5章制作过程 (17)

5.1 收集素材 (17)

5.1.1 声音材料 (17)

5.1.2 人物素材 (17)

5.1.3 背景素材 (18)

5.2 编辑素材 (19)

5.2.1 编辑声效 (19)

5.2.2 绘制人物 (19)

5.2.3 绘制场景 (20)

5.3 动画制作 (21)

5.4 后期配音 (25)

第6章经验收获 (25)

第7章参考文献 (26)

第8章致谢 (27)

摘要Flash动画设计的三大基本功能是整个Flash动画设计知识体系中最重

要、也是最基础的，包括：绘图和编辑图形、补间动画和遮罩。这是三个紧密相连的逻辑功能，并且这三个功能自Flash诞生以来就存在。

绘图和编辑图形不但是创作Flash动画的基本功，也是进行多媒体创作的基本功。只有基本功扎实，才能在以后的学习和创作道路上一帆风顺。使用Adobe Flash CS3绘图和编辑图形——这是Flash动画创作的三大基本功的第一位。在绘图的过程中要学习怎样使用元件来组织图形元素，这也是Flash动画的一个巨大特点。

补间动画是整个Flash动画设计的核心，也是Flash动画的最大优点，它有动画补间和形状补间两种形式。学习Flash动画设计，最主要的就是学习“补间动画”设计。在应用影片剪辑元件和图形元件创作动画时，有一些细微的差别，应该完整把握这些细微的差别。还有补间动画的帧，启动画的主要作用，只有使用帧才能使动画更完美。

遮罩是Flash动画创作中所不可缺少的——这是Flash动画设计三大基本功能中重要的出彩点。使用遮罩配合补间动画，更可以创建更多丰富多彩的动画效果。遮罩的原理非常简单，但其实现的方式多种多样，特别是和补间动画以及影片剪辑元件结合起来，可以创建千变万化的形式。

Flash动画说到底就是“遮罩+补间动画+逐帧动画”与元件的混合物，通过这些元素的不同组合，从而可以创建千变万化的效果。

关键词：F lash，动画设计，补间动画，帧，遮罩

Abstract Three basic functions of the Flash animation of knowledge of the most important and most basic, including: drawing and editing graphics, tween animation and mask animation. They are three closely linked logic functions, and these three functions has existed since Flash bore.

Drawing and editing graphics is n’t only basic skills of creating Flash animation ,but also the basic skills of multimedia creation. Only a person who has a great firm making foundation can learn on a smooth road in the future. Using Adobe Flash CS3 to draw and edit graphics which is the most important of three basic skills. In the drawing process, we need to learn how to use components to organize the graphic elements, and this is a great feature of Flash animation.

Tween is the core of the Flash animation, and is the greatest advantage.Tween include sharp tween and animation tween two forms. Learning to create Flash animation, the most essensial thing is to learn "tween" design. During using Movie clip elements and graphics elements to create animation, there are some Subtle differences.The frame play the main role of the animation tween running. Only if you use Frame perfectly can you make your animation better.

Mask animation is indispensable- this is one of the three important points of Flash animation and can make your animation out of color. Using mask animation in coordination with the tween animation,we can more varied and colorful animation. The mask animation is easy to use, but the achieved ways are variety.In particular, tween animation and movie clip components combine, you may found the ever changing form.

Flash animation in the final analysis is the "mask + + motion tween animation fra me by frame" and the components of the mixture, different combinations of these elements, which can create ever-changing results.

Flash animation in the final analysis is the "mask animation+ tween animation + frame by frame animation with a mixture of components by different combinations of these elements" which can create a kaleidoscopic effect.

Key word: flash、flash animation、tween animation、mask animation、Frame

前言

一直以来，世界上各种交通事故频发，在我国交通事故所占的死亡人数已经占到了我国事故死亡认输的80%以上，造成的经济损失也不可估量。

首先是群众交通安全和交通法制意识淡薄。由于交通安全知识宣传教育面相对较窄，群众的交通安全知识普及程度较低，相当一部分交通参与者缺乏必要的交通安全常识，不遵守交通法规，随意行车走路现象十分普遍。特别是近年来电动车业发展迅速，由电动车引发的交通事故逐年增多。由于宣传少，群众缺乏对交通管理工作的认识，不能正确理解和自觉遵守交通法规，甚至认为交通管理部门执法是故意刁难，从而不支持、不配合交通管理工作。另外，受传统观念影响，一些交通参与者没有认识到交通违法行为的严重后果，不认为交通违法行为是违法行为，随意违法行车、走路，甚至逃避、抗拒执法现象时有发生。

其中大部分造成事故的原因，都是由于驾驶人员交通安全意识薄弱对交通法规的轻视。驾驶人作为道路交通安全管理的基础和源头，其素质的高低直接决定了道路交通事故的多少。但是近年来随着驾驶人队伍的日益壮大，整个队伍良莠不齐，鱼龙混杂，驾驶人文化素质低下，思想素质不过硬，安全观念不强等问题日益突出。同时，由于驾驶人教育培训比较落后的局面还没有根本好转，在培训、考核中，培训课程、方式方法、考试内容、程序、严格程度等都在不断完善和提高的过程中。

而交通安全法制意识教育的重要性日益显著，儿童青少年他们是国家的未来，中华民族的希望。他们能否健康成长，能否具备包括交通素质在内的越来越高的综合素质，关系到国家和民族的前途和命运。对这样的社会接触不深，安全意识薄弱，自我保护救助能力差的群体这样的教育宣传显得尤为重要。

我是前段时间各种校车严重超载超速等原因而照成的严重交通事故频发中得到启发想法弄了这个动画短片，希望能对提高大家尤其是少年儿童交通法规安全意识有所帮助。

第1章概论

1.1 FLASH简介

Flash是由macromedia公司推出的交互式矢量图和Web 动画的标准，由Adobe 公司收购。网页设计者使用Flash 创作出既漂亮又可改变尺寸的导航界面以及其他奇特的效果。Flash也是存储芯片的一种，通过特定的程序可以修改里面的数据。Flash 的前身是Future Wave公司的Future Splash，是世界上第一个商用的二维矢量动画软件，用于设计和编辑Flash文档。1996年11月，美国Macromedia公司收购了Future Wave，并将其改名为Flash。在出到Flash 8以后，Macromedia又被Adobe公司收购。Flash通常也指Macromedia Flash Player(现Adobe Flash Player)。

Flash，是一种创作工具，目前最新的版本为Adobe Flash CS5.5 Professional(2011年发布)。Adobe Flash Professional CS5为创建数字动画和交互式Web站点提供了功能全面的创作和编辑环境。Flash广泛用于创建吸引人的应用程序，它们包含丰富的视频、声音、图形和动画。可以在Flash中创建原始内容或者从其它Adobe应用程序（如Photoshop或Illustrator）导入它们，快速设计简单的动画，以及使用Adobe AcitonScript 3.0开发高级的交互式项目。设计人员和开发人员可使用它来创建演示文稿、应用程序和其它允许用户交互的内容。Flash可以包含简单的动画、视频内容、复杂演示文稿和应用程序以及介于它们之间的任何内容。通常，使用Flash创作的各个内容单元称为应用程序，即使它们可能只是很简单的动画。您也可以通过添加图片、声音、视频和特殊效果，构建包含丰富媒体的Flash应用程序。

但是Adobe Flash Professional仅仅是Flash CS5工具套件当中的一个产品。除了Flash Professional之外，Adobe还提供了Flash Catalyst和Flash Builder。Flash Catalyst是一个设计工具，它无需编写代码即可快速创建富有表现力的界面和交互式内容。Flash Builder（以前称为Flex Builder）是适合于开发人员（而不是动画师或设计师）创建交互式内容的以代码为中心的环境。尽管开发平台不同，这3种工具最

终都将生成相同的结果——Flash内容（SWF文件）。Flash SWF文件在浏览器上的Flash播放器中、浏览器外面的桌面上的AIR（Adobe Integrated Runtimem，Adobe 集成运行环境）中或者在移动电话上运行。

Flash特别适用于创建通过Internet提供的内容，因为它的文件非常小。Flash 是通过广泛使用矢量图形做到这一点的。与位图图形相比，矢量图形需要的内存和存储空间小很多，因为它们是以数学公式而不是大型数据集来表示的。位图图形之所以更大，是因为图像中的每个像素都需要一组单独的数据来表示。

要在Flash中构建应用程序，可以使用Flash绘图工具创建图形，并将其它媒体元素导入Flash文档。接下来，定义如何以及何时使用各个元素来创建设想中的应用程序。

Flash是一个非常优秀的矢量动画制作软件，它以流式控制技术和矢量技术为核心，制作的动画具有短小精悍的特点，所以被广泛应用于网页动画的设计中，以成为当前网页动画设计最为流行的软件之一。

1.2 FLASH 发展趋势

Flash被称为是“最为灵活的前台”，由于其独特的时间片段分割（TimeLine）和重组（MC嵌套）技术，结合ActionScipt的对象和流程控制，使得在灵活的界面设计和动画设计成为可能，同时它也是最为小巧的前台。Flash具有跨平台的特性（这点和Java一样），所以无论你处于何种平台，只要你安装了支持的Flash Player，就可以保证它们的最终显示效果的一致，而不必像在以前的网页设计中那样为IE或Net Space各设计一个版本。同Java一样，它有很强的可移植性。最新的Flash还具有的手机支持功能，可以让用户为自己的手机设计喜爱的功能。当然首先必需要有支持Flash的手机，同时它还可以应用于Pocket PC。

应用程序开发：由于其独特的跨平台特性、灵活的界面控制以及多媒体特性的使用，使得用Flash制作的应用程序具有很强的生命力。在与用户的交流方面具有其它任何方式都无可比拟的优势。当然，某些功能可能还要依赖于XML或者其它诸如javascript的客户端技术来实现。但目前的现状是：很少有人具有运用Flash进

行应用程序开发这方面的经验。但这个难度会随着时间的推移而逐步减弱。事实上，对于大型项目而言，使用Flash此时未免有些言之过早，因为它意味着很大的风险。当然，在最早的时间掌握和积累这方面的经验无疑是一种很大的竞争力。可以将这种技术运用在项目中的一小部分或者小型项目中，以减少开发的风险。

软件系统界面开发：Flash对于界面元素的可控性和它所表达的效果无疑具有很大的诱惑。对于一个软件系统的界面，Flash所具有的特性完全可以为用户提供一个良好的接口。

手机领域的开发：手机领域的开发将会对精确（像素级）的界面设计和CPU使用分布的操控能力有更高的要求，但同时也意味着更加更广泛的使用空间。事实上手机和Pocket PC的分界已越来越不明显，开发者必须为每一款手机（或Pocket PC）设计一个不同的界面，因为它们的屏幕大小各有不同。当然软件的内核可能是相同的，所要注意的是各类手机CPU的计算能力和内存的大小。这无疑是些很苛刻的要求。

游戏开发：事实上，Flash中的游戏开发已经进行了多年的尝试。但至今为止仍然停留在中、小型游戏的开发上。游戏开发的很大一部份都受限于它的CPU能力和大量代码的管理。不过可喜的是，Flash Player 7运行时性能提高了2至5倍；而且最新的Flash MX 2004 Professional提供了项目管理和代码维护方面的功能，Actionscript 2.0的发布也使得程序更加容易维护和开发。

Web应用服务：其实很难界定Web应用服务的范围究竟有多大，它似乎它拥有无限的可能。随着网络的逐渐渗透，基于客户端-服务器的应用设计也开始逐渐受到欢迎，并且一度被誉为最具前景的方式。但是，这种方式开发者可能要花更多的时间在服务器后台处理能力和架构上，并且将它们与前台（Flash端）保持同步。

站点建设：事实上，现在只有极少数人掌握了使用Flash建立全Flash站点的技术。因为它意味着更高的界面维护能力和开发者整站架构能力。但它带来的好处也异常明显：全面的控制；无缝的导向跳转；更丰富的媒体内容；更体贴用户的流畅交互；跨平台和瘦客户端的支持；以及与其它Flash应用方案无缝连接集成等。

多媒体娱乐：其实，在这个方面无需再说什么。尽管它的发展速度没有像当初预言的那样迅速，但它仍然还在不断前进。Flash本身就以多媒体和可交互性而广为推崇。它所带来亲切氛围相信每一位用户都会喜欢。

flash影片的后缀名为 .swf ，该类型文件必须有flash播放器才能打开，

但占用硬盘空间少，所以现在被广泛应用于游戏。

第2章剧本设定

2.1故事大纲

故事书里龟兔赛跑兔子因为骄傲而输了比赛，不服气，于是再次找到乌龟，想以赛车的形式比赛，最后因为超速忘记带驾驶证被发现他的交警小狗逮捕，乌龟赢得比赛。

2.2故事主要内容

大家都知道龟兔赛跑的故事，兔子和乌龟约定以赛跑分胜负，比赛最后兔子因为骄傲自大，在快到达终点的时候躺在一边睡觉，最后让乌龟赢得了比赛。动画以这个为开头，讲述后来兔子因为不服气而再次向乌龟挑战，但这次比赛的形式不是赛跑而改为赛车。于是兔子约定乌龟星期一比赛找了大象做裁判。到了星期一，一切准备就绪，裁判大象倒数三声比赛开始，开始兔子领先，慢慢加速抛离了乌龟，而兔子一路加速到了150km/h。而作为赛道的公路上有限速要求，不能超过100km/h，一路遥遥领先的兔子在途中被交警小狗发现了，交警小狗加速截停了超速的兔子。交警小狗示意让兔子出示驾驶证件，兔子忘记带，因此逮捕了兔子。最后乌龟依然

赢得比赛。最后谢幕，动画结束，宣传交通法制安全意识。

第3章设计构思

3.1 人物设定

兔子——性格骄傲自大、丢三落四、存在侥幸心理，爱耍小聪明。输了比赛不服气又找乌龟比赛。

乌龟——样子踏实稳重开朗、做事有条不紊，有恒心坚持不懈。接受兔子挑战踏实开车，赢得比赛。

大象——样子可爱、敦厚老实，公平公正。担任比赛裁判。

小狗——样子威风严肃魁梧，依法办事，拥有正义感。发现兔子超速，并查出他没带驾照依法逮捕。

3.2 场景设定

场景一：电影院播放影片。

场景二：翻开书本，讲述之前龟兔赛跑剧情。

场景三：在之前龟兔赛跑中，兔子在一边睡着了，而乌龟坚持完成比赛赢了兔子。

场景四：翻页，讲述之后的故事。

场景五：赛道概况。

场景六：提示时间过去。

场景七：一切准备就绪，倒数三声裁判大象甩旗宣布比赛开始，兔子一路领先，渐渐与乌龟拉开距离。

场景八：把镜头拉向兔子车里。

场景九：兔子车里的时速表，显示速度未150km/h。

场景十：兔子遇到警车，被警察发现超速。

场景十一：警察追截兔子。

场景十二：乌龟追过了兔子。

场景十三：警察对兔子问话，发现兔子没有带驾驶证，并逮捕走了兔子。

场景十四：乌龟走完全程，冲过终点，大象在一旁，乌龟欢呼取得胜利。

场景十五：电影院放映结束。

场景十六：闭幕。

场景十七：警醒、宣传交通法制安全意识。

第4章设计技术

4.1 图形绘制

在flash中有很多画图的工具，比如直线工具、钢笔工具、矩形工具等等。每个工具都有各自的长处与短处，只有充分了解了每个工具的用法，才能在实际操作中做到灵活运用，使作品表达出作者所想表达的效果，才能做到事半功倍。在本作品中，大部分画面都采用最简单的直线工具、矩形椭圆工具，铅笔工具进行绘画，利用flash的能让直线任意变曲线的功能，并且进行一些微细修改，就能勾勒出心

中要的图案。（如下图4.1-1）

图4.1-1 车内

4.2 填充图像

Flash拥有一种与其他制图软件不一样的功能，就是它所填充的区域能单独选择进行编辑或删除。对一个已经勾勒好的图形进行填充，只需要用颜料桶工具就可以，但经常会出现的情况是填充不了，而原因一般都是一样的——填充区域没有闭合。像这种情况只需要选择颜料桶下方的空隙大小按钮，就能任意调节想要的效果。除了纯色，还可以选择已经填充好的颜色块，在flash右手边的颜色窗口处选择渐变效果，通过调整颜色和Alpha便可以变换各种效果，或可将光点任意组合，形成各种好看的图形。（如下图4.2-2）

图4.2-2 地图

4.3 图片原件

在flash中，图形元件适用于静态图像的重复使用，或者创建与主时间轴相关联的动画。它不能提供实例名称，也不能在动作脚本中被引用。为了不让作品出现自动生成的补间，我们需要制作很多图形原件，尤其是在需要创建补间动画的时候，头尾两个关键帧里的内容必须为元件。但图形元件不能添加滤镜效果，滤镜只适用于文本、影片剪辑和按钮。（如下图4.3-3）

图4.3-3 交通标示

4.4 影片剪辑原件

影片剪辑的好处在于能不断地循环，它通常用于制作闪烁的星星，眨眼的眼睛、说话的嘴巴等等不需要我们精确时间的动画。如果在“影片剪辑”元件内部制作的动画，在这个“影片剪辑”里，可以通过“回车”键就能直接看到效果，而“影片剪辑”在场景里，通过“回车”是看不到任何动作的，必须要“CTRL+回车”输出动画才能看到。“影片剪辑”不受“场景”中“帧”的限制，它可以独立于时间轴而播放。即使“场景”中时间轴只有1帧，影片剪辑可以照常播放其内部几分钟的画面和声音，而且影片剪辑还可以添加滤镜从而制作出一些想要的效果，如发光、阴影，斜角等。（如下图4.4-4）

图4.4-4 翻书

4.5 按钮原件

按钮元件实际上是四帧的交互影片剪辑，它只对鼠标动作做出反应，用于建立交互按钮。本设计只在开头处放置了一个“Play”的按钮，和结尾处放置了一个“Replay”的按钮。

因为不注意建立的*.fla文件是ActionScript3.0的版本，因此不能再用那种在按钮上添加代码制作动作的方法，而是较为复杂的只能在按钮所在的帧上添加代码制作按钮的动作。（如下图）

图4.5-5 播放按钮

代码如下：

stop();

start.addEventListener(MouseEvent.MOUSE_DOWN,MouseDown);

function MouseDown(event:MouseEvent):vo id

{

gotoAndPlay(1); //转到场景-片头的第一帧

}

图4.5-6

代码如下：

stop();

replay.addEventListener(MouseEvent.MOUSE_DOWN,toreplay);

function toreplay(event:MouseEvent):void{

gotoAndPlay(1,"开场");

}

4.6 引导层动画

引导层的原理就是把画出的线条作为动作补间元件的轨道。

引导层的作用:是作用是辅助其它图层对象的运动或定位，例如我们可以为一个球指定其运动轨迹。另外也可以在这个图层上创建网格或对象，以帮助对齐其他对象。被导向图层在上一层为一导向层或被导向层时才有效。当该项被选择时，所代表的层与导向图层将产生某种关联。使用引导层可以使你的FLASH作品增添许多意想不到效果。（如图）

图4.6-1

4.7 遮罩层动画

遮罩层的作用是把焦点限制在高亮层上，通过一个绝对定位的层（通常使用div），设置它的宽度和高度以致能覆盖整个屏幕（包括缩放和滚动浏览器的情况下），再给它设置一个比较高的zIndex来层叠在原有内容之上（但要比高亮层小），这样用户就只能点到这个层之上的内容了。

它的原理是：上面一层是遮罩层，下面一层是被遮罩层。遮罩层上的图，自己是不显示的。它只起到一个透光的作用。假定遮罩层上是一个正圆，那么光线就会透过这个圆形，射到下面的被遮罩层上，只会显示一个圆形的图形。如果遮罩层上什么都没有，那么光线就无法透到下面来，那么下面的被遮罩层

什么也显示不出来。

在Flash动画中，“遮罩”主要有2种用途，一个作用是用在整个场景或一个特定区域，使场景外的对象或特定区域外的对象不可见，另一个作用是用来遮罩住某一元件的一部分，从而实现一些特殊的效果。（如图）

图4.7-2

4.8 声音处理

声音处理软件有很多，本设计主要运用了CoolEdit 进行后期声音的录制和处理。由于制作设计时会出现配音人手不够的问题，也可以运用该软件进行处理。在去除噪音后再将其变调，就会出现不同声线的声音。

为了使每一段声音在作品里的音量能统一，在导入flash之前都要现在CoolEdit 里设置效果—波形振幅—音量标准化，统一参数100%。这样能使作品中的声音足够和谐。

第5章制作过程

5.1 收集素材

在做动画之前，必须先找出一些自己在制作过程中所需要用到的素材，只有找到好的素材才能使你的作品更加完美出色并且减少你的工作量。因此，在开始动作制作前我们首先应该想想自己日后制作时所需要用到的素材，上网搜索，尽可能越多越好以便日后筛选。

5.1.1 声音材料

主要运用了CoolEdit 进行声音录制，一些想要的声音在网上还没有找到。5.1.2 人物素材

我的人物素材主要来源于网上搜索得到的图片，并加以修改，得到自己所需要的角色。人物设计时最好要根据剧情实际创作出符合剧情中人物性格的角色，并做出一些任务固有的突出性的特征，这样可以使剧情发展顺理成章并使得动画生动合理容易让人留下印象。以下是我的创作出的人物的原型图片。（如下图）