三維視覺布局Flash實例教程

案例描述：

本例主要講解三維視覺布局Flash實例教程，本倒利用簡單的素材動畫采布局三堆動畫效果，并使用幀播放來制作最簡單的Flash交互方式。

學(xué)習要點：flash全站的布局方法，flash全站的開發(fā)流程和制作思路，使用外部軟件來輔助開發(fā)全站

本例思路：

導(dǎo)入素材圖片，然后布局好各動畫模塊，再制作出場動畫。
使用“文本工具”創(chuàng)建出立體字，然后制作出文字的出場和消失動畫。
使用繪圖功能制作出顯示面板，然后制作顯示面板的出現(xiàn)與消失動畫。

動畫制作完成后的最終效果：

步驟一、制作出場動畫

1、新建一個800×600像素，背景色為白色，幀頻為30fpS的空白文檔。按Ctrl+F8組合鍵新建一個圖形元件(名稱為tree)，用于裝載導(dǎo)人的動畫圖片，然后按Ctrl+R組合鍵導(dǎo)以準備好的素材／三維視覺布局圖片，imagel．JPg”文件，此時系統(tǒng)會彈出一個提示對話框，單擊“是”按鈕就可以導(dǎo)人所有的圖片，如圖所示。

2、導(dǎo)入所有的圖片后，圖片會被放置在各個幀上形成幀幀動畫，如圖所示。

3、預(yù)覽幀幀動畫效果，如圖所示，這段動畫將作為全站的出場動畫

4、返回到“場景1”，然后將最后1幀復(fù)制出來，并將其轉(zhuǎn)換為影片剪輯(名稱為main)，再設(shè)置循環(huán)選項為“播放一次”圖所示。

5、進入main影片剪輯的編輯區(qū)域，然后將圖片再轉(zhuǎn)換影片剪輯(名稱為tree)，并復(fù)制出兩份圖形，再將其縮小并放置在如圖所示的位置。

6、cIrl+R組合鍵導(dǎo)入以準備好的素材/三維視覺布局圖片／bg．jpg”文件，如圖所示。

7、為這幾個元件制作出場動畫，如剛所示。

步驟二、制作文字動畫

1、使用“文本工具”制作幾個立體字放置在舞臺中，如圖所示。

2、將每個文字復(fù)制一份，然后將其順時針旋轉(zhuǎn)90。，再設(shè)置Alpha為15％，如圖所示。

3、將文字分散到各圖層，再制作出文字的的場動畫，如圖所示，然后在第60幀制作文字的消失動畫，如圖所示

4、返問到main影片剪輯中，然后設(shè)置文字圖形元件的循環(huán)選項為“播放一次”，如圖所示。

5、影片剪輯tree的動畫播放完后，文字出場動畫才開始播放，所以將文字動畫的幀放置在影片剪輯tree動畫的后面，如圖所示。

6、在第80幀按F7鍵插入空白關(guān)鍵幀，然后在該幀中制作一個透明按鈕并將其放在3組文字上如圖所示

7、在屬性面板中分別設(shè)置三組文字的實例名稱為b1，b2，b3，然后為三個按鈕添加單擊事件，并添加一個stop()：語句，如圖

	stop();

	b1.addEventListener(MouseEvent.CLICK,clickFun);

	b2.addEventListener(MouseEvent.CLICK,clickFun);

	b3.addEventListener(MouseEvent.CLICK,clickFun);

	function clickFun(e):void {

	 play();

	}

8、單擊按鈕后，各幀往后播放，按鈕也隨之消失，如圖所示，然后制作小山漸漸消失的動畫，如圖所示。

步驟三、創(chuàng)建娃示面板

1、使用繪圖功能制作一個顯示內(nèi)容的面板，然后創(chuàng)建出從左到右顯示出來的動面，如圖所示。

2、將3組文字復(fù)制到面板中的合適位置，如圖所示。

3、新建一個影片剪輯用來布置全站內(nèi)容，如圖所示。

4、創(chuàng)建一個透明按鈕放置在右邊，再設(shè)置實例名稱為bt，如圖所示，然后添加如圖所示的代碼，用于單擊按鈕后播放內(nèi)容

	stop()

	bt.addEventListener(MouseEvent.CLICK,clickFun);

	function clickFun(e):void {

	 play();

	}

5、顯示面板往右運動并移出舞臺，此時文字與內(nèi)容也漸漸消失，因此需要制作各部分的消失動畫，如圖所示。

6、為了保證最后播放完跳同到第1幀，需要將第1幀的tree漸顯出來，因此將第1幀的圖形復(fù)制過來，如圖所示

7、創(chuàng)建傳統(tǒng)補間動畫，恢復(fù)到第1幀的動畫效果，如圖所示

8、按Ctrl+Enter組合鍵發(fā)布動畫，這樣一個三維視覺布局Flash實例就制作完成了

 如果你對本章三維視覺布局Flash實例教程感興趣歡迎下載源碼進行學(xué)習研究

三維視覺布局Flash實例教程源碼下載