第六章:创建运动渐变动画 6.1运动渐变动画的变化特征 6.3 通过时间轴特效快速创建动画 6.2创建运动渐变动画 6.4 关于对象的转换操作
6.1 网络动画的分类和特点 目的要求: 1. 掌握运动渐变动画的产生的条件。 2.掌握运动渐变动画的变化特征和产生效果。 1. 掌握运动渐变动画的产生的条件。 2.掌握运动渐变动画的变化特征和产生效果。 知识要点: 运动渐变动画的特征。 运动渐变动画的产生必需具备的条件: 至少有2个关键帧;
6.2 创建运动渐变动画 6.2.1 使用组合对象创建运动渐变动画 目的要求:掌握组合对象的运动渐变动画的制作方法。 知识要点: 组合对象、组合对象的运动渐变。 实例 实例标题:跳伞
6.2 创建运动渐变动画 6.2.1 使用组合对象创建运动渐变动画 实例效果:在天空中,一只青蛙随着降落伞徐徐飘落。参见配套光盘sample\ch06\ action_01.fla文件。 第1帧时状态 第25帧状态
6.2 创建运动渐变动画 6.2.1 使用组合对象创建运动渐变动画 实例分析:本实例是组合对象运动渐变的一个简单实例。在该实例的制作中,将青蛙和降落伞组合在一起,作渐变运动。以天空和云彩为背景。 操作步骤 (1) 打开配套光盘sample\ch06\ action_01a.fla文件,选择【修改】|【文档】,打开【影片属性】对话框。设置影片,背景色为浅蓝(#00CCFF),单击确定按钮进入场景编辑窗口。
6.2 创建运动渐变动画 6.2.1 使用组合对象创建运动渐变动画 (2) 双击场景中的图层并命名为“背景层”,并单击【矩形工具】,在场景中画一个矩形,覆盖背景并填充渐变色。 填充矩形渐变色
6.2 创建运动渐变动画 6.2.1 使用组合对象创建运动渐变动画 (3) 选择【插入】|【图层】并双击新增加的图层,将此层命名为“云彩层”。按F11快捷键,打开【库】面板,把元件“云彩” 拖动到舞台,并按ALT键拖动元件“云彩”,复制多个“云彩”,调整“云彩”位置。 云彩
6.2 创建运动渐变动画 6.2.1 使用组合对象创建运动渐变动画 (4)单击该“云彩层”第25帧,选择【插入】|【时间轴】|【帧】或者按F5键,将帧增加至25帧。 (5)选择【插入】|【图层】并双击新增加的图层,将此层命名为“青蛙和伞图层”。并将命名为“青蛙”和“伞”的元件拖动到舞台,调整位置。将元件“青蛙”和“伞”选中,选择【修改】|【组合】或按Ctrl+G键将两个元件组合。 元件“青蛙”和“伞”在舞台中的位置
6.2 创建运动渐变动画 6.2.1 使用组合对象创建运动渐变动画 (6)单击“青蛙和伞层”第25帧,选择【插入】|【时间轴】|【关键帧】,【时间轴】如图并调整组合体位置。 单击“青蛙和伞图层”第25帧插入关键帧
6.2 创建运动渐变动画 6.2.1 使用组合对象创建运动渐变动画 (7) 单击“青蛙和伞图层”第1帧,在属性面板中选择【补间】为“动作”。 (8) 动画已经完成。按Ctrl+Enter观看效果。 “青蛙和伞图层”第25帧的画面
6.2 创建运动渐变动画 6.2.2 使用文本对象创建运动渐变动画 实例 实例标题:舞魂 实例效果:“舞魂”二字从小到大,然后旋转,逐渐缩小,最后定位在舞者的腰部。伴随着“舞”字从左上角往下移动,“魂”字从右下方往上移。参见配套光盘中的sample\ch06\ action_02.fla文件。
6.2 创建运动渐变动画 6.2.2 使用文本对象创建运动渐变动画 实例action_02.fla效果图 实例分析:实例很简单,利用文本对象创建运动渐变动画。在制作过程两次使用文本“舞魂”,一次直接使用“舞魂”创建渐变动画;一次将文本“舞魂”分离并分配到各个图层,在各个图层中创建运动渐变动画。
6.2 创建运动渐变动画 6.2.2 使用文本对象创建运动渐变动画 操作步骤 (1) 打开配套光盘sample\ch06\ action_02a.fla文件,在该文件的【库】面板中包含了本实例所需的元件“舞娘”。 (2)将“舞娘”从【库】面板拖到舞台中央,并将当前层命名为“舞娘层”。右击第75帧,选择【插入帧】,该层的帧增加到75帧。
6.2 创建运动渐变动画 6.2.2 使用文本对象创建运动渐变动画 (3)创建新层“文字层”,在该层输入文本“舞魂”,字体为华文彩云,文本的填充颜色为深红色或其它颜色,文字大小为200。 实例action_02.fla效果图
6.2 创建运动渐变动画 6.2.2 使用文本对象创建运动渐变动画 (4)复制文本“舞魂”,按Ctrl+B将复制品一级分离成单个文字。保持分离后的文本处于选中状态,右击鼠标,选择【分散到图层】,自动添加两图层“舞”和“魂”。 将分离后的文本分散到图层后自动添加了两个图层
6.2 创建运动渐变动画 6.2.2 使用文本对象创建运动渐变动画 (5) 在“文字层”的第一帧将文本“舞魂”缩小;在第30帧将文本“舞魂”旋转180度;在第40帧将文本“舞魂”旋转170度;在第41帧将文本“舞魂”旋转10度;在第55帧将文本“舞魂”缩小至“舞娘”的腰部。
6.2 创建运动渐变动画 6.2.2 使用文本对象创建运动渐变动画 (6)分别选中“文字层”的第1帧、20帧、30帧、41帧,在【属性】检查器中设置【补间】为“动作”。 实例action_02.fla的【时间轴】
6.2 创建运动渐变动画 6.2.2 使用文本对象创建运动渐变动画 (7) 在层“舞”中,将第1帧移到第40帧,在第55帧处插入关键帧。在第40帧,将“舞”字拖到左上角舞台之外,选中第40帧,在【属性】检查器中设置【补间】为“动作”。 (8) 在层“魂”中,将第1帧移到第50帧,在第75帧处插入关键帧。在第50帧,将“魂”字拖到右下角舞台之外,选中第50帧,在【属性】检查器中设置【补间】为“动作”。 (9) 按Ctrl+Enter观看效果。 实例拓展:在本实例中,可以将文本二级分离后再分散到图层,这样就可以使得“舞”字和“文”字在移动的过程中产生变形。
6.2 创建运动渐变动画 6.2.3 使用实例对象创建运动渐变动画 目的要求:掌握实例对象的运动渐变动画的制作方法。 知识要点:实例对象、实例对象的运动渐变。 提示: 将【库】面板中的元件拖到舞台中,就是一个元件的实例。一个元件的实例不是唯一的。舞台中实例的属性可以改变,实例的属性包括大小、位置、方向和颜色等。通常通过改变实例的属性,创建实例的运动渐变动画。
6.2 创建运动渐变动画 6.2.3 使用实例对象创建运动渐变动画 实例1 实例标题:蜗牛 实例效果:一只蜗牛在一片绿叶上缓缓移动。参见配套光盘中的sample\ch06\ action_03.fla文件。 实例action_03.fla效果图
6.2 创建运动渐变动画 6.2.3 使用实例对象创建运动渐变动画 实例分析:这是一个使用实例对象创建运动渐变的简单例子。在制作中创建两个图层:一层是“草层”,另一层是“蜗牛层”。草和蜗牛存放在【库】面板中,蜗牛实例在“蜗牛层”作移动。 操作步骤 (1)打开配套光盘sample\ch06\ action_03a.fla文件,该文件包含两个元件“蜗牛”和“草”。也可以新建文档,使用绘图工具绘制元件“蜗牛”和“草”。
6.2 创建运动渐变动画 6.2.3 使用实例对象创建运动渐变动画 (2)双击场景中的图层并命名“草”,并按F11快捷键,打开【库】面板,拖动元件“草”到舞台。选中第30帧,选择【插入】|【时间轴】|【帧】或者按F5键插入帧,将该层的帧增加到30帧。 (3)选择【插入】|【图层】创建一个图层,将此层命名为“蜗牛”。并将命名为“蜗牛”的元件拖动到舞台。
6.2 创建运动渐变动画 6.2.3 使用实例对象创建运动渐变动画 (4)当击“蜗牛层”第30帧,选择【插入】|【时间轴】|【关键帧】插入关键帧。选择【自由变形工具】调整大小,并在属性面板中设置alpha为72%。调整位置。 第30帧实例元件效果图
6.2 创建运动渐变动画 6.2.3 使用实例对象创建运动渐变动画 (5)单击“蜗牛”图层第1帧,在属性面板中选择“补间” 为“动作”。
6.2 创建运动渐变动画 6.2.3 使用实例对象创建运动渐变动画 实例2 实例标题:音乐盒 实例效果:一个精美的音乐盒,一只丹顶鹤在音乐盒中翩翩起舞,并随着音乐而改变颜色,活灵活现。参见配套光盘中的sample\ch06\ action_04.fla文件。
6.2 创建运动渐变动画 6.2.3 使用实例对象创建运动渐变动画 实例分析:这是一个使用实例对像创建运动渐变动画的简单的例子,在该实例的制作中,使用了两个图层:一个图层用于放置音乐盒;另一个图层放置丹顶鹤,该层有四个关键帧,在第2、3、4关键帧设置了丹顶鹤的翻转来完成其舞蹈过程。 实例action_04.fla的效果图
6.2 创建运动渐变动画 6.2.3 使用实例对象创建运动渐变动画 实例3 实例标题:海豚表演 实例效果:在蔚蓝的大海中,一只海豚腾空而起,然后潜进深海中。海面上一只白鹅悠闲自在,雨滴落在水面上荡起涟漪。三个美人鱼跃出水面,顿时大海沸腾了。参见配套光盘中的sample\ch06\ action_05.fla文件。
6.2 创建运动渐变动画 6.2.3 使用实例对象创建运动渐变动画 实例action_05.fla的效果图 实例分析:在这个实例中,海豚的运动利用了运动渐变动画来表现,通过在关键帧设置了海豚的旋转来完成海豚的跳跃和潜伏过程;水面的涟漪和雨滴的下落也利用形状渐变动画来表现。美人鱼跃出水面的动画为形状渐变动画,由三颗小露珠变为三个美人鱼。注意不同的图层中创建不同的运动渐变动画。
6.3 通过时间轴特效快速创建动画 时间轴特效是一种预先设置好的动态效果,利用时间轴特效可以快速创建过渡特效和动画,如淡入、飞入、模糊以及旋转等。时间轴特效是Flash MX 2004的新增功能。这一功能的引入,使得动画的制作更加方便、灵活和快捷,这不仅大大地提高了Flash动画的制作速度,而且增强了Flash的动画效果。
6.3 通过时间轴特效快速创建动画 时间轴特效的制作步骤: (1) 选择用于创建时间轴特效的对象。 (1) 选择用于创建时间轴特效的对象。 (2)右击鼠标,选择【时间轴特效】或选择【插入】|【时间轴特效】,选择一种特效。 (3)在特效对话框中设置特效参数,单击【确定】按钮。
6.3 通过时间轴特效快速创建动画 删除时间轴特效的步骤: (1) 选择创建了时间轴特效的对象。 (2) 右击鼠标,选择【删除特效】。
6.3 通过时间轴特效快速创建动画 6.3.1 变形/转换特效 目的要求:掌握时间轴特效变形/转换的特点,并能够利用这特效制作动画。 知识要点:变形/转换特效。
6.3 通过时间轴特效快速创建动画 6.3.1 变形/转换特效 实例 实例标题:我和足球 实例效果:足球从小到大在不停地旋转,文字“我和足球”从上往下涂抹出。 参见配套光盘中的sample\ch06\action_06.fla文件。 实例action_06.fla效果图
6.3 通过时间轴特效快速创建动画 6.3.1 变形/转换特效 实例分析:在该实例中,足球的旋转是使用时间轴特效产生变形,文字的涂抹是使用了时间轴特效变换产生。制作时,先创建一个足球的旋转的影片剪辑元件,然后再将该元件拖到场景中进行运动渐变设计。 操作步骤 (1) 打开配套光盘中的sample\ch06\action_06a.fla文件,该文件中包含“足球”和“旗子”两元件。
6.3 通过时间轴特效快速创建动画 6.3.1 变形/转换特效 (2)按Ctrl+F8键,新建一个影片剪辑元件“旋转的足球”。在元件编辑区,将元件“旗子”拖到舞台上。并将当前层命名为“旗子层”。 (3)在“旗子层”上面创建新层“a层”,将“足球”拖到舞台上。
6.3 通过时间轴特效快速创建动画 6.3.1 变形/转换特效 (4)选中“a层”的第1帧,选择【插入】|【时间轴特效】|【变形/转换】|【变形】,在【变形】特效对话框中设置旋转360度,其余为默认值。转变形后“a层”自动改为“变形1”,同时自动增加了“变形1”和“特效文件夹”两个元件。 实行【变形】特效后的【库】面板
6.3 通过时间轴特效快速创建动画 6.3.1 变形/转换特效 (5)进入场景编辑区。 (6)创建“背景层”,在“背景层”绘制一个与文档大小相同的矩形,用黑色到绿色的线性渐变填充,并进行调整。单击该层第49帧,按F5键,将帧增加至49帧。 (7)创建“足球层”,在该层,用“旋转的足球”创建一个运动渐变动画。将“旋转的足球”拖至舞台。将该层的第30帧设置为关键帧,并在此帧将“旋转的足球”缩小并移动到恰当的位置。选择第1帧,在【属性】面板中选择【补间】为“动作”。单击该层第49帧,按F5键,将帧增加至49帧。
6.3 通过时间轴特效快速创建动画 6.3.1 变形/转换特效 在第1帧“旋转的足球”的状态 在第30帧“旋转的足球”的状态
6.3 通过时间轴特效快速创建动画 6.3.1 变形/转换特效 (8) 创建“文字层”,输入文字“我与足球”。选中“文字层”第1帧,选择【插入】|【时间轴特效】|【变形/转换】|【转换】,产生从上向下的涂抹效果。这时“文字层”自动更改为“转换1”。选中该层,移动第1至30帧到第20至49帧。 对“我与足球”的转换设置
6.3 通过时间轴特效快速创建动画 6.3.1 变形/转换特效 实例action_06.fla的【时间轴】
6.3 通过时间轴特效快速创建动画 6.3.2 操作帮助 目的要求:掌握分散式重置和复制到网格的特点,并能够利用这些特效制作动画。 知识要点:分散式重置、复制到网格 分散式重置的作用是:将选定对象复制一定的数(在设置中输入)。使得第一个元素是原始对象的副本。对象将按一定增量发生改变,直至最终对象反映设置中输入的参数为止。
6.3 通过时间轴特效快速创建动画 6.3.2 操作帮助 分散式重置的参数设置对话框 【分散式重制】特效对话框
6.3 通过时间轴特效快速创建动画 6.3.2 操作帮助 复制到网格的作用是:按列数复制选定对象,然后乘以行数,使得对象排列成网格状。 【复制到网格】特效对话框
6.3 通过时间轴特效快速创建动画 6.3.2 操作帮助 实例 实例标题:变幻的“Hello! World!” 实例效果:参见配套光盘中的sample\ch06\action_07.fla文件。 实例\action_07.fla效果图
6.3 通过时间轴特效快速创建动画 6.3.2 操作帮助 实例分析:这是一个静态效果的广告图,通过设置【分散式重制】特效达到所须的效果。其关键在于【分散式重制】的参数设置。 操作步骤 (1)新建大小为600 × 700的影片,背景为灰色。 (2)绘制背景:将当前层设为“背景层”,绘制大小为600× 700的无笔触矩形,并用蓝色(#0033FF)填充。
6.3 通过时间轴特效快速创建动画 6.3.2 操作帮助 (3)新建图层“hello”,输入文本“Hello! World!”,字体为华文彩云,文本填充色为黑色。按Ctrl+C键将文本复制。 (4)新建图层“文字层”,选择【编辑】|【粘贴到当前位置】,将文本粘贴到该层。按Ctrl+B键,对文本进行二级分离,将其转换为形状。然后用深蓝色(#003399)填充。
6.3 通过时间轴特效快速创建动画 6.3.2 操作帮助 (5)单击图层“hello”的第1帧,选择【插入】|【时间轴特效】|【帮助】|【分散式重制】,进行参数设置。 【分散式重制】的参数设置。
6.3 通过时间轴特效快速创建动画 6.3.2 操作帮助 (6) 创建“人物层”,绘制人物。 (7) 按Ctrl+Enter键观看效果。 实例拓展:如果在【分散式重制】的参数设置时将偏移起始帧设置为1,可以创建动态效果。参见配套光盘中的sample\ch06\action_07t.fla文件
6.3 通过时间轴特效快速创建动画 6.3.3 时间轴效果 目的要求: 掌握分离、展开、投影和模糊特效的特点,并能够利用这特效制作动画。 知识要点:分离、展开、投影、模糊
6.3 通过时间轴特效快速创建动画 6.3.3 时间轴效果 特效名称 说明 效果 分离 动态 展开 投影 静态 模糊 产生对象发生爆炸的效果。 动态 展开 在一段时间内放大、缩小或者放大和缩小对象。 投影 在选定元素下方创建阴影 静态 模糊 通过更改对象在一段时间内的 Alpha 值、位置或缩放比例来产生运动模糊特效。
6.3 通过时间轴特效快速创建动画 6.3.3 时间轴效果 【分离】特效的参数设置对话框 【展开】特效的参数设置对话框
6.3 通过时间轴特效快速创建动画 6.3.3 时间轴效果 【投影】特效的参数设置对话框 【模糊】特效的参数设置对话框
6.3 通过时间轴特效快速创建动画 6.3.3 时间轴效果 实例1 实例标题:玻璃的破碎 实例效果:一个球砸向一块玻璃,玻璃的在瞬间破成碎片。参见配套光盘中的中的ample\ch06\action_08.fla文件。 一块完整的玻璃 破碎的玻璃
6.3 通过时间轴特效快速创建动画 6.3.3 时间轴效果 实例分析:本实例主要利用时间轴特效【分离】产生破碎效果。注意在第10帧时使用特效。 操作步骤 (1) 打开配套光盘中的ample\ch06\action_08a.fla文件,文件中有已经绘制好的元件“玻璃”和“球”。也可以新建文件,用绘图工具绘制玻璃元件和球元件。 (2) 将当前层命名为“玻璃层”,按F11键,打开【库】面板,拖动元件“玻璃”到舞台。右击第10帧,选择【插入关键帧】。
6.3 通过时间轴特效快速创建动画 6.3.3 时间轴效果 (3) 单击“玻璃层”上的第10帧,选择【插入】|【时间轴特效】|【效果】|【分离】,进行分离设置,产生玻璃破碎效果。 玻璃破碎效果的设置
6.3 通过时间轴特效快速创建动画 6.3.3 时间轴效果 (4) 新建图层“球层”,将【库】面板中的“球”拖到舞台左下侧外。在该层的第10帧和第15帧插入关键帧。选中第10帧,将球移到舞台中。在第15帧,将球移到舞台的右上方,并在“球”的【属性】检查器中设置Alpha为20%。 第10帧球的位置
6.3 通过时间轴特效快速创建动画 6.3.3 时间轴效果 (5)选择第1帧和第10帧,分别设置【属性】检查器中的【补间】为“形状”。 (6)按Ctrl+Enter观看效果。
6.3 通过时间轴特效快速创建动画 6.3.3 时间轴效果 实例1 实例标题:苍蝇阴影 实例效果:一只苍蝇在桌布上爬着,渐渐远去,并且伴随着阴影。参见配套光盘中的中的ample\ch06\action_09.fla文件。
6.3 通过时间轴特效快速创建动画 6.3.3 时间轴效果 实例分析:本实例中,先创建一个运动渐变动画,然后再使用时间轴特效【阴影】产生效果。 第1帧的状态 第25帧的状态
6.3 通过时间轴特效快速创建动画 6.4 关于对象的转换操作 目的要求:了解形状、组合对象、元件/实例、文本的相互转换操作 知识要点: 1. 形状、组合对象、元件/实例、文本的相互转换。 2. 分离、组合/取消组合、转化为元件; 转换为元件的操作为按F8键,转换为形状的操作为Ctrl+B(有时要多次),转换为组的操作为Ctrl+G。
6.3 通过时间轴特效快速创建动画 6.4 关于对象的转换操作 文 本 组 元件/实例 形 状 形状、组合对象、元件/实例、文本的相互转换