基于AS3.0 Animate同一元件在不同場景中交互應(yīng)用研究

宋傳磊

（青島理工大學(xué)琴島學(xué)院 山東青島 266106）

數(shù)字媒體技術(shù)的飛速發(fā)展為多媒體作品創(chuàng)作提供了堅(jiān)實(shí)基礎(chǔ)，在信息互聯(lián)互通時(shí)代背景下，數(shù)字媒體技術(shù)的應(yīng)用領(lǐng)域更加廣闊和深遠(yuǎn)[1]。AS3.0腳本語言及其技術(shù)在多媒體作品創(chuàng)作中被廣泛使用，原因在于AS3.0的精簡高效簡化了設(shè)計(jì)創(chuàng)作過程，但畢竟是程序設(shè)計(jì)語言，其正確和高效的應(yīng)用必須要遵循一定的方法和技巧。文中分析闡述的問題——同一元件在不同場景中交互應(yīng)用，對于使用Adobe Animate平臺進(jìn)行多媒體創(chuàng)作的從業(yè)人員，涵蓋該問題作品的組織結(jié)構(gòu)和設(shè)計(jì)理念將會有一定的認(rèn)識，在作品設(shè)計(jì)創(chuàng)作的過程中往往都會遇到該問題，不能編譯通過，導(dǎo)致作品不能正常運(yùn)行。本文就“同一個(gè)元件的多個(gè)實(shí)例或?qū)ο笤诓煌瑘鼍爸姓_的交互應(yīng)用”這一核心問題展開分析研究探討。

一、相關(guān)概念和理論

（一）數(shù)字媒體。通過現(xiàn)代計(jì)算和通信手段，綜合處理文字、聲音、圖形、圖像等信息，使抽象的信息變成可感知、可管理和可交互的一種技術(shù)。[2]

（二）場景。一個(gè)Adobe Animate文件可以包含多個(gè)場景，在每個(gè)場景中可以單獨(dú)設(shè)計(jì)動畫片段，每個(gè)場景中包含一個(gè)舞臺，每個(gè)舞臺又包含多個(gè)幀，一個(gè)文件中多個(gè)場景共享一個(gè)庫，庫中存放該文件需要的資源。

（三）元件。元件是在一個(gè)Adobe Animate文件中可以重復(fù)使用的資源，通俗講元件就是“模板”，可以使用一個(gè)元件在文件不同位置進(jìn)行多次實(shí)例化，產(chǎn)生多個(gè)不同實(shí)例或?qū)ο?，進(jìn)而賦予不同的實(shí)例或?qū)ο蟛煌膶傩院托袨?，?shí)現(xiàn)不同效果。元件共包含三種類型——圖形元件、按鈕元件和影片剪輯元件。

（四）AS3.0。AS3.0是ActionScript3.0縮寫形式，Action-Script3.0是一種面向?qū)ο蟪绦蛟O(shè)計(jì)語言，被用于Adobe Animate交互動畫、游戲、web站點(diǎn)和富互聯(lián)網(wǎng)應(yīng)用程序開發(fā)，該語言精簡高效，簡化作品設(shè)計(jì)實(shí)現(xiàn)過程。[3]

二、同一元件在不同場景中交互應(yīng)用設(shè)計(jì)策略

一個(gè)Adobe Animate文件可以創(chuàng)建多個(gè)場景，但只有一個(gè)庫，在庫中存放該文件所需要的所有的資源，多個(gè)場景共享該庫和相關(guān)資源。元件是居于核心地位的資源，被設(shè)計(jì)創(chuàng)建后存放于庫中，各場景可以使用庫中同一個(gè)元件在各自場景中對其進(jìn)行實(shí)例化，產(chǎn)生不同名字的實(shí)例或?qū)ο蟆Ｊ褂肁S3.0對不同場景中實(shí)例或?qū)ο筮M(jìn)行編程控制，設(shè)置偵聽實(shí)現(xiàn)交互。邏輯設(shè)計(jì)模型如圖1所示。

圖1 邏輯設(shè)計(jì)模型

（一）傳統(tǒng)方式設(shè)計(jì)策略及存在的問題。傳統(tǒng)意義上，對于AS3.0不熟悉用戶，在對一個(gè)元件在不同場景中交互應(yīng)用設(shè)計(jì)時(shí)，通常是在某場景中選擇一個(gè)空白關(guān)鍵幀，然后從庫中選擇某元件，并將其直接拖入舞臺，該操作使得空白關(guān)鍵幀變成關(guān)鍵幀，同時(shí)完成了元件在該場景中某幀上的實(shí)例化，生成了實(shí)例或?qū)ο?，選擇屬性面板為該實(shí)例命名，在時(shí)間軸上選擇某一關(guān)鍵幀，按鍵盤F9鍵打開動作面板，使用AS3.0對實(shí)例進(jìn)行編碼實(shí)現(xiàn)交互控制。設(shè)計(jì)策略如圖2所示。

圖2 傳統(tǒng)設(shè)計(jì)策略

對于傳統(tǒng)設(shè)計(jì)策略，如果使用早期Flash平臺是不會產(chǎn)生問題，但是如果使用Flash更名后的Animate新平臺將會產(chǎn)生問題，將提示某些屬性未定義，對于該bug，網(wǎng)絡(luò)上有很多評論，鑒于該問題本文對此將采用鏈接類的方式予以解決。

（二）鏈接類方式設(shè)計(jì)策略。首先打開庫面板，選擇要在不同場景中進(jìn)行實(shí)例化的元件，然后右鍵單擊從快捷菜單中選擇“屬性”命令，打開“元件屬性”對話框，勾選“為ActionScript導(dǎo)出”，并在類文本框中為該元件對應(yīng)的鏈接類取上名字，最后單擊“確定”按鈕，該元件的鏈接類便設(shè)置完成，在庫面板相應(yīng)元件后即可看到該元件對應(yīng)的鏈接類名字。

元件的鏈接類設(shè)置好后，如果需要在某個(gè)場景中使用該元件的實(shí)例，即該鏈接類的對象，在該場景中選擇某一關(guān)鍵幀，單擊鍵盤F9鍵打開動作面板，使用AS3.0進(jìn)行編碼，為該鏈接類定義對象，將該對象添加到顯示列表，通常情況下直接添加進(jìn)舞臺即可，進(jìn)而對該對象注冊偵聽器，并編寫相應(yīng)的事件處理函數(shù)，最終按照需求完成編碼控制。設(shè)計(jì)模型如圖3所示。

圖3 鏈接類設(shè)計(jì)模型

三、設(shè)計(jì)策略實(shí)驗(yàn)驗(yàn)證

為了直觀地說明問題，該實(shí)驗(yàn)驗(yàn)證案例文件命名為“多場景.fla”，該文件包含兩個(gè)場景，分別為“白天”和“夜晚”。定義兩個(gè)影片剪輯元件，分別表示太陽和月亮動畫，并命名為“sun”和“moon”；定義兩個(gè)按鈕元件，分別命名為“play”和“stop”。在“白天”場景中通過單擊“play”和“stop”按鈕控制“sun”實(shí)例的東升西落動作，在“夜晚”場景中通過單擊“play”和“stop”按鈕控制“moon”實(shí)例的東升西落動作。這樣就使得“play”和“stop”兩個(gè)按鈕元件分別在兩個(gè)不同的場景中被實(shí)例化。庫中元件如圖4所示。

圖4 庫中元件列表

選擇“白天”場景。新建“天空”圖層，在該圖層中創(chuàng)建傳統(tǒng)補(bǔ)間動畫，實(shí)現(xiàn)太陽光暈效果；新建“太陽”圖層，在該圖層中創(chuàng)建補(bǔ)間動畫，實(shí)現(xiàn)太陽從舞臺左側(cè)升起右側(cè)降落的動畫效果；新建“地面”圖層，在該圖層上放置地球表面圖形元素，包含地球、房屋建筑和森林；新建“變換云彩”和“多個(gè)云彩”圖層，分別創(chuàng)建傳統(tǒng)補(bǔ)間動畫和補(bǔ)間形狀動畫，實(shí)現(xiàn)天空云朵閃動變換效果。如圖5所示。

圖5 白天場景圖層信息

選擇“夜晚”場景，如同“白天”場景。新建“天空”、“地面”、“星星”、“窗戶”和“月亮”圖層，分別創(chuàng)建傳統(tǒng)補(bǔ)間動畫、補(bǔ)間形狀動畫和引導(dǎo)動畫，實(shí)現(xiàn)月亮光暈、月亮升降、星星閃爍、地球及表面元素、樓房建筑中窗戶燈光閃爍等動畫效果。如圖6所示。

圖6 夜晚場景圖層信息

（一）傳統(tǒng)方式策略實(shí)現(xiàn)及問題顯示。選擇“白天”場景，新建“按鈕”圖層，選擇該圖層第一幀，從庫面板中分別將“play”和“stop”元件拖入舞臺，并放置于舞臺的適當(dāng)位置，單擊“play”按鈕，打開屬性面板，在實(shí)例名稱文本框中為其命名為“playSun”，同理為“stop”按鈕定義實(shí)例名為“stopSun”。新建“action”圖層，選擇第一幀，單擊鍵盤F9鍵，打開動作面板，完成AS3.0編碼控制。

對“白天”場景進(jìn)行測試運(yùn)行，能夠按照預(yù)期通過單擊“play”和“stop”按鈕實(shí)現(xiàn)太陽升降動畫的控制。如圖7所示。

圖7 白天場景交互控制

類似實(shí)現(xiàn)過程，選擇“夜晚”場景，新建“按鈕”圖層，選擇該圖層第一幀，從庫面板中分別將“play”和“stop”元件拖入舞臺，并放置于舞臺的適當(dāng)位置，為兩個(gè)按鈕實(shí)例分別命名為“playMoon”和“stopMoon”。新建“action”圖層，選擇第一幀，和“白天”場景基本相同的結(jié)構(gòu)，完成AS3.0編碼控制。

對“夜晚”場景進(jìn)行測試運(yùn)行，此時(shí)將不能編譯通過，顯示編譯器錯(cuò)誤，如圖8所示。這就是前文中談到的bug，相應(yīng)的實(shí)例名都是定義過的，邏輯上是不應(yīng)該產(chǎn)生錯(cuò)誤的。

圖8 編譯錯(cuò)誤

（二）鏈接類策略實(shí)現(xiàn)?；趥鹘y(tǒng)方式策略實(shí)現(xiàn)產(chǎn)生問題，按照鏈接類策略針對于該案例修改如下。

選擇“夜晚”場景，刪除“按鈕”圖層和“action”圖層中編碼。打開庫面板，分別選擇“play”和“stop”按鈕元件，為其設(shè)計(jì)鏈接類，鏈接類名分別為“playbtn”和“stopbtn”。選擇“action”圖層第一幀，打開動作面板，進(jìn)行AS3.0編碼。定義“playbtn”類的對象startM，并使用new運(yùn)算符調(diào)用構(gòu)造函數(shù)對其初始化；通過x和y屬性設(shè)置對象的舞臺位置，通過scaleX和scaleY屬性設(shè)置對象的縮放比例；通過addChild()方法將對象添加到舞臺；最后使用addEventListener()方法為對象設(shè)置偵聽，實(shí)現(xiàn)鼠標(biāo)單擊事件的交互控制。

對修改后的“夜晚”場景進(jìn)行編譯測試，順利通過，整個(gè)作品文件能夠按照設(shè)計(jì)策略成功運(yùn)行，運(yùn)行結(jié)果如圖9所示。

圖9 運(yùn)行結(jié)果

四、結(jié)語

伴隨數(shù)字媒體技術(shù)的不斷發(fā)展，多媒體作品展現(xiàn)形式更多樣化，Adobe Animate作為多媒體設(shè)計(jì)創(chuàng)作的重要成員，其應(yīng)用領(lǐng)域?qū)⒏訌V闊。然而，傳統(tǒng)意義上在Flash平臺上的設(shè)計(jì)策略，在Animate平臺上實(shí)現(xiàn)時(shí)將出現(xiàn)Bug，本文就大多數(shù)作品中都會涉及的“同一元件在不同場景中交互應(yīng)用”問題進(jìn)行了詳細(xì)分析，分析研究出高效的解決策略，并通過實(shí)驗(yàn)案例進(jìn)行論證。采用鏈接類的方式解決該類問題，依此為出發(fā)點(diǎn)，旨在引導(dǎo)該領(lǐng)域的從業(yè)人員在應(yīng)用過程中如果遇到類似的問題能夠找到好的解決方案。