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

胡曉芳　李　欣

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

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

1 Flash動畫的交互性動態(tài)效果的實現(xiàn)

Flash之所以能夠在動畫制作占有主導地位,與其所具有的強大的交互功能有密切關(guān)系,而這些交互功能的實現(xiàn)離不開ActionScript腳本語言的使用。ActionScript是Macromedia公司專為Flash設(shè)計的交互性腳本語言,是一種面向?qū)ο蠡木幊陶Z言,它提供自定義的函數(shù)及強大的數(shù)學函數(shù)、顏色、聲音、XML等對象的支持。使用Flash中的ActionScript腳本,可以制作高質(zhì)量的動畫效果以及動態(tài)網(wǎng)頁。

2 片頭動畫的制作

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

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

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

2.2 制作片頭動畫

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

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

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

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

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

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

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

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

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

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

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

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

新建一個圖層,為第一幀設(shè)置動作:

a=getBytesLoaded();

b=getBytesTotal();

loaded=int(a/b*100);

loader.gotoAndPlay( loaded );

在第二幀上創(chuàng)建關(guān)鍵幀,設(shè)置動作:

if (a==b) {

gotoAndPlay(“場景 1”, 1);

} else {

shu= loaded+"%";

gotoAndPlay(1);

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

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

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

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

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

4 結(jié)束語

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

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