1、授课老师：罗萍l 了解动画的起源与发展。l 掌握动画制作的原则。l 了解Flash的发展历史。l 了解Flash CS5的工作界面。l 掌握Flash动画制作流程。本章学习要求本章学习要求 第第1章章 Flash CS5Flash CS5动画制作基础知识动画制作基础知识 1.1 动画设计综述 1.2 Flash CS5动画设计简介 1.3 制作第一个Flash动画 本章大纲本章大纲1.1 动画设计综述1.1.1 动画的应用领域 Flash动画被广泛应用于网页设计、网页广告、网络动画、多媒体教学动画被广泛应用于网页设计、网页广告、网络动画、多媒体教学课件、游戏、企业宣传、产品展示和电子相册等领域
2、。课件、游戏、企业宣传、产品展示和电子相册等领域。 网页广告 Flash音乐动画 迪斯尼公司于20世纪30年代提出了动画制作的12条原则，这些原则为动画师们找到了表现精致复杂动画的方法。 下面详细讲解这12条基本动画原则。 1.1.2 动画的设计原则1. 掌握时序。2. 慢入和慢出。3. 弧形动作。4. 预期性。5. 使用夸张。6. 挤压和伸展。7. 辅助动作。8. 完成动作和重叠动作。9. 逐帧动画和关键帧动画。10.布局。11.吸引力。12.个性。 1.1.3 常用动画制作软件简介一三维动画制作软件 目前最常见的三维动画制作软件有3ds Max、 Maya、SoftImage和Lightw
3、ave等。二交互式二维动画制作软件Flash 在众多的二维动画制作软件中，Flash最为璀璨， 随着Flash的发展，Flash已经逐渐成为二维动画制作软件的代名词。 每个人创建每个人创建FlashFlash动画的习惯不同，但都会遵循一个动画的习惯不同，但都会遵循一个基本的流程。基本的流程。下面介绍创建下面介绍创建FlashFlash动画的流程。动画的流程。 发布作品发布作品 前期策划前期策划 准备素材准备素材 后期调试后期调试 制作动画制作动画 1.1.4 Flash动画创作流程1.2 Flash CS5动画设计简介一Flash动画制作流程 Flash动画制作流程十分的简单，分为：新建Fla
4、sh文档、编辑场景、保存影片、发布影片4个步骤，其中编辑动画部分是流程的关键，发布影片控制着发布影片的大小、质量和文件格式等重要性质，所以也是十分重要的。二. Flash CS5界面介绍1.2.1 Flash CS5简介启动Flash CS5并熟悉工作界面 启动Flash CS5 1.单击单击“开始开始”按钮，在弹出的菜单按钮，在弹出的菜单中选择中选择“所有程序所有程序”“Adobe Design Premium CS5”“Adobe Flash Professional CS5”，或双击桌面上的，或双击桌面上的图标。图标。 正确安装Flash CS5并进行注册后，可参照以下步骤启动Flash
5、 CS5。 Flash CS5开始页 单击此处的选单击此处的选项，可使用系项，可使用系统自带的一些统自带的一些模板制作模板制作Flash动画动画 单击该选项可单击该选项可打开打开“打开打开”对话框，从中对话框，从中可选择要打开可选择要打开的文档的文档 单击单击“ActionScript 3.0”或者或者“ActionScript 2.0”选项即可新建一个选项即可新建一个Flash文档，并进入文档，并进入Flash CS5的工作界面的工作界面 。 2.打开打开Flash CS5的开始页的开始页Flash CS5工作界面 可以看到其工作界面由标题栏、菜单栏、文档选项卡、可以看到其工作界面由标题栏、
6、菜单栏、文档选项卡、主工具栏、时间轴、编辑栏、舞台、工具箱和多个控制主工具栏、时间轴、编辑栏、舞台、工具箱和多个控制面板等组成面板等组成 。 3.进入进入Flash CS5的工作界面后的工作界面后 “时间轴时间轴”面板面板：默认情况下，“时间轴”面板位于舞台下方，用于组织和控制动画内容，它主要包括图层和时间帧两部分。“时间轴”面板的左侧区域显示了动画中包含的图层名称及其相应状态，右侧显示了各图层的时间轴。 图层区图层区 播放头播放头时间帧标尺时间帧标尺时间帧时间帧时间帧状态栏时间帧状态栏“时间轴时间轴”面板面板 1.2.2 牛刀小试简单动画【设计思路】新建文档。制作背景。制作文字。补间动画。保
7、存影片。发布影片。【设计效果】创建图所示效果。最终效果操作要求：操作要求：实现实现“从零开始学从零开始学Flash”几个文字由右运动几个文字由右运动到左的动画效果。到左的动画效果。【操作步骤操作步骤】1. 创建新文件。 选择【新建】/【Flash文件（ActionScript 2.0）】命 令，新建一个Flash文档。 【要点提示要点提示】u 此处选择【Flash文件（ActionScript 3.0）】和【Flash文件（ActionScript 2.0）】差别在于其动画文件支持的后台脚本不同。u ActionScript 2.0主要针对对象编写代码，编写时语言很简单，而ActionScri
8、pt 3.0较为复杂。2. 制作背景。选择【修改】/【文档】菜单命令，打开【文档属性】对话框，将【高】选项改为“400像素”，【宽】为“500像素” 。3.添加文字使用工具箱中的文字工具，输入“从零开始学Flash”的静态文本，字体设为“华文琥珀”，大小设为“60”。4.制作动画将文字拖放到舞台最右边外侧。在第60帧上插入关键帧（按F6），将文字拖放到舞台最左边外侧。在时间轴面板上，设置补间为“创建传统补间”。5.保存文件将制作的文件保存为“我的第一个动画.fla”。按Ctrl+Enter快捷键自动生成SWF文件。 1.2.3 高手接招高手接招大红大吉【设计思路】新建文档。制作背景。制作文字。
9、导入素材。保存影片。发布影片。【设计效果】创建图1-13所示效果。最终效果【操作步骤操作步骤】1. 创建新文件。 选择【新建】/【Flash文件（ActionScript 2.0）】命 令，新建一个Flash文档。 2. 制作背景。 选择【修改】/【文档】菜单命令，打开【文档属性】对话框，将【高】选项改为“300像素”。 将默认的“图层1”重命名为“背景”层。选择【矩形】工具，在舞台上绘制一个矩形，效果如图1-16所示。 选择【选择】工具 ，双击刚才绘制的矩形，然后在【属性】面板中按照图1-17进行设置。 在【颜色】面板中，设置线性渐变的第1个色块颜色为“FF0000”（红色），第2个色块颜色
10、为“CC0000”（暗红色）。 【要点提示】 在设置【颜色】面板的属性时，一定要保证矩形处于被选中的状态，否则矩形的颜色将无法改变。图1-16 绘制矩形 设置矩形属性 图1-73. 输入文字。 在“背景”层上面新建一个“文字”层。 选择【文字】工具 ，在舞台上输入“Adobe Flash CS5”文字，如图1-20所示。图1-20 输入文字 将文字全部选中，设置字体为“Zombie”，字体大小为“50”，填充颜色为“FFFF00”（黄色），选区的x和y坐标分别为“80”、“120”，如图1-21所示。图1-21 设置文字属性 至此文字制作成功，其效果如图1-22所示。图1-22 文字效果4.
11、导入素材。 在“文字”层下面新建一个“特效”层。 选择【文件】/【导入】/【打开外部库】菜单命令，将教学资源包中的“素材第一章特效库.fla”文件打开，如图1-24所示。图1-24 打开特效库 按下鼠标左键拖动鼠标光标，将“星星”元件拖曳到舞台中，在拖曳过程中操作界面中会自动显示“星星”元件的虚框，然后将其放置到图1-25所示的位置。图1-25 拖入素材5. 保存和发布影片。 动画制作完成，按CtrlS快捷键保存影片。 选择【文件】/【发布设置】菜单命令，打开图1-26所示的【发布设置】对话框。 【要点提示】 在【发布设置】对话框的【格式】选项卡中可以设置发布影片的格式和路径，在【Flash】
12、选项卡中可以设置发布文件的播放器版本、压缩比例、防止导入等重要属性。 全部保持默认设置，单击 按钮，发布影片，然后单击 按钮完成发布设置（也可以按F12快捷键发布影片）。至此动画制作完成。图图1-26 发布设置发布设置【要点提示要点提示】通常在制作过程中，需要实时地测试和观看影片效果，并不需要正式发布影片，所以可用快捷键CtrlEnter测试影片。【案例小结案例小结】 在本案例中，通过一个十分简单的Flash动画制作，为读者简述了制作Flash动画的流程和思路。例子虽然比较简单，却包含了制作复杂Flash动画的各个基本步骤。所以希望通过本案例的操作，对Flash CS5有所了解。l 小结小结 在本章中，主要是对动画的整体概念和发展做了较为全面的讲解，并对动画制作的原则进行了简单的讲解，从Flash CS5动画制作软件的发展历程到界面介绍，再到制作动画流程介绍，为读者进入Flash动画世界开启了一扇大门，并在本章的最后安排了典型的案例，通过对该案例的学习，可以使读者对Flash动画的制作流程和设计思路有了简单了解，从而为其后期学习打下坚实的基础。
