Flash全站案例設(shè)計(jì)

我們來學(xué)習(xí)flash全站案例設(shè)計(jì)，本案例flash教程以“火”元素為主，使用暗紅色為主調(diào)，先從網(wǎng)站框架布局入手，進(jìn)行框架設(shè)定，在使用photoshop設(shè)計(jì)出UI風(fēng)格的Flash全站，然后在Flash中設(shè)計(jì)首頁(yè)和內(nèi)頁(yè)的動(dòng)畫效果。

flash教程（Flash全站案例設(shè)計(jì)）的動(dòng)畫預(yù)覽效果圖如下所示：

該flash教程案例思路：

在photoshop中策劃全站的布局和設(shè)計(jì)模板。

將設(shè)計(jì)樣板導(dǎo)入Flash中，然后制作首頁(yè)和內(nèi)頁(yè)的動(dòng)畫。

在Swift3D中制作三維標(biāo)志動(dòng)畫，然后將其導(dǎo)出成SWF文件，再制作出加載條  “Flash+Photoshop全站設(shè)計(jì)”操作流程：

flash教程步驟一、在photoshop中布局全局

1、本例以“火”為基本元素來進(jìn)行設(shè)計(jì)，全站以暗紅色為主色調(diào)，首先從網(wǎng)站框絮布局人手，進(jìn)行框架沒定，如圖所示。

2、進(jìn)一步規(guī)劃主頁(yè)的布局。如圖所示。

3、使用Photoshop制作一張背景圖，如圖所示．然后繪制出第1個(gè)框架，如圖所示，制作完成后的框架效果如圖所示。

4、設(shè)計(jì)主頁(yè)的各元素，第l欄設(shè)計(jì)如圖所示。

5、主頁(yè)第2塊和第3塊主要用來展示作品，如圖所示。

6、繼續(xù)設(shè)計(jì)左邊的“最新作品”與“新聞欄”，如圖所示，完成后的整體效果如圖所示。

7、在左邊添加火焰圖形，如圖所示，然后設(shè)計(jì)出banner圖形，如圖所示

flash教程步驟二、制作首頁(yè)和內(nèi)頁(yè)動(dòng)畫

1、設(shè)計(jì)完首頁(yè)后，將背景切割出來作為網(wǎng)頁(yè)背景，如圖所示。

2、將各圖形切割成png圖片，然后導(dǎo)入到Flash中，再制作出標(biāo)志的出場(chǎng)動(dòng)畫，如圖所示

3、過渡到主頁(yè)，每一個(gè)版塊迅速出現(xiàn)，再配合音效來體現(xiàn)整站的氣勢(shì)，其動(dòng)畫如圖所示。

4、主頁(yè)過渡完成后，新建一個(gè)As圖層用來暫停主頁(yè)動(dòng)畫，當(dāng)單擊菜單時(shí)更換欄目。如圖所示。

5、制作公司介紹的欄目動(dòng)畫，如圖所示

6、每個(gè)欄目采用不同的banner動(dòng)畫，讓整站具有更加豐富的想象力，如圖所示。

7、制作作品展示欄，將banner動(dòng)畫調(diào)入到作品展示欄中，如圖所示。

flash教程步驟三、打造LoGo動(dòng)畫

1、首頁(yè)與內(nèi)頁(yè)設(shè)計(jì)完成后制作一個(gè)引導(dǎo)性動(dòng)畫，當(dāng)用戶進(jìn)入網(wǎng)站后可看到該畫面，如圖所示。

2、制作標(biāo)志動(dòng)畫中的火焰動(dòng)畫，如圖所示。

3、進(jìn)入主貞后出現(xiàn)標(biāo)志燃燒的動(dòng)畫，首先要制作標(biāo)志的三維效果，啟動(dòng)Swift 3D，然后導(dǎo)人矢量標(biāo)志，單擊“擠出放樣編輯器”選項(xiàng)卡，再單擊“添加描點(diǎn)工具”按鈕，最后將輪廓線編輯成如圖所示的樣式；

4、對(duì)標(biāo)志添加紋理效果，如圖所示，然后將標(biāo)志進(jìn)行微調(diào)，如圖所示。

5、編輯完造型后，然后選擇要添加的動(dòng)畫樣式，如圖所示，再將動(dòng)畫樣式拖曳到標(biāo)志對(duì)象上，如圖所示

6、預(yù)覽動(dòng)畫效果，如圖16所示，再單擊“預(yù)覽和導(dǎo)出編輯器”選項(xiàng)卡，然后選擇“邊緣選項(xiàng)”，只生成輪廓?jiǎng)赢嫞鐖D所示。

7、單擊“生成所有幀”按鈕，生成輪廓線動(dòng)畫，如圖所示，再單擊“導(dǎo)出所有幀”按鈕，將動(dòng)畫導(dǎo)出成swf文件，如圖所示

8、將swf文件導(dǎo)人到Flash中制作出一拍五的動(dòng)畫，如圖所示，然后制作出加載條，如圖所示。

9、發(fā)布程序，最終效果如圖所示。

到這里我們的flash教程（Flash全站案例）介紹就完成了，希望對(duì)你們有所幫助，感興趣的朋友可以點(diǎn)擊下面的鏈接下載源碼。

Flash教程（全站設(shè)計(jì)）源碼下載