基于Flash 的情境動畫場景的設計與實現

劉 艷，賈東東，李凱敏

（海口經濟學院，海南 海口 571127）

0 引言

本文在“以問題教學情境為導向的計算機公共課信息化教學設計”一文的基礎上，選擇利用Flash CS6 軟件工具實現該教學情境，為后續展開信息化過程設計打下良好的開發基礎。

1 Flash CS6 及骨骼動畫介紹

1.1 Flash CS6

Flash 作為目前最流行的多媒體課件制作工具之一，它和其他圖像、聲音、視頻等軟件都有較好的兼容性，并且其自身設計動畫的功能非常強大。Flash CS6 中提供了高級動畫——骨骼動畫，有利于復雜情境動畫的設計與實現。

1.2 骨骼動畫及實現原理

由于情境動畫在設計的過程中大量使用了骨骼動畫的實現原理，接下來就對其做一下簡要介紹。

骨骼動畫就是利用骨骼工具將多個元件綁定以實現復雜的多元件的反向運動，以提高復雜動畫的制作效率。在骨骼動畫中，相連的兩個對象存在一種父子層次結構，由骨架進行連接。

創建骨骼動畫的原理是在關鍵幀中制作對象的初始姿勢，在后面的關鍵幀中制作對象的不同姿勢，Flash 會根據反向運動學的原理計算出連接點的位置和角度，創建從初始姿態到下一個姿態轉變的動畫效果。

2 情境動畫場景的設計與實現

2.1 背景動畫的制作

2.1.1 天空和馬路

利用Flash 的“矩形工具”結合“顏色”面板制作具有“藍”“白”漸變色調的天空背景。利用“線條工具”結合“顏色”面板制作色調相對和諧的校園馬路背景。

2.1.2 天空中浮動的云朵

創建影片剪輯元件，利用“鋼筆工具”繪制圖形，對圖形的角度進行變換，繪制出不同形狀的云朵。對云朵創建形狀補間動畫，實現浮動云朵的效果。

2.1.3 輕輕搖擺的椰子樹

（1）創建椰子樹。

創建一個圖形元件，繪制一棵完整的椰子樹，將其打散成形狀，然后利用線條將椰子樹圖形進行分割，并將它們分別轉換為影片剪輯元件。

（2）創建搖擺的椰子樹。

創建影片剪輯元件，創建關鍵幀，將之前轉換成影片剪輯元件的椰子樹各部分組裝成一棵完整的椰子樹，創建骨骼動畫的骨架，接下來每隔10 幀更改椰子樹葉片的位置和形狀，制作出椰子樹輕輕搖擺的狀態，如圖1 所示。

圖1 椰子樹

2.2 人物行為動畫的制作

人物在活動的過程會表現出各種行為，比如走路、停下來說話，邊說話邊打招呼等，接下來簡要介紹其制作過程。

2.2.1 繪制人物圖形元件及影片剪輯元件

利用“橢圓工具”“矩形工具”“線條工具”“鋼筆工具”等結合“顏色”面板綜合繪制出老師和三個學生，并分別轉換為圖形元件。將后續人物行為動畫中所涉及的身體部位，如身體、眼睛、胳膊和腿等轉換成影片剪輯元件。

2.2.2 制作人物走路姿勢

人物在走路的過程中，主要是身體部位會發生變化，這時候可以利用骨骼動畫實現其姿勢。首先創建一個影片剪輯元件，將人物身體部位影片剪輯元件組合成一個整體，然后將走路過程中運動的部位，如手臂和腿等通過設置骨架，改變時間軸上間隔幀的活動狀態，模擬真實的走路姿勢。這樣可以創建出“人物走路”和“人物再見”兩個影片剪輯元件。

2.2.3 制作人物說話姿勢

情境中人物在說話時已經停止了走路，主要是嘴巴在動，根據說話時間的長短，設置人物嘴巴一張一合的動畫，這里主要通過在時間軸上改變不同狀態幀下的嘴型就可以了。這樣可以創建出“人物說話1”“人物說話2”和“人物說話3”等影片剪輯元件。

2.2.4 行走中的人物

創建“行走中的人物”影片剪輯元件，將前面制作的“人物走路”“人物再見”“人物說話”等影片剪輯元件作為行走中的人物的基本元件，在時間軸幀狀態的推進下，加入人物語音及配音標簽文字，并結合傳統補間動畫及相關參數，模擬人物在進場、出場以及行進過程中與人交談的動作姿勢等。

2.2.5 實例演示

人物行為影片剪輯庫如圖2 所示。情境動畫如圖3 所示。人物行走時間軸如圖4 所示。

圖2 人物行為剪輯庫

圖4 人物行走時間軸

2.3 場景背景音樂及導航按鈕的制作

考慮到場景氛圍，在情境動畫場景中加入了背景音樂，用戶可以根據需要對音樂進行播放或停止。另外考慮到該情境對話結束后能回到上一個場景，還設置了一個返回的導航按鈕。相關代碼如下。

3 結語

本文利用Flash CS6 軟件工具成功實現了情境動畫場景功能，該動畫場景的設計與實現為后續功能的開發奠定了理論與實踐基礎。縱觀整個設計與實現過程，其思路、結構、功能和制作的難易程度都是非常清晰的，但從整個動畫效果來看，由于筆者技術水平、動畫復雜性和時間的原因，仍然會有一些不足之處。比如，人物的繪制不夠精美，人物行為動畫過于粗糙等，這些都有待后續進一步地研究和改進。