基于AS3.0 Animate同一元件在不同場(chǎng)景中交互應(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腳本語(yǔ)言及其技術(shù)在多媒體作品創(chuàng)作中被廣泛使用，原因在于AS3.0的精簡(jiǎn)高效簡(jiǎn)化了設(shè)計(jì)創(chuàng)作過(guò)程，但畢竟是程序設(shè)計(jì)語(yǔ)言，其正確和高效的應(yīng)用必須要遵循一定的方法和技巧。文中分析闡述的問(wèn)題——同一元件在不同場(chǎng)景中交互應(yīng)用，對(duì)于使用Adobe Animate平臺(tái)進(jìn)行多媒體創(chuàng)作的從業(yè)人員，涵蓋該問(wèn)題作品的組織結(jié)構(gòu)和設(shè)計(jì)理念將會(huì)有一定的認(rèn)識(shí)，在作品設(shè)計(jì)創(chuàng)作的過(guò)程中往往都會(huì)遇到該問(wèn)題，不能編譯通過(guò)，導(dǎo)致作品不能正常運(yùn)行。本文就“同一個(gè)元件的多個(gè)實(shí)例或?qū)ο笤诓煌瑘?chǎng)景中正確的交互應(yīng)用”這一核心問(wèn)題展開(kāi)分析研究探討。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

圖4 庫(kù)中元件列表

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

圖5 白天場(chǎng)景圖層信息

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

圖6 夜晚場(chǎng)景圖層信息

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

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

圖7 白天場(chǎng)景交互控制

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

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

圖8 編譯錯(cuò)誤

（二）鏈接類策略實(shí)現(xiàn)。基于傳統(tǒng)方式策略實(shí)現(xiàn)產(chǎn)生問(wèn)題，按照鏈接類策略針對(duì)于該案例修改如下。

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

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

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

四、結(jié)語(yǔ)

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