《Flash项目实践教程》课件 肖宇 项目7-13 -二维交互动画的程序设计-场景动画的制作

Part7

项目7二维交互动画的程序设计

狭路相逢勇者胜勇者相逢智者胜智者相逢德者胜德者相逢道者胜目标概述学习要求本章将介绍FlashCC中ActionScript3.0的基本概念、相关术语、基本语法及“动作”面板、“代码片断”面板的基本概念和应用方法，为应用ActionScript3.0制作动画特效和动态交互打下基础。学习目标

学习目标知识点了解理解掌握应用ActionScript简介

案例1ActionScript3.0的相关术语（动作、参数、类、构造器、数据类型、对象、属性、事件、方法、关键字、实例名的基本概念）

案例1ActionScript3.0的语法基础（ActionScript3.0的数据类型、变量、常用运算符、创建和调用函数）

案例1、案例2认识“动作”面板

案例1认识“代码片断”面板

案例2学习目标

知识导航图7-1第7章知识导航图制作“跟随鼠标移动的星星”动画效果任务7-1案例效果任务7-1制作“跟随鼠标移动的星星”动画效果案例分析制作“跟随鼠标移动的星星”动画主要应用创建新层、创建元件、类设置、Action编程等知识来完成。通过本案例的制作，能够深刻理解动画中ActionScript3.0的应用方法。“跟随鼠标移动的星星”动画效果任务7-1

制作“跟随鼠标移动的星星”动画效果制作步骤任务7-1制作“跟随鼠标移动的星星”动画效果步骤1执行“文件”→“新建”命令，弹出“新建文档”对话框，设置如图7-3所示。单击“确定”按钮，新建Flash文档。导入本章素材图像“素材\背景.jpg”，如图7-4所示。任务7-1制作“跟随鼠标移动的星星”动画效果图7-3“新建文档”对话框图7-4导入素材制作步骤任务7-1制作“跟随鼠标移动的星星”动画效果步骤2选择“插入”→“新建元件”命令，弹出“创建新元件”对话框，设置如图7-5所示。单击“确定”按钮，使用Flash中的绘图工具在舞台中绘制出星星图形，如图7-6所示。任务7-1制作“跟随鼠标移动的星星”动画效果图7-5“创建新元件”对话框图7-6绘制星星图形制作步骤任务7-1制作“跟随鼠标移动的星星”动画效果步骤3返回“场景1”编辑状态，在“库”面板中的star元件上单击鼠标右键，即可在弹出的菜单中选择“属性”选项，弹出“元件属性”对话框，单击“高级”，设置“类”选项为Star，如图7-7所示，单击“新建图层”按钮

，新增一个“图层2”，“时间轴”面板如图7-8所示。任务7-1制作“跟随鼠标移动的星星”动画效果图7-7设置“类”选项图7-8“时间轴”面板制作步骤任务7-1制作“跟随鼠标移动的星星”动画效果步骤4打开“动作”面板，输入相应的ActionScript脚本代码，代码如下：任务7-1制作“跟随鼠标移动的星星”动画效果制作步骤任务7-1制作“跟随鼠标移动的星星”动画效果步骤5完成该动画的制作，执行“文件”→“保存”命令，按快捷键Ctrl+Enter，测试动画，效果见图。任务7-1制作“跟随鼠标移动的星星”动画效果“跟随鼠标移动的星星”动画效果相关知识1.ActionScript简介ActionScript1.0从Flash5开始，首次在Flash软件中引入了ActionScript1.0脚本语言，ActionScript1.0脚本语言具备ECMAScript标准的语法格式和语义解释，主要应用于帧的导航和鼠标的交互。ActionScript2.0从FlashMX版本开始引入了ActionScript2.0脚本语言，ActionScript2.0脚本语言的编写方式更加成熟，在ActionScript2.0脚本语言中引入了面向对象的编程方式，具有变量的类型检测和新的class类语法。到目前为止，ActionScript2.0脚本语言依然在Flash动画制作中广泛运用。ActionScript3.0从FlashCS3版本开始引入了全新的ActionScript3.0脚本语言，ActionScript3.0脚本语言与ActionScript1.0和2.0有着很大的差别，ActionScript3.0全面支持ECMA4的语言标准，并具有ECMAScript中的Package、命名空间等多项ActionScript2.0所不具备的特点。ActionScript是Flash的脚本程序语言，简称AS。在ActionScript语言版本方面，截止到目前为止共有3个版本任务7-1制作“跟随鼠标移动的星星”动画效果任务7-1制作“跟随鼠标移动的星星”动画效果相关知识2.ActionScript3.0的相关术语（1）动作（Action）动作是指Flash动画播放时执行的某些操作语句。（2）参数（Parameter）参数是存储信息的容器，并被传送给语句或函数。（3）类（Class）类是影片中信息的类目。每个对象都属于一个类，并且是这个类的一个实例。（4）构造器（constructor）构造器用于创建基于类的对象函数。这种函数具有的自变量可以给出对象所属的类的专用的属性。（5）数据类型（DataType）数据类型是描述变量或动作脚本元素可以存储的信息种类。ActionScript中有两种数据类型：原始数据类型和引用数据类型。

任务7-1制作“跟随鼠标移动的星星”动画效果任务7-1制作“跟随鼠标移动的星星”动画效果相关知识

（6）对象（Object）、属性（Property）、事件（Event）、方法（Method）对象是实例化的类，是属性和方法的集合。属性是对象内部的变量。事件是对象能接收到的外部动作的集合。方法是与类关联的函数，用于完成对象的某些动作。（7）关键字（Keyword）关键字是具有特殊意义的保留字。ActionScript在语言中保留了若干关键字，用户不能使用关键字作为变量名、函数名或标签名。默认的关键字在动作面板中是深蓝色，且区分大小写。（8）实例名（InstanceName）实例名是脚本中唯一标识对象的名字。任务7-1制作“跟随鼠标移动的星星”动画效果任务7-1制作“跟随鼠标移动的星星”动画效果相关知识3.ActionScript3.0的语法基础同其他语言一样，ActionScript也拥有自己独特的语法集，其中包括了很多基本组成元素。（1）ActionScript3.0的数据类型ActionScript中的数据类型可以划分为以下几种：①字符串型如果一个值被引号所包含，那么这个值的数据类型就是字符串。如果一个表达式涉及了字符串数据类型，它的数据类型也是字符串。②数值型数值型，即双精度浮点数，用于算术运算。③布尔型布尔值是真与假。在某些时候布尔真为1，布尔假为0；一般情况下非0为布尔真，0为布尔假。④对象对象是ActionScript中新增类型，可以使用“new”声明一个对象类型。⑤影片剪辑影片剪辑是Flash中重要的元件类型之一，也是Flash中重要的程序核心。⑥未定义值在ActionScript3.0中，要求必须为所有的变量、参数和返回值定义数据类型。如果一个函数引用了未在其他地方定义的变量，那么FlashCC在默认情况下会给出一个警告。任务7-1制作“跟随鼠标移动的星星”动画效果任务7-1制作“跟随鼠标移动的星星”动画效果相关知识

任务7-1制作“跟随鼠标移动的星星”动画效果任务7-1制作“跟随鼠标移动的星星”动画效果（2）ActionScript3.0的变量①变量名变量名必须是一个ActionScript标识符，变量不能使用关键字或者逻辑常量（true、false）②变量类型在ActionScript3.0中声明变量时，需要使用var关键词。用“：”号定义变量类型，用“=”号给变量赋值。③变量的作用域在ActionScript3.0中，包含两种变量，分别是局部变量和全局变量，全局变量在整个动画的脚本中都有效，而局部变量则只在它自己的作用域内有效。相关知识

任务7-1制作“跟随鼠标移动的星星”动画效果任务7-1制作“跟随鼠标移动的星星”动画效果（3）ActionScript3.0的常用运算符①数值运算符数值运算符可以执行加法、减法、乘法、除法运算等。②比较运算符比较运算符用于比较表达式的值，然后返回一个布尔值。③逻辑运算符逻辑运算符是对布尔值进行运算，返回一个布尔值。逻辑运算主要有“与”运算符（&&）、“或”运算符（||）和“非”运算符（!）。④位运算符位运算符用于内部处理浮点数，将二进制的数据进行按位操作。⑤点运算符点运算符用于访问结构的成员。（4）创建和调用函数在ActionScript3.0中，用户可以直接调用已有的内置函数，也可以创建自定义的函数，然后进行调用。任务7-1制作“跟随鼠标移动的星星”动画效果相关知识4.认识“动作”面板选择“窗口”→“动作”命令，便可以打开“动作”面板。用户可以看到面板由两部分组成。左侧部分是一个“动作”工具箱，每个动作脚本语言在该工具箱中都有一个对应条目，右侧部分是脚本窗格，这是输入代码的区域按下快捷键F9，可以切换显示与隐藏“动作”面板。“动作”面板由三个窗格构成：动作工具箱（按类别对ActionScript元素进行分组）、脚本导航器（快速地在Flash文档中的脚本间导航）和脚本窗格（可以在其中输入ActionScript代码）。工具栏中包括了创建代码时常用的“插入实例路径和名称”（在该对话框中可以选择需添加动作脚本的对象）、“查找”（可对脚本编辑窗格中的动作脚本内容查找替换）、“代码片段按钮”（打开代码片段对话框，实现常见交互功能）、“帮助按钮”（查看对动作脚本的用法、参数和相关说明等）。任务7-1制作“跟随鼠标移动的星星”动画效果相关知识4.认识“动作”面板在打开“动作”面板后，用户可以看到面板由两部分组成。左侧部分是一个“动作”工具箱，每个动作脚本语言在该工具箱中都有一个对应条目，右侧部分是脚本窗格，这是输入代码的区域。图7-9“动作”面板

制作“调用外部动画”动画效果任务7-2案例效果任务7-1制作“跟随鼠标移动的星星”动画效果案例分析制作“跟随鼠标移动的星星”动画主要应用创建新层、创建元件、类设置、Action编程等知识来完成。通过本案例的制作，能够深刻理解动画中ActionScript3.0的应用方法。“跟随鼠标移动的星星”动画效果任务7-2制作“调用外部动画”动画效果制作步骤任务7-1制作“跟随鼠标移动的星星”动画效果步骤1执行“文件”→“新建”命令，弹出“新建文档”对话框，设置如图7-11所示。单击“确定”按钮，新建Flash文档。任务7-2制作“调用外部动画”动画效果图7-11“新建文档”对话框制作步骤任务7-1制作“跟随鼠标移动的星星”动画效果步骤2选择“矩形工具”，打开“属性”面板，设置填充为深蓝色，笔触无颜色，如图7-12所示。单击“确定”按钮，使用Flash中的矩形工具在舞台中绘制出矩形图形，如图7-13所示。任务7-2制作“调用外部动画”动画效果图7-13绘制矩形图7-12“属性”面板设置制作步骤任务7-1制作“跟随鼠标移动的星星”动画效果步骤3选择“文本工具”，打开“属性”面板，设置如图7-14所示，添加“播放动画”文字，舞台效果如图7-15所示。任务7-2制作“调用外部动画”动画效果图7-15添加文字图7-14设置“属性”面板制作步骤任务7-1制作“跟随鼠标移动的星星”动画效果步骤4选中舞台的矩形，打开“代码片断”面板，展开“加载和卸载”选项，如图7-16所示。任务7-2制作“调用外部动画”动画效果图7-16选中矩形并打开“代码片断”面板制作步骤任务7-1制作“跟随鼠标移动的星星”动画效果步骤5双击“代码片断”面板的“单击以加载/卸载SWF或图像”选项，为当前所选择的对象应用该代码片断，此时会弹出提示对话框，如图7-18所示。提示：因为此处所选择的对象不是影片剪辑元件或者TIF文本对象，因此在应用该代码片段时，Flash会自动给要求将该对象转换为影片剪辑元件并创建实例名称。任务7-2制作“调用外部动画”动画效果图7-18提示对话框制作步骤任务7-1制作“跟随鼠标移动的星星”动画效果步骤6单击“确定”按钮，Flash会自动将该对象转换为影片剪辑元件并设置实例名称，“属性”面板如图7-18所示，修改元件类型为“按钮”，如图7-19所示。任务7-2制作“调用外部动画”动画效果图7-18“属性”面板图7-19修改后“属性”面板制作步骤任务7-1制作“跟随鼠标移动的星星”动画效果步骤7同时“时间轴”面板会自动增加一个名为“Actions”图层，如图7-20所示，在“动作”面板中会自动添加所选择的代码片断，如图7-21所示。任务7-2制作“调用外部动画”动画效果图7-20“时间轴”面板图7-21修改后“属性”面板制作步骤任务7-1制作“跟随鼠标移动的星星”动画效果步骤8在“动作”面板的ActionScript代码中，修改相应的代码，如图7-22所示。提示：在修改加载文件时要注意，加载的文件路径可以是绝对路径的文件，也可以是相对路径的文件，此处所加载的文件与该SWF文件位于同一文件夹中，所以直接填充需要加载的文件名即可。如果文件的来源于调用的SWF所在的域不同，则需要进行特殊配置才可以加载这些文件。任务7-2制作“调用外部动画”动画效果图7-22修改的代码制作步骤任务7-1制作“跟随鼠标移动的星星”动画效果步骤9完成该动画的制作，执行“文件”→“保存”命令，按快捷键“Ctrl+Enter”，测试动画，效果见图。任务7-2制作“调用外部动画”动画效果

“调用外部动画”动画效果相关知识1.认识“代码片断”面板执行“窗口”→“代码片断”命令，打开“代码片断”面板，在该面板中FlashCC预置了多种不同类型的ActionScript脚本代码，如图7-23所示通过使用“代码片断”面板，主要可以实现如下的功能：（1）添加能影响对象在舞台上行为的代码。（2）添加能在时间轴中控制播放头移动的代码。（3）将用户创建的新代码片断添加到面板中。其实使用Flash附带的代码片断也是ActionScript3.0入门的一种好途径。通过学习代码片断中的代码，并遵循片断说明，有助于了解ActionScript3.0的代码结构。使用“代码片断”面板不需要ActionScript3.0的知识，就可以轻松地将ActionScript3.0代码添加到FLA文件，以启用常用功能。这对于ActionScript新手，或者希望无须学习ActionScript语言，就能够添加简单的交互功能的设计者来说，是非常实用的一个功能。任务7-1制作“跟随鼠标移动的星星”动画效果任务7-2制作“调用外部动画”动画效果相关知识任务7-1制作“跟随鼠标移动的星星”动画效果任务7-2制作“调用外部动画”动画效果通过使用“代码片断”面板，主要可以实现如下的功能：（1）添加能影响对象在舞台上行为的代码。（2）添加能在时间轴中控制播放头移动的代码。（3）将用户创建的新代码片断添加到面板中。需要注意的是，所有这些附带的代码片断都是ActionScript3.0的，ActionScript3.0与ActionScript2.0并不兼容。如果创建的Flash文档时基于ActionScript2.0的，因为FlashCC已不再支持ActionScript2.0，则在打开Flash源文件时，会弹出提示对话框，提示对ActionScript3.0不支持的内容进行转换，如图7-25所示。图7-25提示对话框相关知识2.ActionScript3.0的相关术语（1）动作（Action）动作是指Flash动画播放时执行的某些操作语句。（2）参数（Parameter）参数是存储信息的容器，并被传送给语句或函数。（3）类（Class）类是影片中信息的类目。每个对象都属于一个类，并且是这个类的一个实例。（4）构造器（constructor）构造器用于创建基于类的对象函数。这种函数具有的自变量可以给出对象所属的类的专用的属性。（5）数据类型（DataType）数据类型是描述变量或动作脚本元素可以存储的信息种类。ActionScript中有两种数据类型：原始数据类型和引用数据类型。

任务7-1制作“跟随鼠标移动的星星”动画效果任务7-2制作“调用外部动画”动画效果项目小结本章介绍了FlashCCProfessional中ActionScript3.0的基本概念、相关术语、基本语法及【动作】面板、“代码片断”面板的基本概念和应用方法，对ActionScript3.0有了初步的认识。任务7-1制作“跟随鼠标移动的星星”动画效果项目小结1.ActionScript简介ActionScript是一种基于ECMAScript的编程语言，用来编写AdobeFlash电影和应用程序。ActionScript1.0最初随Flash5一起发布，这是第一个完全可编程的版本。Flash6增加了几个内置函数，允许通过程序更好地控制动画元素。在FlashMX中引入了ActionScript2.0，这是一种强类型的语言，支持基于类的编程特性，比如继承、接口和严格的数据类型。Flash8进一步扩展了ActionScript2.0，添加了新的类库以及用于在运行时控制位图数据和文件上传的API。FlashPlayer中内置的ActionScriptVirtualMachine（AVM1）执行ActionScript。通过使用新的虚拟机ActionScriptVirtualMachine（AVM2），FlashCS3（附带ActionScript3）大大提高了性能。。2.ActionScript3.0的相关术语ActionScript3作为一种功能强大的脚本编辑语言，具有很多的组件。了解这些术语及它们在ActionScript中是如何结合的非常重要。本章主要讲解了动作、参数、类、构造器、数据类型、对象、属性、事件、方法、关键字、实例名相关术语的基本概念。任务7-1制作“跟随鼠标移动的星星”动画效果项目小结项目小结3.ActionScript3.0的语法基础与其他程序开发语言类似，ActionScript3.0具有语法和标点规则，本章针对ActionScript3.0的数据类型、变量名的设置、变量类型及变量作用域、常用运算符、函数的创建和调用的方法进行了详细的讲解。4.“动作”面板介绍“动作”面板是FlashCC中一个功能强大的ActionScript代码编辑器，“动作”面板由三个窗格构成：动作工具箱（按类别对ActionScript元素进行分组）、脚本导航器（快速地在Flash文档中的脚本间导航）和脚本窗格（可以在其中输入ActionScript代码）。工具栏中包括了创建代码时常用的“插入实例路径和名称”、“查找”、“代码片段按钮”、“帮助按钮”。5.“代码片断”面板介绍“代码片断”面板预置了FlashCC多种不同类型的ActionScript脚本代码，能添加能影响对象在舞台上行为的代码、添加能在时间轴中控制播放头移动的代码、能将用户创建的新代码片断添加到面板中。任务7-1制作“跟随鼠标移动的星星”动画效果项目小结项目小结思考与练习1.制作一个应用“动作”和“行为”面板实现控制播放效果的动画。2.怎样实现外部调用swf影片及实现对jpg图片的控制？3.应用影片剪辑的事件处理函数，制作交互效果的动画任务7-1制作“跟随鼠标移动的星星”动画效果思考与练习拓展训练训练1：制作“动态聚焦”动画任务要求：实现鼠标移到图片上，图片渐变为清晰图片；移走鼠标，图片渐变为模糊图片效果。要求如下：1.创建“清晰图片”影片剪辑元件和“模糊图片”影片剪辑元件。2.设置“模糊图片”Alpha属性为0的补间动画。3.应用ActionScript代码设置鼠标移入和鼠标移出的动态效果。动画效果：效果如图

所示。任务7-1制作“跟随鼠标移动的星星”动画效果拓展训练拓展训练训练2：制作“图片浏览”动画任务要求：应用ActionScript语句实现“图片浏览”动态效果。要求如下：1.导入系列图片。2.添加控制按钮。3.应用ActionScript代码实现“图片浏览”动态效果。动画效果：效果如图

所示。

任务7-1制作“跟随鼠标移动的星星”动画效果拓展训练谢谢！Part8第8章

影片的测试与发布熟能通其窍,精能尽其妙。——杜甫

目标概述学习要求本章将全面介绍FlashCC中的优化影片的原则和方法，影片测试、导出影片和发布影片的方法，使学习者能够掌握Flash中影片优化、测试和发布的基本步骤，形成完整的Flash作品。学习目标

学习目标知识点了解理解掌握优化影片的原则和方法

测试影片的方法

导出的方法

发布影片的方法

学习目标

知识导航知识导航任务“绿色与瓢虫”动画影片发布8.1案例效果案例分析发布“瓢虫爬行”动画主要是优化影片、测试影片后，按要求对影片的发布进行设置，最终导出影片。案例1“瓢虫爬行”动画影片测试与发布“瓢虫爬行”动画效果图任务“绿叶与瓢虫”动画影片的发布制作步骤步骤1优化影片对于影片中的元素和线条优化，应注意以下几点：（1）限制特殊线条类型的数量，实线所需的内存较少，铅笔工具生成的线条比画笔工具生成的线条所需的内存少。（2）使用“优化”命令优化影片中的元素和线条使用“修改”→“形状”→“优化”命令，打开“优化曲线”文本框中输入数值，最大程度减少图形轮廓的独立线条数。如图8-3所示。案例1“瓢虫爬行”动画影片测试与发布任务“绿叶与瓢虫”动画影片的发布

图8-3优化曲线设置制作步骤步骤2测试影片（1）方法1：选择“控制”→“测试影片”命令，就可以测试影片了。如果被测试的影片有几个不同的场景，使用此命令测试可以按先后顺序看到每一个场景中的动画。（2）方法2：选择“控制”→“测试场景”命令，只能对影片中的当前场景进行测试。如果被测试的动画有几个不同的场景，对其他场景将不进行测试。步骤3导出影片

Flash动画制作完成后，将其放置在网页中的最快方法就是直接输出为“影片文件”即SWF文件，方法是：选择“文件”→“导出”→“导出影片”命令，打开“导出影片”对话框，如图8-4所示。在“导出影片”对话框中各选项说明如下：案例1“瓢虫爬行”动画影片测试与发布

任务“绿叶与瓢虫”动画影片的发布图8-4“导出影片”对话框制作步骤步骤3导出影片

“保存在”列表选择影片文件所要保存的磁盘位置。“文件名”列表可以为输出的影片文件命名。“保存类型”列表可以选择影片输出的格式。FlashCC默认格式为SWF格式，一切设置完毕后，单击

按钮，将弹出“导出SWF影片”对话框，如图8-5所示。案例1“瓢虫爬行”动画影片测试与发布图8-5“导出SWF影片”对话框任务“绿叶与瓢虫”动画影片的发布制作步骤

注意：1.选择不同的文件格式将显示不同的对话框。2.如果动画中某一帧的图像比较好，可以单独导出此图像，方法是：（1）使用鼠标选中要输出的图像所在帧的位置，使此图像在页面中显示。（2）选择“文件”→“导出”→“导出图像”命令，将会弹出“导出图像”对话框，如图8-6所示。案例1“瓢虫爬行”动画影片测试与发布图8-6“导出图像”对话框

任务“绿叶与瓢虫”动画影片的发布制作步骤步骤4发布影片当我们测试完影片，确定动画没有错误时就可以发布影片了。选择“文件”→“发布设置”命令，打开“发布设置”对话框，在此对话框中用户可进行发布前的各项设置，如图8-7所示。案例1“瓢虫爬行”动画影片测试与发布图8-7“发布设置”对话框

任务“绿叶与瓢虫”动画影片的发布制作步骤默认情况下，要发布的这些文件会发布到与源文件即FLA文件相同的位置。要更改文件的发布位置，请单击文件名旁边的

按钮，然后选择要发布文件的目标位置。Flash影片的名称将作为导出文件的名称，如果用户要对导出的文件进行重新命名的话，可以在输出文件的文件名文本框中输入导出后文件的名称。步骤5设置好参数后，选择“文件”→“发布预览”命令来预览要发布的影片，使设计者最终导出满意的影片。步骤6将一切设置完毕后，单击选项卡中的

按钮就可以发布电影。发布的电影文件将与电影源文件自动保存到同一个文件夹内。案例1“瓢虫爬行”动画影片测试与发布任务“绿叶与瓢虫”动画影片的发布相关知识1.优化影片的原则（1）对于影片中多次出现的相同对象，尽量使用同一元件，因为一个元件不管出现多少次，也只在动画中保存一次。（2）在可能的情况下，尽量使用补间动画，而不使用逐帧动画。（3）影片中的线条尽量使用实线，虚线、点画线占用的空间要比实线大得多。（4）影片中的声音文件尽量采用MP3格式。（5）尽量减少外部导入的位图文件数量。（6）用层把影片播放过程中变化的对象和不变化的对象分开。（7）减少字体和字样的数量，且最好不使用嵌入字体。（8）少用渐变色和Alpha透明度。（9）编辑区中相对位置固定的对象尽量组合为组合对象。案例1“瓢虫爬行”动画影片测试与发布任务“绿叶与瓢虫”动画影片的发布相关知识2.“发布设置”的基本参数设置当我们测试完影片，确定动画没有错误时就可以发布影片了。选择“文件”→“发布设置”命令，打开“发布设置”对话框，在此对话框中用户可进行发布前的各项设置，在“发布”选项区中选择要发布的文件类型后，即可在对其进行发布设置。（1）“Flash”设置当我们在“发布设置”对话框的“发布”选项区中选择“Flash（.swf）”选项时，对话框则显示Flash发布的相应设置，如图8-8所示。各项设置说明如下：案例1“瓢虫爬行”动画影片测试与发布任务“绿叶与瓢虫”动画影片的发布相关知识2.“发布设置”的基本参数设置①“目标”列表：可以选择Flash播放器版本。②“脚本”列表：可以选择ActionScript版本。③“输出文件”：可以设置输出文件的名称和位置。案例1“瓢虫爬行”动画影片测试与发布图8-8“发布设置”对话框中的“Flash”选项卡

任务“绿叶与瓢虫”动画影片的发布相关知识2.“发布设置”的基本参数设置④“JPEG品质”：通过修改数值可以调整影片中位图品质，控制位图压缩。值越大，图像越清晰，文件所占空间也越大，压缩比越小。若要使高度压缩的JPEG图像显得更加平滑，请选择“启用JPEG解块”选项。⑤“音频流和音频事件”：可以对SWF文件中的所有声音流或事件声音的采样率、压缩方式以及品质进行设置。⑥“高级”选项中包括以下几项设置：压缩影片：选中此选项后，（默认）压缩SWF文件以减小文件大小和缩短下载时间。当文件包含大量文本或ActionScript时，使用此选项十分有益。包括隐藏图层：选中此选项后，（默认）导出Flash文档中所有隐藏的图层。取消选择“导出隐藏的图层”将阻止把生成的SWF文件中标记为隐藏的所有图层（包括嵌套在影片剪辑内的图层）导出。包括XMP元数据：选中此选项后，默认情况下，将在“文件信息”对话框中导出输入的所有元数据。单击按钮打开此对话框，在AdobeBridge中选定SWF文件后，可以查看元数据。案例1“瓢虫爬行”动画影片测试与发布任务“绿叶与瓢虫”动画影片的发布相关知识2.“发布设置”的基本参数设置生成大小报告：选中此选项后，将随影片文件生成一个报告，报告中列出各帧的字节数、总共字节数和场景等信息。省略trace动作：选中此选项后，可以忽略当前影片的跟踪动作，自动跟踪动作的信息不会显示在“输出”窗口中。防止导入：选中此选项后，发布的影片文件将无法再导入Flash影片中。允许调试：选中此选项后，激活调试器并允许远程调试影片。密码：在选定“允许调试”或“防止导入”选项后，可以在密码文本框中为影片设置密码，防止未授权用户调试或导入影片。本地回放安全性：从“本地回放安全性”下拉列表中，选择要使用的Flash安全模型。指定是授予已发布的SWF文件本地安全性访问权，还是网络安全性访问权。硬件加速：使SWF文件能够通过“直接”模式或“GPU”模式进行硬件加速。脚本时间限制：若要设置脚本在SWF文件中执行时可占用的最大时间量，请在“脚本时间限制”文本框中输入一个数值。FlashPlayer将取消执行超出此限制的任何脚本。案例1“瓢虫爬行”动画影片测试与发布任务“绿叶与瓢虫”动画影片的发布相关知识2.“发布设置”的基本参数设置（2）“HTML包装器”设置在“发布设置”对话框的“发布”选项区中选择“HTML包装器”选项时，“发布设置”对话框中显示“HTML包装器”的相应设置。单击此标签，将显示HTML选项卡，如图8-9所示。案例1“瓢虫爬行”动画影片测试与发布图8-9“HTML”选项卡任务“绿叶与瓢虫”动画影片的发布相关知识2.“发布设置”的基本参数设置在此选项卡中包括模板、尺寸、回放、品质、窗口模式以及缩放等选项，各项设置说明如下：①“模板”列表中用户可以选择影片中要使用的模板。然后，单击右边的按钮以显示选定模板的说明，默认选项是“仅Flash”。②“大小”列表中用户可以设置导出动画的尺寸。有三个“尺寸”选项：匹配影片：此选项（默认）使用SWF文件的大小。像素：此选项使用输入宽度和高度的像素数量。百分比：此选项使用指定影片文件所占浏览器窗口的百分比。③“播放”选项中包括以下几项设置：开始时暂停：选中此选项后，影片传输完毕会一直暂停播放SWF文件，直到用户单击按钮或从快捷菜单中选择“播放”后才开始播放。（默认）不选中此选项，即加载内容后就立即开始播放。案例1“瓢虫爬行”动画影片测试与发布任务“绿叶与瓢虫”动画影片的发布相关知识2.“发布设置”的基本参数设置循环：选中此选项后，使电影文件内容到达最后一帧后再重复播放。取消选择此选项会使内容在到达最后一帧后停止播放。默认情况下，会选中此选项。显示菜单：选中此选项后，在动画播放的窗口中单击鼠标右键，可以显示一个快捷菜单，含有放大、缩小、显示全部等命令。默认情况下，会选中此选项。设备字体：选中此选项后，可以使用系统字体替换用户系统上未安装的字体，仅限Windows环境。使用设备字体可使小号字体清晰易辨，并能减小SWF文件的大小。④“品质”列表中用户可以设置影片的保真级别。有以下六个选项：低：低品质。不使用消除锯齿功能。自动降低：自动调低影片质量。影片开始播放时，消除锯齿功能处于关闭状态。如果FlashPlayer检测到处理器可以处理消除锯齿功能，就会打开该功能。自动升高：自动调高影片质量。影片开始播放时，消除锯齿功能处于打开状态。如果实际帧频降到指定帧频之下，就会关闭消除锯齿功能以提高回放速度。案例1“瓢虫爬行”动画影片测试与发布任务“绿叶与瓢虫”动画影片的发布相关知识2.“发布设置”的基本参数设置中等：一般影片品质。影片播放时会应用一些消除锯齿功能，但并不会平滑位图。高：高品质。影片在播放时，始终使用消除锯齿功能。最佳：最佳影片品质。所有的输出都已消除锯齿，而且始终对位图进行光滑处理。⑤“窗口模式”列表中有四个选项：窗口：该选项为默认设置，在网页指定的范围内播放影片，通常会得到较佳的影片效果。Flash内容的背景不透明，并使用HTML背景颜色。HTML代码无法呈现在Flash内容的上方或下方。不透明无窗口：将Flash内容的背景设置为不透明，并遮蔽Flash内容下面的任何内容。此选项使HTML内容可以显示在Flash内容的上方或上面。透明无窗口：将Flash内容的背景设置为透明。此选项使HTML内容可以显示在Flash内容的上方和下方，但是影片的播放速度会变慢。直接：其发布支持使用Stage3D的硬件加速内容（Stage3D要求使用FlashPlayer11或更高版本）。案例1“瓢虫爬行”动画影片测试与发布任务“绿叶与瓢虫”动画影片的发布相关知识2.“发布设置”的基本参数设置⑥“显示警告信息”选项选中后，当动画设置有问题时Flash将会自动显示警告框。⑦“缩放与对齐”选项分为“缩放”、“HTML对齐”、“Flash水平对齐”“Flash垂直对齐”几个选项表。“缩放”列表：可以设定影片缩放在窗口中的放置方式。“HTML对齐”列表：可以选择SWF文件窗口在浏览器窗口中的位置。“Flash对齐”选项：可以设置影片水平和垂直方向上的对齐方式。案例1“瓢虫爬行”动画影片测试与发布任务“绿叶与瓢虫”动画影片的发布相关知识2.“发布设置”的基本参数设置（3）“GIF”设置当我们在“发布设置”对话框的“发布”选项区中选择“GIF图像”选项时，对话框中则显示“GIF”相应设置。如图8-10所示。案例1“瓢虫爬行”动画影片测试与发布图8-10“GIF”选项卡任务“绿叶与瓢虫”动画影片的发布相关知识2.“发布设置”的基本参数设置（4）“JPEG”设置当我们在“发布设置”对话框的“发布”选项区中选择“JPEG图像”选项时，对话框中则显示“JPEG”相应设置。单击此标签，将显示如图8-11所示的选项卡，在此选项卡中用户可以设置尺寸、品质以及渐进等选项。（5）“PNG”设置当我们在“发布设置”对话框的“发布”选项区中选择“PNG图像”选项时，对话框中则显示“PNG”相应设置。单击此标签，将显示如图8-12所示的选项卡，在此选项卡中用户可以设置尺寸、位深度以及选项等。

注意：PNG格式是Fireworks的默认文件格式，是Flash导出文件类型中唯一支持透明度Alpha通道的位图格式。其余选项在前面已做介绍，不再重复。案例1“瓢虫爬行”动画影片测试与发布任务“绿叶与瓢虫”动画影片的发布相关知识2.“发布设置”的基本参数设置案例1“瓢虫爬行”动画影片测试与发布图8-11“JPEG”选项卡图8-12“PNG”选项卡任务“绿叶与瓢虫”动画影片的发布项目小结本章明确了动画制作完成后测试影片的方法，影片优化的9项原则，发布影片时各不同的选项卡：“Flash”设置、“HTML包装器”设置、“GIF”设置、“JPEG”设置、“PNG”设置的基本参数设置以及图像、影片导出的方法，并能根据不同的使用需求将动画输出成不同类型的文件的设置。值得一提的是，本章的内容非常独立，可以在刚入门时就试一试动画输出与发布的操作。案例1“瓢虫爬行”动画影片测试与发布项

目小结思考与练习1.测试场景与测试影片有何区别？2.输出影片与发布影片有何区别？3.练习测试影片下载。4.练习将影片输出为单帧图像。5.练习发布一个完整的Flash影片。

案例1“瓢虫爬行”动画影片测试与发布思考与练习谢谢！Part9

单元9从Flash到云端：现代二维动画制作新体验

“周虽旧邦，其命维新。”

——《诗经》目标概述学习要求本项目将立足已掌握的AdobeFlash核心动画原理和动画制作技术，介绍二维动画工具的演进与拓展。通过了解掌握AdobeAnimate的软件进化与多平台输出方法，以及体验Mugeda云端HTML5交互动画内容制作云平台的创作流程，理解动画原理在不同工具间的通用性，拓宽技术视野，适应行业发展趋势。学习目标

能力要求知识要点了解理解掌握熟悉关联知识Animate的软件定位与多平台发布

从Flash到Animate的品牌演进；HTML5Canvas、视频、游戏资源等现代输出格式的适用场景。应用Animate完成HTML5动画发布

Animate将传统FLA文件转换为HTML5Canvas文档的操作方法；理解发布设置与生成文件。Mugeda平台的核心概念与云端工作流

Mugeda平台注册、工作台管理；其画布、时间轴、元件等概念与Flash的对应关系。Mugeda专业版编辑器的界面及基本功能

菜单栏、工具栏、页面栏与安全框等特色功能。运用Mugeda制作H5交互动画

预置动画、关键帧动画、行为面板的综合运用与项目实践。知识导航任务1桌面工具的进化：从AdobeFlash到AdobeAnimate9.1任务概述任务1软件的演进与品牌重塑本任务主要介绍AdobeAnimate如何在继承Flash核心操作的基础上，告别对

FlashPlayer插件的依赖，转向支持HTML5Canvas、视频等现代输出格式，并通过

实践体验其强大的多平台发布能力。本书以经典版AdobeFlashProfessionalCC讲解二维动画制作，因技术发展，网页浏览器逐渐淘汰了需要安装插件的技术（如FlashPlayer），转而拥抱HTML5等开放标准。为此，Adobe公司对Flash软件进行了战略升级与品牌重塑，将其更名为

AdobeAnimateCC（通常简称为An）。

1.超越插件：从依赖特定的FlashPlayer插件，转向支持更多元化的开放标准输出格式。2.定位升级：“Animate”（动画）这个名字更准确地概括了软件在现代工作流程中的核心能力——强大的多平台动画内容创作引擎。

总体来讲：我们熟悉的AdobeFlash软件，其功能和品牌已经进化成了AdobeAnimate。

但Animate的操作界面、核心工具（如画笔、时间轴、元件）与Flash一脉相承，老用户可以无缝过渡，只是Animate输出能力和应用领域得到了巨大扩展。这次更名标志着软件定位的根本性转变：案例1绘制“爱心”图案1.网页动画与交互内容（HTML5Canvas）：这是当前网页动画与交互内容的主流格式。替代了过去的Flash网站和横幅广告。它可以创建在电脑和手机浏览器上直接播放的动画，无需任何插件。2.视频与社交媒体内容：可以直接将动画序列导出为高清视频，极大地拓展了在短视频平台、社交媒体广告、动画短片等领域的传播渠道。3.游戏美术与动画：可将动画序列和元件打包成“纹理图集”并生成对应的数据文件，方便直接导入到Unity等游戏引擎中，用于高效制作2D游戏动画资源。4.教育课件与电子贺卡：继承了Flash在交互式内容方面的优势，并能输出为更通用、兼容性更强的格式，广泛应用于在线教育、企业培训和互动营销领域。任务1AdobeAnimate的现代工作流与输出格式任务概述相比AdobeFlash而言，Animate的核心优势在于其构建了一套“一个源文件，多种发布格式”的一体化流程。创作者只需进行一次动画制作，即可根据项目需求，选择不同的输出格式，以适应不同的平台需求。任务2应用Animate发布“瓢虫爬行”H5动画9.2任务概述案例1绘制“爱心”图案自2020年Adobe停止对FlashPlayer的支持后，主流浏览器均已不再支持该插件，这使得大量旧版的Flash动画（ActionScript文档）无法在网页中直接播放。为此，AdobeAnimate提供了将ActionScript文档转换为HTML5Canvas文档的实用功能，使我们无需重做所有工作，就能让传统动画重获新生。下面，我们通过制作一个简单的任务，将项目3中制作的“瓢虫爬行”动画发布为HTML5格式，亲身体验从Flash到Animate的知识无缝迁移，以及面向现代网页的发布流程。任务2发布“瓢虫爬行”H5动画任务分析通过本任务可以掌握将传统动画转换为HTML5Canvas文件的核心方法，并熟悉Animate的发布设置，从而完成动画的现代化发布。任务效果双击打开本次任务发布的HTML文件，动画即可在浏览器中直接播放，效果如图9-2所示。对比任务3-1中依赖FlashPlayer播放器的效果，如图9-3所示，可以直观地看到，同一动画现已摆脱了对特定插件的依赖，能够在现代网页环境中流畅运行。任务2发布“瓢虫爬行”H5动画制作步骤任务2发布“瓢虫爬行”H5动画步骤1在计算机上启动AdobeAnimateCC。观察Animate的工作界面，如图9-4所示，与FlashCC进行对比，可以看到时间轴、工具箱等核心工作区布局基本一致。步骤2执行“文件”→“打开”命令，找到并打开在任务3-1中制作的“瓢虫爬行”动画的源文件（.fla格式）。制作步骤任务2发布“瓢虫爬行”H5动画步骤3选择“文件”→“转化为”→“HTML5Canvas”命令,“瓢虫爬行”动画的传统ActionScript文档即转换为HTML5Canvas文档，如图9-5所示。制作步骤任务2发布“瓢虫爬行”H5动画步骤4Animate将内容复制到一个新的HTML5Canvas文档中，并保存为一个新文件。新的HTML5Canvas文档中包含转换后的内容，如图9-6所示。制作步骤任务2发布“瓢虫爬行”H5动画步骤5单击“文件”→“保存”命令，将文件存放在对应的文件夹中，注意查看“输出”面板中的警告，因为HTML5Canvas文档不支持3D旋转和3D平移工具，所以转换为HTML5Canvas文档后需留意“输出”面板中的消息，以确保掌握了Animate已经将哪些内容实现了从Flashplayer到HTML5的转换，以及哪些内容未能成功转换，需要我们进行必要的修改。如图9-7所示。制作步骤任务2发布“瓢虫爬行”H5动画步骤6选择“控制”→“测试”命令，测试转换后的动画效果，Animate导出HTML5和JavaScript文件，并在浏览器中显示动画，动画效果同原来一致，如图9-2所示。相关知识任务2发布“瓢虫爬行”H5动画Animate的“导出”和“发布”是其作为多平台创作引擎的核心体现，与Flash主要面向SWF格式的发布有显著区别。理解并掌握其发布设置，是运用Animate进行现代项目创作的关键。1.理解导出的文件若动画中使用了位图图像（如本任务的“瓢虫爬行”），Animate在发布为HTML5时，会自动导出库中的图像资源，以供网页端的HTML和JavaScript文件调用。转换完成后，生成的文件包括以下内容，如图9-8所示：一个

HTML文件，是动画在浏览器中载入和播放的入口；一个

JavaScript文件，主要包含控制动画行为的脚本代码；一个

images文件夹，存放所有位图资源整合后生成的PNG图像（也称为“精灵表单”）。JavaScript文件会从中动态载入所需图像部分，以实现动画效果，如图9-9所示。相关知识任务2发布“瓢虫爬行”H5动画

若需将HTML5动画部署到线上以供访问，则必须将生成的上述三个部分文件全部上传至服务器，用户通过访问HTML文件的网址即可观看动画。

请注意：动画发布后HTML文件可以重命名，但JavaScript、images文件夹以及其中的精灵表单的文件名称不能修改，否则HTML文件将无法正确引用相关资源，导致动画无法播放。相关知识任务2发布“瓢虫爬行”H5动画2.发布设置（1）执行“文件”→“发布设置”命令，打开“发布设置”对话框，如图9-10所示，在“基本”选项卡中，可以执行如下操作：相关知识任务2发布“瓢虫爬行”H5动画如果只想让时间轴播放一次，则取消选中“循环时间轴”单击“输出名称”旁的文件夹图标，可以将发布的文件存储到不同的文件夹。如果要将资源存放到不同的文件夹，可修改靠近“导出图像资源”选项附近的路径。如果文件中包含图像，则必须选中“导出图像资源”复选框，如果文件中包含声音，则必须选中“导出声音资源”复选框。选择“舞台居中”，可以将Animate项目在浏览器窗口中居中对齐，旁边的下拉菜单可以设置选择影片的居中方式：水平、垂直或水平和垂直。选择“使得可响应”，让Animate项目对浏览器窗口大小的改变做出响应，旁边的下拉菜单可以设置是响应窗口高度的变化、窗口的宽度的变化，还是同时响应这两者。“缩放以填充可见区域”选项决定了项目如何填充浏览器窗口中的可见区域。选择“包括预加载器”，该选项包含一个标准的循环播放的小动画，其目的是在动画开始播放之前，让用户知道文件正在下载。相关知识任务2发布“瓢虫爬行”H5动画（3）选择“图像设置”选项卡，如图9-12所示。如果想为导入到库中的所有位图创建一个单独的图像文件，可以选择“将形状转换为位图以获得更好的性能”。HTML5网页可以载入单个图像文件，而且在检索图像的特定部分时，其速度远快于载入多个更小的图像、为导出的图像选择“格式”选项，并设置图像的质量、大小和背景颜色。如果选择的尺寸太小，无法适应库中的图像，则Animate会根据需要发布多个精灵表单。此外，Animate还提供了发布至桌面端与移动设备等更多高级发布选项，读者可以自行探索，以满足更复杂的项目需求。（2）在“HTML/JS”选项卡中，可以执行如下操作，如图9-11所示。如果想发布单个文件，且这个文件包含了项目中所有必要的JavaScript和HTML代码，则选择“在HTML中包含JavaScript”，在每次发布时，Animate都将覆盖导出的文件。如果想保留HTML文件，只是更改JavaScript代码，则取消选中“在发布时覆盖HTML文件”复选框。保留选项卡其他所有默认设置即可。图9-12“发布设置”“图像设置”选项卡云端平台初探：Mugeda平台入门与专业版编辑器详解9.3任务概述任务3Mugeda平台概述本任务将全面介绍Mugeda（木疙瘩）云平台的注册登录、工作环境和其专业版编辑器的界面与操作等内容，为后续应用平台进行动画创作打下坚实基础。Mugeda是一款基于云端的专业级H5交互动画制作工具，无需任何下载和安装，基础会员免费，功能强大，能实现丰富多样的动画效果与交互体验。Mugeda的操作界面如图9-13所示，与Flash高度相似，因此有Flash操作基础的人员基本不用学习就可以快速上手，使用Mugeda制作出满意的H5作品。任务3Mugeda平台概述1.Mugeda的优势（1）功能全面：平台支持文字、图像、音频、视频等多种媒体元素的处理与动画制作。设计师无需编写代码即可完成专业级动画、交互效果乃至虚拟现实内容，开发者也可通过内置脚本功能写入JavaScript，实现更复杂的自定义交互。（2）创作方式灵活：提供多样化的创作途径，用户可选择在可视化编辑窗口中直接设计，也可基于内置模板快速搭建，或通过代码编写实现更个性化的效果。（3）跨平台兼容性强：全面适配各类浏览器及主流移动操作系统（如iOS、Android、Windows、WebOS等），真正实现“一次开发，多端发布”，同时支持导出为GIF、视频、PNG等主流多媒体格式，覆盖广泛的传播与使用场景。（4）易于上手：界面布局简洁合理，可视化程度高，便于初学者快速掌握基本操作。任务3Mugeda平台概述2.Mugeda的版本Mugeda提供简约版、专业版、离线版三个版本。其中，简约版和专业版属于在线版，用户需注册并登录Mugeda平台才能进行作品创作。离线版则需要下载客户端，可在无网络情况下正常编辑制作。需要注意的是Mugeda各版本账号间是互通、双向同步的，具有离线迁移的特点。一个账号可以登录所有版本。云端内容和离线内容的双向同步。3.Mugeda平台账号注册方法Mugeda支持微信、手机和邮箱三种注册方式。默认使用微信注册。会员分为免费会员、标准会员、团队会员和企业会员四种。所有会员发布的H5作品均不带有水印并支持用手机设备观看。另外Mugeda平台还提供“通过二维码共享”功能一键生成二维码，观看者也可以通过手机扫描二维码观看作品效果。团队会员和企业会员还提供更加专业的企业服务。任务3Mugeda平台基础操作与管理1.平台的注册与登录（1）连接网络，打开浏览器（推荐使用谷歌浏览器），在地址栏输入“”

并访问，进入Mugeda官方网站，如图9-14所示。任务3Mugeda平台基础操作与管理（2）单击Mugeda平台右上角的“登录”按钮，系统跳转至登录页面，如没有账号，单击“登录”按钮下方“注册账号”命令，则进入注册页面，如图9-15所示。（3）以“手机注册”为例：单击图9-15所示的“手机注册”命令，系统进入注册页面，如图9-16所示，按要求输入手机号码和图形验证码，点击“发送验证码”按钮。（4）手机接收到验证码后，按页面指示输入验证码，并设置密码，最后单击“注册”按钮。注册成功后，用户即可获得一个免费的木疙瘩账号。任务3Mugeda平台基础操作与管理（5）注册成功后，用户可随时访问官网并登录账号，登录成功后进入工作台首页，如图9-17所示。任务3Mugeda平台基础操作与管理2.工作台首页功能导览工作台首页是Mugeda平台的核心操作界面，主要包括以下功能区域：（1）导航区提供平台主要功能入口，包括：案例：列出了大量的Mugeda用户自荐推广并经Mugeda后台管理员审核通过的H5作品；模板商城：包含大量的各类商业H5模板；设计师：推荐有优秀H5作品的设计师；教程：提供视频课程、文档教程等内容；离线版：提供离线版客户端下载入口；报价：为商业用户提供收费标准、问题解答等；论坛：用户交流与经验分享社区；木疙瘩学院：系统化学习平台。任务3Mugeda平台基础操作与管理（2）作品管理区用于管理用户的H5作品及相关操作，主要包括：①新建作品单击“新建作品”按钮，弹出编辑器选择对话框，如图9-18所示。通过该对话框可进入相应的编辑器。任务3Mugeda平台基础操作与管理②作品管理通过“作品管理”→“我的作品”命令进入作品列表，如图9-19所示，平台支持对作品进行新建、移动、删除、重命名等操作。任务3Mugeda平台基础操作与管理③发布作品将鼠标指针移到图9-19所示作品缩略图的任意位置，该缩略图上就会显示出图9-20所示编辑界面，提供“发布”“数据”“转为模板”“推广”“删除”5种编辑操作命令。单击“发布”命令，页面会跳转到发布动画页面，如图9-21所示。作品左上角显示出黄色的“待确认”提示，页面右侧除了显示有发布地址、分享二维码、发布时间、文件大小等信息外，还有一个“确认发布”按钮，单击“确认发布”按钮成功发布后页面右上方会显示出“操作成功”提示，并会在“发布地址”栏中显示出作品的发布地址。任务3Mugeda平台基础操作与管理任务3Mugeda平台基础操作与管理④查看作品数据单击“数据”命令，页面跳转至作品数据页面，页面中会显示出作品的统计数据、用户数据、内容分析等信息，如图9-22所示。任务3Mugeda平台基础操作与管理⑤将作品转换为模板单击“转为模板”命令，下拉菜单提供“转为私有模板”和“售卖模板”两个选项，如图9-23所示。单击“转为私有模板”选项，会弹出模板转换成功提示对话框。如果要售卖自己的作品，则需要具备两个条件：一是准备售卖的作品已经成功发布，二是在“我的账户”中进行了设计师认证。满足了上述两个条件后，单击“售卖模板”选项，即可在弹出的售卖模板申请单重填写相关内容。⑥推广单击“推广”命令，在弹出的菜单中按要求填写信息并提交审核，后台管理员审核通过即可推广，注意能进行推广的作品必须是已经发布。（3）模板管理单击“我的模板”即可进入模板管理页面，所有用户创建或使用过的模板均会在此集中显示，支持预览、使用、编辑等操作。该功能特别适用于团队或企业账号，支持内部成员之间的模板共享：选中目标模板，单击其右下角的“共享”按钮，即可进行共享设置。任务3Mugeda平台基础操作与管理（4）素材管理单击“素材库”可进入素材管理界面，如图9-24所示，用户可在此对素材进行选择、移动、删除等操作。素材按属性分为两类，个人素材用户私有，他人不可见。共享素材由Mugeda官方提供，所有用户均可免费使用。任务概述任务3Mugeda专业版H5编辑界面详解Mugeda平台界面简洁明了，用户通过界面操作很容易创作出精美的H5动画作品。前面已经介绍过，Mugeda平台提供了简约版、专业版、离线版三个版本。因为简约版编辑器和模板编辑器是专业版编辑器的简化版，所以本书介绍专业版H5编辑器的界面及基本操作，读者熟悉后可轻松上手另外两种编辑器。1.专业版H5编辑界面单击工作台首页左侧的“新建作品”命令，弹出编辑器选择对话框，选择该对话框“H5(专业版编辑器)”即可进入专业版H5编辑器的编辑界面，如图9-25所示。观察Mugeda专业版H5的编辑界面，与Flash相比，两者在菜单栏、时间轴等核心工作区布局上极为相似。为帮助您快速掌握Mugeda，下面我们将重点剖析其与Flash的核心差异与特色功能。相关知识1.菜单栏莱单栏包含“文件”“编辑”“视图”“动画”“帮助”菜单。其中“文件”菜单中包括对作品文件进行管理和对作品文件资源进行基本处理的一些命令，下面介绍“文件”菜单中的几项特色功能。任务3Mugeda专业版H5编辑界面详解（1）作品版本“作品版本”命令用于记录作品修改的情况，用户从作品版本中可以看到所有修改的版本。在菜单栏中执行“文件”→“作品版本”命令，会显示出最新版本信息，如图9-26所示。可以看出，该作品保存过2个版本，单击即可切换到相应的版本。相关知识（2）文档信息在菜单栏中执行“文件”→“文档信息”命令，弹出“文档信息选项”对话框，可在该对话框中设置信息分享、适配等。可设置的文档信息主要包括转发标题、转发描述、内容标题、预览图片等，如图9-27所示。建议导入图片大小为128像素×128像素的预览图片。文档信息设置完成后，单击“编辑元信息”命令，“编辑元信息”的填写内容被展开，向下拖曳对话框右侧的下拉条，显示出图9-28所示的信息设置项。这里的信息用于创作者后台管理分析，观看作品的用户是无法看到的。任务3Mugeda专业版H5编辑界面详解相关知识（3）导出在菜单栏中执行“文件”/“导出”命令，弹出“导出”下拉菜单，如图9-29所示。常用命令的功能如下。任务3Mugeda专业版H5编辑界面详解①“HTML动画包”命令可以将整个作品导出为一个独立的、包含所有必要资源文件的HTML压缩包。此文件包可以脱离Mugeda平台，独立部署到任何支持HTML5的服务器或网站上，是实现作品离线传播和使用的标准方式。②“GIF动画（当前页）”命令可以将当前页的帧动画生成为GIF格式动画文件。③“视频-Beta版”命令可以将当前作品的一页动画生成为MP4格式的视频文件，生成文件的名称与存储路径可由用户自行设定。④“PNG（当前帧）”命令能将当前页的当前帧生成为PNG格式的图像文件。⑤“苹果图书插件（iBooksWidget)”命令可将作品导出为专为苹果iBooksAuthor软件设计的插件文件（.wdgt），可用于制作增强型交互式电子书，在苹果设备（如iPad）的iBooks中提供丰富的互动阅读体验。相关知识（6）同步协同数据“同步协同数据”是为企业用户提供多用户共享作品及协同创作功能的操作命令。该功能需要与工具栏中的“内容共享”按钮配合使用。在工具栏中单击“内容共享”按钮，弹出图9-30所示的“内容共享”对话框。通过该对话框可设置同步协同数据。任务3Mugeda专业版H5编辑界面详解图9-30内容共享对话框利用“内容共享”工具完成内容共享的操作方法和过程如下。①在“内容共享”对话框中单击“共享源文件”按钮。单击预览地址右侧的“复制链接”按钮。③将复制的链接地址转发给共享用户。④共享用户登录自己的木疙瘩账户。⑤共享用户将屏幕跳转到浏览器页面。⑥在浏览器地址栏中粘贴复制的链接（可按Ctrl+V组合键）。⑦共享文件的内容被导入舞台。用户可对其进行编辑，并保存为自己的作品。菜单栏其他几个“编辑”“视图”“动画”“帮助”的内容与Flash高度相似，大家可以轻松上手。相关知识2.工具栏Mugeda平台的工具栏的工具功能都很明确，如图9-31所示。任务3Mugeda专业版H5编辑界面详解相关知识其中“脚本”工具为用户提供了通过代码深度定制动画行为的能力。单击工具栏中的“脚本”按钮，即可打开“脚本”对话框，如图9-32所示。具备JavaScript编程能力的用户可以直接编写代码，从而实现远超可视化编辑范围的复杂逻辑与高级交互效果。任务3Mugeda专业版H5编辑界面详解相关知识3.页面栏和页面编辑区页面栏、页面编辑区和舞台如图9-33所示。任务3Mugeda专业版H5编辑界面详解相关知识（1）页面栏页面栏是呈现H5作品各页面缩略图的地方，如图9-33的左侧所示。其相关操作包括：单击页面缩略图，舞台上即可呈现该页面，可方便创作者快速选择需要编辑的页面；在页面缩略图上按住鼠标左键并拖曳，可以调整页面排序；单击页面缩略图左上角的按钮，可插入新页面；单击页面缩略图右上角的按钮，可删除当前页面；单击页面缩略图左下角的按钮，可预览当前页面；单击页面缩略图右下角的按钮，可复制当前页面；单击页面栏左下方的按钮，可添加新页面；单击页面栏右下方的按钮，可从模板添加页面。（2）页面编辑区页面编辑区位于页面栏和属性面板之间，页面编辑区中有屏幕适配方式选择框、手机型号选择框（选择好手机型号后，舞台上会出现对应的安全框）、舞台缩放选择框和舞台。任务3Mugeda专业版H5编辑界面详解相关知识①手机型号选择框与安全框由于不同手机的屏幕比例存在差异，为确保动画内容在各种设备上均能完整显示，编辑器提供了手机型号选择与安全框功能。用户只需从手机型号选择框的下拉菜单中选定目标型号，舞台中央即会显示一个绿色的安全框，代表该设备的可靠显示区域。编辑时，若内容超出此区域，安全框将变为红色，以此警示排版可能存在显示风险。例如在图9-34中，因“月亮”图片超出边界，安全框已显示为红色。任务3Mugeda专业版H5编辑界面详解相关知识任务3Mugeda专业版H5编辑界面详解②屏幕适配单击屏幕适配方式选择框右侧的下拉按钮，将显示出各种屏幕适配方式，如图9-35所示。在屏幕适配方式中，常用的是“宽度适配，垂直居中”和“高度适配，水平居中”两种。在屏幕适配方式中，“包含”与“覆盖”的理解尤为关键：选择“包含”时，作品会等比例缩放，确保所有内容在不同手机上都能被完整显示，但屏幕两侧或上下可能出现留白。选择“覆盖”时，作品会填满整个手机屏幕，但可能导致内容被裁剪或产生变形，以适应不同的屏幕比例。4.工具箱工具箱将各种工具归纳整理为多个类别，“工具”面板包含“选择”“媒体”“绘制”“预置考题”“控件”“表单”“微信”七个工具组，每个组中都包含多个工具，图9-36所示的是工具箱中的工具。图9-36工具箱中的工具介绍用Mugeda平台创作H5交互

动画9.4任务概述任务效果任务4创作H5交互动画制作完成的“中国美术馆介绍”H5动画的效果如图9-37所示。本任务主要应用Mugeda平台的预置动画、帧动画、简单的交互控制以及镜头移动等方法来完成介绍“中国美术馆介绍”H5动画。任务分析任务4创作H5交互动画动画共分2个页面，通过推镜头、摇镜头和预置动画、帧动画等动画技巧介绍中国美术馆。1.首页面制作任务画面从美术馆的正门全景聚焦到美术馆的大门。动画播放结束后，美术馆大门出现“点击进入”的按钮，点击该按钮，跳转到第2页。2.第2页制作任务第2页用摇镜头介绍美术馆大厅。大厅画面从舞台的右侧向左侧移动。同时，在舞台上从右向左移动展示美术馆文字介绍动画。