《Flash CS5工作過程導(dǎo)向標(biāo)準(zhǔn)教程》課件項(xiàng)目12

項(xiàng)目12制作一個(gè)Flash網(wǎng)站12.1項(xiàng)目說明12.2項(xiàng)目分析12.3項(xiàng)目實(shí)施12.4知識(shí)延伸12.5項(xiàng)目實(shí)訓(xùn)

12.1項(xiàng)目說明

小張愛好攝影，喜歡拍攝一些花草、鳥蟲之類，他希望建立一個(gè)Flash網(wǎng)站，展示自己的作品，推銷自己，實(shí)現(xiàn)與網(wǎng)友的互動(dòng)交流。要求網(wǎng)站具有個(gè)性，能夠?qū)崿F(xiàn)基本的網(wǎng)絡(luò)功能，如留言、展示、論壇等。本項(xiàng)目將學(xué)習(xí)Flash網(wǎng)站的制作方法。

12.2項(xiàng)目分析

在制作網(wǎng)站之前，要有一個(gè)良好的前期規(guī)劃，包括網(wǎng)站的內(nèi)容、欄目的設(shè)定、網(wǎng)站的整體顏色以及相關(guān)資料的收集與整理。另外，在創(chuàng)建網(wǎng)站時(shí)會(huì)依據(jù)不同目的創(chuàng)建出不同類型的網(wǎng)站，例如，個(gè)人可以依據(jù)自己的愛好，創(chuàng)建出展現(xiàn)自己風(fēng)格的個(gè)人網(wǎng)站；企業(yè)為了展示企業(yè)形象與推廣產(chǎn)品，可以創(chuàng)建企業(yè)網(wǎng)站。

12.3項(xiàng)目實(shí)施

該項(xiàng)目的關(guān)鍵是網(wǎng)站欄目的規(guī)劃與管理，合理利用圖層、關(guān)鍵幀與AS2.0控制欄目之間的跳轉(zhuǎn)。通過前面的項(xiàng)目分析，我們基本可以把握該項(xiàng)目的制作流程。對(duì)于背景的創(chuàng)建，可以由Flash直接繪制完成，也可以通過Photoshop進(jìn)行制作，本例是通過Photoshop完成的，這樣可以減少Flash中的工作量。本項(xiàng)目的參考效果如圖12-1所示。圖12-1動(dòng)畫參考效果任務(wù)一：網(wǎng)站外觀的制作

圖12-2導(dǎo)入的圖片圖12-3【屬性】面板

圖12-4輸入的文字圖12-5輸入的文字及其屬性圖12-6繪制的矩形圖12-7插入的關(guān)鍵幀圖12-8第1幀、第6幀和第8幀處的矩形形態(tài)

圖12-9【屬性】面板圖12-10【屬性】面板圖12-11執(zhí)行【直接復(fù)制】命令圖12-12【直接復(fù)制元件】對(duì)話框圖12-13調(diào)整各按鈕實(shí)例的位置圖12-14繪制的圖形圖12-15導(dǎo)入的圖片圖12-16繪制的矩形

圖12-17繪制的橢圓形

圖12-18調(diào)整“白光”實(shí)例的形態(tài)

圖12-19【屬性】面板圖12-20調(diào)整“白光”實(shí)例的形態(tài)任務(wù)二：“攝影園地”動(dòng)畫的制作

圖12-21輸入的文字圖12-22【屬性】面板

圖12-23輸入的文字

圖12-24添加UIScrollBar組件

圖12-25【屬性】面板任務(wù)三：“攝影欣賞”動(dòng)畫的制作

圖12-26輸入的文字圖12-27調(diào)整矩形的形態(tài)圖12-28導(dǎo)入的圖片圖12-29復(fù)制的圖片圖12-30第1幀處“大圖像”實(shí)例的位置圖12-31第500幀處“大圖像”實(shí)例的位置任務(wù)四：“攝影知識(shí)”動(dòng)畫的制作

圖12-32輸入的紅色文字圖12-33輸入文字并設(shè)置URL鏈接圖12-34輸入的其他文字任務(wù)五：“信息反饋”動(dòng)畫的制作

圖12-35輸入的文字圖12-36輸入的文字圖12-37添加TextInput組件圖12-38調(diào)整復(fù)制的TextInput組件圖12-39添加TextArea組件圖12-40添加Button組件任務(wù)六：添加行為命令

圖12-41【屬性】面板圖12-42【時(shí)間軸】面板

12.4知識(shí)延伸

知識(shí)點(diǎn)一：關(guān)于AS2.0

AS是為了增強(qiáng)Flash的交互功能而設(shè)置的，隨著版本的升高，其功能與完善性也越來越強(qiáng)大，其中AS2.0是在FlashMX2004中誕生的，編寫方式更加成熟，引入了面向?qū)ο缶幊谭绞剑梢詫懺跁r(shí)間軸中的關(guān)鍵幀上、按鈕或元件的實(shí)例上，歷時(shí)了FlashMX2004、Flash8兩個(gè)版本，擁有大量的用戶群。圖12-43選擇使用AS2.0知識(shí)點(diǎn)二：行為

要想使用【行為】功能，必須在AS2.0工作環(huán)境下。所謂的行為，就是一些封裝的程序代碼模塊，可以拿來即用，而不必自己編寫ActionScript代碼。圖12-44【行為】面板

圖12-45行為菜單圖12-46行為的事件與動(dòng)作知識(shí)點(diǎn)三：組件

簡單地說，“組件”是一小段預(yù)定義的代碼，這段代碼能夠執(zhí)行特定的動(dòng)作。這個(gè)特定的動(dòng)作可以是一個(gè)文本的滾動(dòng)條，也可以是一個(gè)可以選擇的復(fù)選框等。

1.組件的添加與參數(shù)設(shè)置

在Flash影片中可以通過【組件】面板添加組件，F(xiàn)lash中的【組件】面板將組件按照類別進(jìn)行管理，從而方便用戶查找。當(dāng)需要使用某個(gè)組件時(shí)，直接將該組件拖曳到舞臺(tái)中即可，如圖12-47所示。圖12-47添加組件在舞臺(tái)中添加組件后，它們會(huì)自動(dòng)存放到【庫】面板中，此組件類型為“編譯剪輯”，以后使用組件就可以像使用影片剪輯元件一樣，從【庫】面板重復(fù)調(diào)用。這樣從【組件】面板中添加一次組件后，該組件就可以在影片中多次使用，從而節(jié)省動(dòng)畫文件的體積，如圖12-48所示。圖12-48【庫】面板中的組件在舞臺(tái)中添加組件后，可以通過【屬性】面板對(duì)其進(jìn)行參數(shù)設(shè)置，不同的組件有不同的參數(shù)，如圖12-49所示。圖12-49【屬性】面板

2.?UIScrollBar組件的操作

UIScrollBar組件為滾動(dòng)條，需要與動(dòng)態(tài)文本框或輸入文本框配合使用。在舞臺(tái)中添加UIScrollBar組件后，可以通過【屬性】面板設(shè)置該組件的相關(guān)參數(shù)，如圖12-50所示。圖12-50【屬性】面板

3.?TextInput組件

TextInput組件是一個(gè)文本輸入組件，用戶可以在該組件中輸入文字或密碼類型的字符，其作用與輸入文本框類似。在舞臺(tái)中添加TextInput組件后，可以通過【屬性】面板設(shè)置該組件的相關(guān)參數(shù)，如圖12-51所示。圖12-51【屬性】面板

4.?TextArea組件圖12-52【屬性】面板

TextArea組件為多行文本框，如果需要使用大量的文字，可以使用該組件。在舞臺(tái)中添加了TextArea組件后，

可以通過【屬性】面板設(shè)置該組件的相關(guān)參數(shù)，如圖12-52所示。圖12-52【屬性】面板

5.?Button組件

Button組件為一個(gè)按鈕，使用按鈕可以實(shí)現(xiàn)表單的提交以及執(zhí)行某些相關(guān)的行為動(dòng)作。在舞臺(tái)中添加了Button組件后，可以通過【屬性】面板設(shè)置該組件的相關(guān)參數(shù)，如圖12-53所示。圖12-53【屬性】面板知識(shí)點(diǎn)四：影片優(yōu)化

1.優(yōu)化對(duì)象

2.優(yōu)化字體和文字

3.優(yōu)化線條

4.優(yōu)化圖形顏色知識(shí)點(diǎn)五：SWF文件發(fā)布設(shè)置

完成了Flash動(dòng)畫的制作以后，我們可以將其發(fā)布為SWF文件，單擊菜單欄中的【文件】/【發(fā)布設(shè)置】命令，打開【發(fā)布設(shè)置】對(duì)話框，然后切換到【Flash】選項(xiàng)卡，如圖12-54所示，在這里可以對(duì)相關(guān)選項(xiàng)進(jìn)行設(shè)置。圖12-54【發(fā)布設(shè)置】對(duì)話框知識(shí)點(diǎn)六：HTML文件發(fā)布設(shè)置

在Web瀏覽器中播放Flash動(dòng)畫時(shí)，需要一個(gè)能激活SWF文件并指定瀏覽器設(shè)置的HTML文檔。在發(fā)布Flash動(dòng)畫時(shí)，會(huì)自動(dòng)生成一個(gè)這樣的HTML文檔。下面我們學(xué)習(xí)如何設(shè)置HTML文檔的發(fā)布參數(shù)，如圖12-55所示。圖12-55【發(fā)布設(shè)置】對(duì)話框知識(shí)點(diǎn)七：發(fā)布動(dòng)畫

完成了Flash動(dòng)畫的制作后，其發(fā)布操作非常簡單，大體上可以通過兩種方法獲取SWF影片文件。

方法一：完成了Flash動(dòng)畫的制作后，單擊菜單欄中的【文件】/【保存】命令，將動(dòng)畫命名保存為?*.fla文檔，然后按下Ctrl?+?Enter鍵，這時(shí)在測試動(dòng)畫的同時(shí)會(huì)產(chǎn)生一個(gè)SWF文件，與FLA文件同名，并且在同一個(gè)目錄下。

方法二：完成了Flash動(dòng)畫的制作，并保存文件后，通過【發(fā)布設(shè)置】對(duì)話框設(shè)置發(fā)布參數(shù)，然后單擊菜單欄中的【文件】/【發(fā)布】命令，完成動(dòng)畫的發(fā)布。

12.5項(xiàng)目實(shí)訓(xùn)

對(duì)于基本的Flash網(wǎng)站設(shè)計(jì)，AS2.0與AS3.0都可以實(shí)現(xiàn)，這完全取決于設(shè)計(jì)者的偏好，本項(xiàng)目是一個(gè)非常簡單的網(wǎng)站架構(gòu)，使用AS2.0實(shí)現(xiàn)頁面的跳轉(zhuǎn)，請(qǐng)利用學(xué)習(xí)的內(nèi)容，制作一個(gè)類似架構(gòu)的Flash網(wǎng)站。

任務(wù)分析

在使用方法上，AS2.0與AS3.0有很大的差別，所以在創(chuàng)建Flash網(wǎng)站時(shí)，首先要明確使用哪