多媒体技术应用flash

1、重点难点：重点难点：Flash动画对象的绘制和编辑动画对象的绘制和编辑简单动画制作简单动画制作引导路径动画和遮罩动画的设计与制作引导路径动画和遮罩动画的设计与制作1. 使用使用ActionScript2.0实现交互实现交互第第3章章 Flash 动画制作动画制作内容提要：内容提要：3.1 计算机动画基础知识计算机动画基础知识3.2 Flash基本操作基本操作3.3 Flash简单动画制作简单动画制作3.4 图层特效动画制作图层特效动画制作3.5 声音与按钮声音与按钮3.6 交互动画制作交互动画制作3.7 动画制作综合应用动画制作综合应用3.1 计算机动画基础知识3.1.1 3.1.1 动画的概

2、念动画的概念 动画是一种通过连续画面来显示运动的技术，通过一定速度投放画面以达到连续的动态效果；或动画是一系列物体组成的图像帧的动态变化过程，其中每帧图像只是前一帧图像的略加变化。 3.1 计算机动画基础知识3.1.2 3.1.2 动画原理动画原理 动画原理传统动画的生产过程计算机动画的概念Flash动画动画制作应注意的问题速度的处理循环动画夸张与拟人3.2 Flash基本操作3.2.1 3.2.1 熟悉熟悉FlashFlash操作界面操作界面3.2 Flash基本操作时间轴面板时间轴面板 图层文件夹 引导图层 图层名称 隐藏显示图层 锁定图层 轮廓显示图层 空白关键帧 播放头 关键帧 帧视图

3、按钮 运行时间 帧频 当前帧数 绘图纸按钮 帧居中按钮 删除图层 添加图层文件夹 添加引导层 添加图层 3.2.4 文件操作新建文件新建文件保存文件保存文件打开文件打开文件设置文档属性设置文档属性导入导出文件导入导出文件3.2.5 绘制和编辑图形案例案例3-2-13-2-1：绘制“鸟语花香”设计效果设计效果：舞台效果图如下所示。设计目标设计目标：学习Flash动画对象的绘制和编辑方法，掌握各种绘图工具的使用。设计思路设计思路：该案例包含背景、草地、花朵、蘑菇、太阳、文字和小鸟图层。利用工具箱中的各种绘图工具，分别在各个图层中绘制相应的对象。3.2.5 绘制和编辑图形矩形工具和椭圆工具：矩形工具

4、和椭圆工具：绘制几何图形绘制几何图形属性面板可设置笔触颜色，填充颜色等属性面板可设置笔触颜色，填充颜色等多角星形工具：点击属性面板的多角星形工具：点击属性面板的“选项选项”，可设置样，可设置样式、边数等式、边数等填充变形工具：填充变形工具：调整渐变色填充调整渐变色填充调渐变中心点调渐变中心点调渐变大小调渐变大小调渐变角度调渐变角度3.2.5 绘制和编辑图形直线工具：直线工具：绘制矢量线段绘制矢量线段 在属性面板设置直线颜色、粗细、样式等在属性面板设置直线颜色、粗细、样式等 Shift+Shift+拖动鼠标：绘制与水平成拖动鼠标：绘制与水平成4545度直线度直线选择工具选择工具: 选取、移动和复

5、制对象（按住选取、移动和复制对象（按住CTRLCTRL） 改变对象形状改变对象形状3.2.5 绘制和编辑图形墨水瓶工具：墨水瓶工具： 改变线条颜色和样式（不是填充色！）改变线条颜色和样式（不是填充色！） 颜料桶工具：颜料桶工具：对封闭区域填充颜色对封闭区域填充颜色 四种封闭模式：不封闭空隙、封闭小空隙、封闭中等空四种封闭模式：不封闭空隙、封闭小空隙、封闭中等空隙、封闭大空隙隙、封闭大空隙 填充颜色：使用颜色面板（填充颜色：使用颜色面板（纯色、渐变色、位图纯色、渐变色、位图）3.2.5 绘制和编辑图形任意变形工具：任意变形工具：改变对象形状改变对象形状旋转、倾斜、缩放等旋转、倾斜、缩放等变形面板

6、变形面板3.2.5 绘制和编辑图形怎样绘制蘑菇？3.2.5 绘制和编辑图形文字工具文字工具 文本对象类型：文本对象类型： 静态文本：动画播放时不会改变静态文本：动画播放时不会改变 动态文本：动画播放时可以动态更新动态文本：动画播放时可以动态更新 输入文本：浏览者可以输入输入文本：浏览者可以输入 文字方向：文字方向：3 3种种 文字的格式化：在属性面板完成文字的格式化：在属性面板完成 文字的变形：任意变形工具文字的变形：任意变形工具 转化为图形：转化为图形：两次分离两次分离 Ctrl+BCtrl+B组合键组合键3.2.5 绘制和编辑图形 橡皮擦工具：橡皮擦工具：擦除图形（矢量图）擦除图形（矢量图

7、） 套索工具：套索工具：选择不规则区域选择不规则区域 模式：自由选取模式、多边形模式、魔术棒模式模式：自由选取模式、多边形模式、魔术棒模式 魔术棒属性设置魔术棒属性设置Ctrl+Enter组合键：测试影片，在与源文件相同位置创建同名swf影片文件内容提要：内容提要：动画的原理动画的原理Flash文件格式？影片文件格式？文件格式？影片文件格式？文档属性的修改文档属性的修改工具箱的使用工具箱的使用Premiere的界面有哪几部分构成？的界面有哪几部分构成？使用使用Premiere制作视频的流程？制作视频的流程？00:00:05:02代表什么意思？代表什么意思？1. 插入操作和覆盖操作的区别？插入操

8、作和覆盖操作的区别？上次课复习3.2.5 绘制和编辑图形FlashFlash绘制模式绘制模式合并绘制模式合并绘制模式对象绘制模式对象绘制模式需要需要在工具箱中在工具箱中的工具选项区按的工具选项区按下下对象绘制按钮对象绘制按钮3.2.5 绘制和编辑图形对象的组合和分离对象的组合和分离组合：对个对象组合在一起，组合：对个对象组合在一起，Ctrl+G Ctrl+G 快捷键快捷键取消组合：已经组合的对象重新分散成为单个的对象取消组合：已经组合的对象重新分散成为单个的对象分离：对象打散成形状，分离：对象打散成形状，Ctrl+B Ctrl+B 快捷键快捷键组合是可逆操作，分离是不可逆操作3.3.1 动画的

9、分类1. Flash CS51. Flash CS5支持的动画类型支持的动画类型3.3.2 帧操作 帧是帧是Flash动画的基本单位。动画的基本单位。Flash中的帧分为：中的帧分为：关键帧关键帧空白关键帧空白关键帧普通帧普通帧概念概念用来存放动画中关用来存放动画中关键画面的帧键画面的帧和关键帧类似和关键帧类似，但但对应的舞台对应的舞台中没有内容。中没有内容。用来延长上一用来延长上一个关键帧的播个关键帧的播放状态和时间放状态和时间在时间轴的在时间轴的表示表示黑色实心小圆点黑色实心小圆点空心圆圈空心圆圈灰色矩形灰色矩形是否能编辑是否能编辑可编辑可编辑可编辑可编辑不可编辑不可编辑插入方法插入方法F

10、6F6F7F7F5F53.3.2逐帧动画逐帧动画在每一帧中都会更改舞台内容，它最适合于图像在每一帧中均发生变化的精细动画，例如动物的奔跑，人物的动作等。若要创建逐帧动画，要将每个帧都定义为关键帧，然后为每个帧制作不同的图像。工作量大，生成的文件也较大。在Flash中，制作逐帧动画主要有2种方式：将动画过程分解成一个个画面，在每个关键帧处绘制画面的的内容；通过导入表示连续分解动作的图片文件，如GIF文件。3.3.2逐帧动画案例案例3-3-13-3-1：利用逐帧动画制作“草原女孩”动画设计效果设计效果：舞台效果图如下所示。设计目标设计目标：理解逐帧动画原理，掌握两种逐帧动画的制作方法。设计思路设计

11、思路：包含3个逐帧动画：马、眨眼睛、字幕的出现。3.3.2逐帧动画绘制各关键帧方式：在动画开始的第在动画开始的第1 1个关键帧处绘制动画对象。个关键帧处绘制动画对象。按按F6F6插入关键帧，将其中的内容稍作修改。或按插入关键帧，将其中的内容稍作修改。或按F7F7键插键插入空白关键帧，重新绘制对象。重复这一操作，直至动入空白关键帧，重新绘制对象。重复这一操作，直至动画完毕。画完毕。1.1. 需要时在关键帧之间插入普通帧来降低动画速度。需要时在关键帧之间插入普通帧来降低动画速度。导入连续图片的方式：准备好展现对象运动的连续图片，如准备好展现对象运动的连续图片，如GIFGIF图片。图片。在动画开始的

12、第在动画开始的第1 1个帧处导入连续图片。个帧处导入连续图片。1.1. 需要时在关键帧之间插入普通帧来降低动画速度。需要时在关键帧之间插入普通帧来降低动画速度。3.3.3 库、元件、实例库、元件、实例的概念库、元件、实例的概念元件是指在元件是指在 Flash 创作环境中创建过一次的图形、按创作环境中创建过一次的图形、按钮或影片剪辑。创建完成后，可在整个文档或其它文钮或影片剪辑。创建完成后，可在整个文档或其它文档中重复使用该元件。每个元件都有一个唯一的时间档中重复使用该元件。每个元件都有一个唯一的时间轴和舞台。轴和舞台。用户所创建的元件会存放在当前文档的库中。用户所创建的元件会存放在当前文档的库

13、中。实例是指库中元件实例是指库中元件在在舞台上的具体应用。舞台上的具体应用。3.3.3 库、元件、实例元件元件的分类：的分类：图形元件图形元件：可用于静态图像。也可用来创建连接到主：可用于静态图像。也可用来创建连接到主时间轴的可重用动画片段，与主时间轴同步运行。交时间轴的可重用动画片段，与主时间轴同步运行。交互式控件和声音在图形元件的动画序列中不起作用。互式控件和声音在图形元件的动画序列中不起作用。影片剪辑元件影片剪辑元件：创建可重用的动画片段。影片剪辑的：创建可重用的动画片段。影片剪辑的时间轴独立于主时间轴。影片剪辑元件可以包含交互时间轴独立于主时间轴。影片剪辑元件可以包含交互式控件、声音甚

14、至其它影片剪辑实例。式控件、声音甚至其它影片剪辑实例。按钮元件按钮元件：可以创建用于响应鼠标单击、滑过或其它：可以创建用于响应鼠标单击、滑过或其它动作的交互式按钮。动作的交互式按钮。3.3.3 库、元件、实例元件元件的操作：的操作：创建元件：创建元件：新建原件新建原件Ctrl+F8，将已有内容转换为元件，将已有内容转换为元件F8复制元件复制元件：在库面板上直接复制在库面板上直接复制编辑编辑元件：元件：双击库面板上的原件双击库面板上的原件实例的操作：实例的操作：创建创建实例实例：将库中的元件拖动至舞台将库中的元件拖动至舞台编辑实例属性编辑实例属性：属性面板属性面板分离实例元件分离实例元件：Ctr

15、l+B使用库使用库内容提要：内容提要： Flash动画对象的绘制动画对象的绘制 逐帧动画适用的场合、特点及制作方法逐帧动画适用的场合、特点及制作方法 什么是元件？库？实例？什么是元件？库？实例？1. 修改元件和修改实例之间的区别修改元件和修改实例之间的区别上次课复习快捷键快捷键：Ctrl+G：组合：组合Shift+Ctrl+G：取消组合：取消组合Ctrl+B：打散（分离）：打散（分离）Ctrl+Enter：测试动画：测试动画精细动作精细动作每一帧都是关键帧，都需要编辑每一帧都是关键帧，都需要编辑两种制作方法：两种制作方法：将动画分解为一个个画面，在每将动画分解为一个个画面，在每个关键帧中绘制画

16、面个关键帧中绘制画面 导入连续图片导入连续图片元件：元件：FlashFlash中创作过一次的图形、小段动画或按钮，可以中创作过一次的图形、小段动画或按钮，可以反复使用反复使用制作好的元件存放在库中制作好的元件存放在库中将库中的元件拖动至舞台上，就是创建了该元件的一个实例将库中的元件拖动至舞台上，就是创建了该元件的一个实例修改一个实例，舞台上的其他实例和库中的元件都不会变修改一个实例，舞台上的其他实例和库中的元件都不会变修改了元件，舞台上所有该元件的实例都会发生变化修改了元件，舞台上所有该元件的实例都会发生变化F5：插入普通帧，延续时间：插入普通帧，延续时间F6：插入关键帧：插入关键帧F7：插入

17、空白关键帧：插入空白关键帧F8：转换为元件：转换为元件 内容提要：内容提要：形状补间动画的原理和制作方法形状补间动画的原理和制作方法传统补间动画的原理和制作方法传统补间动画的原理和制作方法1.补间动画的原理和制作方法补间动画的原理和制作方法本次课内容重点重点：形状补间动画的原理和制作方法形状补间动画的原理和制作方法1.传统补间动画的原理和制作方法传统补间动画的原理和制作方法难点难点：1.正确区分几种简单动画类型正确区分几种简单动画类型3.3.4 形状补间动画形状补间动画概述形状补间动画概述时间轴中的一个起始关键帧上绘制一个矢量形状结束关键帧处更改该形状或绘制另一个形状Flash 将自动给出中间

18、内插帧的形状补间形状最适合用于简单补间形状最适合用于简单形状形状变化变化、位置位置变化、变化、颜色颜色变化等变化等的动画的动画3.3.4 形状补间动画形状补间动画创建形状补间动画创建案例案例3-3-23-3-2：制作矩形渐变为椭圆的形状补间动画设计效果设计效果：舞台效果图如下所示。设计目标设计目标：理解形状补间动画原理，学习形状补间动画的制作。设计思路设计思路：形状和颜色的变化。起始关键帧处绘制一个蓝色的矩形，在结束关键帧处绘制一个黄色的椭圆，中间的过渡帧由Flash自动生成。3.3.4 形状补间动画形状补间动画的制作步骤形状补间动画的制作步骤：在变化起始时刻的关键帧中绘制变化前的形状。在变化

19、结束时刻，按F7键插入空白关键帧，并在该帧中绘制变化后的形状。1. 右击时间轴上起始关键帧和结束关键帧中的任意一帧，在弹出的快捷菜单中选择“创建补间形状”，完成形状补间动画的创建。案例拓展拓展拓展1 1：在案例3-2-2基础之上，继续实现圆变红色五角星的动画设计效果设计效果：舞台效果图如下所示。设计目标设计目标：进一步理解形状补间动画原理，学习形状补间动画的制作。设计思路设计思路：起始关键帧处已有黄色椭圆，在结束关键帧处绘制两个红色的五角星，中间的过渡帧由Flash自动生成。形状补间动画可以是一对多案例拓展拓展拓展2 2：在案例拓展1基础之上，添加字母A到B的演变动画设计效果设计效果：舞台效果

20、图如下所示。设计目标设计目标：进一步理解形状补间动画原理，学习形状补间动画的制作。设计思路设计思路：新建图层，在起始和结束关键帧处输入字母A和B，打散后建立形状补间动画。形状补间动画的对象必须是形状（单击呈点状），如果是元件、组合、文字等需先打散一个形状补间动画产生在同一图层案例拓展拓展拓展3 3：在案例拓展2基础之上，添加三角形翻转的动画。设计效果设计效果：舞台效果图如下所示。设计目标设计目标：进一步理解形状补间动画原理，学习为形状补间动画添加形状提示点。设计思路设计思路：新建图层，在起始和结束关键帧处绘制三角形，建立形状补间动画并添加形状提示点。添加形状提示点，可以控制形变过程3.3.4

21、形状补间动画使用形状提示控制形状变化使用形状提示控制形状变化创建形状补间动画在起始关键帧， “修改”“形状”“添加形状提示点”，将提示点移动到合适位置在结束关键帧，将对应的提示点移动到对应位置3.3.4 形状补间动画3.3.4 形状补间动画形状补间动画总结形状补间动画总结适合形状、颜色、位置的变化动画的对象必须是形状（单击呈点状），若是元件、组合、文字、位图等必须先打散成形状动画可以是一对一，也可以是一对多动画发生在同一图层添加形状提示点可以控制形状补间过程课后思考题案例案例3-3-33-3-3：生日贺卡的制作设计效果设计效果：参照“生日贺卡.swf”。设计目标设计目标：进一步掌握形状补间动画

22、的制作，使用形状提示点控制形变过程。掌握元件的概念、制作和使用。3.3.5 传统补间动画传统补间动画概述传统补间动画概述时间轴中的一个起始关键帧上放置元件、文本、组合或位图结束关键帧处更改其属性Flash 将自动给出中间内插帧的形状传统补间动画传统补间动画适合用于适合用于对象的对象的大小大小、位置位置（包括旋转、（包括旋转、加减速）加减速）、颜色颜色（包括亮度、色调、透明度）变化。（包括亮度、色调、透明度）变化。3.3.5 传统补间动画传统补间动画创建传统补间动画创建案例案例3-3-33-3-3：制作蝴蝶飞过的传统补间动画。设计效果设计效果：一只蝴蝶从舞台左侧向右侧飞过的动画。设计目标设计目标

23、：理解传统补间动画原理，学习传统补间动画的制作。设计思路设计思路：只需在起始关键帧处舞台左侧放置一个蝴蝶元件，在结束关键帧处将蝴蝶移动到舞台右侧并缩小，中间的过渡帧由Flash自动生成。3.3.5 传统补间动画传统补间动画创建传统补间动画创建传统传统补间动画的制作步骤补间动画的制作步骤：在起始键帧中添加运动对象的元件，设置其属性。在变化结束时刻，按F6键插入关键帧。根据需要，修改该帧中运动对象的属性（如位置、旋转、缩放、颜色等）。1. 右击时间轴上起始关键帧和结束关键帧中的任意一帧，在弹出的快捷菜单中选择“创建传统补间”，完成传统补间动画的创建。3.3.5 传统补间动画案例案例3-3-53-3

24、-5：制作一个蓝图白云的动画效果。设计效果设计效果：参照“蓝图白云.swf”。设计目标设计目标：进一步掌握传统补间动画的制作，例如对象进行直线运动、旋转、摇摆、放大缩小、颜色改变等动画效果的制作。3.3.5 传统补间动画传统补间动画总结传统补间动画总结适合大小、颜色、位置的变化，还可以制作加减速，旋转、透明度变化动画的对象必须是元件、组合、文字、位图等，如果是形状，需要先组合或转换为元件动画只能是一对一动画发生在同一图层3.3.5 补间动画补间动画概述补间动画概述时间轴中的一个起始关键帧上放置元件、文本、组合或位图为该帧创建补间动画添加属性关键帧，改变对象属性补间动画可以设置运动对象的补间动画

25、可以设置运动对象的大小大小、位置位置、颜颜色色等属性的变化，还可以进行等属性的变化，还可以进行曲线曲线运动。运动。3.3.5 传统补间动画案例案例3-3-53-3-5：制作一个气球升起的补间动画。设计效果设计效果：参照“气球.swf”。设计目标设计目标：理解补间动画原理，学习补间动画制作。3.3.5 传统补间动画补间动画创建补间动画创建补间动画的制作步骤补间动画的制作步骤：新建一个图层，向第一个关键帧添加元件，右键单击该帧，在快捷菜单中选择“创建补间动画”。选择后面某个帧，按F6添加属性关键帧。（黑色菱形）修改属性关键帧处元件的属性，如位置，颜色、倾斜等。舞台中2个关键帧的对象之间将产生运动路

26、径。1. 使用编辑工具修改运动路径。补充：4种简单动画比较逐帧动画形状补间动画传统补间动画补间动画每个帧都是关键帧，都需要人工编辑只需要规定首尾关键帧或者属性关键帧，过渡帧由Flash自动生成补充：4种简单动画比较形状补间动画传统补间动画补间动画场合大小颜色位置的变化形状的变化大小颜色位置的变化透明度、亮度等的变化还可以旋转、加减速大小颜色位置的变化可以做曲线运动时间轴淡绿色背景带箭头实线淡紫色背景带箭头实线 淡蓝色背景帧首尾两个关键帧，过渡帧Flash生成首尾两个关键帧，过渡帧Flash生成首关键帧，后续几个属性关键帧图层同一图层同一图层同一图层对象形状，单击呈芝麻点状若不是，需先Ctrl+

27、B打散元件、组合，文字或位图，单击有边框线。绝不能是形状。元件、组合，文字或位图，单击有边框线。绝不能是形状。3.4.1 引导路径动画 现实世界里，很多物体的运动轨迹并不是直线，而是任意的曲线，有的甚至还是封闭的曲线。3.4.1 引导路径动画1. 引导路径动画概述引导路径动画概述 引导路径动画，也称引导层动画，是指将一个或多个层链接到一个运动引导层，使一个或多个对象沿同一条路径运动的动画形式。3.4.1 引导路径动画2. 引导路径动画引导路径动画创建创建案例案例3-4-13-4-1：制作一片枫叶随风飘落的动画。设计效果设计效果：参照“枫叶飘飘.swf”文件。设计目标设计目标：理解引导路径动画的

28、原理。学习最基本的引导层动画创建设计思路设计思路：枫叶是运动对象，放置于被引导层，在引导图层中绘制飘落时的运动轨迹。3.4.1 引导路径动画引导路径引导路径动画动画（最基本）（最基本）的制作步骤的制作步骤：新建图层，在第1帧中放置动画对象。 右键点击动画对象所在的图层，快捷菜单中选择“添加传统运动引导层”，添加运动引导层。在运动引导层中，利用铅笔或其他工具绘制引导线。绘制的引导线要平滑流畅，尽量一气呵成，不作停顿。选中动画对象所在图层的第1帧，拖动对象，将中心点对准引导线的起点。在结束处，按F6键插入关键帧，并将实例的中心对准引导线的终点。创建该图层的传统补间动画。3.4.1 引导路径动画运动

29、轨迹为封闭曲线的运动轨迹为封闭曲线的引导路径动画引导路径动画创建创建案例案例3-4-23-4-2：制作小狗绕着旋转的圆球跑动的动画。设计效果设计效果：参照“小狗圆球.swf”文件。设计目标设计目标：进一步理解运动引导动画的原理，学习引导线为封闭曲线的引导路径动画制作。设计思路设计思路：小狗作为运动对象放置于被引导层，在引导层中绘制运动轨迹：有缺口的圆线，还需另外一个图层，制作圆球旋转的动画。3.4.1 引导路径动画运动轨迹为封闭曲线的运动轨迹为封闭曲线的引导路径动画引导路径动画创建创建案例案例3-4-23-4-2：制作小狗绕着旋转的圆球跑动的动画。设计效果设计效果：参照“小狗圆球.swf”文件

30、。设计目标设计目标：进一步理解运动引导动画的原理，学习引导线为封闭曲线的引导路径动画制作。设计思路设计思路：小狗作为运动对象放置于被引导层，在引导层中绘制运动轨迹：有缺口的圆线，还需另外一个图层，制作圆球旋转的动画。3.4.1 引导路径动画多个对象沿着同一条轨迹运动的多个对象沿着同一条轨迹运动的引导路径动画引导路径动画创建创建案例案例3-4-33-4-3：制作星空文字汇聚动画。设计效果设计效果：参照“星空文字汇聚.swf”文件。设计目标设计目标：学习一条引导路径引导多个运动对象的引导路径动画制作设计思路设计思路：多个“星”字图案沿着同一条路径汇聚在一起，一个引导层要引导多个被引导层，每个被引导

31、层里放置一个“星”文字，而且各个图层中文字的透明度也是不同的。3.4.1 引导路径动画多个对象沿着同一条轨迹运动的多个对象沿着同一条轨迹运动的引导路径动画引导路径动画创建创建案例案例3-4-33-4-3：制作星空文字汇聚动画。设计效果设计效果：参照“星空文字汇聚.swf”文件。设计目标设计目标：学习一条引导路径引导多个运动对象的引导路径动画制作设计思路设计思路：多个“星”字图案沿着同一条路径汇聚在一起，一个引导层要引导多个被引导层，每个被引导层里放置一个“星”文字，而且各个图层中文字的透明度也是不同的。3.4.1 引导路径动画运动轨迹可见的运动轨迹可见的引导路径动画引导路径动画创建创建案例案例

32、3-4-33-4-3：制作多个小球绕着椭圆轨迹线运动的动画。设计效果设计效果：参照“小球运动.swf”文件。设计目标设计目标：进一步掌握引导路径为封闭曲线的运动引导路径动画制作，掌握如何显示对象运动轨迹的方法。掌握元件的创建和使用方法。设计思路设计思路：由于引导路径在动画播放时是不显示的，所以看到的椭圆并不是引导线，而是在另外图层中绘制的椭圆。3.4.2 遮罩动画1.遮罩动画概述遮罩动画概述 遮罩动画由两个图层构成：遮罩层和被遮罩层，两个图层上下链接在一起。在遮罩图层中绘制填充色块或文字，或者放置对象，就等于在遮罩层上挖出了与之形状相同的“视窗”，动画的效果就是透过遮罩图层上的“视窗”来观看下

33、方被遮罩图层的内容。3.4.2 遮罩动画 在Flash作品中，我们常常看到很多神奇炫目的效果，比如探照灯、放大镜、万花筒、水波涟漪等等，这些丰富的效果都可以使用“遮罩动画”来打造。3.4.2 遮罩动画2. 遮罩遮罩动画动画创建创建案例案例3-4-53-4-5：利用遮罩动画实现会变颜色的彩虹文字效果。设计效果设计效果：参照“彩虹文字.swf”文件。设计目标设计目标：理解遮罩动画原理，掌握动画产生在被遮罩层的遮罩动画创建方法。设计思路设计思路：文字形状是“视窗”，透过这个视窗，可以看到下方彩条的移动，从而形成会变颜色的彩虹字。所以，文字所在的图层是遮罩图层，彩条所在的图层是被遮罩层。彩条在做位移运

34、动。3.4.2 遮罩动画遮罩遮罩动画的制作步骤动画的制作步骤：制作被遮罩层中的内容制作遮罩层中的内容在图层面板中，右键点击遮罩图层，在快捷菜单中选择“遮罩层”。 正确区分哪个是遮罩层，哪个是被遮罩层；进一步确定到正确区分哪个是遮罩层，哪个是被遮罩层；进一步确定到底是哪个图层在动或者是两个图层都在动。底是哪个图层在动或者是两个图层都在动。3.4.2 遮罩动画案例案例3-4-63-4-6：利用遮罩动画打造探照灯效果。设计效果设计效果：参照“探照灯.swf”文件。设计目标设计目标：进一步理解遮罩动画原理，掌握动画产生在遮罩层的遮罩动画创建方法。设计思路设计思路：动画中应该包含三个图层，从下到上分别放

35、置黑暗的夜景，光照的夜景和探照灯。其中，光照的夜景是被遮罩层，探照灯是遮罩层，遮罩层中要制作探照灯移动的位移动画。3.4.2 遮罩动画案例案例3-4-73-4-7：古诗诵读。图层图层中的对象动画是否为遮罩层或被遮罩层背景图层棕色系背景图片无否左卷轴图层左卷轴从舞台中心至左侧的位移动画否右卷轴图层右卷轴从舞台中心至右侧的位移动画否诗句背景图层白色矩形，荷叶，荷花无被遮罩层蜻蜓图层蜻蜓向左下角的补间动画被遮罩层诗句图层诗句透明度变化的传统补间动画被遮罩层遮罩层矩形从小到大的形状补间动画遮罩层3.5.1 Flash中声音的应用Flash CS5Flash CS5支持的声音文件格式支持的声音文件格式

36、： WAV WAV，MP3MP3，ASNDASND，AIFFAIFF等等2.2.在在FlashFlash中如何加入声音？中如何加入声音？导入声音素材：文件菜单导入声音素材：文件菜单导入导入导入到舞台命令导入到舞台命令添加声音：新建图层，拖动到舞台上添加声音：新建图层，拖动到舞台上设置声音的同步选项设置声音的同步选项设置声音的效果设置声音的效果压缩声音压缩声音3.5.1 Flash中声音的应用声音的同步选项：声音的同步选项：“事件” ：会将声音和一个事件的发生过程同步起来。独立于时间轴完整播放，即使SWF 文件停止声音也会继续播放。同步选项“事件”多用于按钮中的声音，或较短的声音。“开始” ：与

37、“事件”选项的功能相近，但是如果声音已经在播放，则新声音实例就不会播放。“停止” ：使指定的声音静音。“数据流”：强制动画和音频流同步。与事件声音不同，音频流将随着SWF文件的停止而停止。3.5.1 Flash中声音的应用声音效果：声音效果：属性面板的“效果”选项中可以设置声音的效果自定义声音效果3.5.2 Flash中导入视频Flash CS5Flash CS5支持的视频文件格式支持的视频文件格式 ：FLVFLV或或F4VF4V（H.264H.264）2.2.在在FlashFlash中如何加入视频？中如何加入视频？文件菜单文件菜单导入导入导入视频导入视频按照向导逐步操作按照向导逐步操作3.5

38、.3 按钮的制作什么是按钮？什么是按钮？ 按钮元件可以被看作是一个按钮元件可以被看作是一个4 4帧的影片剪辑帧的影片剪辑u第1帧是弹起帧：鼠标没有经过按钮时，该按钮的外观。u第2帧是指针经过帧：鼠标滑过按钮时，该按钮的外观。u第3帧是按下帧：鼠标按下按钮时，该按钮的外观。u第4帧是点击帧：定义响应鼠标单击的物理区域。此区域在影片播放时不可见。3.5.3 按钮的制作用户自定义按钮用户自定义按钮 按钮设计时，应分别设计其包含的按钮设计时，应分别设计其包含的4 4个帧，并为按钮添加个帧，并为按钮添加脚本，以实现交互的功能。脚本，以实现交互的功能。案例案例3-5-2 设计制作“play”和“stop”

39、按钮。3.5.3 按钮的制作公用库按钮公用库按钮 窗口菜单窗口菜单公用库公用库按钮命令，打开按钮公用库。将所按钮命令，打开按钮公用库。将所需按钮拖动至舞台上即可使用。需按钮拖动至舞台上即可使用。3.6 交互动画制作 Flash Flash是一款非常优秀的动画制作软件，最吸引人的是是一款非常优秀的动画制作软件，最吸引人的是它强大的交互功能。它强大的交互功能。FlashFlash的交互功能是基于动作脚本语言的交互功能是基于动作脚本语言的基础之上的。的基础之上的。 ActionScript ActionScript，简称，简称ASAS，中文译为，中文译为“动作脚本动作脚本”，是，是FlashFlas

40、h的内置脚本语言。它是一种面向对象的编程语言。的内置脚本语言。它是一种面向对象的编程语言。3.6.1动作面板的使用窗口菜单窗口菜单动作命令，或者按下动作命令，或者按下F9F9键，打开动作面板。键，打开动作面板。脚本语言编辑窗格动作工具箱脚本导航器3.6.2 ActionScript基础ActionScriptActionScript书写规则书写规则 区分大小写。 分号。用以表示每一句语句的结束。 大括号。一段完整的代码需要放置在中，用可以将语句分成若干部分。 圆括号()。用来为函数传递参数。例如，GotoAndPlay(1)表示跳转到第1帧播放。 下划线_。用来表示属性。例如，my_mc._h

41、eight表示影片剪辑my_mc的高度。 点语法。在ActionScript中，点有两种作用：访问对象的属性和方法my_mc._x=100；my_mc._x.stop()；表示路径_root.my_mc.my1_mc。3.6.2 ActionScript基础ActionScript语法 数据类型 常量 变量 运算符 函数：能够完成某些特定功能的程序块 程序结构：顺序结构，选择结构和循环结构3.6.3 ActionScript交互动画制作脚本添加的对象 Flash里可以为3类对象添加动作脚本，分别是帧、按钮元件和影片剪辑元件变量。为关键帧添加动作：选中帧后，只需双击动作工具箱里所需的动作，将动作

42、添加到脚本编辑区中即可。为按钮添加动作：在添加动作到脚本编辑区之前，需要通过工具箱中的影片剪辑控制类中的on语句来指定触发该动作的鼠标或键盘事件函数。若是为影片剪辑添加动作，则在添加动作到脚本编辑区之前，需要通过工具箱中影片剪辑控制类中的onClipEvent语句来指定触发该动作的事件。3.6.3 ActionScript交互动画制作ActionScript中的常用动作控制Flash影片的停止与播放案例案例3-6-13-6-1：两个按钮，分别控制影片的播放和停止。设计思路：设计思路：默认打开SWF文件时，动画会开始循环播放。只需在舞台上放置两个按钮，编写脚本，使用时间轴控制类中的stop和play动作，使得单击“Stop”按钮时，动画停止播