基于AS3.0 Animate同一元件在不同场景中交互应用研究

宋传磊

（青岛理工大学琴岛学院 山东青岛 266106）

数字媒体技术的飞速发展为多媒体作品创作提供了坚实基础，在信息互联互通时代背景下，数字媒体技术的应用领域更加广阔和深远[1]。AS3.0脚本语言及其技术在多媒体作品创作中被广泛使用，原因在于AS3.0的精简高效简化了设计创作过程，但毕竟是程序设计语言，其正确和高效的应用必须要遵循一定的方法和技巧。文中分析阐述的问题——同一元件在不同场景中交互应用，对于使用Adobe Animate平台进行多媒体创作的从业人员，涵盖该问题作品的组织结构和设计理念将会有一定的认识，在作品设计创作的过程中往往都会遇到该问题，不能编译通过，导致作品不能正常运行。本文就“同一个元件的多个实例或对象在不同场景中正确的交互应用”这一核心问题展开分析研究探讨。

一、相关概念和理论

（一）数字媒体。通过现代计算和通信手段，综合处理文字、声音、图形、图像等信息，使抽象的信息变成可感知、可管理和可交互的一种技术。[2]

（二）场景。一个Adobe Animate文件可以包含多个场景，在每个场景中可以单独设计动画片段，每个场景中包含一个舞台，每个舞台又包含多个帧，一个文件中多个场景共享一个库，库中存放该文件需要的资源。

（三）元件。元件是在一个Adobe Animate文件中可以重复使用的资源，通俗讲元件就是“模板”，可以使用一个元件在文件不同位置进行多次实例化，产生多个不同实例或对象，进而赋予不同的实例或对象不同的属性和行为，实现不同效果。元件共包含三种类型——图形元件、按钮元件和影片剪辑元件。

（四）AS3.0。AS3.0是ActionScript3.0缩写形式，Action-Script3.0是一种面向对象程序设计语言，被用于Adobe Animate交互动画、游戏、web站点和富互联网应用程序开发，该语言精简高效，简化作品设计实现过程。[3]

二、同一元件在不同场景中交互应用设计策略

一个Adobe Animate文件可以创建多个场景，但只有一个库，在库中存放该文件所需要的所有的资源，多个场景共享该库和相关资源。元件是居于核心地位的资源，被设计创建后存放于库中，各场景可以使用库中同一个元件在各自场景中对其进行实例化，产生不同名字的实例或对象。使用AS3.0对不同场景中实例或对象进行编程控制，设置侦听实现交互。逻辑设计模型如图1所示。

图1 逻辑设计模型

（一）传统方式设计策略及存在的问题。传统意义上，对于AS3.0不熟悉用户，在对一个元件在不同场景中交互应用设计时，通常是在某场景中选择一个空白关键帧，然后从库中选择某元件，并将其直接拖入舞台，该操作使得空白关键帧变成关键帧，同时完成了元件在该场景中某帧上的实例化，生成了实例或对象，选择属性面板为该实例命名，在时间轴上选择某一关键帧，按键盘F9键打开动作面板，使用AS3.0对实例进行编码实现交互控制。设计策略如图2所示。

图2 传统设计策略

对于传统设计策略，如果使用早期Flash平台是不会产生问题，但是如果使用Flash更名后的Animate新平台将会产生问题，将提示某些属性未定义，对于该bug，网络上有很多评论，鉴于该问题本文对此将采用链接类的方式予以解决。

（二）链接类方式设计策略。首先打开库面板，选择要在不同场景中进行实例化的元件，然后右键单击从快捷菜单中选择“属性”命令，打开“元件属性”对话框，勾选“为ActionScript导出”，并在类文本框中为该元件对应的链接类取上名字，最后单击“确定”按钮，该元件的链接类便设置完成，在库面板相应元件后即可看到该元件对应的链接类名字。

元件的链接类设置好后，如果需要在某个场景中使用该元件的实例，即该链接类的对象，在该场景中选择某一关键帧，单击键盘F9键打开动作面板，使用AS3.0进行编码，为该链接类定义对象，将该对象添加到显示列表，通常情况下直接添加进舞台即可，进而对该对象注册侦听器，并编写相应的事件处理函数，最终按照需求完成编码控制。设计模型如图3所示。

图3 链接类设计模型

三、设计策略实验验证

为了直观地说明问题，该实验验证案例文件命名为“多场景.fla”，该文件包含两个场景，分别为“白天”和“夜晚”。定义两个影片剪辑元件，分别表示太阳和月亮动画，并命名为“sun”和“moon”；定义两个按钮元件，分别命名为“play”和“stop”。在“白天”场景中通过单击“play”和“stop”按钮控制“sun”实例的东升西落动作，在“夜晚”场景中通过单击“play”和“stop”按钮控制“moon”实例的东升西落动作。这样就使得“play”和“stop”两个按钮元件分别在两个不同的场景中被实例化。库中元件如图4所示。

图4 库中元件列表

选择“白天”场景。新建“天空”图层，在该图层中创建传统补间动画，实现太阳光晕效果；新建“太阳”图层，在该图层中创建补间动画，实现太阳从舞台左侧升起右侧降落的动画效果；新建“地面”图层，在该图层上放置地球表面图形元素，包含地球、房屋建筑和森林；新建“变换云彩”和“多个云彩”图层，分别创建传统补间动画和补间形状动画，实现天空云朵闪动变换效果。如图5所示。

图5 白天场景图层信息

选择“夜晚”场景，如同“白天”场景。新建“天空”、“地面”、“星星”、“窗户”和“月亮”图层，分别创建传统补间动画、补间形状动画和引导动画，实现月亮光晕、月亮升降、星星闪烁、地球及表面元素、楼房建筑中窗户灯光闪烁等动画效果。如图6所示。

图6 夜晚场景图层信息

（一）传统方式策略实现及问题显示。选择“白天”场景，新建“按钮”图层，选择该图层第一帧，从库面板中分别将“play”和“stop”元件拖入舞台，并放置于舞台的适当位置，单击“play”按钮，打开属性面板，在实例名称文本框中为其命名为“playSun”，同理为“stop”按钮定义实例名为“stopSun”。新建“action”图层，选择第一帧，单击键盘F9键，打开动作面板，完成AS3.0编码控制。

对“白天”场景进行测试运行，能够按照预期通过单击“play”和“stop”按钮实现太阳升降动画的控制。如图7所示。

图7 白天场景交互控制

类似实现过程，选择“夜晚”场景，新建“按钮”图层，选择该图层第一帧，从库面板中分别将“play”和“stop”元件拖入舞台，并放置于舞台的适当位置，为两个按钮实例分别命名为“playMoon”和“stopMoon”。新建“action”图层，选择第一帧，和“白天”场景基本相同的结构，完成AS3.0编码控制。

对“夜晚”场景进行测试运行，此时将不能编译通过，显示编译器错误，如图8所示。这就是前文中谈到的bug，相应的实例名都是定义过的，逻辑上是不应该产生错误的。

图8 编译错误

（二）链接类策略实现。基于传统方式策略实现产生问题，按照链接类策略针对于该案例修改如下。

选择“夜晚”场景，删除“按钮”图层和“action”图层中编码。打开库面板，分别选择“play”和“stop”按钮元件，为其设计链接类，链接类名分别为“playbtn”和“stopbtn”。选择“action”图层第一帧，打开动作面板，进行AS3.0编码。定义“playbtn”类的对象startM，并使用new运算符调用构造函数对其初始化；通过x和y属性设置对象的舞台位置，通过scaleX和scaleY属性设置对象的缩放比例；通过addChild()方法将对象添加到舞台；最后使用addEventListener()方法为对象设置侦听，实现鼠标单击事件的交互控制。

对修改后的“夜晚”场景进行编译测试，顺利通过，整个作品文件能够按照设计策略成功运行，运行结果如图9所示。

图9 运行结果

四、结语

伴随数字媒体技术的不断发展，多媒体作品展现形式更多样化，Adobe Animate作为多媒体设计创作的重要成员，其应用领域将更加广阔。然而，传统意义上在Flash平台上的设计策略，在Animate平台上实现时将出现Bug，本文就大多数作品中都会涉及的“同一元件在不同场景中交互应用”问题进行了详细分析，分析研究出高效的解决策略，并通过实验案例进行论证。采用链接类的方式解决该类问题，依此为出发点，旨在引导该领域的从业人员在应用过程中如果遇到类似的问题能够找到好的解决方案。