flash动画的几个概念

逐帧动画 1 逐 帧 动 画 的 概 念 和 在 时 间 帧 上 的 表 现 形 式 在 时 间 帧 上 逐 帧 绘 制 帧 内 容 称 为 逐 帧 动 画 ， 由 于 是 一 帧 一 帧 的 画 ， 所 以 逐 帧 动 画 具 有 非 常 大 的 灵 活 性 ， 几 乎 可 以 表 现 任 何 想 表 现 的 内 容 。 什么叫补间动画? 所谓补间动画又叫做中间帧动画，这里,又分为动作补间和形状补间动作补 间是物体有一个状态到另一个状态。补间动画有两种：动作补间和形状补间 动作补间：是由一个形态到另一个形态的变化过程，像移动位置，改变角度等。 动画补间是淡紫色底加一个黑色箭头组成的。 形状补间：是由一个物体到另一个物体间的变化过程，像由三角形变成四方形 等。形状补间是淡绿色底加一个黑色箭头组成的。 1、动作补间动画： 动作补间动画也是 Flash 中非常重要的表现手段之一，与“形状补间动画” 不同的是，动作补间动画的对象必需是“元件”或“成组对象”。运用动作补间动画， 你可以设置元件的大小、位置、颜色、透明度、旋转等种种属性，配合别的手 法，你甚至能做出令人称奇的仿 3D 的效果来。 动作补间动画的概念：在一个关键帧上放置一个元件，然后在另一个关键 帧改变这个元件的大小、颜色、位置、透明度等，Flash 根据二者之间的帧的 值创建的动画被称为动作补间动画。 构成动作补间动画的元素：构成动作补间动画的元素是元件，包括影片剪 辑、图形元件、按钮、文字、位图、组合等等，但不能是形状，只有把形状“组 合”或者转换成“ 元件”后才可以做“ 动作补间动画”。 动作补间动画制作实例 实例飞行的飞机 实例简介 巍巍群山，茫茫云海，轻烟似的白云缓缓飘过，一架飞机由近而远的飞去，渐渐消失 在远方，如图 3-4-3 所示。本例制作不难，但通过它，你可以掌握创建动作补间动画的方 法。 2 图 3-4-3 飞机飞行动画 知识提要 创建动作补间动画 制作元件由大变小的效果 制作元件透明度变化的效果 （1）创建影片文档 步骤 1 设置影片文档属性 执行【文件】|【新建】命令，在弹出的面板中选择 【常规】| 【Flash 文档】选项后， 点击【确定】按钮，新建一个影片文档，在【属性】面板上设置文件大小为 650255 像素， 【背景色】为白色，如图 3-4-4 所示。 图 3-4-4 影片文档属性 步骤 2 创建背景图层 执行【文件】|【导入】| 【导入到舞台 】命令，将配套光盘中名为 “山峰.jpg”的图片 3 导入到场景中（“山峰”图片位置：光盘examplepart3*图片 山峰.jpg） 。用【箭头工具】 调整图片在舞台上的位置，使其居于舞台的中央。如果图片大小不合适，再选择【任意变 形工具】调整图片大小。选择第 100 帧，按 F5 键，添加普通帧。 （2）创建元件 步骤 1 创建飞机元件 执行【插入】|【新建元件】 命令，新建一个图形元件，名称为“飞机” 。这时进入新 元件编辑场景，选择第一帧，执行【文件】|【导入】| 【 导入到舞台】命令，将配套光盘中 的名为“飞机.png”图片导入到场景中（“飞机”图片位置：光盘examplepart3*图片 飞机.png） 。 步骤 2 创建白云元件 执行【插入】|【新建元件】 命令，新建一个图形元件，名称为“白云” 。这时进入新 元件编辑场景，选择第一帧，执行【文件】|【导入】| 【 导入到舞台】命令，将配套光盘中 的名为“白云.png”的图片导入到场景中（“白云”图片位置：光盘examplepart3*图 片白云.png） 。 （3）创建动画 步骤 1 创建飞行效果 单击时间轴右上角的【编辑场景】按钮，选择【场景 1】 ，转换到主场景中。新建一层， 把库里名为“飞机”的元件拖到场景的左侧，执行【修改】| 【变形】| 【水平翻转】命令， 将飞机元件实例水平翻转。在【属性】面板上打开【颜色】旁边的小三角，设置【Alpha】 值为 80%，如图 3-3-5 所示。 图 3-3-5 第一帧中飞机在场景中的位置和 Alpha 值 4 飞机向远处飞去，应该越来越小，越来越模糊，来看看这种效果是什么做出来的吧， 选中【图层 2】的第 100 帧，按 F6 键，添加一个关键帧，在【属性】面板中设置飞机的大 小， 【W】值是飞机的宽值，为 32；【H 】值是飞机的高值，为 18.9；【X 】 、 【Y】则是飞 机在场景中的 X、Y 坐标，分别是 628.5,51，如图 3-4-6 所示。 图 3-4-6 飞机在 100 帧处的位置和大小 在【属性】面板上，设置【Alpha】值为 20%。 用鼠标右键单击【图层 2】的第一帧，选择【创建补间动画】 。 步骤 2 创建白云飘过的效果 新建一层，从库中拖出名为“白云”的元件，放置在背景图右侧的山峰处，设置 【Alpha】值为 80%，在第 100 帧处添加关键帧，把元件移到场景的左上方，设置 【Alpha】值为 40%。 用鼠标右键单击图层的第一帧，选择【创建补间动画】 。 执行【控制】|【测试影片】 命令，观察动画效果，如果满意，执行【文件】| 【保存】 命令，将文件保存成“飞机.fla ”，如果要导出 Flash 的播放文件，执行【文件】|【导出】 |【 导出影片】 命令，保存成 “飞机.swf”文件。 2、形状补间动画： 1形状补间动画的概念 （1）形状补间动画的概念 在 Flash 的时间帧面板上，在一个时间点（关键帧）绘制一个形状，然后在另一个时 间点（关键帧）更改该形状或绘制另一个形状，Flash 根据二者之间的帧的值或形状来创 建的动画被称为“形状补间动画”。 5 （2）构成形状补间动画的元素 形状补间动画可以实现两个图形之间颜色、形状、大小、位置的相互变化，其变形的 灵活性介于逐帧动画和动作补间动画二者之间，使用的元素多为用鼠标或压感笔绘制出的 形状，如果使用图形元件、按钮、文字，则必先“打散”再变形。 （3）形状补间动画在时间帧面板上的表现 形状补间动画建好后，时间帧面板的背景色变为淡绿色，在起始帧和结束帧之间有一 个长长的箭头，如图 3-3-1 所示。 图 3-3-1 形状补间动画在时间帧面板上的标记 （4）创建形状补间动画的方法 在时间轴面板上动画开始播放的地方创建或选择一个关键帧并设置要开始变形的形状， 一般一帧中以一个对象为好，在动画结束处创建或选择一个关键帧并设置要变成的形状， 再单击开始帧，在【属性】面板上单击【补间】旁边的小三角，在弹出的菜单中选择【形 状】，此时，时间轴上的变化如图 3-3-1 所示，一个形状补间动画就创建完毕。 2认识形状补间动画的属性面板 Flash 的【属性】面板随鼠标选定的对象不同而发生相应的变化。当我们建立了一个 形状补间动画后，点击时间帧，【属性】面板如图 3-3-2 所示。 图 3-3-2 形状补间动画【属性】面板 形状补间动画的【属性】面板上只有二个参数： （1）“简单”选项 6 在“0”边有个滑动拉杆按钮 ，单击后上下拉动滑杆或填入具体的数值，形状补间 动画会随之发生相应的变化。 在 1 到 -100 的负值之间，动画运动的速度从慢到快，朝运动结束的方向加速度补间。 在 1 到 100 的正值之间，动画运动的速度从快到慢，朝运动结束的方向减慢补间。 默认 情况下，补间帧之间的变化速率是不变的。 （2）“混合”选项 “混合”选项中有二项供选择： “角形”选项：创建的动画中间形状会保留有明显的角和直线，适合于具有锐化转角和直 线的混合形状。 “分布式”选项：创建的动画中间形状比较平滑和不规则。 至此，“形状补间动画”的相关知识大家都已经有所了解，下面动手个实例，体会一 下形状补间动画的奇妙。 实例:庆祝国庆 实例简介 国庆的夜空绚丽多彩，朵朵礼花在天空中绽放，远处传来礼炮的轰鸣声，让我们来给 这美丽的夜晚增加点喜庆，挂几个大红灯笼来庆祝祖国的生日吧。实例播放效果如图 3-3- 4 所示。 图 3-3-4 庆祝国庆实例画面 知识提要 创建矢量图形 创建形状补间动画 将文字转变为形状 用混色器设置颜色 制作步骤 1、 创建新文档 7 执行【文件】|【新建】命令，在弹出的面板中选择【常规】|【Flash 文档】 选项后，点击【确定】按钮，新建一个影片文档，在【属性】面板上设置文件大小为 400*330 象素，【背景色】为白色，如图 3-3-5 所示。 图 3-3-5 文档属性 2、 创建背景图层 执行【文件】|【导入到场景】命令，将本实例中名为“节日夜空.jpg”图片导入到场 景中，在第 80 帧处按下 F5，加普通帧。如图 3-3-6 所示。 图 3-3-6 插入背景图片 3、 创建灯笼形状 我们先来画灯笼，执行【窗口】|【设计面板】|【混色器】命令，打开混色器面板， 如图 3-3-7 所示设置混色器面板的各项参数。 8 图 3-3-7 混色器面板设置之一 选择工具栏上的椭圆工具 ，去掉边线 ，在场景中画一个椭圆做灯笼的主 体，大小为 65*40 象素。 接着我们来画灯笼上下的边，打开【混色器】面板，按照如图 3-3-8 设置参数。 图 3-3-8 混色器面板设置之二 选择工具栏上的矩形工具 ，去掉边线，画一个矩形，大小为 30*10 象素，复制这 个矩形，分别放在灯笼的上下方，再画一个小的矩形，长宽为 7*10 象素，作为灯笼上面的 提手。 9 最后用直线工具 在灯笼的下面画几条黄色线条做灯笼穗，一个漂亮的灯笼就画好 了。如图 3-3-9 所示（为了能清楚的显示灯笼，可暂时将背景色改为蓝色）。 图 3-3-9 画好的灯笼 4、 复制粘贴四个灯笼 复制刚画好的灯笼，新建三个图层，在每个图层中粘贴一个灯笼，调整灯笼的位置， 使其错落有致的排列在场景中。 在第 20、40 帧处为各图层添加关键帧，如图 3-3-10 所示。 图 3-3-10 错落有致的灯笼及时间轴面板 5、把文字转为形状取代灯笼 选取第一个灯笼，在第 40 帧处用文字“庆”取代灯笼，文字的的【属性】面板上的参 数：【文本类型】为静态文本，【字体】为隶书，【字体大小】为 60，【颜色】为红色。 10 对“庆”字执行【修改】|【分散】命令，把文字转为形状。如图 3-3-11 上半部分所 示。 依照以上步骤，在第 40 帧处的相应图层上依次用“祝”、“国”、“庆”三个字取代 另外三个灯笼，并执行【分散】操作，其结果如图 3-3-11 下半部分所示。 图 3-3-11 用文字形状取代灯笼形状及文字打散 6、 设置文字形状到灯笼形状的转变。 在“灯笼”各图层的第 60 帧及 80 帧处，分别添加关键帧，现在，在 80 帧处各“灯笼” 图层中的内容为“文字图形”，应该把它们换成“灯笼”。 具体办法可以分别选择第 20 帧中的“灯笼”图形，再一个个“粘贴”进第 80 帧中， 当然，你先应该清除第 80 帧处 4 个“灯笼”图层中的内容哦！ 7、 创建形状补间动画。 在“灯笼”各图层的第 20、60 帧处单击帧，在【属性】面板上单击【补间】旁边的小 三角在弹出的菜单中选择【形状】，建立形状补间动画，如图 3-3-12 所示。 图 3-3-12 创建形状补间动画 11 8、 测试存盘 执行【控制】|【测试影片】命令，观察本例 swf 文件生成的动画有无问题，如果满意， 执行【文件】|【保存】命令，将文件保存成“庆祝国庆.fla”文件存盘，如果要导出 Flash 的播放文件，执行【导出】|【导出影片】命令保存成“庆祝国庆.swf”文件。 使用形状提示 形状补间动画看似简单，实则不然，Flash 在“计算”2 个关键帧中图形的差异时，远 不如我们想象中的“聪明”，尤其前后图形差异较大时，变形结果会显得乱七八糟，这时， “形状提示”功能会大大改善这一情况。 Flash 8 遮罩动画详解及实例 在 Flash8.0 的作品中，我们常常看到很多眩目神奇的效果，而其中不少就是用最简单的 “遮罩”完成的，如水波、万花筒、百页窗、放大镜、望远镜等等。 那么，“遮罩”如何能产生这些效果呢？ 在本节，我们除了给大家介绍“遮罩”的基本知识，还结合我们的实际经验介绍一些 “遮罩”的应用技巧，最后，提供二个很实用的范例，以加深对“遮罩”原理的理解。 在 Flash8.0 中实现“遮罩”效果有二种做法，一种是用补间动画的方法，一种是用 actions 指令的方法，在本节中，我们只介绍第一种做法。 1遮罩动画的概念 （1）什么是遮罩 “遮罩”，顾名思义就是遮挡住下面的对象。 在 Flash8.0 中，“遮罩动画”也确实是通过“遮罩层”来达到有选择地显示位于其下 方的“被遮罩层”中的内容的目地，在一个遮罩动画中，“遮罩层”只有一个，“被遮罩 层”可以有任意个。 （2）遮罩有什么用 在 Flash8.0 动画中，“遮罩”主要有 2 种用途，一个作用是用在整个场景或一个特定 区域，使场景外的对象或特定区域外的对象不可见，另一个作用是用来遮罩住某一元件的 一部分，从而实现一些特殊的效果。 2创建遮罩的方法 12 （1）创建遮罩 在 Flash8.0 中没有一个专门的按钮来创建遮罩层，遮罩层其实是由普通图层转化的。 你只要在要某个图层上单击右键，在弹出菜单中把“遮罩”前打个勾，该图层就会生成遮 罩层，“层图标”就会从普通层图标变为遮罩层图标，系统会自动把遮罩层下面的一层关 联为“被遮罩层”,在缩进的同时图标变为，如果你想关联更多层被遮罩，只要把这些层拖 到被遮罩层下面就行了，如图 3-5-1 所示。 图 3-5-1 多层遮罩动画 （2）构成遮罩和被遮罩层的元素 遮罩层中的图形对象在播放时是看不到的，遮罩层中的内容可以是按钮、影片剪辑、 图形、位图、文字等，但不能使用线条，如果一定要用线条，可以将线条转化为“填充”。 被遮罩层中的对象只能透过遮罩层中的对象被看到。在被遮罩层，可以使用按钮，影 片剪辑，图形，位图，文字，线条。 （3）遮罩中可以使用的动画形式 可以在遮罩层、被遮罩层中分别或同时使用形状补间动画、动作补间动画、引导线动 画等动画手段，从而使遮罩动画变成一个可以施展无限想象力的创作空间。 3应用遮罩时的技巧遮罩层的基本原理是：能够透过该图层中的对象看到“被遮罩层”中 的对象及其属性（包括它们的变形效果），但是遮罩层中的对象中的许多属性如渐变色、 透明度、颜色和线条样式等却是被忽略的。比如，我们不能通过遮罩层的渐变色来实现被 遮罩层的渐变色变化。 要在场景中显示遮罩效果，可以锁定遮罩层和被遮罩层。 可以用 “AS”动作语句建立遮罩，但这种情况下只能有一个“被遮罩层”，同时，不能设置 _alpha 属性。 不能用一个遮罩层试图遮蔽另一个遮罩层。 遮罩可以应用在 gif 动画上。 在制作过程中，遮罩层经常挡住下层的元件，影响视线，无法编辑，可以按下遮罩层时间 轴面板的显示图层轮廓按钮 ，使之变成 ，使遮罩层只显示边框形状，在种情况下， 你还可以拖动边框调整遮罩图形的外形和位置。 在被遮罩层中不能放置动态文本。 实例： 红星闪闪 13 图 3-5-2 红星闪闪 知识提要 将线条转化为填充 创建遮罩动画 使用变形面板 任意变形工具中“注册点”的应用 学习 使用橡皮工具中的“水笼头”工具和擦除线条 （1）创建影片文档 1、设置影片文档属性 执行【文件】|【新建】命令，在弹出的面板中选择【常规】|【Flash 文档】选项后， 点击【确定】按钮，新建一个影片文档，在【属性】面板上设置文件大小为 400*400 象素， 【背景色】为黑色。（在教程中，我们为了更好的显示场景中的内容，背景色设为了深蓝 色），如图 3-5-3 所示。 图 3-5-3 文档【属性】面板 14 （2）创建元件 1、 创建“闪光线条”元件 执行【插入】|【新建元件】命令，新建一个图形元件，名称为“闪光线条”。选择工具栏 上的直线工具 ，在场景中画一直线，在【属性】面板上作如图 3-5-5 设置。 图 3-5-5 闪光线条的【属性】面板参数设置 2、 创建“闪光线条组合”元件 执行【插入】|【新建元件】命令，新建一个图形元件，名称为“闪光线条组合”，如 图 3-5-6 所示。 图 3-5-6 创建闪光线条元件 从库中将名为“闪光线条”的元件拖入新元件编辑窗口的场景中，在 X 轴上的位置为- 200，Y 轴为 20。然后单击工具栏上的任意变形工具 ，此时元件的中心会出现一个小白 点，它就是对象的“注册点”，用鼠标左键按住它，拖到场景的中心处松手。 图 3-5-7 中的“1”显示的是注册点在元件的中心时的情形，“2”显示的是注册点已 拖到场景中心时的情形。 15 图 3-5-7 移动注册点到场景的中心 然后执行【窗口】|【设计面板】|【变形】命令，打开变形面板，选中【旋转】，角 度为 15 度，连续按下【复制并应用变形】按钮，在场景中复制出的效果如图 3-5-8 所示。 图 3-5-8 变形面板及复制好的元件 在时间轴的关键帧上点一下，选中全部图形，执行【修改】|【分散】命令，把线条打 散，再执行【修改】|【形状】|【将线条转化为填充】命令，将线条转变为形状。 3、 创建“闪光”元件 执行【插入】|【新建元件】命令，新建一个影片剪辑，名称为“闪光”，如图 3-5-9 所示。 图 3-5-9 创建“闪光”元件 16 单击【确定】后进行“新元件编辑窗口”，接着把库里名为“闪光线条组合”的元件 拖到场景中，对齐中心点，复制此元件，在第 30 帧处加关键帧，再回到第 1 帧中建立补间 动作动画，【属性】面板上设置顺时针旋转一周。 然后新建一层，在第 1 帧中执行【编辑】|【粘贴到当前位置】命令，使二层中的“闪 光线条组合”完全重合，再执行【修改】|【变形】|【水平翻转】命令，让复制过来的线 条和第一层的线条方向相反，在场景中形成交叉的图形。 在第 30 帧处建立关键帧，在第 1 帧中建立动作补间动画，【属性】面板上设置逆时针 旋转一周，最后将此层设为遮罩层，如图 3-5-10 所示。图中显示的是“闪光”元件的时间 轴面板和各图层中的动画设置。 图 3-5-10“闪光”元件编辑界面 4、 创建“红星”元件 执行【插入】|【新建元件】命令，新建一个图形元件，名称为“红星”。我们要在这 个元件中画一个漂亮的红星，为了画好红星，我们分九步来叙述具体的画法，图 3-5-11 中 的“1-9”的数字表示这九个步骤。 17 图 3-5-11 红星的九步画法 第一步，按住 shift 键，从场景中心向上画一根黄色的线条，如图 3-5-11 中的“1” 所示。 第二步，选择工具箱中的任意变形工具 ,在画好的线条上点一下，这里，线条的中心出 现一个白色的小园点，我们叫它“注册点” 。如图 3-5-11 中