FlashCS3动画制作基础教程教案详解Word格式.docx
《FlashCS3动画制作基础教程教案详解Word格式.docx》由会员分享，可在线阅读，更多相关《FlashCS3动画制作基础教程教案详解Word格式.docx（78页珍藏版）》请在冰豆网上搜索。
Flash文档有4个主要部分：
▪
（1）舞台：
舞台是在回放过程中显示图形、视频、按钮等内容的位置。
在后面的章节中将对舞台做详细介绍。
▪
（2）时间轴：
用来通知Flash显示图形和其它项目元素的时间，也可以使用时间轴指定舞台上各图形的分层顺序。
位于较高图层中的图形显示在较低图层中的图形的上方。
▪（3）库面板：
库面板是Flash显示Flash文档中的媒体元素列表的位置。
▪（4）ActionScript代码：
可用来向文档中的媒体元素添加交互式内容。
例如，可以添加代码以便用户在单击某按钮时显示一幅新图像，还可以使用ActionScript向应用程序添加逻辑。
逻辑使应用程序能够根据用户的操作和其它情况采取不同的工作方式。
Flash包括两个版本的ActionScript，可满足创作者的不同具体需要。
▪完成Flash文档的创作后，可以使用“文件”→“发布”命令发布它。
这会创建文件的一个压缩版本，其扩展名为.swf（SWF）。
1.1.2FlashCS3的新增功能
▪AdobeFlashCS3Professional是Adobe公司开发的Flash设计软件，是Flash8的升级产品，该版本在原有版本的基础上对软件功能进行了改进，并增加了许多新的功能。
改进和新增的功能使用户可以更轻松地进行绘图创作以及各种交互应用程序的开发。
▪1.增强的集成功能
▪
（1）界面的改变
▪
（2）AdobeBridge
▪（3）AdobePhotoshop导入
▪（4）AdobeIllustrator导入
▪2.增强绘图、动画和视频功能
▪
（1）增强的钢笔工具
▪
（2）增强的基本矩形和椭圆绘制工具
▪（3）滤镜复制和粘贴
▪（4）复制和粘贴动画
▪（5）增强了QuickTime视频支持
▪（6）为Flash视频保存和加载提示点
▪3.全新的ActionScript开发环境
▪
（1）增加了新的ActionScript3.0语言
▪
（2）将动画复制为ActionScript3.0
1.1.3FlashCS3的工作环境
▪安装好FlashCS3后，就可以通过“开始”→“程序”→“AdobeFlashCS3Professional”命令或双击“桌面”上的快捷图标启动它，该软件启动新建文档后的主界面如图1-1所示。
▪在FlashCS3的主界面中，位于主界面最上面的是标题栏和菜单栏；
主界面的左侧是工具箱，其中包括FlashCS3中最常用的绘图工具和辅助工具选项；
主界面的底部和右侧是浮动面板。
在默认的情况下，底部有“属性”、“滤镜”和“参数”3个面板，右侧主要有“颜色”和“库”面板。
▪1.开始页
▪
（1）打开最近的项目
▪
（2）新建
▪（3）从模板创建
▪（4）扩展
▪2.菜单栏
▪FlashCS3的菜单栏包含了11个菜单，包括“文件”、“编辑”、“视图”、“插入”、“修改”、“文本”、“命令”、“控制”、“调试”、“窗口”和“帮助”菜单。
▪3.工具栏
▪
（1）主工具栏
▪默认情况下，主工具栏是不显示的。
如果要显示它，可以选择“窗口”→“工具栏”→“主工具栏”命令，显示主工具栏。
▪
（2）控制器工具栏
▪默认情况下，控制器工具栏也是不显示的。
如果要显示它，可以选择“窗口”→“工具栏”→“控制器”命令，显示控制器工具栏。
▪（3）编辑栏
▪编辑栏位于舞台的顶部，提供了隐藏时间轴、编辑元件、场景的信息和控件。
另外，编辑允许用户增加或减少舞台的缩放比例。
▪4.时间轴面板
▪时间轴的主要组件是图层、帧和播放头。
图层就像堆叠在一起的多张幻灯胶片一样，在舞台上一层层地向上叠加。
如果上面一个图层上没有内容，那么就可以透过它看到下面的图层。
▪5.场景与舞台
▪场景是指Flash工作界面的中间部分，即整个白色和灰色的区域，它是进行矢量图形的绘制和展示的工作区域。
在场景中的白色区域（默认）部分又称“舞台”，是创建Flash文档时放置图形内容的矩形区域，这些图形内容包括矢量插图、文本框、按钮、导入的位图图形或视频剪辑。
Flash中各种动画活动都发生在舞台上，在舞台上看到的内容就是导出的Flash影片中观众看到的内容。
在场景中的灰色区域部分又称“工作区”，工作区是环绕于舞台，导出的Flash影片中观众将看不到工作区的内容，就象戏曲中的台后。
▪6.工具箱
▪默认情况下，工具箱中包含了绘制和编辑图形的各种工具，分为“工具”、“查看”、“颜色”和“选项”4个区域
▪7.常用的面板
▪面板是FlashCS3界面的重要组成部分，使用它们可以查看、组织和更改文档钟的元素。
面板中可用选项控制着元件、实例、颜色、类型、帧和其它元素的特征。
可以通过显示特定任务所需的面板并隐藏其它面板来自定义Flash界面。
▪
（1）属性面板
▪大小：
设置舞台的大小，以像素为单位。
默认的舞台大小为550像素×
400像素。
▪发布：
设置发布属性，可以设置使用哪个版本的Flash影片播放器发布影片。
▪背景颜色：
设置舞台的背景色。
▪帧频：
每秒钟播放多少帧动画。
默认的帧频为12帧（fps）。
▪属性面板是动态的，因为它所显示的属性将根据所选择的对象而变化。
▪
（2）动作面板
▪动作面板可以创建和编辑对象或帧的ActionScript代码，主要由“动作工具箱”、“脚本导航器”和“脚本”窗格组成。
▪（3）帮助面板
▪帮助面板包含了大量信息和资源，如图1-11所示，对Flash的所有创作功能和ActionScript语言进行了详尽的说明。
帮助面板可以随时对软件的使用或动作脚本语法进行查询，使用户更好地使用软件的各种功能。
▪（4）滤镜面板
▪FlashCS3的滤镜功能大大增强了其设计方面的能力。
这项新特性对制作Flash动画产生了便利和巨大影响。
它们几乎颠覆了长期以来，对Flash设计能力欠缺的固有偏见，使大家不得不对其刮目相。
默认情况下，滤镜面板和属性面板、参数面板组成一个面板组。
▪（5）项目面板
▪选择“窗口”→“项目”命令或按【Shift+F8】键，可以打开项目面板，这个面板为用户提供了管理和处理Flash项目的一个中心位置，如图1-13所示。
▪（6）对齐面板
▪选择“窗口”→“对齐”命令或按【Ctrl+K】键，可以打开对齐面板，这个面板可以根据一系列预置的标准来对齐对象。
每一种预置的标准都被表示为一个按钮，如图1-14所示。
▪（7）信息面板
▪选择“窗口”→“信息”命令或按【Ctrl+I】键，可以打开信息面板，这个面板为用户提供了通过数字更改选定对象的尺寸和位置的方法。
在信息面板的底部提供了鼠标当前所处位置的相关信息，左下角显示鼠标当前位置的颜色（为RGB模式），右下角则显示鼠标当前位置的精确定位，如图1-15所示。
▪（8）颜色面板
▪选择“窗口”→“颜色”命令或按【Shift+F9】键，可以打开颜色面板，这个面板可以创建RGB、HSB或十六进制代码的颜色，并可以保存到样本面板中。
颜色面板还可以将颜色指派给笔触或填充，如图1-16所示。
▪（9）样本面板
▪选择“窗口”→“样本”命令或按【Ctrl+F9】键，可以打开样本面板，这个面板帮助用户从当前的调色板中组织、加载、保存和删除单独的颜色，如图1-17所示。
▪（10）场景面板
▪选择“窗口”→“其它面板”→“场景”命令或按【Shift+F2】键，可以打开场景面板，这个面板为用户提供了在场景之间切换、重命名场景、添加场景和删除场景等功能，如图1-18所示。
▪（11）库面板
▪选择“窗口”→“库”命令或按【Ctrl+L】键，可以打开库面板，这个面板为用户存储Flash影片所创建的元件或影片所要使用的元件的地方。
不管是影片剪辑、图形元件还是按钮，库中都有，如图1-19所示。
▪（12）历史记录面板
▪选择“窗口”→“其它面板”→“历史记录”命令或按【Ctrl+F10】键，可以打开历史记录面板，面板中显示了当前操作文档自创建或打开以来曾经执行的操作。
▪（13）输出面板
▪选择“窗口”→“输出”命令或按【F2】键，可以打开输出面板，这个面板是一个非常不错的小工具，但无法与其它面板插接在一起，当用户导出Flash影片后，它将为用户提供有关所有场景的文件大小、对象、文字、元件和实例的数据，如图1-21所示。
▪8.使用标尺、辅助线和网格
▪
（1）使用标尺
▪选择“视图”→“标尺”命令或按【Ctrl+Alt+Shift+R】键，打开标尺。
如果要隐藏标尺，再执行一次上述同样命令即可。
▪
（2）使用辅助线
▪如果显示了标尺，可以将水平和垂直辅助线从标尺拖动到舞台上。
可以移动、锁定、隐藏和删除辅助线，也可以使对象贴紧至辅助线，更改辅助线颜色和贴紧容差。
▪（3）使用网格
▪选择“视图”→“网格”→“显示网格”命令或按【Ctrl+'
'
】键（引号），打开网格。
如果要隐藏网格，再执行一次上述同样命令即可。
1.2FlashCS3文件基本操作
▪1.2.1新建文件
▪1.2.2保存文件
▪1.2.3关闭文件
▪1.2.4打开文件
▪1.2.5测试影片
1.2.1新建文件
▪制作Flash动画之前必须新建一个Flash文件，这也是制作动画的第一步，通常新建Flash文件有以下3种方法：
▪
（1）启动FlashCS3后，出现如图1-22所示的“开始页”界面，在“新建”栏中单击“Flash文件（ActionScript3.0）”选项即可新建一个Flash文件。
▪
（2）单击“主工具栏”中的“新建”按钮，也即可创建一个Flash文件，如图1-22所示。
▪（3）选择“文件”→“新建”命令或按【Ctrl+N】键，打开如图1-23所示的“新建文档”对话框中选择“Flash文件（ActionScript3.0）”选项，单击“确定”按钮即可。
在“新建文档”对话框中单击“模板”标签，在其中选择相应的模板类型，这里选择“广告”下的“468×
60（横幅）”，如图1-24所示，单击“确定”按钮即可新建一个基于模板的Flash文件。
1.2.2保存文件
▪对于制作过程中的Falsh文件，要不间断地进行保存，便于当软件或计算机出现异常时Flash文件的数据不丢失。
制作完Flash文件，也应将其保存起来，便于以后使用。
保存Flash文件常用有以下两种方法：
▪
（1）选择“文件”→“保存”命令或按【Ctrl+S】键即可。
如果用户之前并未保存过此文档，那么将打开如图1-25所示的“另存为”对话框，选择保存的位置，为文档命名并选择保存类型后，单击“保存”按钮即可。
▪
（2）单击“主工具栏”中的“保存”按钮即可。
具体保存方法与“保存”命令相同。
▪在FlashCS3中，为什么选择的是“保存”命令，而弹出的是“另存为”对话框？
因为这是软件自身的设置，在Flash软件中首次保存文档都显示“另存为”对话框，不是用户的失误操作。
1.2.3关闭文件
▪当不需要使用当前的动画文件时，需要将其关闭，关闭Flash有“关闭当前文档”和“关闭软件”两方面。
具体操作说明如下：
图1-26“AdobeFlashCS3”对话框
▪
（1）关闭当前文档
▪选择“文件”→“关闭”命令或按【Ctrl+W】键或单击文档窗口右上角的按钮将其关闭。
如果此文档没有保存，将打开“AdobeFlashCS3”对话框让用户确认是否需要保存当前文档，如图1-26所示，用户可以根据情况单击相应的按钮。
▪
（2）关闭软件
▪选择“文件”→“退出”命令或按【Ctrl+Q】键或单击软件窗口右上角的按钮将退出软件程序。
如果此文档没有保存，将打开“AdobeFlashCS3”对话框让用户确认是否需要保存当前文档，如图1-27所示，用户可以根据情况单击相应的按钮。
1.2.4打开文件
▪如果要编辑或查看一个已有的Flash文件，只需要打开此Flash文件即可。
打开Flash文件常用有以下两种方法：
▪
（1）选择“文件”→“打开”命令或按【Ctrl+O】键，打开如图1-27所示的“打开”对话框，然后在“查找范围”下拉列表框中选择要打开的文档所在的位置，再在“文件名”下拉列表框中输入要打开文档的文件名，或直接在列表中选中要打开的文件图标，最后单击“打开”按钮即可。
▪
（2）单击“主工具栏”中的“打开”按钮，具体操作方法与“打开”命令相同。
1.2.5测试影片
▪在Flash动画制作过程或完成动画制作后，要对动画进行效果测试，这就是通常所说的发布动画。
对于动画文件的测试，最简单的方法就是按【Ctrl+Enter】键或选择“控制”→“测试影片”命令，即可测试并浏览动画效果。
▪按【Ctrl+Enter】键或选择“控制”→“测试影片”命令后，除了测试动画文件的效果外，还将在保存源文件的目的文件夹下生成一个扩展名为.SWF的文件。
1.3制作Flash动画的简单实例
▪1.3.1Flash动画制作的一般过程
▪1.3.2制作一个简单的Flash动画
1.3.1Flash动画制作的一般过程
▪要制作出一个出色的Flash动画作品，应该用心把握每个环节，其制作过程大致可分为以下5个步骤。
▪1.策划主题
▪2.收集材料
▪3.创作动画
▪4.测试优化
▪5.发布动画
1.3.2制作一个简单的Flash动画
▪本节通过一个流动字符的磨光效果的实例来了解Flash的动画制作过程。
本实例利用FlashCS3制作动画的基本工具，制作出字符特殊的动画效果。
一般动画制作过程中有设置舞台场景、导入素材、插入图层、使用工具箱、设置动画效果、预览和测试动画等步骤，要注意的是制作动画过程中不一定要遵循以上步骤。
实例最后平面效果如图1-28所示（动画效果见本实例的源文件）。
本实例涉及到一些新的知识将在后续章节中详细讲解。
本章小结
▪本章主要讲解了Flash的基本概念、基本功能、应用领域、界面、基本操作和制作动画的步骤等基础知识，为以后深入学习制作Flash动画奠定了坚实的基础。
随着科技的发展和网络的推广，Flash动画已成为焦点和热点。
要学好Flash的动画制作，掌握本章的基础知识是非常必要的。
本章最后通过一个实例来向读者展现Flash动画制作的过程。
习题一
▪见教材
第2章绘制、编辑和填充图像
▪制作动画的过程中，需要绘制出动画角色和图形。
要使作品具有艺术感和创新感，创作者不但应具有审美修养，还应有熟练的制作技巧，善于使用Flash中的各种绘图工具。
当绘制的对象比较单调或不符合要求时，可以使用工具栏中的选择等工具对绘制的图形进行线条、色彩和形状等属性的编辑。
本章将介绍基本图形绘制工具、编辑工具和填充工具的具体使用方法，包括线条工具、铅笔工具、钢笔工具、椭圆工具、矩形工具、多角星形工具、选择工具、部分选取工具、任意变形工具、橡皮擦工具、墨水瓶工具、颜料桶工具、滴管工具和填充变形工具等，以提高读者的手绘和编辑矢量图的能力。
▪了解Flash的绘图基础
▪熟练掌握FlashCS3的基本绘图工具的使用
▪理解掌握编辑图像的技巧及工具的使用
▪各种绘图工具的使用
▪图像的填充
▪2.1Flash绘图基础
▪2.2绘制图形图像
▪2.3编辑图形图像
▪2.4填充图形图像
▪2.5锁定填充
▪2.6应用举例
2.1Flash绘图基础
▪2.1.1矢量图和位图
▪2.1.2绘图模式
2.1.1矢量图和位图
▪根据计算机显示原理，大致把计算机上显示的图像分为两类，即矢量图和位图。
▪1.矢量图形
▪矢量图形使用直线和曲线来描述图像，它是由一个个单独的点构成的，每一个点都有其各自的属性，如位置、颜色等。
▪2.位图
▪位图使用像素点来描述图像，并将它们安排在网格内。
▪编辑位图时，修改的是像素而不是直线和曲线。
位图和分辨率有关，因为描述图像的数据被固定到特定大小的网格中。
编辑位图可以改变其外观质量，尤其是调整位图的大小会使图形的边缘产生锯齿，这是因为像素被重新分配到网格中的缘故。
2.1.2绘图模式
▪在Flash中有两种绘图模型，即“合并绘制”模式和“对象绘制”模式，为绘制图形提供了极大的灵活性。
▪1.“合并绘制”模式
▪“合并绘制”模式时，重叠绘制图形时，会自动进行合并。
如果选择同一个图层中的图形与另一个图形合并，移动它则会永久改变其下方的图形。
▪2.“对象绘制”模式
▪“对象绘制”模式允许将图形绘制成独立的对象，且在叠加时不会自动合并。
分离或重排重叠图形时，也不会改变它们的外形。
Falsh将每个图形创建为独立的对象，可以分别进行处理。
▪要使用“对象绘制”模式绘制图形，只需选择一个支持“对象绘制”模式的绘图工具，如线条工具、钢笔工具、椭圆工具、矩形工具、多角星形工具、铅笔工具和刷子工具，然后单击“工具箱”中“选项”下的“对象绘制”按钮或按“J”键，就可以从“合并绘制”模式切换到“对象绘制”模式。
2.2绘制图形图像
▪2.2.1使用线条工具
▪2.2.2使用钢笔工具
▪2.2.3使用铅笔工具
▪2.2.4使用矩形工具和基本矩形工具
▪2.2.5使用椭圆工具和基本椭圆工具
▪2.2.6多角星形工具
▪2.2.7使用刷子工具
2.2.1使用线条工具
▪线条工具用来绘制矢量线条。
▪在Flash中，绘制直线的工具有多种，线条工具是其中最简单的工具，可以直接绘制所需直线。
▪注意：
拖动鼠标时，按住【Shift】键可以限制绘制以45°
的倍数的线条。
▪【例2.1】利用线条工具绘制一条“红色”、粗细为“5”、宽高度为“100150”、位置在“120150”的点直线。
2.2.2使用钢笔工具
▪利用钢笔工具可以绘制各种线条和任意形状的图形，也可作为选取工具使用。
▪钢笔工具具有以下几种功能：
▪
（1）绘制直线
▪
（2）绘制曲线
▪（3）绘制一个封闭的图像
▪【例2.2】利用钢笔工具绘制一片树叶，效果如图2-18所示。
2.2.3使用铅笔工具
▪使用铅笔工具可以随意地绘制线条和形状，就象在纸上用真正的铅笔绘图一样，但Flash会根据所选择的绘图模式，对线条自动进行调整，使之更笔直或平滑。
选择工具栏中的铅笔工具，鼠标光标变为形状，在舞台中按住鼠标左键随意拖动即可绘制任意线条和形状。
按住【Shift】键拖动鼠标可绘制垂直或水平方向的线条。
2.2.4使用矩形工具和基本矩形工具
▪1.矩形工具
▪选择矩形工具，在舞台中按住鼠标左键向任意方向拖动即可绘制一个矩形。
按住【Shift】键，同时按住鼠标左键拖动可绘制一个正方形。
▪矩形工具的选项区域与线条工具的选项区域相同，各项说明请参见2.2.1小节使用线条工具中的相关部分。
▪2.基本矩形工具
▪基本矩形工具也称为图元矩形工具，使用基本矩形工具可以绘制图元矩形。
基本矩形工具操作方法与矩形工具相同。
若要在使用基本矩形工具拖动时更改角半径，请按向上箭头键或向下箭头键。
当圆角达到所需圆度时，松开键。
2.2.5使用椭圆工具和基本椭圆工具
▪Flash提供了两种绘制椭圆的工具，椭圆工具和基本椭圆工具。
▪1.椭圆工具
▪使用椭圆工具可以绘制椭圆和圆。
选择工具箱中的椭圆工具，在舞台中按住鼠标左键向任意方向拖动即可绘制一个椭圆；
按住【Shift】键，同时按住鼠标左键拖动可绘制一个圆。
▪2.基本椭圆工具
▪基本椭圆工具也称为图元椭圆工具，使用基本椭圆工具可以绘制图元椭圆。
基本椭圆工具操作方法与椭圆工具相同。
▪基本椭圆工具的选项区域只有“贴紧至对象”按钮。
而“属性”面板与椭圆工具的“属性”面板相同。
2.2.6多角星形工具
▪使用多角星形工具，在舞台上按住鼠标左键向任意方向拖动即可绘制一个多边形或星形。
▪多角星形工具“属性”面板与线条工具的“属性”面板相比多了“选项”按钮，如图2-43所示。
单击按钮，打开如图2-44所示的“工具设置”对话框，可以设置“样式”为“多边形”或“星形”，设置“边数”一般介于3～32之间的数值，设置“星形顶点大小”一般介于0～1之间的数值以指定星形顶点的深度，此数值越接近0，创建的顶点就越深（如针）。
如果是绘制多边形，应保持此设置默认（也就是数值为0.50），它不会影响多边形的形状。
如图2-45所示为不同设置下的多边形和星形绘制效果。
2.2.7使用刷子工具
▪刷子工具能绘制出刷子般的笔触，就像在涂色一样。
它可以创建特殊效果，包括书法效果。
可以使用“刷子工具”功能键选择刷子大小和形状。
▪对于新笔触来说，刷子大小甚至在更改舞台的缩放比率级别时也保持不变，所以当舞台缩放比率降低时同一个刷子大小就会显得太大。
例如，假设将舞台缩放比率设置为100%并使用刷子工具以最小的刷子大小涂色。
然后，将缩放比率更改为50%并用最小的刷子大小再画一次；
绘制的新笔触就比以前的笔触显得粗50%。
这说明改舞台的缩放比率并不更改现有刷子笔触的大小，效果如图2-46所示。
▪【例2.3】绘制树枝，利用例2.2中的树叶组合成一棵树。
2.3编辑图形图像
▪2.3.1选择与查看对象
▪2.3.2移动、复制与删除
升级会员 