Flash全站案例設計

我們來學習flash全站案例設計，本案例flash教程以“火”元素為主，使用暗紅色為主調，先從網站框架布局入手，進行框架設定，在使用photoshop設計出UI風格的Flash全站，然后在Flash中設計首頁和內頁的動畫效果。

flash教程（Flash全站案例設計）的動畫預覽效果圖如下所示：

該flash教程案例思路：

在photoshop中策劃全站的布局和設計模板。

將設計樣板導入Flash中，然后制作首頁和內頁的動畫。

在Swift3D中制作三維標志動畫，然后將其導出成SWF文件，再制作出加載條  “Flash+Photoshop全站設計”操作流程：

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

1、本例以“火”為基本元素來進行設計，全站以暗紅色為主色調，首先從網站框絮布局人手，進行框架沒定，如圖所示。

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

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

4、設計主頁的各元素，第l欄設計如圖所示。

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

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

7、在左邊添加火焰圖形，如圖所示，然后設計出banner圖形，如圖所示

flash教程步驟二、制作首頁和內頁動畫

1、設計完首頁后，將背景切割出來作為網頁背景，如圖所示。

2、將各圖形切割成png圖片，然后導入到Flash中，再制作出標志的出場動畫，如圖所示

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

4、主頁過渡完成后，新建一個As圖層用來暫停主頁動畫，當單擊菜單時更換欄目。如圖所示。

5、制作公司介紹的欄目動畫，如圖所示

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

7、制作作品展示欄，將banner動畫調入到作品展示欄中，如圖所示。

flash教程步驟三、打造LoGo動畫

1、首頁與內頁設計完成后制作一個引導性動畫，當用戶進入網站后可看到該畫面，如圖所示。

2、制作標志動畫中的火焰動畫，如圖所示。

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

4、對標志添加紋理效果，如圖所示，然后將標志進行微調，如圖所示。

5、編輯完造型后，然后選擇要添加的動畫樣式，如圖所示，再將動畫樣式拖曳到標志對象上，如圖所示

6、預覽動畫效果，如圖16所示，再單擊“預覽和導出編輯器”選項卡，然后選擇“邊緣選項”，只生成輪廓動畫．如圖所示。

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

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

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

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

Flash教程（全站設計）源碼下載