第七章 创建元件与基本交互式动画

步骤8：使用文本工具在“按钮”元件实例上方 分别创建文字“节目1”、“节目2”、“节目3” 和“STOP”，字体为Arial Black、字号为15、 颜色为#000000。操作结果如图所示。
步骤9：选择文字“节目1”下的“按钮”元件实例，打开“动 作”面板，在脚本面板中输入下面的语句： on(press){ gotoAndPlay(2); //表明当按下该按钮后动画从第2帧开始播 放 } 步骤10：分别在“节目2”、“节目3”和“STOP”文字下的 “按钮”元件实例上也添加相应的AS语句。 文字“节目2”下的“按钮”元件实例对应的脚本语句是： on(press){ gotoAndPlay(3); //表明当按下该按钮后动画从第3帧开始播 放 }
步骤3：新建图层并命名为“yuwei”，执行【编 辑】→【粘贴到当前位置】命令，将剪切过 的鱼尾部分粘贴到此层的舞台中，同时在第5 帧处进行插入关键帧。选中第5帧舞台中的鱼 尾部分图片进行缩小操作，然后调整其位置， 使其与鱼身部分吻合。 步骤4：新建两个图层并命名为“syuqi”和 “xyuqi”，分别对上下的鱼鳍部分也进行如鱼 尾部分的操作。时间轴面板如图所示。
步骤7：Ctrl+Enter测试动画效果，如图所示。
2、声音的处理 （1）声音的导入 最常用的声音格式有WAV和MP3两种。通过执行“文 件”|“导入到库”命令或执行“文件”|“导入”|“导 入到舞台”命令 （2）声音的引用 7.4创建按钮元件 7.4.1使用文字创建按钮 7.4.2使用“按钮库”创建按钮
点语法使用三个特殊的符号：_root、this和_parent。 _root为绝对路径所使用的符号，表示根时间轴。 this为相对路径所使用的符号，this总是指向当前对象。 _parent为相对路径所使用的符号，表示上一级时间轴。
步骤10：至此按钮设计完成，按钮编辑器中的 时间轴如图7-4所示。返回场景，从库面板中 将“普通动画按钮”元件拖拽至舞台。按 Ctrl+Enter进行预览，当鼠标移动到按钮上方 时“花”开始转动、文字的颜色发生了变化， 当鼠标单击时文字颜色又发生了变化，当鼠 标离开按钮时“花”停止转动，很“酷”吧！ 别忘了保存。
步骤5：将场景中金鱼原地游动的动画转换为影片剪 辑。先右击时间轴选择“选择所有帧”操作，再右 击时间轴选择“剪切帧”操作，按Ctrl+F8键新建一 个名为“金鱼”的影片剪辑，选择影片剪辑的第1 帧，右击选择“粘贴帧”操作。 步骤6：返回场景中，制作金鱼游动的过程。 在场景 中删除多余图层，只留下2个图层即可。一层命名 为“beijing”，另一层命名为“yu”。选择“beijing” 图层，导入背景图片，在第30帧处插入普通帧。选 择“yu”图层，从库中将“金鱼”影片剪辑拖曳至舞 台中，在第30帧处插入关键帧。调整第30帧舞台中 元件实例的位置，并在第1帧处创建补间动画。
7.5 动作脚本语言 添加脚本可分为两种：一是把脚本编写在时间轴上面的关键帧 上面（注意：必须是关键帧上才可以添加脚本）。二是把脚 本编写在对象上，比如把脚本直接写在MC（影片剪辑元件 的实例）上、按钮上面。 1、在交互动画制作过程中按钮是必不可少的元件。按钮可以 具有多种状态，并且会响应鼠标事件，执行指定的动作。按 钮的外形可以是任何形式，可以是一幅位图，也可以是矢量 图；可以是矩形，也可以是多边形；可以是一根线条，也可 以是一个线框；甚至还可以是看不见的“透明按钮”。按钮 以元件的形式存放在库中，可以被多次调用。另外在公共库 中存放了一些按钮成品，可以根据需要直接调用。
知识点 元件概述 创建图形元件 创建影片剪辑元件 创建按钮元件 动作脚本语言 交互式动画的应用实例
Байду номын сангаас
7.1 元件概述 Flash动画中的元件是具有独立身份的元素。它 们在影片中发挥着各自的作用，是Flash动画 构成的主体。 1、创建元件 ①选择“插入”|“新建元件”命令 ②选择“窗口”|“库”命令，或按Ctrl+L组合键 打开“库”面板下边的新建元件按钮
步骤8：选中“an”图层的“指针经过”帧，按 F6键插入关键帧，然后在其舞台中选择文字， 修改文字颜色为#3399FF，其他参数不变。 选中“hua”图层的“指针经过”帧，创建空 白关键帧，将库面板中的“辅助动画”影片 剪辑拖拽到其舞台上，并进行适当的缩放， 操作结果如图所示。
步骤9：选中“an”图层的“按下”帧，按F6键 插入关键帧，然后在其舞台中选择文字，修 改文字颜色为#CC0000，其他参数不变。 选 中“hua”图层的“按下”帧，创建关键帧， 操作结果如图所示。
第7章 创建元件与基本交互式动画
Flash动画由许多元件组成、元件可以反 复使用。通过使用元件可提高工作效率。元 件包含图形元件、按钮元件和影片剪辑元件。 交互式动画是作品播放时支持事件响应 和交互功能，使动画播放时能够受到某种控 制，这种控制可以是动画播放者的操作，也 可以是在制作动画时预先设置的某种变化。
步骤3：执行【插入】→【新建元件】命令或使用快 捷键Ctrl+F8，创建一个名称为“按钮”的按钮元件。 步骤4：在按钮元件编辑器中选择“弹起”帧，从库 面板中将“按钮1.jpg”拖拽到舞台中央，注意按钮图 片中心要和舞台中心吻合。选择“按下”帧，创建 空白关键帧，然后将库面板中的“按钮2.jpg”拖拽到 舞台中央。 步骤5：返回场景，新建图层并命名为“content”，在 该图层的第2帧、第3帧、第4帧处创建空白关键帧， 同时将库面板中的“片断1”、“片断2”、“片断3” 分别拖拽至第2帧、第3帧、第4帧的舞台中。选中 第4帧，在其属性面板的“帧”选项中输入名称 “bb”。
步骤11：按Ctrl+Enter进行预览，该动画的时 间轴面板如图所示。
7.6动作脚本的使用 动作脚本的使用
1.点语法 点语法是用来指明与某个对象或影片剪辑相关的属性和方法，它也用于标 识指向影片剪辑或变量的目标路径。如： _root.bird.stop（）； //调用动画中影片剪辑bird的stop方法。
③在动画的实际编辑过程中，也可以将新绘制 的图形对象转换成元件，使之具有影片角色 的特殊属性。在绘图工作区绘制好图形后， 将其拖动到“库”面板中。 ④选择需要转换为元件的图形对象，选择“修 改”|“转换为元件”命令或按F8键。 ⑤选择需要的图形对象，右击鼠标，在弹出的 快捷菜单中选择“转换为元件”命令
2、元件的优点 ①简化动画的制作过程 ②减小文件大小 ③方便网络传输 7.2 创建图形元件 7.2.1将对象转换为图形元件 7.2.2创建新的图形元件 7.3 创建影片剪辑元件 1、影片剪辑元件主要用来制作独立于时间轴、可重 复使用的动画片段。
下面将以游动的金鱼为例介绍影片剪辑的作用， 具体步骤如下。 步骤1：新建Flash文档，将背景图片和金鱼图 片导入库中，将“图层1”重命名为“yu”。 步骤2：选择金鱼图片，执行【修改】→【分离】 命令，再使用套索工具并复选多边形模式， 选择金鱼尾部区域并进行剪切操作。同时在 第5帧处进行插入帧。
步骤5：在“辅助动画”影片剪辑时间轴的第30帧处插入关键 帧，然后在第1帧和第30帧之间创建动作补间动画，旋转为 顺时针、3次。 步骤6：执行【插入】→【新建元件】命令或使用快捷键 Ctrl+F8，创建一个名称为“普通动画按钮”的按钮元件。 在按钮元件编辑器中，将“图层1”重命名为“an”，再新建 一个图层，命名为“hua”。 步骤7：在“an”图层“弹起”帧的舞台上绘制一个宽150、高 50的矩形，其笔触颜色为#3399FF、笔触高度为4、笔触样 式为实线，填充颜色为#FFFFFF。再利用文本工具在矩形上 输入文字“PLAY”，字体为Arial Black，大小为24，颜色为 #CCCCCC，加粗。 选中“hua”图层的“弹起”帧，将库面 板中的“花”图形元件拖拽到其舞台上，并进行适当的放缩， 操作结果如图所示。
步骤6：选择“content”图层的第1帧，使用快捷键F9调出“动 作-帧”面板，点击【将新项目添加到脚本中】按钮会弹出 一个菜单，在菜单中选择【全局函数】→【时间轴控制】→ 【stop】，此时在脚本面板中会出现命令“stop（）;”，表 明动画在开始播放的第1帧处停止播放。同样在第2帧、第3 帧、第4帧也添加该AS语句。 注意：此处添加脚本语句时，选择的对象是帧而不是舞台中 的某个对象。 步骤7：新建图层并命名为“an”，从库面板中将“按钮”元件 拖拽到舞台上，调整其大小以匹配舞台。按住Alt键拖拽舞台 中的“按钮”元件实例进行复制，共复制3个按钮，然后调 整按钮的位置。
（2）动作面板 通过执行【窗口】→【开发面板】→【动 作】命令或使用快捷键F9，可打开动作面板。 当选中对象是时间轴中的帧时，动作面板标 签为“动作-帧”；当选中对象是舞台中的按 钮元件实例、或影片剪辑实例时，动作面板 标签为“动作”。动作面板实际上就是一个 脚本编辑器
（3）动作设置 下面我们以电视机实例为例介绍动作的设置过 程，具体步骤如下： 步骤1：新建Flash文档，宽度为500像素、高 度为400像素，帧频为12fps，背景颜色为 #FFFFFF。 步骤2：将素材全部导入到库中，从库面板中拖 拽“电视.Jpg”到舞台，并进行放大操作。将 此层重命名为“tv”，在第4帧处插入普通帧。
文字“节目3”下的“按钮”元件实例对应的脚本语句 是： on (press) { gotoAndPlay("bb"); //表明当按下该按钮后动画从bb 帧标签处开始播放 } 文字“STOP”下的“按钮”元件实例对应的脚本语 句是： on(press){ gotoAndStop(1); //表明当按下该按钮后跳转到第1 帧停止播放 }
步骤3：选择该椭圆，单击工具箱中的任意变形 工具，此时椭圆的中心有一个空心圈，拖动 该空心圈进行中心的位置调整，调整后的中 心位置如图所示。
步骤4：执行【窗口】→【设计面板】→【变 形】命令调出变形面板，设置“旋转”角度 为30，其他参数保持原状。然后单击变形面 板底端的 复制并应用变形按钮11次，一朵花 的外形基本形成了。全选舞台上的所有对象， 按F8键将其转换成一个图形元件，名称为 “花”。操作结果如图所示。
2、鼠标事件与动作设置 （1）鼠标事件 鼠标事件是通过关键字on来实现的，on的语法结构如 下： 语法： on(mouseEvent) { statement(s); }
其中大括号中的statement(s)是指发生鼠标事件时要执行的指 令，mouseEvent是指鼠标事件。当发生一个事件时，就会 执行后面大括号中的语句。 mouseEvent参数可以选择下边列出的值： （1）press 在鼠标指针经过按钮时按下鼠标。 （2）release 在鼠标指针经过按钮时释放鼠标。 （3）releaseOutside 当鼠标指针在按钮之内时按下按钮 后，将鼠标指针移到按钮之外，此时释放鼠标。 （4）rollOut 鼠标指针移出按钮区域。 （5）rollOver 鼠标指针滑过按钮。 （6）dragOut 在鼠标指针滑过按钮时按下鼠标，然后滑出 此按钮区域。 （7）dragOver 在鼠标指针移过按钮时按下鼠标，然后移 出此按钮，再移回此按钮。
步骤1：新建Flash文档。执行【插入】→【新 建元件】命令或使用快捷键Ctrl+F8，创建一 个名称为“辅助动画”的影片剪辑。 步骤2：在影片剪辑元件编辑器中，选择工具箱 中的椭圆工具，在舞台上绘制一个无边框的 椭圆，混色器面板设置如下：填充样式为放 射状，左取色滑块的颜色值为#FFFFFF、右 取色滑块的颜色值为#FF99FF。结果如图所 示。
在按钮元件编辑器中，通过时间轴上的四个帧来定义 按钮的不同状态。在实际制作中可以根据需要仅定 义其中的一种按钮状态，也可以同时定义按钮的多 个状态。四个帧的含义如下： 弹起：表示鼠标指针不在按钮上时的按钮状态。 指针经过：表示鼠标指针在按钮上时的按钮状态。 按下：表示鼠标单击按钮时的按钮状态。 点击：定义对鼠标做出反应的区域，这个反应区 域在电影中是看不到的。