國外優(yōu)秀flash全站解析

本節(jié)課學(xué)無憂來介紹的的flash教程是一個國外優(yōu)秀flash全站解析，我們通過一個辦套用品的廣告網(wǎng)站的案例分析，以設(shè)計(jì)思路為主來進(jìn)行講解，將卡通角色動畫融入到Flash全站中，可以豐富整站的實(shí)際體驗(yàn)感和趣味性。

 國外優(yōu)秀flash全站效果如圖所示：

本例思路：
在photoshop中設(shè)計(jì)全站的布局將制作出的模板導(dǎo)入Flash中，然后依次制作出各欄目 。

具體操作流程如下：
步驟一、布局分析

本例的模板采用辦公室與卡通角色的交互動畫來進(jìn)行全站設(shè)計(jì)，所有內(nèi)容的設(shè)計(jì)都在畫框之內(nèi)，畫框下面放置4個圖標(biāo)作為菜單按鈕，如圖所示。

步驟二、動畫制作

1、畫框中的窗簾很巧妙地利用了Flash的圖形優(yōu)勢，從圖中可以看出窗簾由多道紋路組成，其實(shí)只繪制了兩條窗簾紋路，如圖所示，然后將其轉(zhuǎn)換為影片剪輯，再進(jìn)行復(fù)制就得到了窗簾，如圖所示。

2、為每條窗簾創(chuàng)建傳統(tǒng)補(bǔ)間動畫，是窗簾向兩邊拉開，如圖所示。

3、打開窗簾后進(jìn)入第一個欄目aboutUS，該欄目設(shè)計(jì)效果如圖所示。

4、窗簾打開后，較色從后面走過來，面板也被調(diào)動起來，如圖所示。

5、將角色各肢體分解出來，創(chuàng)建出角色動畫，如圖所示。

6.當(dāng)單擊上下的翻頁按鈕時，角色會扣動手柄來切換面板，如圖所示。

7、角色和面板后面還有個“辦公室”影片剪輯，當(dāng)更換欄目時滑入步同位置來配合角色動作，如同一個辦公室的全景圖。如圖所示。

8、將辦公室全景圖分為4塊，分別用于4個菜單項(xiàng)，單單擊portfolio菜單，辦公室背景滑人第1塊，由于這是“項(xiàng)目展展示’欄目，所以將背景定位在工作臺中，如圖所示。

9、顯示面板升起來后，角色從后面走過來，并在黑板上繪制圖形，再擦除圖形，如圖所示

。
10、單擊第3個按鈕services進(jìn)入服務(wù)欄目，辦公室全全景圖滑至第3塊，如圖所示，當(dāng)面板升起后，角色坐在沙發(fā)上并端出咖啡，如圖所示。

11、角色和背景是分開的，當(dāng)角色坐在沙發(fā)上時，其實(shí)只是背靠著沙發(fā)，如圖所示。

12、制作最后1個欄目contacts，此時辦公室全景圖滑至第4塊，如圖所示，角色走到辦公桌前并坐下開始寫字，如圖所示：

13、到這一步已經(jīng)完成了基本流程的介紹，最終效果：

到這里如何解析國外全站模板案例介紹就完成了，希望對你們有所幫助。

國外全站的flash實(shí)例教程源碼下載