Flashcs5基础知识课件

Flash技能培训授课老师：罗萍Flash技能培训授课老师：罗萍了解动画的起源与发展。掌握动画制作的原则。了解Flash的发展历史。了解FlashCS5的工作界面。掌握Flash动画制作流程。本章学习要求第1章FlashCS5动画制作基础知识了解动画的起源与发展。本章学习要求第1章Flash1.1动画设计综述1.2FlashCS5动画设计简介1.3制作第一个Flash动画本章大纲1.1动画设计综述本章大纲1.1

动画设计综述1.1.1动画的应用领域Flash动画被广泛应用于网页设计、网页广告、网络动画、多媒体教学课件、游戏、企业宣传、产品展示和电子相册等领域。网页广告Flash音乐动画1.1动画设计综述1.1.1动画的应用领域迪斯尼公司于20世纪30年代提出了动画制作的12条原则，这些原则为动画师们找到了表现精致复杂动画的方法。

下面详细讲解这12条基本动画原则。

1.1.2

动画的设计原则掌握时序。慢入和慢出。弧形动作。预期性。使用夸张。挤压和伸展。辅助动作。完成动作和重叠动作。逐帧动画和关键帧动画。布局。吸引力。个性。迪斯尼公司于20世纪30年代提出了动画制作的12条原

1.1.3

常用动画制作软件简介三维动画制作软件目前最常见的三维动画制作软件有3dsMax、Maya、SoftImage和Lightwave等。交互式二维动画制作软件Flash

在众多的二维动画制作软件中，Flash最为璀璨，随着Flash的发展，Flash已经逐渐成为二维动画制作软件的代名词。1.1.3常用动画制作软件简介三维动画制作软件

每个人创建Flash动画的习惯不同，但都会遵循一个基本的流程。下面介绍创建Flash动画的流程。⑤发布作品①前期策划②准备素材④后期调试③制作动画1.1.4Flash动画创作流程每个人创建Flash动画的习惯不同，但都会遵循一个1.2

FlashCS5动画设计简介Flash动画制作流程

Flash动画制作流程十分的简单，分为：新建Flash文档、编辑场景、保存影片、发布影片4个步骤，其中编辑动画部分是流程的关键，发布影片控制着发布影片的大小、质量和文件格式等重要性质，所以也是十分重要的。二.FlashCS5界面介绍1.2.1FlashCS5简介1.2FlashCS5动画设计简介1.2.1Fla启动FlashCS5并熟悉工作界面启动FlashCS51.单击“开始”按钮，在弹出的菜单中选择“所有程序”>“AdobeDesignPremiumCS5”>“AdobeFlashProfessionalCS5”，或双击桌面上的图标。

正确安装FlashCS5并进行注册后，可参照以下步骤启动FlashCS5。启动FlashCS5并熟悉工作界面启动FlashCS5FlashCS5开始页单击此处的选项，可使用系统自带的一些模板制作Flash动画单击该选项可打开“打开”对话框，从中可选择要打开的文档单击“ActionScript3.0”或者“ActionScript2.0”选项即可新建一个Flash文档，并进入FlashCS5的工作界面。2.打开FlashCS5的开始页FlashCS5开始页单击此处的选项，可使用系统自带的一FlashCS5工作界面可以看到其工作界面由标题栏、菜单栏、文档选项卡、主工具栏、时间轴、编辑栏、舞台、工具箱和多个控制面板等组成。3.进入FlashCS5的工作界面后FlashCS5工作界面可以看到其工作界面由标题栏、菜单“时间轴”面板：默认情况下，“时间轴”面板位于舞台下方，用于组织和控制动画内容，它主要包括图层和时间帧两部分。“时间轴”面板的左侧区域显示了动画中包含的图层名称及其相应状态，右侧显示了各图层的时间轴。图层区播放头时间帧标尺时间帧时间帧状态栏“时间轴”面板“时间轴”面板：图层区播放头时间帧标尺时间帧时间帧状态栏“

1.2.2

牛刀小试──简单动画【设计思路】新建文档。制作背景。制作文字。补间动画。保存影片。发布影片。【设计效果】创建图所示效果。最终效果操作要求：实现“从零开始学Flash”几个文字由右运动到左的动画效果。1.2.2牛刀小试──简单动画【设计思路】【设计效【操作步骤】创建新文件。

选择【新建】/【Flash文件（ActionScript2.0）】命令，新建一个Flash文档。

【要点提示】此处选择【Flash文件（ActionScript3.0）】和【Flash文件（ActionScript2.0）】差别在于其动画文件支持的后台脚本不同。ActionScript2.0主要针对对象编写代码，编写时语言很简单，而ActionScript3.0较为复杂。

【操作步骤】创建新文件。制作背景。选择【修改】/【文档】菜单命令，打开【文档属性】对话框，将【高】选项改为“400像素”，【宽】为“500像素”。3.添加文字使用工具箱中的文字工具，输入“从零开始学Flash”的静态文本，字体设为“华文琥珀”，大小设为“60”。4.制作动画将文字拖放到舞台最右边外侧。在第60帧上插入关键帧（按F6），将文字拖放到舞台最左边外侧。在时间轴面板上，设置补间为“创建传统补间”。5.保存文件将制作的文件保存为“我的第一个动画.fla”。按Ctrl+Enter快捷键自动生成SWF文件。制作背景。

1.2.3

高手接招──大红大吉【设计思路】新建文档。制作背景。制作文字。导入素材。保存影片。发布影片。【设计效果】创建图1-13所示效果。最终效果1.2.3高手接招──大红大吉【设计思路】【设计效【操作步骤】创建新文件。

选择【新建】/【Flash文件（ActionScript2.0）】命令，新建一个Flash文档。

【操作步骤】创建新文件。制作背景。选择【修改】/【文档】菜单命令，打开【文档属性】对话框，将【高】选项改为“300像素”。将默认的“图层1”重命名为“背景”层。选择【矩形】工具，在舞台上绘制一个矩形，效果如图1-16所示。选择【选择】工具

，双击刚才绘制的矩形，然后在【属性】面板中按照图1-17进行设置。在【颜色】面板中，设置线性渐变的第1个色块颜色为“FF0000”（红色），第2个色块颜色为“CC0000”（暗红色）。

【要点提示】

在设置【颜色】面板的属性时，一定要保证矩形处于被选中的状态，否则矩形的颜色将无法改变。制作背景。图1-16绘制矩形设置矩形属性图1-7图1-16绘制矩形设置矩形属性输入文字。在“背景”层上面新建一个“文字”层。选择【文字】工具

，在舞台上输入“AdobeFlashCS5”文字，如图1-20所示。图1-20输入文字输入文字。图1-20输入文字将文字全部选中，设置字体为“Zombie”，字体大小为“50”，填充颜色为“FFFF00”（黄色），选区的x和y坐标分别为“80”、“120”，如图1-21所示。图1-21设置文字属性将文字全部选中，设置字体为“Zombie”，字体大小为“50至此文字制作成功，其效果如图1-22所示。图1-22文字效果至此文字制作成功，其效果如图1-22所示。图1-22导入素材。在“文字”层下面新建一个“特效”层。选择【文件】/【导入】/【打开外部库】菜单命令，将教学资源包中的“素材\第一章\特效库.fla”文件打开，如图1-24所示。图1-24打开特效库按下鼠标左键拖动鼠标光标，将“星星”元件拖曳到舞台中，在拖曳过程中操作界面中会自动显示“星星”元件的虚框，然后将其放置到图1-25所示的位置。导入素材。图1-24打开特效库按下鼠标左键拖动鼠标图1-25拖入素材图1-25拖入素材保存和发布影片。动画制作完成，按Ctrl＋S快捷键保存影片。选择【文件】/【发布设置】菜单命令，打开图1-26所示的【发布设置】对话框。

【要点提示】

在【发布设置】对话框的【格式】选项卡中可以设置发布影片的格式和路径，在【Flash】选项卡中可以设置发布文件的播放器版本、压缩比例、防止导入等重要属性。全部保持默认设置，单击按钮，发布影片，然后单击

按钮完成发布设置（也可以按F12快捷键发布影片）。至此动画制作完成。保存和发布影片。图1-26发布设置图1-26发布设置【要点提示】通常在制作过程中，需要实时地测试和观看影片效果，并不需要正式发布影片，所以可用快捷键Ctrl＋Enter测试影片。【案例小结】在本案例中，通过一个十分简单的Flash动画制作，为读者简述了制作Flash动画的流程和思路。例子虽然比较简单，却包含了制作复杂Flash动画的各个基本步骤。所以希望通过本案例的操作，对FlashCS5有所了解。【要点提示】小结

在本章中，主要是对动画的整体概念和发展做了较为全面的讲解，并对动画制作的原则进行了简单的讲解，从FlashCS5动画制作软件的发展历程到界面介绍，再到制作动画流程介绍，为读者进入Flash动画世界开启了一扇大门，并在本章的最后安排了典型的案例，通过对该案例的学习，可以使读者对Flash动画的制作流程和设计思路有了简单了解，从而为其后期学习打下坚实的基础。小结Flash技能培训授课老师：罗萍Flash技能培训授课老师：罗萍了解动画的起源与发展。掌握动画制作的原则。了解Flash的发展历史。了解FlashCS5的工作界面。掌握Flash动画制作流程。本章学习要求第1章FlashCS5动画制作基础知识了解动画的起源与发展。本章学习要求第1章Flash1.1动画设计综述1.2FlashCS5动画设计简介1.3制作第一个Flash动画本章大纲1.1动画设计综述本章大纲1.1

动画设计综述1.1.1动画的应用领域Flash动画被广泛应用于网页设计、网页广告、网络动画、多媒体教学课件、游戏、企业宣传、产品展示和电子相册等领域。网页广告Flash音乐动画1.1动画设计综述1.1.1动画的应用领域迪斯尼公司于20世纪30年代提出了动画制作的12条原则，这些原则为动画师们找到了表现精致复杂动画的方法。

下面详细讲解这12条基本动画原则。

1.1.2

动画的设计原则掌握时序。慢入和慢出。弧形动作。预期性。使用夸张。挤压和伸展。辅助动作。完成动作和重叠动作。逐帧动画和关键帧动画。布局。吸引力。个性。迪斯尼公司于20世纪30年代提出了动画制作的12条原

1.1.3

常用动画制作软件简介三维动画制作软件目前最常见的三维动画制作软件有3dsMax、Maya、SoftImage和Lightwave等。交互式二维动画制作软件Flash

在众多的二维动画制作软件中，Flash最为璀璨，随着Flash的发展，Flash已经逐渐成为二维动画制作软件的代名词。1.1.3常用动画制作软件简介三维动画制作软件

每个人创建Flash动画的习惯不同，但都会遵循一个基本的流程。下面介绍创建Flash动画的流程。⑤发布作品①前期策划②准备素材④后期调试③制作动画1.1.4Flash动画创作流程每个人创建Flash动画的习惯不同，但都会遵循一个1.2

FlashCS5动画设计简介Flash动画制作流程

Flash动画制作流程十分的简单，分为：新建Flash文档、编辑场景、保存影片、发布影片4个步骤，其中编辑动画部分是流程的关键，发布影片控制着发布影片的大小、质量和文件格式等重要性质，所以也是十分重要的。二.FlashCS5界面介绍1.2.1FlashCS5简介1.2FlashCS5动画设计简介1.2.1Fla启动FlashCS5并熟悉工作界面启动FlashCS51.单击“开始”按钮，在弹出的菜单中选择“所有程序”>“AdobeDesignPremiumCS5”>“AdobeFlashProfessionalCS5”，或双击桌面上的图标。

正确安装FlashCS5并进行注册后，可参照以下步骤启动FlashCS5。启动FlashCS5并熟悉工作界面启动FlashCS5FlashCS5开始页单击此处的选项，可使用系统自带的一些模板制作Flash动画单击该选项可打开“打开”对话框，从中可选择要打开的文档单击“ActionScript3.0”或者“ActionScript2.0”选项即可新建一个Flash文档，并进入FlashCS5的工作界面。2.打开FlashCS5的开始页FlashCS5开始页单击此处的选项，可使用系统自带的一FlashCS5工作界面可以看到其工作界面由标题栏、菜单栏、文档选项卡、主工具栏、时间轴、编辑栏、舞台、工具箱和多个控制面板等组成。3.进入FlashCS5的工作界面后FlashCS5工作界面可以看到其工作界面由标题栏、菜单“时间轴”面板：默认情况下，“时间轴”面板位于舞台下方，用于组织和控制动画内容，它主要包括图层和时间帧两部分。“时间轴”面板的左侧区域显示了动画中包含的图层名称及其相应状态，右侧显示了各图层的时间轴。图层区播放头时间帧标尺时间帧时间帧状态栏“时间轴”面板“时间轴”面板：图层区播放头时间帧标尺时间帧时间帧状态栏“

1.2.2

牛刀小试──简单动画【设计思路】新建文档。制作背景。制作文字。补间动画。保存影片。发布影片。【设计效果】创建图所示效果。最终效果操作要求：实现“从零开始学Flash”几个文字由右运动到左的动画效果。1.2.2牛刀小试──简单动画【设计思路】【设计效【操作步骤】创建新文件。

选择【新建】/【Flash文件（ActionScript2.0）】命令，新建一个Flash文档。

【要点提示】此处选择【Flash文件（ActionScript3.0）】和【Flash文件（ActionScript2.0）】差别在于其动画文件支持的后台脚本不同。ActionScript2.0主要针对对象编写代码，编写时语言很简单，而ActionScript3.0较为复杂。

【操作步骤】创建新文件。制作背景。选择【修改】/【文档】菜单命令，打开【文档属性】对话框，将【高】选项改为“400像素”，【宽】为“500像素”。3.添加文字使用工具箱中的文字工具，输入“从零开始学Flash”的静态文本，字体设为“华文琥珀”，大小设为“60”。4.制作动画将文字拖放到舞台最右边外侧。在第60帧上插入关键帧（按F6），将文字拖放到舞台最左边外侧。在时间轴面板上，设置补间为“创建传统补间”。5.保存文件将制作的文件保存为“我的第一个动画.fla”。按Ctrl+Enter快捷键自动生成SWF文件。制作背景。

1.2.3

高手接招──大红大吉【设计思路】新建文档。制作背景。制作文字。导入素材。保存影片。发布影片。【设计效果】创建图1-13所示效果。最终效果1.2.3高手接招──大红大吉【设计思路】【设计效【操作步骤】创建新文件。

选择【新建】/【Flash文件（ActionScript2.0）】命令，新建一个Flash文档。

【操作步骤】创建新文件。制作背景。选择【修改】/【文档】菜单命令，打开【文档属性】对话框，将【高】选项改为“300像素”。将默认的“图层1”重命名为“背景”层。选择【矩形】工具，在舞台上绘制一个矩形，效果如图1-16所示。选择【选择】工具

，双击刚才绘制的矩形，然后在【属性】面板中按照图1-17进行设置。在【颜色】面板中，设置线性渐变的第1个色块颜色为“FF0000”（红色），第2个色块颜色为“CC0000”（暗红色）。

【要点提示】

在设置【颜色】面板的属性时，一定要保证矩形处于被选中的状态，否则矩形的颜色将无法改变。制作背景。图1-16绘制矩形设置矩形属性图1-7图1-16绘制矩形设置矩形属性输入文字。在“背景”层上面新建一个“文字”层。选择【文字】工具

，在舞台上输入“AdobeFlashCS5”文字，如图1-20所示。图1-20输入文字输入文字。图1-20输入文字将文字全部选中，设置字体为“Zombie”，字体大小为“50”，填充颜色为“FFFF00”（黄色），选区的x和y坐标分别为“80”、“120”，如图1-21所示。图1-21设置文字属性将文字全部选中，设置字体为“Zombie”，字体大小为“50至此文字制作成功，其效果如图1-22所示。图1-22文字效果至此文字制作成功，其效果如图1-22所示。图1-22导入素材。在“文字”层下面新建一个“特效”层。选择【文件】/【导入】/【打开