?

基于ActionScript3.0的虛擬形象交互設計與實現

2015-01-14 07:29梁志成
科技視界 2015年11期
關鍵詞:前臺元件按鈕

梁志成

(西北民族大學,甘肅 蘭州 730030)

Action Scripts是一種類似Java Scripts和ECMA(European Computers Manufacturers Association)規范的面向對象的腳本語言[1]。并且執行ECMA-262腳本語言規范,它是在Flash平臺下實現交互的主要組成部分。尤其是ActionScript3.0腳本語言的推出,ActionScript3.0代碼執行的速度最多可以比原先的ActionScript代碼快10倍。它還提供了可靠的編程模型,該模型對于來自其他平臺的開發人員來說將非常熟悉[2]。

使的Flash的功能越來越強大,使得開發交互性的動畫和游戲更加容易[3]。同時移動終端的迅速發展與不斷完善,使線上、線下形象設計得到了新的發展契機,所以對于在整體形象設計方面有需求的用戶會越來越依賴這種便捷的自我實時交互設計方式。而借助ActionScript3.0進行虛擬形象交互設計軟件的開發就是在這種背景契機下迅速的興起和發展起來的。

1 虛擬形象交互設計思路及方法

1.1 設計思路

交互式設計思路包括前臺設計理念和后臺設計邏輯。對于虛擬形象的交互軟件的前臺設計,其風格定位為現代都市風格,這需要在本套交互軟件的界面元素、人物造型、場景繪制等方面得到集中體現。在整個人物角色及場景造型方面,均采用寫實風格進行設計,而整體界面元素的造型及色彩等方面都與現代都市風格相契合,并注重元素布局的合理性。軟件界面整體設計要求大氣、簡約,具有現代感。

對于虛擬形象的交互軟件的后臺設計,需要對其內在邏輯進行整體的制作規劃,盡量降低ActionScript3.0編程的復雜度,并且靈活使用影片剪輯元件、圖形元件和按鈕元件,避免同一對象的重復創建,同時,巧妙運用Flash組件技術,提高ActionScript3.0語句的執行效率和可維護性,避免因為編程技術而造成的功能缺陷。軟件操作流程是通過逐級選擇,進入不同的角色及特定場景進行多選項的形象綜合設計,并完成用戶滿意的虛擬形象設計結果,最終,根據具體操作邏輯完成樹狀邏輯流程圖。

1.2 設計方法

對于虛擬形象的交互軟件的前臺,需要通過以下三個步驟進行設計。首先,把握主題,確定風格,并在此基礎上,收集相應的資料,包括文字、圖片、視頻等方面的資料 。其次,在進行資料歸納、匯總的基礎上,進行草圖繪制,找到最適合整體造型風格和軟件功能需要的綜合型方案進行定稿。最后,通過FLASH、AI、Phtotshop等前臺繪制軟件進行電腦繪制和上色,并完善細節,從而最終完成界面、角色、場景的設計與制作。

虛擬形象的交互軟件的后臺設計,需要根據軟件的功能類型、形象交互設計的特點及算法,進行后臺代碼的編寫,在FLASH平臺的基礎上,新建Action Script文件,對于不同元件進行相應類文件的腳本程序編寫,并統一在同一個項目文件夾中,方便不同Action Script類文件各自的封裝與訪問。在此基礎上,還可以在以下三個地方加入ActionScript腳本程序,它們分別是幀、按鈕、影片剪輯。(1)為幀添加腳本:為幀添加的動作腳本只有在影片播放到該幀時才被執行,與播放時間或影片內容有極大的關系。在為幀添加腳本時,“動作”面板的標題欄顯示“動作-幀”。(2)為按鈕添加腳本:為按鈕添加腳本只有在觸發按鈕時特定事件才會執行。在為按鈕添加腳本時,“動作”面板的標題欄顯示“動作-按鈕”。(3)為影片剪輯添加腳本:為影片剪輯添加腳本通常是在播放該影片剪輯時ActionScript被執行。在為影片剪輯添加腳本時,“動作”面板的標題欄顯示“動作-影片剪輯”[4]。

2 虛擬形象交互設計與制作

2.1 前臺元素制作

對于虛擬形象交互整體的前臺設計包括三個大的部分,他們分別是界面、角色和場景。在界面的設計中包括啟動界面設計、軟件主界面設計、軟件框架設計、菜單欄設計、界面按鈕設計、界面圖標設計等。其中啟動界面運用較為鮮明的造型及色彩進行繪制,在不超過256色的基礎上,達到醒目、識別性高的目的。軟件主界面是界面設計的重點,需要根據形象設計的功能進相應的行區間劃分,根據設計思路確定的整體風格進行設計,整體色彩純度偏低,明度適中,以灰色為主要色調,用于襯托不同形象自身的色彩特點,界面造型上采用曲直結合的方式,在體現現代感的同時,彰顯軟件的視覺親和力。在角色的設計方面,進行真人比例的造型繪制,對于造型中的細節部分運用簡約的方式,注重角色的整體形象風格,尤其是衣物及飾物的色彩純度較高,最大化的體現形象整體的色調搭配和視覺風格。對于場景的設計,弱化其造型的鮮明度,通過純度、明度偏低的色彩,盡可能在體現不同場景風格、烘托場景氣氛的的同時,體現角色與場景的縱深及空間感,從而與角色形象有機的結合在一起,通過對比的方式,使角色形象成為視覺中心的同時,展示相應場景的空間特點,兩者相輔相成,搭配合理。整個前臺元素的制作平臺可以是FLASH,在新建影片剪輯元件后進行繪制,也可以通過AI、Phtotoshop等軟件進行輔助設計,并通過保存為PNG格式導入FLASH元件庫中,轉換為具有透明背景的影片剪輯元件。在以上相應前臺元素生產影片剪輯元件之后,進行元件實例名的命名,用于之后在后臺通過ActionScript3.0語言進行不同元件的引用和聯系。

2.2 后臺程序編寫

在完成前臺元素設計之后,新建項目且創建ActionScript3.0文件,并在此基礎上進行主程序的編寫,因為形象交互設計軟件分為幾個不同的界面及場景,所以需要對于不同界面及場景進行實例命名后,通過一個Main類文件進行整體的規劃和聯接,并默認顯示主界面元件,主要代碼如下:

其他界面及場景均可以采用以上方法進行顯示與切換,需要注意的是,在切換場景之前,必須設置相應的場景切換按鈕元件,并對其加入事件偵聽才產生功能,主要代碼如下:

startPage.Button.addEventListener(MouseEvent.CLICK,onButtonClick);

通過偵聽到按鈕激活,從而觸發onButtonClick事件完成界面及場景跳轉,主要代碼如下:

對于其他界面以及界面內對象的切換均可以用以上方式完成,也可以運用FLASH窗口中自帶的代碼片斷,直接加載在不同按鈕元件中,來實現不同界面及角色形象的切換,達到虛擬形象交互的功能。

3 結束語

隨著計算機交互技術的不斷完善與發展,Flash軟件及ActionScript3.0交互創作技術已在虛擬形象設計領域得到了廣泛地應用。通過對交互技術進行不斷地探索,研究并開發出更加人性化、交互性強的軟件,滿足用戶對交互設計方面的不同需求,也為開發者實現相應的開發目的,提供理論及技術依據。

[1]張精設.Flash ActionScript3.0從入門到精通[M].北京:清華大學出版社,2008.

[2]孫穎.Flash Action3殿堂之路[M].北京:電子工業出版社,2007.

[3]孫翠華.基于ActionScript3.0的Flash游戲設計與實現[J].人工智能及識別技術,2010.

[4]楊仁毅.邊學邊用Flash動畫設計與制作[M].北京:人民郵電出版社,2010.

猜你喜歡
前臺元件按鈕
公路電助力 從幕后走向前臺
孟晚舟:從前臺打雜到華為副總裁
前臺、后臺精彩花絮停不了
網站前臺設計分包合同中應注意的問題
QFN元件的返工指南
在新興產業看小元件如何發揮大作用
Cu4簇合物“元件組裝”合成及其結構與電催化作用
91香蕉高清国产线观看免费-97夜夜澡人人爽人人喊a-99久久久无码国产精品9-国产亚洲日韩欧美综合