多媒体技术项目五动画技术应用—“中秋贺卡”Flash动画设计与制作课件.ppt

1、项目五项目五 动画技术应用动画技术应用“中秋贺卡中秋贺卡”Flash”Flash动画设计与制作动画设计与制作 学习目标知识目标知识目标能力目标能力目标1熟悉动画的基本原理，了解动画的应用。2熟悉帧、时间轴、图层、面板、元件、动作脚本等基本概念和常用动画文件格式。3熟悉Flash软件界面与基本工具的作用。4掌握补间动画、逐帧动画、遮照动画、引导动画、交互动画的特点与制作过程。5掌握使用Flash创作与发布主题动画作品的基本过程。1能策划、设计并制作一个“中秋贺卡”Flash动画作品。2能运用Flash软件绘制矢量图形、制作二维交互动画、并与声音、文本进行合成、形成贺卡动画作品。3能运用动画制作方

2、法与技巧进行简单动画作品的创作。4能与人良好沟通，合作完成学习任务。目录一一二三四五六七5.1 5.1 项目提出项目提出5.25.2 项目分析项目分析5.3 5.3 相关知识相关知识5.4 5.4 项目实现项目实现 5.5 5.5 项目评价项目评价5.6 5.6 项目总结项目总结5.7 5.7 拓展训练拓展训练5.1 项目提出 随着网络技术、通信技术、多媒体技术的发展，动画逐渐从传统的电影、电视平台走向网络，成为网络商业广告、网络动漫、网络游戏等各类应用领域的宠儿，其在增强动态视觉效果和人机交互方面具有平面媒体无法比拟的优势。本项目训练侧重训练二维动画的制作技术及应用，以设计和实现“中秋贺卡”

3、Flash动画为主线，以Flash为主要技术支撑，贺卡内容包括片头动画、主体动画、片尾动画三个模块以及祝福语、祝福动画、背景音乐等基本要素。5.2 项目分析 制作Flash主题动画的全过程，是指从动画项目分析与规划开始，到将制作后的作品上传到网络的整个过程。如果是小规模项目，可以一个人承担多项任务自己完成，但通常情况是34名开发者（设计师、程序员等）一起组成一个小组来完成项目。Flash主题动画的项目进行基本过程如图所示。任务分析与规划素材收集整理主体设计场景页面制作动画合成测试评估发布检测5.3 Flash相关知识5.3.1 Flash CS35.3.1 Flash CS3工作界面工作界面5

4、.3相关知识1帧帧是组成二维动画的基本单位。每帧就是动画中的一幅静止的画面。比如，在Flash动画中，根据帧的生成方法及在动画中的重要程度不同，动画中的帧可以分为关键帧、空白关键帧、静态延长帧、补间帧等。5.3.2 Flash5.3.2 Flash专业术语专业术语5.3相关知识2元件元件分为影片剪辑、按钮、图形三种类型。影片剪辑元件是可以独立于主时间轴播放的动画剪辑，可以加入动作代码。按钮元件有“常规”、“弹起”、“按下”和“点击”四帧的特殊影片剪辑，可以加入动作代码。图形元件是依赖主时间轴播放的动画剪辑，不可以加入动作代码。场景中的任意图形、文字或图片都可以转换为元件。3逐帧动画逐帧动画也称

5、为帧帧动画或关键帧动画，创建方法是逐个关键帧进行编辑，每个关键帧都是独立的，动画通过关键帧的不断变化产生。5.3.2 Flash5.3.2 Flash专业术语专业术语5.3相关知识4补间动画 补间动画的原理是，在第一帧和最后一帧编辑图形，中间由Flash软件通过插值计算自动生成动画。使用补间动画，制作的动画文件小，连续流畅，并且制作相对比较容易。补间动画有两种形式：动作补间动画和形状补间动画。动作补间动画只能使用元件制作，不能使用图形创建。5遮照动画遮照动画的原理是：在动画的上面放置一个遮照图层，就好象图层的蒙板。遮照层遮盖住的地方在动画正常播放时显示，没有遮盖的地方将不显示。5.3.2 Fl

6、ash5.3.2 Flash专业术语专业术语5.3相关知识6引导动画引导动画也称路径动画。引导动画的原理是：一个元件由它的上一个图层，即引导层上所绘制的线条进行引导，指定第1帧和最后一帧的元件在线条上的位置后，中间由软件本身自动生成补间动画。引导图形在编辑时可见，发布后不可见。7动作脚本ActionScript 是一种面向对象的编程语言，风格和JavaScript类似，能够控制Flash动画的播放行为和对象的属性。ActionScript动作脚本代码可以放置在时间轴的帧上，也可以放置在元件上。8场景Flash 中使用场景可以将文档组织成可包含除其它场景外的内容的不连续部分。即可以重新建一个动画

7、单元，不受前面场景的内容影响，5.3.2 Flash5.3.2 Flash专业术语专业术语5.3相关知识5.3.3 Flash5.3.3 Flash常用快捷操作常用快捷操作操作命令操作命令功能含义功能含义操作命令操作命令功能含义功能含义F5播放延长帧Ctrl+F8新建元件F6插入关键帧F9打开动作面板F7插入空白关键帧Ctrl+F3打开属性面板Enter播放影片Ctrl+B将元件打散为图形C t r l+Enter测试影片F8将图形转换为元件Ctrl+G将所选对象进行组合5.4项目实现5.4.15.4.1总体设计总体设计1 1结构设计结构设计Flash贺卡的基本结构如图所示。2 2风格设计风格

8、设计鉴于中秋贺卡是思念和祝福亲友为主题的动画，动画考虑了传统的表现要素之一月饼。因此在色彩上以月饼的颜色为主。由于此动画以诙谐的方式表现轻松的氛围，因此加入了比较多的绿色。在声音方面除背景音乐外，配上轻快的音效，以烘托诙谐气氛。动画整体采用了卡通的人物风格。片头动画主体动画片尾动画5.4项目实现3 3内容设计内容设计5.4项目实现5.4.25.4.2运用运用FlashFlash软件导入图像软件导入图像 1 1启动启动FlashFlash2新建动画文档新建动画文档5.4项目实现5.4.25.4.2运用运用FlashFlash软件导入图像软件导入图像 3 3导入背景图像导入背景图像5.4项目实现5

9、.4.35.4.3运用运用FlashFlash软件绘制图形元件软件绘制图形元件 5.4项目实现5.4.35.4.3运用运用FlashFlash软件绘制图形元件软件绘制图形元件 5.4项目实现5.4.35.4.3运用运用FlashFlash软件绘制图形元件软件绘制图形元件 5.4项目实现下面以“卡通头像”元件的制作为例介绍如何使用Flash软件创建图形元件的过程。创建元件。绘制一个三角形。5.4.35.4.3运用运用FlashFlash软件绘制图形元件软件绘制图形元件 绘制眼睛和嘴巴。调整脸部图形。主要操作步骤:5.4项目实现5.4.35.4.3运用运用FlashFlash软件绘制图形元件软件绘

10、制图形元件绘制鼻子。绘制尾巴。绘制耳朵。调整耳朵图形。填充耳朵部位颜色。5.4项目实现5.4.4 5.4.4 运用运用FlashFlash软件制作影片剪辑元件软件制作影片剪辑元件在制作中秋贺卡Flash贺卡时我们还需要制作多个影片剪辑元件，包括枫叶飘动、卡通人物行走、卡通人物正面表情、卡通人物晕倒、下月饼等，效果如图所示。5.4项目实现5.4.4 5.4.4 运用运用FlashFlash软件制作影片剪辑元件软件制作影片剪辑元件 1.1.制作影片剪辑元件制作影片剪辑元件“卡通人物行走卡通人物行走”主要操作步骤主要操作步骤:进入编辑页面。拖动图形元件到各自图层。注意注意：本题中“卡通人物脚”元件需

11、要在“卡通人物脚前”，“卡通人物脚后”两个图层中各拖动一个。5.4项目实现5.4.4 5.4.4 运用运用FlashFlash软件制作影片剪辑元件软件制作影片剪辑元件调整图形。调整图形。添加阴影。添加阴影。添加帧。5.4项目实现5.4.4 5.4.4 运用运用FlashFlash软件制作影片剪辑元件软件制作影片剪辑元件添加关键帧。5.4项目实现5.4.4 5.4.4 运用运用FlashFlash软件制作影片剪辑元件软件制作影片剪辑元件第1-5帧卡通人物脚部上方的变化第1-5帧卡通人物脚部下方的变化 5.4项目实现5.4.4 5.4.4 运用运用FlashFlash软件制作影片剪辑元件软件制作影

12、片剪辑元件2 2制作影片剪辑元件制作影片剪辑元件“枫叶飘动枫叶飘动”主要操作步骤主要操作步骤:创建“枫叶飘动”影片剪辑。拖动“枫叶”元件至舞台。5.4项目实现5.4.4 5.4.4 运用运用FlashFlash软件制作影片剪辑元件软件制作影片剪辑元件创建引导层添加引导线。对准引导线起点。5.4项目实现5.4.4 运用运用Flash软件制作影片剪辑元件软件制作影片剪辑元件在各关键帧处调整图形位置。创建补间动画。5.4项目实现5.4.4 5.4.4 运用运用FlashFlash软件制作影片剪辑元件软件制作影片剪辑元件3 3制作影片剪辑元件制作影片剪辑元件“下月饼下月饼”主要操作步骤主要操作步骤:创

13、建“下月饼“影片剪辑。创建补间动画。5.4项目实现5.4.55.4.5运用运用FlashFlash软件制作播放控制按钮软件制作播放控制按钮 1 1制作播放按钮制作播放按钮主要主要操作操作步骤步骤:创建元件。拖动“月饼”元件至舞台。输入文字“play”。5.4项目实现5.4.55.4.5运用运用FlashFlash软件制作播放控制按钮软件制作播放控制按钮 在按钮中插入帧。使用同样的方法制作“返回按钮”。5.4项目实现5.4.65.4.6运用运用FlashFlash软件制作片头动画、主体动画、片尾动画软件制作片头动画、主体动画、片尾动画 1 1制作片头动画制作片头动画主要操作步骤主要操作步骤:建立

14、“片头动画”场景。添加背景图像。5.4项目实现5.4.65.4.6运用运用FlashFlash软件制作片头动画、主体动画、片尾动画软件制作片头动画、主体动画、片尾动画创建其它图层内容。在图层中输入代码。5.4项目实现5.4.65.4.6运用运用FlashFlash软件制作片头动画、主体动画、片尾动画软件制作片头动画、主体动画、片尾动画在开始按钮中添加代码。5.4项目实现5.4.65.4.6运用运用FlashFlash软件制作片头动画、主体动画、片尾动画软件制作片头动画、主体动画、片尾动画2 2制作主体动画制作主体动画主要操作步骤主要操作步骤:制作背景图层动画。拖动“人物行走”元件至舞台。5.4

15、项目实现5.4.65.4.6运用运用FlashFlash软件制作片头动画、主体动画、片尾动画软件制作片头动画、主体动画、片尾动画插入空白关键帧。导入人物行走时的音乐。在动画中加入“行走.mp3”声音文件。5.4项目实现5.4.65.4.6运用运用FlashFlash软件制作片头动画、主体动画、片尾动画软件制作片头动画、主体动画、片尾动画同步设置为“数据流”。“人物正面”图层各帧处插入空白关键帧。5.4项目实现5.4.65.4.6运用运用FlashFlash软件制作片头动画、主体动画、片尾动画软件制作片头动画、主体动画、片尾动画拖动“卡通人物正面”元件实例至舞台。在动画中加入“笑.mp3”声音文

16、件。5.4项目实现5.4.65.4.6运用运用FlashFlash软件制作片头动画、主体动画、片尾动画软件制作片头动画、主体动画、片尾动画在动画中加入“惊奇.mp3”声音文件。11在动画中加入“撞击.mp3”声音文件。5.4项目实现5.4.65.4.6运用运用FlashFlash软件制作片头动画、主体动画、片尾动画软件制作片头动画、主体动画、片尾动画12在动画中加入“悲惨.mp3”声音。13拖动两个“枫叶飘动”元件实例至舞台。5.4项目实现5.4.65.4.6运用运用FlashFlash软件制作片头动画、主体动画、片尾动画软件制作片头动画、主体动画、片尾动画14水平翻转图形。15建立撞击效果。

17、5.4项目实现5.4.65.4.6运用运用FlashFlash软件制作片头动画、主体动画、片软件制作片头动画、主体动画、片尾动画尾动画16拖动“人物晕倒”影片剪辑元件实至舞台。17拖动“下月饼”影片剪辑元件实至舞台。5.4项目实现5.4.65.4.6运用运用FlashFlash软件制作片头动画、主体动画、片尾动画软件制作片头动画、主体动画、片尾动画18拖动“遮罩片”元件实例拖至舞台 19改变“遮罩片”元件实例大小并创建动画 5.4项目实现5.4.65.4.6运用运用FlashFlash软件制作片头动画、主体动画、片尾动画软件制作片头动画、主体动画、片尾动画20拖动“文字1”元件实例拖至舞台 2

18、1设置“alpha”值5.4项目实现5.4.65.4.6运用运用FlashFlash软件制作片头动画、主体动画、片尾动画软件制作片头动画、主体动画、片尾动画22拖动“文字2”元件实例拖至舞台 23修改场景名称 5.4项目实现5.4.65.4.6运用运用FlashFlash软件制作片头动画、主体动画、片尾动画软件制作片头动画、主体动画、片尾动画3 3制作片尾动画制作片尾动画主要操作步骤主要操作步骤:新建场景“片尾动画”。添加背景图像。5.4项目实现5.4.65.4.6运用运用FlashFlash软件制作片头动画、主体动画、片尾动画软件制作片头动画、主体动画、片尾动画创建其他图层内容 在图层中输入

19、代码 5.4项目实现5.4.65.4.6运用运用FlashFlash软件制作片头动画、主体动画、片尾动画软件制作片头动画、主体动画、片尾动画返回按钮中添加代码 5.4项目实现5.4.7 Flash5.4.7 Flash动画测试与发布动画测试与发布1 1测试影片或场景测试影片或场景2 2导出作品导出作品导出设置。主要操作步骤主要操作步骤:打开“中秋贺卡.fla”文件。打开“导出影片”对话框。选择保存类型。5.4项目实现5.4.85.4.8说明文档制作说明文档制作 说明文档用于对制作的作品进行主要内容等方面的简要说明。以便于浏览用户了解作品的梗概及不同团队间的学习交流。5.5 项目评价5 55 5

20、1 1评价指标评价指标 本任务评价采用百分制计分，分值由组内自评、小组互评、教师总评分构成。权重为20：20：60。5 55 52 2评价方法评价方法 组内自评使用表所示完成。在组内个人评价基础上，小组互评与教师总评由各组指定代表演示和讲演作品完成过程时进行按上表评价体系打分。小组将个人任务在评价完成后交于教师签写任务的总体评价。5.6 项目总结项目总结5 56 61 1问题探究问题探究1Flash动画播放前通常要放置下载进度条，有何作用？2Flash中导入的背景图像超出舞台大小时如何快速调整使图像和文档尺寸一致？3怎样调节一个图形或图形元件实例的透明度?4 在Flash中绘制一个圆，单击选中

21、并移动时发现只能选中填充部分，如何同时选中整个较长形对象？5.如何画标准的正圆正方？6当需要重复使用某个图形对象时，直接在主场景中复制而得与调用元件实例有何区别？7创建补间动画时头尾关键帧之间的线条是虚线，且动画无法正常播放，是什么原因？8如何制作文字或图像的 变形动画？9如何把动画输出为图像或其它的动画格式？10如何使声音无限循环？5.6 项目总结项目总结5 56 62 2知识拓展知识拓展Flash技术典型应用1动漫动漫2MTV3游戏游戏4商业广告商业广告5.6 项目总结项目总结5 5网站网站6 6教学课件教学课件5 56 62 2知识拓展知识拓展5.6 项目总结项目总结553技术提升 贺卡

22、动画基本以图形和动画为主，所以比较适合做文字内容不太多，以平面、动画效果为主的应用。有些复杂的贺卡用到较多的ActionScript或数据库，交互性更强。其开发的语言以ASP（Active Server Page）为代表。ASP是在服务器端执行，在浏览器端显示运行结果的动态网页设计语言。Flash支持与ASP之间的数据交换，并且可以借助ASP与数据库进行数据交换。因此，在实际开发中，可以根据需要利用两者的优势制作平面与动画效果佳、内容丰富的动画，这将大大扩充了Flash的应用范围。5.6 项目总结项目总结563技术提升 贺卡动画基本以图形和动画为主，所以比较适合做文字内容不太多，以平面、动画效

23、果为主的应用。有些复杂的贺卡用到较多的ActionScript或数据库，交互性更强。其开发的语言以ASP（Active Server Page）为代表。ASP是在服务器端执行，在浏览器端显示运行结果的动态网页设计语言。Flash支持与ASP之间的数据交换，并且可以借助ASP与数据库进行数据交换。因此，在实际开发中，可以根据需要利用两者的优势制作平面与动画效果佳、内容丰富的动画，这将大大扩充了Flash的应用范围。5.7 拓展训练拓展训练5 57 71 1改进训练改进训练1.1.训练内容训练内容综合使用ASP、Flash及数据库技术为“中秋贺卡”Flash动画添加留言板模块。2.2.训练要求训练

24、要求（1）在主体动画中添加留言板图形按钮，使得单击此按钮，进入次场景留言板模块的播放。（2）在次场景留言板模块中，用户可以留言，且单击提交按钮，可以将留言内容提交到数据库。3.重点提示（1）合理设计留言板模块的色彩与风格，使之与其它模块风格统一。（2）留言板模块的画面尺寸大小与主场景提供的播放空间相符。5.7 拓展训练拓展训练5 57 72 2创新训练创新训练1.1.训练内容训练内容 运用Flash技术制作音乐故事MTV。2.2.训练要求训练要求 （1）选择一首熟悉的歌曲，下载歌词与音乐，制作Flash音乐MTV。（2）文本要求:根据主题要求，选择适合主题风格需要的外部字体.除字幕外，根据歌曲

25、风格编写一个简单的故事，将故事文本插入画面适当的位置。（3）动画要求:借用各种图形图像处理工具处理及绘制相应图形图像。画面美观，播放流畅。（4）合成要求:音乐，字幕与动画内容保持同步。（5）基本结构要求:包括预载动画，片头动画，MTV主体动画，片尾动画.其中片头片尾部分包括制作信息，播放控制信息等。3.重点提示 （1）合理设计音乐故事MTV的色彩与风格，使之各模块风格统一。本项目小结本项目小结 本项目以策划、设计并制作一个中秋贺卡Flash动画作品的学习任务为中心，详细介绍任务完成的过程。旨在训练学生运用Flash软件绘制矢量图形、制作二维交互动画、并与声音、文本进行合成、形成贺卡动画作品的能力；运用动画制作基本方法与技巧进行动画作品创作的能力；与人良好沟通，合作完成学习任务的能力。围绕项目完成，本章在项目分析的基础上提供了完成该项目需要的相关知识，详细的项目设计与制作过程、项目评价指标与方法、说明文档的编写，最后从问题探究、知识拓展、技术提升3方面对项目进行了总结。在完成此项目示范训练的基础上，增加了改进型训练、创新型训练，以逐步提高学习者运用二维动画技术的综合职业能力。