《Flash项目实践教程》（第六版）课件 09-从Flash到云端：现代二维动画制作新体验、10-网站Flash引导页面制作、11-网站Banner条制作

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页用摇镜头介绍美术馆大厅。大厅画面从舞台的右侧向左侧移动。同时，在舞台上从右向左移动展示美术馆文字介绍动画。制作步骤任务4创作H5交互动画步骤1新建一个H5作品，将舞台设置为宽320像素、高520像素，帧速设置为7帧/秒。步骤2将图层重命名为“正门”图层，在“正门”图层的第1帧，导入美术馆正门图片。在该图层的第15帧插入一个关键帧，将其作为帧动画的起始帧，在第54帧单击右键，选择“插入关键帧动画”，并将54帧美术馆图片放大到如图9-38所示效果。制作步骤任务4创作H5交互动画步骤3新建“文字”图层，在第15帧，添加关键帧，并在美术馆门口添加文字“点击进入”，再新建“文字按钮”图层，在第54帧添加关键帧，打开工具栏“导入图片”，在对话框中选择“共享”→“彩色按钮”命名，添加跳转按钮，如图9-39所示。应用“变形工具”调整按钮到合适大小。步骤4为使跳转按钮更加醒目，我们用“预置动画”和“添加/编辑行为”为跳转按钮添加动画效果和功能，如图9-40所示。选中按钮，打开“添加预置动画”对话框，选择“强调”→“颤抖”效果，如图9-41所示。再次选中按钮，打开“添加/编辑行为”对话框，为跳转按钮添加的行为和触发条件是“跳转到下一页、点击”，如图9-42所示。图9-40预置动画编辑区图9-41添加预置动画对话框图9-42编辑行为对话框制作步骤任务4创作H5交互动画步骤5单击“页面编辑器”下方加号，增加一个新的页面。将图层重命名为“大厅”，在第1帧添加展厅图片如图9-43所示，然后在第90帧单击右键，选择“插入关键帧动画”，并将第90帧美术馆大厅图片移动到如图9-44所示效果。图中红色矩形框为舞台。图9-43第1帧舞台效果图9-44

第90帧舞台效果制作步骤任务4创作H5交互动画步骤6新建“灰色矩形背景”图层，在第1帧绘制一个横贯舞台的灰色矩形，如图9-45所示，用灰色矩形衬于文字下方，以便用户阅读文字。制作步骤任务4创作H5交互动画步骤7美术馆介绍文字的移镜头效果帧动画是在大厅帧动画开始0.8秒后才开始播放的。这样制作的好处是给用户留出反应时间。我们新建“文字”图层，在第5帧的位置插入关键帧，将文字摆在灰色矩形框右侧，如图9-46所示，然后在第90帧单击右键，选择“插入关键帧动画”，并将第90帧文字移动到如图9-47所示效果。图中红色矩形框为舞台。图9-46第5帧舞台效果图9-47第90帧舞台效果制作步骤任务4创作H5交互动画动画完成后，第1页和第2页图层和时间轴面板如图9-48所示。相关知识任务4创作H5交互动画1.预制动画的设置①添加预制动画为素材添加预置动画，需选中添加到舞台的素材，单击素材旁的红色图标，如图9-49所示。此时，会打开“添加预置动画”面板，选择其中想要的动画效果即可，如图9-50所示。将鼠标停留在效果上，即可在舞台上看到相应的动画效果，有一部分效果不支持舞台预览，可以添加后再行预览。也可以选中素材，在“属性”面板中，单击“预置动画”后面的“＋”图标，如图9-51所示。同样可以打开“添加预置动画”面板。相关知识任务4创作H5交互动画②设置预置动画添加了预置动画效果后，在素材旁边会多出一个蓝色图标，“属性”面板中也会出现预置动画的相应设置，如图9-52所示。单击素材旁边的蓝色图标，也可以打开设置面板，如图9-53所示。相关知识任务4创作H5交互动画③自定义预制动画如果要自定义预置动画，可以将“时间轴”面板做好的关键帧动画转换为自定义预置动画。在动画过渡帧上单击鼠标右键，选择“保存为预置动画”选项，如图9-54所示。相关知识任务4创作H5交互动画此时，会打开“修改计时”对话框，可以在其中修改“动画名称”“时长”“延时”等信息，如图9-55所示。单击“确认”按钮后，再打开“添加预置动画”面板，就可以在“自定义”选项卡中找到自定义的预置动画了，如图9-56所示。相关知识任务4创作H5交互动画2.关键帧动画的设置关键帧动画是动画制作中一种常用的动画形式，它是通过设定动画的起始和结束两个关键帧，然后通过系统自动生成动画过程的动画形式，类似Flash的传统补间动画。3.添加/编辑行为的设置①行为的定义舞台上的元素通过添加某个“行为”(实质是代码交互，只是这些代码内置于Mugeda系统中)，以及相应的触发条件完成某个交互响应。②添加行为选取任意素材，单击素材旁的黄色图标，可以打开“编辑行为”面板，其中包括“动画播放控制”“媒体播放控制”“属性控制”“微信定制”“手机功能”“数据服务”6个部分，如图9-57所示。相关知识任务4创作H5交互动画③行为的触发选中左边任意行为，如“跳转到页”行为，在右边“触发条件”的下拉菜单中有“点击”“出现”“手指按下”“手指抬起”等多种触发行为的条件选项。通过选择不同的触发条件组合不同的行为，可以形成无数种触发方式，类似Flash操作，如图9-58所示。项目小结项目小结本项目系统探讨了二维动画制作工具从传统桌面软件到现代云端平台的演进路径，完成了从理念认知到实践应用的全过程学习。1.核心技能掌握：AdobeAnimate的发布设置：能够将传统的Flash动画源文件（FLA）发布并转换为现代网页格式（HTML5），并熟练配置其发布设置，理解生成文件的作用与发布规范。Mugeda云端工作流：完成了从平台认知、账号注册、工作台管理到作品发布与数据分析的完整流程，理解了云端协作与资源管理的基本模式。Mugeda专业版编辑器：通过对比Flash，理解了其界面布局的继承性与独特功能（如作品版本、内容共享、安全框等），实现了知识的有效迁移。H5交互动画创作：综合运用预置动画、关键帧动画和行为面板，独立制作了一个具备页面跳转功能的完整H5动画作品。项目小结项目小结2.工具演进与定位认知：AdobeAnimate

是Flash在专业道路上的战略升级，是处理复杂、跨媒体项目（如视频、游戏资源）的强大桌面引擎。Mugeda

是面向H5交互动画领域的云端解决方案，以易用性、协作性和高效的移动端传播见长，适合快速内容开发和营销。请注意：本书为保障教学体系的连贯性与稳定性，后续所有章节的讲解与实操，均基于

AdobeFlashProfessional这一经典工作环境。但大家在学习过程中所掌握的动画原理、绘图技巧和时间轴概念，也适用于新版AdobeAnimate和Mugeda等平台。无论工具如何变化，您在本书中学到的动画思维与制作原理是永恒的。请以此为起点，去探索更精彩的动画世界。思考与练习思考与练习1.简述AdobeAnimate与FlashCC的主要区别与联系。2.Mugeda平台中的“画布”、“时间轴”和“元件”分别对应Flash中的哪些概念？3.请将在Flash中制作的一个简单动画（如“跳动的心”），尝试在AdobeAnimate中发布为HTML5格式，并在Mugeda平台上重新制作并发布为一个可分享的H5动态卡片。谢谢！Part9项目9网站Flash引导页面制作像哲人一样思考，像匠人一样劳作目标背景效果展示网站引导页面动画是网站的品牌和理念的最佳的演示，要在充分了解客户想要表达的概念或者价值观念的基础上，制作出具有出色的创意同时符合网络的要求的动画效果。本项目就是为常州工程职业技术学院的学院网站制作引导页面。项目完成的效果如图学习目标学习目标设计思路9.1知识导航设计思路根据网站的页面设计，引导页面具体的设计思路如下：1.字动画（1）屏幕居中“常州工程职业技术学院”标记文字由大且模糊逐渐变小且清晰，最终消失；（2）居中显示的图片上下方出现白线移动效果。（3）屏幕左上角的“常州工程职业技术学院”Logo由模糊逐渐变清晰；（4）“常州工程职业技术学院”Logo下方延展出一条白线；（5）白线下方显示“常州工程职业技术学院”的英文缩写（遮罩效果）；2.图片动画（1）屏幕居中展示一幅“常州工程职业技术学院”校园景色的图片；（2）图片右侧依次出现“图片按钮”。3.添加按钮脚本（1）单击“图片按钮”能切换到展示“常州工程职业技术学院”的其他校园图片；（2）单击“skip”文字按钮能跳过引导页面动画，进入到网站首页面。项目实

施9.2任务说明效果展示任务1制作文字动画效果实现引导页面的文字动画效果。（1）屏幕居中“常州工程职业技术学院”标记文字由大且模糊逐渐变小且清晰，最终消失；（2）屏幕左上角的“常州工程职业技术学院”Logo由模糊逐渐变清晰；（3）“常州工程职业技术学院”Logo下方延展出一条白线；（4）白线下方显示“常州工程职业技术学院”的英文缩写（遮罩效果）；（5）居中显示的图片上下方出现白线移动效果。制作步骤任务1制作文字动画效果

步骤1

创建Flash的舞台，打开FlashCS6软件，设置舞台文档属性，尺寸：790px*510px，颜色：#3B5997，帧频：36fps，如图9-2。步骤2修改第一层名称为“标题”，如图9-3所示，创建标题元件tiltle1，如图9-4所示。步骤3选择“视图”菜单的“标尺”选项，打开舞台的标尺，在“50%”的比例下，左右各400，上200的位置划分割线，明确舞台中心位置，如图9-5所示。图9-2设置Flash文档属性图9-3修改图层名称图9-4创建title元件图9-5设置分割线制作步骤任务1制作文字动画效果步骤4设置居中“常州工程职业技术学院”标记文字动画效果。（1）修改title1元件的图层名称为“T1”；（2）制作title01元件，创建title01元件，类型为“图形”，导入素材图片title01.png；（3）将title01元件拖入title1元件“T1”图层的第1帧，设置“对齐”面板，使其水平、垂直都居中，如图9-6所示；（4）在“T1”图层第20和第40帧分别插入关键帧，用

“任意变形工具”将第1帧的title01元件适当拉大，并设置“Alpha”为50%，设置第40帧的title01元件“Alpha”为0%，如图9-7；（5）分别在第1~20帧、第21~40帧创建传统动作补间动画，得出动画效果，如图9-8所示。制作步骤任务1制作文字动画效果步骤5制作屏幕左上角的“常州工程职业技术学院”Logo动画效果。（1）添加title1元件新图层名称为“T2”；（2）在“T2”图层第41帧插入关键帧，将title01元件拖入屏幕的左上角，如图9-9所示，在第54帧插入关键帧，设置第41帧title01元件“Alpha”为50%；（3）在第41~54帧创建传统动作补间动画，得出动画效果，如图9-10所示。制作步骤任务1制作文字动画效果步骤6

“常州工程职业技术学院”Logo下方白线动画。（1）创建“line”元件，类型为“图形”，用“铅笔”工具绘制一条极细的白色的直线；（2）添加title1元件新图层名称为“TL1”；（3）在“TL1”图层第54帧插入关键帧，将line元件拖入屏幕的左上角logo下方的合适位置，调整元件长度，适合logo大小，如图9-11所示，在第64帧插入关键帧，设置第54帧line元件小大为“0”，“Alpha”为0%；（4）在第54~64帧创建动作补间动画，得出动画效果，如图9-12所示。制作步骤任务1制作文字动画效果步骤7制作白线下方显示的“常州工程职业技术学院”的英文缩写动画。（1）添加title1元件新图层名称为“TE1”；（2）制作title01元件，创建title02元件，类型为“图形”，导入素材图片title02.png；（3）在“TE1”图层第64帧插入关键帧，将title02元件拖入屏幕的左上角logo下方的合适位置（在白线上方），在第74帧和第80帧分别插入关键帧（在TL1、T2图层的第80帧插入普通帧，以便对齐位置）；（4）调整第74帧和第80帧title02元件的位置，第74帧title02元件从白线上方划到白线下方最低点，第80帧再上升到白线下合适位置；（5）分别在第64~74帧和74~80创建传统动作补间动画，得出动画效果，如图9-13所示；制作步骤任务1制作文字动画效果（6）设置文字遮罩效果，添加title1元件新图层名称为“遮罩”，在第64帧插入关键，绘制一白色矩形（矩形大小低于第64帧英文位置，遮盖住第74帧英文最低点为宜，无笔触颜色）右击“遮罩”图层，在下拉菜单选择“遮罩层”如图9-14所示，得到遮罩效果。制作步骤任务1制作文字动画效果步骤8居中显示的图片上下方的白线动画效果。（1）添加title1元件新图层名称为“top”、“bottom”；（2）在“top”图层第1帧拖入line元件，设置在右上方，在“bottom”图层第1帧拖入line元件，设置在左下方，如图9-15所示；（3）在“top”、“bottom”图层第20帧插入关键帧，将“top”图层line元件平行的拖入屏幕的正上方，将“bottom”图层line元件平行的拖入屏幕的正下方，如图9-16所示；（4）分别在“top”、“bottom”图层第1~20帧创建动作补间动画，得出动画效果，并在两个图层的第80帧插入普通帧，至此文字动画效果制作完成。任务说明效果展示案例1“瓢虫爬行”动画影片测试与发布任务2制作图片动画效果实现图片动画效果。（1）屏幕居中展示一幅“常州工程职业技术学院”校园景色的图片；（2）图片右侧依次出现“图片按钮”。制作步骤案例1“瓢虫爬行”动画影片测试与发布任务2制作图片动画效果步骤1因设计思路中考虑，单击“图片按钮”可以变换不同图片，所以此处的图片不仅是一张图片，而是一系列图片排列的元件，如图9-17所示。步骤2要制作一系列图形排列的bg_pic元件，首先要将展览馆提供的5张图片设置为图形元件，分别为bg001~bg005，创建bg001元件，类型为“图形”，导入素材图片bg001.jpg即可，bg002~bg005制作方法相同制作步骤案例1“瓢虫爬行”动画影片测试与发布任务2制作图片动画效果步骤3

图片的显示有由无到白再清晰的过程，所以为每个图片创建效果元件分别为bg_pic01~bg_pic05，以bg_pic01为例，以下为制作步骤：（1）创建rect元件，类型“影片剪辑”，绘制5px*5px大小的白色矩形，无边框；（2）创建bg_pic01元件，类型“影片剪辑”，在第1帧导入rect元件，并拉大到780px*320px（和图片同样大小），在第3帧插入关键帧，设置第1帧“Alpha”为0%，设置第3帧“颜色”的“高级”如图9-18所示；（3）在第4帧，导入bg001元件，在第16帧插入关键帧，设置第4帧bg001元件“颜色”的“高级”如图9-19所示；制作步骤案例1“瓢虫爬行”动画影片测试与发布任务2制作图片动画效果（4）分别在第1~3帧和4~16创建传统动作补间动画，得到动画效果；（5）添加新图层名称为“action”，在第16帧插入关键帧，选中帧，在动作面板中添加脚本“stop();”；（6）bg_pic02~bg_pic05元件的制作，重复以上步骤。步骤4创建bg_pic元件，类型“影片剪辑”，导入bg_pic01~bg_pic05元件分别在第1~5帧。步骤5添加新图层名称为“action”，在第1~5帧均插入关键帧，选中帧，为每一帧添加脚本“stop();”。步骤6添加title1元件新图层名称为“bgpic”，在第80帧插入关键帧，导入bg_pic元件。制作步骤案例1“瓢虫爬行”动画影片测试与发布任务2制作图片动画效果步骤7制作图形按钮，分别为btn01~btn05，以btn01为例，以下为制作步骤：（1）制作pic01元件，创建pic01元件，导入pic01.jpg素材图片；（2）制作pic001元件，创建pic001元件，导入pic01元件，在第10帧插入关键帧，设置第1帧“Alpha”为60%，在第1~10帧创建补间动画，选中第10帧，添加脚本“stop();”；（3）创建rect1元件，导入rect元件，设置65px*50px大小，在第10帧插入关键帧，设置第1帧“Alpha”为0%，在第1~10帧创建补间动画，选中第10帧，添加脚本“stop();”；（4）创建btn01元件，类型为“按钮”，“弹起”状态导入pic01元件，“指针经过”状态导入pic001元件，“按下”和“点击”状态插入普通帧；（5）添加一图层2，并将图层2拉到图层1下方，“弹起”状态导入rect元件，“指针经过”状态导入rect1元件，“按下”和“点击”状态插入普通帧，效果如图9-21所示：图9-21btn01按钮元件（6）btn02~btn05元件的制作，重复以上步骤。制作步骤案例1“瓢虫爬行”动画影片测试与发布任务2制作图片动画效果制作步骤案例1“瓢虫爬行”动画影片测试与发布任务2制作图片动画效果步骤8制作图片按钮上升效果，以下为制作步骤。（1）创建btn_pic元件，修改btn_pic元件的图层名称为“btn01”；（2）将btn01按钮拖入btn_pic元件的第1帧，在第15帧插入关键帧，设置第1帧“Alpha”为0%，第15帧位置按钮位置垂直向上移动，在第1~15帧创建补间动画；（3）依次设置btn02、btn03、btn04、btn05图层，每个图层的起始帧向后移动5帧，并在每层的第35帧插入普通帧，如图9-22所示：（4）添加新图层名称为“action”，在第35帧插入关键帧，选中帧，在动作面板中添加脚本“stop();”。步骤9添加title1元件新图层名称为“pic”，在第80帧插入关键帧，导入btn_pic元件。任务说明案例1“瓢虫爬行”动画影片测试与发布任务3添加按钮脚本，制作按钮图片切换动画效果添加按钮脚本（1）单击“图片按钮”能切换到展示“常州工程职业技术学院”的其他图片；（2）单击“skip”文字按钮能跳过引导页面动画，进入到网站首页面。制作步骤案例1“瓢虫爬行”动画影片测试与发布任务3添加按钮脚本，制作按钮图片切换动画效果现在动画还不能做到单击图片按钮可以换展示图片的功能，要实现这一效果，需要为按钮添加动作脚本，打开btn_pic元件，以btn01按钮为例，选中第15帧（图片按钮完全显示的那一帧），选中按钮，打开动作面板，添加代码如下：制作步骤案例1“瓢虫爬行”动画影片测试与发布任务3添加按钮脚本，制作按钮图片切换动画效果在引导页面中，一般还设计“skip”跳过按钮，即可以跳过引导页面，直接到网站首页面，读者可以参照图片按钮的制作方法自行设计“skip”跳过按钮，注意添加的脚本为：步骤8按ctrl+Enter测试影片，效果如图9-1所示。经验指导9.3相关知识网站的引导页面通常是起到画龙点睛的作用，绚丽的动画效果能够为网站的设计锦上添花，要设计好的片头动画，要在充分了解客户想要表达的概念或者价值观念的基础上，制作出具有出色的创意，同时符合网络的要求的效果，制作流程如下：1.明确设计思路：明确引导页面的设计思路、动画的设计脚本，方便于素材的准备和任务的分解。2.材料准备：将Flash引导页面动画的内容素材收集在一起，图片，声音，音效，动画主题，文字内容，布局，颜色定位这七项元素都确定下来。3.制作动画：根据动画的设计思路，将构成引导页面中的每一个元素都用时间轴让它动起来。制作过程中注意每个元素“动”起来的时间先后顺序。4.多幅平面设计图的拼接：制作片头动画一个场景就够了，其他的多幅平面设计图都集中放在一个“剪辑MC”中即可。案例1“瓢虫爬行”动画影片测试与发布拓展训练9.4

制作珠宝首饰网站Flash引导页面。案例1“瓢虫爬行”动画影片测试与发布项目说明项目名称网站引导页面以模特图片为背景，突出首饰的优美造型，体现首饰的风采。制作珠宝首饰网站flash引导页面设计提示（1）收集动画设计的背景及首饰等素材，制作背景及文字逐渐显示的动画效果；（2）绘制矩形的首饰图片展示框，通过遮罩效果显示首饰图片；（3）设置其他背景及首饰图片的显示效果；

效果展示谢谢！Part10项目10商业网站Banner条制作

美的形象是丰富多彩的，而美也是到处可见的，人类本性中就有普遍的爱美的需求。——黑格尔目标背景效果展示商业网站的Banner条能通常用来宣传产品图片和产品信息，如用Flash动画制作动态的Banner条效果，则能吸引用户眼球，起到更好的宣传作用，本项目就是完成一个空调产品在电子商务网站上的动态Banner条制作。本案例使用素材下载地址：链接：/s/1z8qfCviVNiqyIg86308hKA提取码：bcra项目完成的效果如图学习目标学习目标图11-1Banner条完成效果图设计思路10.1知识导航设计思路商业网站的Banner条通常是起到对网站或者商品的宣传作用，应用Flash制作动态Banner条，则可以画龙点睛，增加宣传效果，根据网站的页面设计，空调宣传网站的Banner条的制作思路如下：1.橙色矩形从右侧下方延展到左侧；2.橙色矩形上升充满banner条右侧后变为梯形；3.左侧延展紫色的单实线，实线上下显示逐个宣传文字；4.右侧旋转显示空调图片，图片上方显示宣传文字。项目实

施10.2任务说明案例1“瓢虫爬行”动画影片测试与发布任务1制作橙色矩形延展的动画效果实现橙色矩形从banner条右侧下方延展到左侧下方的动画效果。效果展示制作步骤案例1“瓢虫爬行”动画影片测试与发布任务1制作橙色矩形延展的动画效果步骤1新建Flash文件。选择“修改”→“文档”命令或按下Ctrl+J键，打开“文档设置”对话框，设定尺寸为775×245像素，背景颜色为#0099FF，帧频设置为24fps，如图11-2所示。步骤2导入图像。选择“文件”→“导入”→“导入到库”命令，打开“导入到库”对话框，将“素材12”文件夹中的背景图“背景”和“空调”导入到库中，如图11-3所示。步骤3创建影片剪辑元件。选择“插入”→“新建元件”命令，打开“创建新元件”对话框，定义元件名称为“矩形条动画”，选择元件类型为“影片剪辑”，如图11-4所示，单击“确定”按钮进入元件编辑区。图11-2新建文件

图11-3导入素材图11-4创建新元件制作步骤案例1“瓢虫爬行”动画影片测试与发布任务1制作橙色矩形延展的动画效果步骤4编辑影片剪辑元件。选择“矩形工具”，绘制一个橙色矩形，颜色为#FF9900，无边框，宽775，高25。如图11-5所示。步骤5在第8帧插入关键帧，选择第1帧用“任意变形工具”缩短矩形。创建第1帧到第8帧的形状补间动画，在第24帧插入普通帧，如图11-6所示。效果展示案例1“瓢虫爬行”动画影片测试与发布任务2制作橙色矩形上升后变为梯形的动画效果实现动画左侧文字动画效果。（1）橙色矩形向上充满Banner条右侧；（2）矩形变形为梯形。任务说明案例1“瓢虫爬行”动画影片测试与发布任务2制作橙色矩形上升后变为梯形的动画效果步骤1创建“图层2”，在第9帧插入关键帧。选择“矩形工具”，绘制一个宽275.5，高220的橙色矩形，无边框，如图11-7所示。步骤2在第16帧创建关键帧。选择第9帧，用“任意变形工具”将图形从上到下变小。右击第9帧~16帧的任意帧，创建补间形状动画动画，如图11-8所示。步骤3在第16帧和第24帧分别插入关键帧。选择第24帧，选择“视图”→“标尺”命令，将辅助线与矩形的四条边重合。步骤4选择“椭圆工具”，绘制黑色椭圆，选择“任意变形工具”，修改椭圆大小位置至合适，如图11-9所示。制作步骤案例1“瓢虫爬行”动画影片测试与发布任务2制作橙色矩形上升后变为梯形的动画效果步骤5删除椭圆，得到有弯度的梯形效果，选择“修改”→“形状”→“添加形状提示”命令。如图11-10所示。步骤6

创建第16帧到第24帧的形状补间动画，如图11-11所示。步骤

7

在“图层2”上新建“图层3”，在第24帧插入关键帧，选择“窗口”→“动作”命令，打开动作面板，在动作面板中添加脚本“stop();”，时间轴如图11-12所示。制作步骤图11-12时间轴设置图11-11创建形状补间动画任务3制作单实线延展，逐个显示宣传文字的动画效果

实现动画左侧文字动画效果。（1）橙色矩形上方延展出一条紫色的单实线；（2）单实线上下显示宣传文字，文字逐个显示。任务说明效果展示任务3制作单实线延展，逐个显示宣传文字的动画效果步骤1创建“文字1”元件，类型“影片剪辑”。选择矩形工具，绘制高2，宽350，颜色为紫色#660066，无边框的矩形，如图11-13所示。步骤2

在第6帧插入关键帧，在第1帧用“任意变形工具”将矩形从右向左缩小。创建第1帧到第6帧的形状补间动画，在第21帧插入帧，如图11-14所示。步骤3在“图层1”上新建“图层2”，在第7帧创建关键帧，选择“文本工具”，在元件中输入“光，是家的格调”和“空气，是家的质感”字体宋体，大小24，字母间距4.0，颜色紫色#660066。如图11-15所示。制作步骤任务3制作单实线延展，逐个显示宣传文字的动画效果步骤4

选择“选择工具”，右击文本选择“分离”2次，创建从第8帧到第21帧的关键帧，在第7帧保留“光”字，其余文字和标点符号删除，依次类推。到第21帧全部保留。新建图层，命名“Action”，选择第21帧，插入关键帧，选择“窗口”→“动作”命令，打开动作面板，在动作面板中添加脚本“stop();”。如图11-16所示。制作步骤案例1“瓢虫爬行”动画影片测试与发布任务4制作旋转显示空调图片，显示宣传文字的动画效果实现动画右侧空调和文字动画效果。（1）显示宣传文字动画效果；（2）Banner条右侧旋转显示空调图片动画效果。任务说明效果展示案例1“瓢虫爬行”动画影片测试与发布任务4制作旋转显示空调图片，显示宣传文字的动画效果步骤1新建元件“文字2”，类型“影片剪辑”。选择“视图”→“标尺”。从标尺中拖出3条参考线，其位置分别是0与250和0。步骤2选择“文本工具”，输入“空调”文字，字体大小40，字符间距2，颜色为白色。在第5帧插入关键帧，选择第1帧，将文本工具上移，创建第1帧到第8帧的传统补间，在第15帧插入普通帧，如图