flash全站動畫設計實例教程

案例描述：

本例主要講解flash全站動畫設計實例教程，本例以一個實際應用中的蛋業(yè)網(wǎng)站來講解F1ash全站動畫的設計方法，在制作全站時，首先要和客戶進行全面的交流，在得到制作材料后開始構(gòu)思全站的風格，從行業(yè)特性和企業(yè)文化入手，然后斟酌網(wǎng)站訪問人群的年齡范圍、教育程度和文化差異來設計奎站。

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

本例思路：

構(gòu)思全站的色彩、布局、動畫和結(jié)構(gòu)，然后在Photoshop中設計
將圖形導入Flash，然后制作出標志動畫。
將圖形分割到Flash中，然后制作出主頁的動畫效果。
分析各個菜單的子欄目，然后依次制作出各個欄目。
制作出視頻專區(qū)，然后將內(nèi)容排好。
依次制作內(nèi)頁效果，然后測試程序。

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

放大顯示動畫

步驟一、整體思路

1、本例要設計的是一家蛋品企業(yè)的宣傳站，在于客戶溝通后得出以下結(jié)論
色彩：使用白色背景，以橙色為主色調(diào)，再用淡黃色和黑色作為輔助色，追求清新的畫面效果，以突出食欲與環(huán)保，如圖
布局：每一塊內(nèi)容布局到幾何圖形中，網(wǎng)站左上角放置企業(yè)標志，菜單只進行簡單的布置處理
動畫：網(wǎng)站加載完成后，播放一段剪短的標志動畫在過度到主頁，而每一個子欄目只制作一個簡單而流暢的過程動畫
結(jié)構(gòu)：為提高網(wǎng)站訪問速度，因此將各模塊分成多個swf文件來制作，單擊菜單時再瀆取各模塊，其結(jié)構(gòu)如圖所示。

2、分析完成后，用Photoshop制作出版面，如圖所示

步驟二、制作標志動畫
1、把各個元素切割到F1ash中，根據(jù)客戶意見和動畫需要來進行修改。首先制作標志動畫，新建一個基于ActionScript 2 0的Flash文件，舞臺大小設置為1000×600像素，背景色為白色，幀頻為40fpS。每個標志都有不同的規(guī)律，根據(jù)客戶提供的標志來創(chuàng)作其動畫，如圖所示，這個標志首先要突出巾問的毛體字“蛋”，其次是“光陽”，然后出現(xiàn)“業(yè)”寧和拼音。

2、制作出“蛋’’字的手寫動面，如圖所示，然后將循環(huán)選項沒置為“只播放一次”，再制作出“光陽”兩個字的出現(xiàn)動畫，如圖所示。

3、采用同樣的方法制作“業(yè)”字和拼音從右漸顯的出現(xiàn)動畫，標志的動畫效果如圖所示。

步驟三、制作主頁動畫

1、品牌宣傳站里加載條就顯得格外重要，設計一個吸引用戶眼球的加載條可以提高網(wǎng)站的訪問率，本例用雞蛋來進行設計，如圖所示

2、打開在Photoshop中設計的版面，然后將每個元素輸出為png文件，再導人Flash中，如圖所示。

3、當標志動畫播放完后，上下兩部分元素開始出現(xiàn)，如圖所示。

步驟三、制作主頁動畫

4、新建一個As圖層，然后在第310幀按F7鍵插入空白關鍵幀，并輸入代碼stop()將出場動畫進行暫停處理，再設置當前菜單為thernenu=“home”，如圖所示。

	stop()

	themenu="home"

	_global.jump=false

5、第385幀中，使用loadMovie Cthemenu+“．swf，mov)：語句來加載子模塊的swf文件，并使用一個inov影片剪輯作為容器，如圖所示。

loadMovie(themenu+".swf", mov);
stop();

6、進入菜單影片剪輯的編輯區(qū)域，制作一個透明菜單放置在每個菜單的字上，并將系列名命名為b1~b7，然后繪制一條橫線影片剪輯作為菜單的指示線，再復制出幾個橫線鋪在菜單的字下面，并將系列名命名為tl～t5，最后繪制一個三角形來作為緩動跟隨，并設置實例名稱為tag，如圖所示

7、為按鈕添加單擊事件程序，如圖所示。

	for (j=0; j<=7; j++) {

	 this["t"+j]._visible = 0;

	}

	function pas(id) {//點擊按鈕后對著重號進行處理

	 for (j=0; j<=7; j++) {//先隱藏所有著重號

	  this["t"+j]._visible = 0;

	 }

	 i = id;//這是用在特效里的，點擊按鈕時三角形也跟著指示過來

	 this["t"+id]._visible = 1;//顯視當前所點的著重號

	}

	b1.onRelease = function() {//菜單：走進光陽

	 tag.play();

	 if (_parent.themenu == "home") {

	  _parent.play();

	 }

	 _parent.themenu = "intr";//設用swf的字符串

	 pas(1);//處理指示線

	 if (_global.jump) {

	  _parent.gotoAndStop("load");

	 } else {

	  _global.jump = true;//播放當前欄的消失動畫

	 }

	};

	b2.onRelease = function() {//菜單：視頻專區(qū)

	 tag.play();

	 if (_parent.themenu == "home") {

	  _parent.play();

	 }

	 _parent.themenu = "video";

	 pas(2);

	 if (_global.jump) {

	  _parent.gotoAndStop("load");

	 } else {

	  _global.jump = true;

	 }

	};

	b3.onRelease = function() {//菜單：產(chǎn)品中心

	 tag.play();

	 _parent.themenu = "pro";

	 pas(3);

	 if (_parent.themenu == "home") {

	  _parent.play();

	 }

	 if (_global.jump) {

	  _parent.gotoAndStop("load");

	 } else {

	  _global.jump = true;

	 }

	};

	b4.onRelease = function() {

	 tag.play();

	 if (_parent.themenu == "home") {

	  _parent.play();

	 }

	 _parent.themenu = "service";

	 pas(4);

	 if (_global.jump) {

	  _parent.gotoAndStop("load");

	 } else {

	  _global.jump = true;

	 }

	};

	b5.onRelease = function() {

	 tag.play();

	 if (_parent.themenu == "home") {

	  _parent.play();

	 }

	 _parent.themenu = "news";

	 pas(5);

	 if (_global.jump) {

	  _parent.gotoAndStop("load");

	 } else {

	  _global.jump = true;

	 }

	};

	b6.onRelease = function() {

	 tag.play();

	 if (_parent.themenu == "home") {

	  _parent.play();

	 }

	 _parent.themenu = "person";

	 pas(6);

	 if (_global.jump) {

	  _parent.gotoAndStop("load");

	 } else {

	  _global.jump = true;

	 }

	};

	b7.onRelease = function() {

	 tag.play();

	 if (_parent.themenu == "home") {

	  _parent.play();

	 }

	 _parent.themenu = "about";

	 pas(7);

	 if (_global.jump) {

	  _parent.gotoAndStop("load");

	 } else {

	  _global.jump = true;

	 }

	};

	

	

	 

8、添加如圖所示的特效代碼，然后添加如圖所示的緩動代碼。

	 var i = 0;

	this.onEnterFrame = function() {

	 for (n=1; n<=7; n++) {

	  if (i == n) {//判斷執(zhí)行緩動的是哪個按鈕

	   tag._x += (this["b"+n]._x-tag._x)/5;//緩動公式,當a到b點時為:a=a+(b-a)/5

	   if (tag._x == this["b"+n]._x) {//當運動到終點時,停止執(zhí)行,即i=0

	    i = 0;

	   }

	  }

	 }

	};

9、預覽主頁動畫，效果如圖所示。

步驟四、制作菜單欄目

1、主頁動畫制作成后，下面制作子欄目動畫，如圖所示，等個子菜單里都有分欄目，但是有些子欄目只需要設計一種樣式，然后使用程序按不同的ID讀取數(shù)據(jù)庫就行了，比如“產(chǎn)品中心”和“蛋業(yè)資訊”下的子模塊。

2、制作第1個子欄目‘’走進光陽”文件，首先繪制一個如圖所示的扇形

3、‘選擇扇形，然后設置填充類型為“線性”，再設置第1色標顏色為(R：255，G：128，B：0)，第2個色標顏色為R，193，G：58，B：2)，第3個色標顏色為(R：165，G：58，B：14)

4、使用遮罩功能為扇形制作展開動畫，然后使用“繪圖紙外觀輪廓”功能查看動畫效果，效果如圖，在繪制出用于放置菜單的抽象圖形，如圖所示。

5、使用繪圖功能繪制出菜單，如圖所示。

6、返回到“場景1”，再新建一個As圖層，并在第1幀添加stop()語句，然后在所有圖層的第l幀添加空白關鍵幀，如圖所示。

7、在AS圖層的第2幀按F7鍵插入空白關鍵幀，然后輸入如圖所示的代碼。

	_global.jump = false;

	id=0

	this.onEnterFrame = function() {

	 if (_global.jump) {

	  play();

	 }

	};

	

8、在第85幀按F7鍵插入空白關鍵幀，然后輸入stop()語句將動畫進行暫停處理，如圖所示，再新建一個用于加載內(nèi)容的影片剪輯(名稱為main)；

9、在main影片剪輯里，針對第1個菜單來輸入加載代碼，如圖所示，然后將所有子頁面的系列名命名為inter_l.swf~inter_8 swf，其加載容器為mov，如圖所示

10、將加載條放置在扇腳處，然后使用一條弧線來搭配整體結(jié)構(gòu)，如圖所示．

11、在菜單中添加代碼，當單擊菜單時按系列名來加載相應的swf文件，如圖所示

	m1.bt.onRelease = function() {

	 _parent.main.mark.gotoAndPlay(2);

	 _parent.main.theid = 1;

	};

	m2.bt.onRelease = function() {

	 _parent.main.mark.gotoAndPlay(2);

	 _parent.main.theid = 2;

	};

	m3.bt.onRelease = function() {

	 _parent.main.mark.gotoAndPlay(2);

	 _parent.main.theid = 3;

	};

	m4.bt.onRelease = function() {

	 _parent.main.mark.gotoAndPlay(2);

	 _parent.main.theid = 4;

	};

	m5.bt.onRelease = function() {

	 _parent.main.mark.gotoAndPlay(2);

	 _parent.main.theid = 5;

	};

	m6.bt.onRelease = function() {

	 _parent.main.mark.gotoAndPlay(2);

	 _parent.main.theid = 6;

	};

	m7.bt.onRelease = function() {

	 _parent.main.mark.gotoAndPlay(2);

	 _parent.main.theid = 7;

	};

	m8.bt.onRelease = function() {

	 _parent.main.mark.gotoAndPlay(2);

	 _parent.main.theid = 8;

	};

	

12、制作一個菜單“公司簡介”的頁面，新建一個flash文件并存儲為intr_1，然后將扇形復制過來，如圖再將內(nèi)容排版到扇形的相對位置，如圖所示

13、在進入企業(yè)簡介之前，要先播放企業(yè)口號，所以制作出企業(yè)口號的幀幀動畫，如圖

14、制作第二個菜單“公司榮譽”的頁面，新建一個flash文件并存儲為intr_2，然后按版面要求來放置蛋圖形，如圖

15、制作第三個菜單“成長歷程”頁面，新建一個flash文件并儲存為intr_3，元素設計如圖

步驟五、制作視頻專區(qū)

1、制作“視頻專區(qū)”，使用繪圖功能繪制出抽象圖形，如圖，然后制作出視頻區(qū)的出場動畫，如圖所示

2、視頻按鈕第1個欄目“走進光陽’’的菜單按鈕一樣，只需制作個，然后將不同的值傳遞進去就行了，如圖所示

	onClipEvent (load) {

	 this.txt = "06年央視《管出來的大市場》";

	 bt.onRelease = function() {

	  _parent._parent.main.linkpath = "flv/video2.flv";

	  if (_parent._parent.main.home) {

	   _parent._parent.main.play();

	  } else {

	   _parent._parent.main.flvplay();

	  }

	 };

	}

	

3、發(fā)布視頻專區(qū)程序，預覽效果，如圖所示

步驟六、內(nèi)頁設計

1、制作產(chǎn)品中心的頁面，產(chǎn)品中心是個產(chǎn)品列表，需要設置一個用于加載縮略圖的產(chǎn)品名元件，然后使程序按矩形陣列來復制，如圖所示

2、繪制出產(chǎn)品中心的菜單，如圖所示，當單擊產(chǎn)品后，彈出瀏覽菜單，如圖所示。

3、制作客服中心的頁面，如圖所示。

4、制作蛋業(yè)資訊頁面，如圖所示，為了體現(xiàn)空間感，因此在背景上繪制幾條向遠處伸展的圖形，如圖所示。

5、繼續(xù)制作紙張翻動效果，如圖所示，然后將制作的面板漸漸顯示出來，如圖所示

6、制作菜單和箭頭升起的動面，如同所示。

7、制作出“人才招聘”欄目，首先繪制一個皇冠圖形，如圖所示，然后將內(nèi)容排好，如圖所示。

8、制作最后一個欄目“聯(lián)系我們”．首先繪制出紙張圖形，如圖，然后制作出入場動畫，如圖所示。

9、到這一步已經(jīng)完成了最終的布局效果，如圖所示，然后整理好所有的子頁面，如圖所示，再進行測

如果你對本章flash全站動畫設計實例教程感興趣歡迎下載源碼進行學習研究

flash全站動畫設計實例教程源碼下載