基于Ｆｌａｓｈ制作的算法演示動畫的設計

胡曉芳　李　欣

本文主要介紹基于Flash制作的算法演示動畫的設計和制作步驟。

Flash應用是十分廣泛的,主要原因是制作簡單,效果卻華麗美觀,只需要很少的時間就能制作絢爛的動態效果。C語言程序中有許多典型算法,例如冒泡排序、選擇排序、矩陣轉置、函數的運用以及指針的運用等,如果僅僅依靠課堂上文字描述,無法使學生在短時間內理解,通過Flash的動畫演示卻能夠事半功倍。

1 Flash動畫的交互性動態效果的實現

Flash之所以能夠在動畫制作占有主導地位,與其所具有的強大的交互功能有密切關系,而這些交互功能的實現離不開ActionScript腳本語言的使用。ActionScript是Macromedia公司專為Flash設計的交互性腳本語言,是一種面向對象化的編程語言,它提供自定義的函數及強大的數學函數、顏色、聲音、XML等對象的支持。使用Flash中的ActionScript腳本,可以制作高質量的動畫效果以及動態網頁。

2 片頭動畫的制作

很多課件在進入正式的頁面之前都會有一段絢麗花俏的片頭,這樣很吸引用戶的眼球,使用戶直接面對主題,產生瀏覽此課件的沖動。而且通過片頭,用戶可以快速而清晰地認識課件的主要內容。本小節主要介紹算法演示動畫的片頭的設計構思以及簡單步驟。

2.1 創意和構思片頭制作不像大多MTV或者短片,它不需要細膩的動畫,它的特點就是力求簡潔、明快、節奏分明,在短短的十幾秒內傳達出最直接的主題。

如圖1所示,本片頭采用給人簡潔、寧靜的淺藍色和安寧、舒服的淺黃色合成2個相反的字母“C”,再配以圓形放置的藍色漸變顏色的花瓣一片片地出現繪畫成字母“C”,同時在花瓣的左側不同時間切換出“C程序設計精品課程”字符串,排列組成“C”字樣。接著窗口右側飛入“算法動畫演示”字符串,利用濾鏡的模糊到清晰效果漸變顯示出來。動畫最后透明漸變顯示“點擊進入”按鈕,點擊按鈕即可進入“算法動畫”的目錄。

2.2 制作片頭動畫

1)背景圖形。舞臺中背景圖形是通過混色器面板創建的放射狀漸變填充橢圓,其中顏色中心的偏移是利用“填充變形工具”移動中心得到的。2個橢圓分別轉換為影片剪輯實例,分別放置在2個圖層中,圖層命名為“大橢圓”和“小橢圓”。設置其透明度,分別創建30幀的動畫補間,使2個圖形依次漸變出現在舞臺。

2)花瓣。新建圖層命名為“花瓣”,在第60幀上創建關鍵幀。使用橢圓工具創建一個橢圓,利用混色器面板設置其放射狀漸變填充,使其看起來像一個瘦小的花瓣。選擇橢圓,右鍵轉換為影片剪輯元件并命名為“展開”。進入元件編輯窗口中,再次選擇橢圓,右鍵轉換為影片剪輯元件并命名為“花瓣”。返回“展開”元件編輯窗口,打開變形面板,選擇舞臺中的“花瓣”實例,將旋轉中心設置在花瓣一側,同時在旋轉選項中填入15度。單擊變形面板中的“復制并應用變形”按鈕,得到一圈花瓣。在舞臺空白處右鍵選擇“分散到圖層”,將花瓣分別放置在獨立的圖層,選擇所有圖層的第一幀,打開屬性面板設置“動畫”補間。

為選擇所有圖層的20幀插入關鍵幀,再次選擇所有圖層的第一幀,設置其透明度為0%。選擇各個圖層的動作補間,依次向后移動5幀。選擇第60幀上的關鍵幀,打開動作面板寫入動作:“Stop();”。花瓣的展開設置完畢。

3)“C”形字符串。新建圖層命名為“C”,在第90幀上創建關鍵幀。使用文本工具在舞臺創建“C程序設計精品課程”,右鍵分離字符串,將其分離為單個字符。擺放單個字符為一個大寫“C”字樣,選擇所有字符右鍵轉換為影片剪輯元件,命名為“C”。雙擊進入元件編輯窗口,分別將字符右鍵轉換為影片剪輯元件,命名為字符名稱。選擇所有影片剪輯實例,右鍵分散到圖層。

選擇所有圖層的第一幀設置動畫補間,為所有圖層的20幀插入關鍵幀,再次選擇所有圖層的第一幀,設置其透明度為0%,依次移動到偏右上的位置。選擇各個圖層的動作補間,依次向后移動5幀。選擇第60幀上的關鍵幀,打開動作面板寫入動作:“Stop();”。為著重顯示,將“C”字符的顏色設置為橘紅色。

4)“算法演示動畫”。新建圖層命名為“標題”,在第150幀上創建關鍵幀。使用文本工具在舞臺創建“算法演示動畫”,設置字體為宋體,將“動畫”的字號設置得稍大些。為文本添加“投影”和”發光”的濾鏡效果。使用模糊濾鏡效果設置30幀的動作補間動畫。

5)按鈕。新建圖層命名為“按鈕”,在第180幀上創建關鍵幀。新建按鈕元件命名為“進入”,按鈕沒有過多的交互變化,只在“彈起”上寫入“點擊進入”,并在字樣左側放置一個漸大變化的圓形,為片頭增添一些動感。

按鈕中動作設置:“On(press){ nextScene();}”。按鈕出現在片頭的最后一個關鍵幀上,并在關鍵幀上設置動作:“Stop();”。

6)精確下載動畫(圖2)。Flash動畫是流媒體格式的動畫,即動畫是邊下載邊播放的,但是由于網絡速度的原因,可能在某個時候,動畫下載速度較慢,這時就會造成動畫的停頓,或者動畫中聲音與動畫不會同步。為了避免這種情況的發生,筆者制作一個Loading動畫,將動畫預先載入用戶的計算機中,并且通過此Loading動畫可以準確地知道動畫所有載入的時間和百分比。

新建一個場景命名為Loading,使用場景面板放置在片頭動畫所在場景之前。在舞臺中創建一個長條矩形放置在舞臺中央,右鍵轉換為影片剪輯元件,命名為“進度”。雙擊進入元件編輯窗口,將矩形的輪廓線和填充物分別放置在不同的圖層。選擇2個圖層的第100幀插入普通幀,為矩形的填充物的100幀上創建關鍵幀。返回填充物的第一幀創建形狀補間,使用橡皮擦擦去矩形填充的右邊大部分,只留左側的一小段。

新建一個圖層,為第一幀設置動作:“Stop();”。

返回主場景,在第2幀插入普通幀。為舞臺中的實例命名為“loaded”,新建一個圖層,使用文本工具創建一個靜態文本,文本內容為“已下載:”一個動態文本,設置足夠的文本寬度,在屬性面板中設置動態文本的變量名為“shu”。

新建一個圖層,為第一幀設置動作:

a=getBytesLoaded();

b=getBytesTotal();

loaded=int(a/b*100);

loader.gotoAndPlay( loaded );

在第二幀上創建關鍵幀,設置動作:

if (a==b) {

gotoAndPlay(“場景 1”, 1);

} else {

shu= loaded+"%";

gotoAndPlay(1);

7)背景音樂。新建圖層命名為背景音樂,導入水木年華單曲“借我一生”,利用“編輯封套”對話框截取前奏部分,設置聲音類型為數據流,片頭動畫制作完成。

動畫中各個元素都緊扣“C語言”這個主題,文字的飛入、圖像的形狀變化讓片頭動感十足,再配以優美舒緩的音樂,使片頭內容清晰明朗,突出設計制作的主題。

3 冒泡排序算法動畫的制作

冒泡算法是C語言中比較重要的算法,像水中冒泡一樣,算法思路是將小的、輕的升到上面,將大的、重的沉到水底。本課程是案例教學方式,每個算法都提出一個典型實用的問題,采用案例分析的方法,分析其模塊源代碼,重點引導學生逐步完成任務模塊的代碼編寫。本算法提出問題為排序體育成績,以簡單數值8、7、2、3、0為例,將這5個數值以冒泡排序的方式進行從小到大排列(圖3)。

30個算法中,冒泡算法是比較典型的按鈕控制動畫,按鈕動作:“On(press){ Play();}”。動畫中關鍵畫面的關鍵幀上設置動作:“Stop();”。

4 結束語

“算法演示動畫”展示“C語言”課程中較典型的30個算法,通過動態直觀的Flash動畫能夠輔助學生學習課本中生硬的程序。在制作這些算法的同時,筆者不僅對C語言有了更深的了解和認識,同時也深化了Flash的動作腳本的知識結構。■

(作者單位:山東省濟寧職業技術學院)