電子教案(第6章第1節(jié))

1、網(wǎng)頁(yè)設(shè)計(jì)實(shí)例制作,第6章第1節(jié),網(wǎng)頁(yè)設(shè)計(jì)實(shí)例制作,二維動(dòng)畫(huà)制作,廈門財(cái)經(jīng)職業(yè)學(xué)校 項(xiàng)慧芳,學(xué)習(xí)目標(biāo),了解網(wǎng)頁(yè)構(gòu)思及組成 掌握使用Flash MX制作網(wǎng)頁(yè)的技巧 提高Flash MX軟件的綜合應(yīng)用能力 培養(yǎng)使用Flash MX軟件制作動(dòng)畫(huà)的相關(guān)經(jīng)驗(yàn)。,項(xiàng)目制作廈門旅游網(wǎng),介紹廈門的人文景觀及風(fēng)景名勝 小型網(wǎng)站，在3課時(shí)內(nèi)完成 提供素材： 圖片信息（廈門的主要風(fēng)光圖片） 文字信息（廈門概況、景點(diǎn)、人文） 該網(wǎng)站至少3頁(yè)以上。,作品構(gòu)思,廈門是個(gè)海濱城市，因此網(wǎng)頁(yè)主色調(diào)采用藍(lán)色，應(yīng)用不同深淺的藍(lán)色塊，使其富于變化。 作為一個(gè)網(wǎng)站，必須要由一個(gè)主頁(yè)和若干子頁(yè)組成，并且保證各網(wǎng)頁(yè)的風(fēng)格一致。 作為一個(gè)旅

2、游網(wǎng)，就要有沖擊力吸引網(wǎng)民的眼球，一開(kāi)場(chǎng)就使用較多的動(dòng)畫(huà)，利用跳躍的畫(huà)面，流動(dòng)的線條來(lái)鎖定網(wǎng)民的視線，因此考慮制作一個(gè)引導(dǎo)頁(yè)。,網(wǎng)站構(gòu)成,引導(dǎo)頁(yè)：網(wǎng)站的開(kāi)場(chǎng)，制作許多動(dòng)畫(huà)效果吸引網(wǎng)民的眼球，并通過(guò)將該網(wǎng)頁(yè)的主要內(nèi)容或信息展示出來(lái)。 主頁(yè)：通過(guò)醒目的4個(gè)大按鈕，將網(wǎng)站的內(nèi)容以畫(huà)龍點(diǎn)睛的方式表現(xiàn)出來(lái)。 文字頁(yè)：使用大量的文字介紹廈門概況、人文、景觀。 圖片頁(yè)：以圖片的方式將廈門的優(yōu)美風(fēng)光展現(xiàn)出來(lái)。,制作網(wǎng)站的步驟,閱讀素材，確定主題，作品構(gòu)思 根據(jù)題意要求，確定各網(wǎng)頁(yè)的主要內(nèi)容，使用哪些動(dòng)畫(huà)表示 將各網(wǎng)頁(yè)鏈接，合成網(wǎng)站,制作時(shí)應(yīng)注意的問(wèn)題,主題鮮明，風(fēng)格統(tǒng)一； 結(jié)構(gòu)合理、規(guī)范； 色彩和諧； 導(dǎo)航合

3、理； 盡量將所學(xué)的內(nèi)容都運(yùn)用到網(wǎng)站制作中。,網(wǎng)站的制作,基本元件 引 導(dǎo) 頁(yè) 主 頁(yè) 文 字 頁(yè) 圖 片 頁(yè) 合成網(wǎng)站,基本元件的制作,背景元件 Logo元件 環(huán)形齒輪元件 泡泡裝飾元件 返回按鈕元件,基本元件的制作背景元件,采用深淺不同的藍(lán)色系列，以時(shí)尚的線條突出整個(gè)網(wǎng)頁(yè)的活力。使用繪圖工具、箭頭工具和著色工具完成。 操作步驟：繪制矩形框劃分成若干小矩形框填充小矩形框去掉線條放大圖形 效果圖：,基本元件的制作Logo元件,采用條形碼形式，以簡(jiǎn)潔明朗的黑色線條表現(xiàn)其內(nèi)在含義。使用繪圖工具、箭頭工具和文字工具完成。 操作步驟：繪制黑色的矩形塊扣出條形碼形狀文字裝飾 效果圖：,基本元件的制作環(huán)形齒

4、輪元件,使用白色繪制鏤空式的不規(guī)則環(huán)形齒輪，并制作旋轉(zhuǎn)的運(yùn)動(dòng)漸變動(dòng)畫(huà)。 操作步驟：繪制4個(gè)不等距同心圓劃分同心圓刪除部分線條制作影片剪輯,效果圖：,基本元件的制作泡泡裝飾,圓形與環(huán)形齒輪呼應(yīng)，使用該裝飾能使整個(gè)頁(yè)面更加活潑并能彌補(bǔ)網(wǎng)頁(yè)上的空白部分。使用繪圖工具繪制泡泡，并制作引導(dǎo)線動(dòng)畫(huà)和運(yùn)動(dòng)漸變動(dòng)畫(huà)。 操作步驟：繪制藍(lán)色漸變填充的無(wú)邊框正圓繪制白色無(wú)邊框橢圓制作影片剪輯(使泡泡顏色漸淡，并垂直向上或曲線向上運(yùn)動(dòng))。 泡泡效果圖：,基本元件的制作返回按鈕,在“泡泡”圖形元件的基礎(chǔ)上制作，與“泡泡裝飾”互相對(duì)應(yīng)。有多個(gè)網(wǎng)頁(yè)，就需要能夠?qū)崿F(xiàn)不同網(wǎng)頁(yè)間的跳轉(zhuǎn)，使用按鈕元件可以很好的實(shí)現(xiàn)這個(gè)功能。 操作

5、步聚：新建按鈕元件在各幀放入泡泡圖形添加文字。 效果圖：,引導(dǎo)頁(yè)的制作,新建文件及制作背景 旋轉(zhuǎn)的Loading動(dòng)畫(huà) 黑色布幕 裝飾線條移動(dòng) 圖片滾動(dòng)條 動(dòng)態(tài)Welcome 環(huán)形齒輪按鈕 修飾頁(yè)面,引導(dǎo)頁(yè)的制作新建文件及制作背景,新建文件： 1.設(shè)置文檔尺寸大小為 778 像素430 像素，背景色為黑色，文件名為“l(fā)oading.fla”。 2.將 “element.fla”文件所有元件，作為庫(kù)導(dǎo)入到當(dāng)前文件中。 制作背景： 1.將“背景”元件拖到場(chǎng)景中央。 2.延長(zhǎng)時(shí)間線至第 150 幀處，即可看到背景的整體效果。鎖定圖層。,引導(dǎo)頁(yè)的制作旋轉(zhuǎn)的Loading動(dòng)畫(huà),制作運(yùn)動(dòng)漸變動(dòng)畫(huà)，將“l(fā)oa

6、ding”字樣采用即對(duì)稱又富有變化的旋轉(zhuǎn)方式吸引網(wǎng)民的視線。 操作步驟：輸入文字“l(fā)oading”并打散漸變填充文字并制作陰影將每個(gè)字母轉(zhuǎn)換成圖形元件分別制作每個(gè)字母的運(yùn)動(dòng)漸變效果。 效果圖：,引導(dǎo)頁(yè)的制作黑色布幕,繪制一塊黑色布幕，將其制作成運(yùn)動(dòng)漸變動(dòng)畫(huà)，使黑色布幕自上而下拉開(kāi)，進(jìn)入到夢(mèng)幻般的藍(lán)色，有一種豁然開(kāi)朗的效果。 操作步驟：繪制黑色無(wú)邊框矩形將矩形修改成布幕效果將布幕轉(zhuǎn)換成圖形元件制作自上而下拉開(kāi)的運(yùn)動(dòng)漸變。,效果圖：,引導(dǎo)頁(yè)的制作移動(dòng)裝飾線條,用白色繪制上下兩組線條，上下兩組線條數(shù)量不一致，使其富于變化，并將其制作成運(yùn)動(dòng)漸變動(dòng)畫(huà)，分別從畫(huà)面兩側(cè)進(jìn)入視線，展現(xiàn)出頁(yè)面的動(dòng)感，并由此引出

7、圖片滾動(dòng)條。 操作步驟：分別繪制間距不同的3條白線和4條白線的圖形元件制作元件從畫(huà)面兩側(cè)進(jìn)入視線的運(yùn)動(dòng)漸變。 效果圖：,引導(dǎo)頁(yè)的制作圖片滾動(dòng)條,導(dǎo)入素材中準(zhǔn)備的風(fēng)光圖片資料，制作“圖片滾動(dòng)效果”的影片剪輯，然后制作遮罩層動(dòng)畫(huà)，使圖片在指定范圍內(nèi)循環(huán)出現(xiàn)。 操作步聚：導(dǎo)入圖片將其打散并處理成圖示效果幾張?zhí)幚砗蟮膱D片排列整齊制作圖片滾動(dòng)的影片剪輯制作平行四邊形的遮罩層。 效果圖：,引導(dǎo)頁(yè)的制作動(dòng)態(tài)Welcome,添加白色的“Welcome”字樣，制作從大到小，從淺入深的運(yùn)動(dòng)漸變動(dòng)畫(huà)，增加網(wǎng)頁(yè)的動(dòng)態(tài)效果，吸引網(wǎng)民，對(duì)整個(gè)頁(yè)面也起到很好的裝飾作用。 操作步驟：輸入文字并打散創(chuàng)建幀幀動(dòng)畫(huà)，每隔5幀改變一

8、個(gè)字母的位置設(shè)置Alpha值，使文字顏色漸淡。 效果圖：,引導(dǎo)頁(yè)的制作環(huán)形齒輪按鈕,利用裝飾的環(huán)形齒輪作為按鈕，實(shí)現(xiàn)不同網(wǎng)頁(yè)間的跳轉(zhuǎn)，同時(shí)，又將環(huán)形齒輪附以變化，增加了動(dòng)感，也使網(wǎng)頁(yè)更加簡(jiǎn)捷、明快。 操作步驟：在按鈕元件的各幀中插入靜態(tài)環(huán)將“指針經(jīng)過(guò)”幀修改為動(dòng)態(tài)環(huán)插入文字圖層。,效果圖：,引導(dǎo)頁(yè)的制作修飾頁(yè)面,可根據(jù)自己的興趣愛(ài)好對(duì)頁(yè)面進(jìn)行一些裝飾，特別是針對(duì)頁(yè)面空白處進(jìn)行裝飾，使得頁(yè)面看起來(lái)比較豐滿。 效果圖：,主頁(yè)的制作,新建文件及制作背景 同心圓線條裝飾頁(yè)面 網(wǎng)格裝飾線 制作按鈕 修飾頁(yè)面,主頁(yè)的制作新建文件及制作背景,新建文件： 1.設(shè)置文檔尺寸大小為 778 像素430 像素，背景

9、色為黑色，文件名為“index.fla”。 2.將 “element.fla”文件所有元件，作為庫(kù)導(dǎo)入到當(dāng)前文件中。 制作背景： 將“背景”元件拖到場(chǎng)景中央。,主頁(yè)的制作同心圓線條裝飾頁(yè)面,使用繪圖工具，采用白色繪制與環(huán)形齒輪類似的圓來(lái)裝飾頁(yè)面，保持整個(gè)網(wǎng)站風(fēng)格的一致性又富于變化。 操作步驟：繪制6個(gè)間距不同的同心圓繪制2條線條處理圖形。 效果圖：,主頁(yè)的制作網(wǎng)格裝飾線,使用繪圖工具繪制一些網(wǎng)格線，并設(shè)置Alpha值，與引導(dǎo)頁(yè)的流動(dòng)線條相呼應(yīng)，填充整個(gè)頁(yè)面，使其豐滿而不空洞。 操作步驟：繪制網(wǎng)格處理圖形設(shè)置Alpha值 效果圖：,主頁(yè)的制作制作按鈕,作為主頁(yè)，就需要將展現(xiàn)整個(gè)網(wǎng)站的主要內(nèi)容，并

10、能實(shí)現(xiàn)不同網(wǎng)頁(yè)之間的跳轉(zhuǎn)。制作4個(gè)按鈕，采用非常醒目的色調(diào)，使網(wǎng)民一目了然。 操作步驟：新建按鈕，繪制圓角矩形將邊框與矩形稍微錯(cuò)開(kāi)添加文字。 效果圖：,主頁(yè)的制作修飾頁(yè)面,裝飾主要是填充網(wǎng)頁(yè)的空白處，具體裝飾對(duì)象可以根據(jù)自己的喜好進(jìn)行選擇，但注意網(wǎng)頁(yè)風(fēng)格的一致性。 效果圖：,文字頁(yè)的制作,新建文件及制作背景 添加文字 制作按鈕 裝飾頁(yè)面,文字頁(yè)的制作新建文件及制作背景,新建文件： 1.設(shè)置文檔尺寸大小為 778 像素430 像素，背景色為黑色，文件名為“text.fla”。 2.將 “element.fla”文件所有元件，作為庫(kù)導(dǎo)入到當(dāng)前文件中。 制作背景： 1.將“背景”元件拖到場(chǎng)景中央。

11、2.延長(zhǎng)時(shí)間線至第3 幀處，即可看到背景的整體效果。鎖定圖層。,文字頁(yè)的制作添加文字,因?yàn)槲淖謨?nèi)容較多，文字的顯示采用動(dòng)態(tài)多行文本框結(jié)合滾動(dòng)條組件來(lái)顯示文字內(nèi)容，使得每頁(yè)的文字內(nèi)容更加充實(shí)，另外因?yàn)榘皬B門概況”、“廈門人文”及“廈門景點(diǎn)”三個(gè)方面的內(nèi)容，因此，采用3頁(yè)（即3個(gè)不同的關(guān)鍵幀），并將每幀的動(dòng)作腳本設(shè)置為“stop()”，再利用按鈕來(lái)進(jìn)行跳轉(zhuǎn)。,文字頁(yè)的制作添加文字,操作步驟：繪制2個(gè)圓角矩形虛線邊框大圓角矩形邊框內(nèi)嵌入一個(gè)略小的動(dòng)態(tài)文本，輸入文字動(dòng)態(tài)文本框內(nèi)添加滾動(dòng)條組件為幀添加動(dòng)作。 效果圖：,文字頁(yè)的制作制作按鈕,制作兩個(gè)按鈕，一個(gè)用來(lái)返回到主頁(yè)，另一個(gè)用來(lái)控制不同文字頁(yè)間

12、的切換，要設(shè)置該按鈕的動(dòng)作腳本。 操作步驟：將返回按鈕置于右下部制作播放按鈕，為其添加動(dòng)作。 效果圖：,文字頁(yè)的制作裝飾頁(yè)面,可以根據(jù)自己的喜好對(duì)頁(yè)面進(jìn)行適當(dāng)?shù)男揎?，如可在?yè)面中添加動(dòng)態(tài)環(huán)、泡泡等裝飾。 效果圖：,圖片頁(yè)的制作,新建文件 制作背景 波浪動(dòng)畫(huà) 制作按鈕,圖片頁(yè)的制作新建文件,操作步驟： 1.設(shè)置文檔尺寸大小為 778 像素430 像素，背景色為黑色，文件名為“photo.fla”。 2.將 “element.fla”文件所有元件，作為庫(kù)導(dǎo)入到當(dāng)前文件中。,圖片頁(yè)的制作制作背景,操作步驟： 1.將“背景”元件拖到場(chǎng)景中央。 2.將“靜態(tài)環(huán)”元件拖到場(chǎng)景中間偏右的地方，鎖定圖層。 效

13、果圖：,圖片頁(yè)的制作波浪動(dòng)畫(huà),用流動(dòng)的波浪增加網(wǎng)頁(yè)的動(dòng)感，也呼應(yīng)了廈門作為海濱城市的特點(diǎn)。利用繪圖工具繪制波浪圖形元件，并制作運(yùn)動(dòng)漸變動(dòng)畫(huà)，使其呈現(xiàn)波動(dòng)的效果。 操作步驟：繪制波浪狀圖形水平翻轉(zhuǎn)置于頂部制作運(yùn)動(dòng)漸變動(dòng)畫(huà)。,效果圖：,圖片頁(yè)的制作制作按鈕,制作6個(gè)按鈕，1個(gè)用來(lái)返回主頁(yè)，另5個(gè)制作成圖片按鈕，當(dāng)鼠標(biāo)經(jīng)過(guò)它們時(shí)，在“靜態(tài)環(huán)”內(nèi)會(huì)顯示其放大的圖片效果。將圖片處理成圓形，并將5個(gè)按鈕沿著環(huán)形齒輪排開(kāi)，保持網(wǎng)頁(yè)風(fēng)格一致性。 操作步驟：導(dǎo)入圖片轉(zhuǎn)換成按鈕元件圖片處理成圓形“指針經(jīng)過(guò)”幀多放置一個(gè)放大和圓形圖片將處理完的各圖片按鈕沿著齒輪裝飾圈排開(kāi)。,圖片頁(yè)的制作制作按鈕,效果圖：,合成網(wǎng)站,組合文件 將小組中每個(gè)人制作完成的動(dòng)畫(huà)文件，作為場(chǎng)景加入到最終的成品文件中。這兒只需要在成品文件中建立4個(gè)場(chǎng)景，并依次使用復(fù)制、粘帖功能即可。 設(shè)置鏈接 為成品文件中的各按鈕和有關(guān)幀添加動(dòng)作，使各場(chǎng)景的網(wǎng)頁(yè)文件能方便地實(shí)現(xiàn)快速跳轉(zhuǎn)。 導(dǎo)出文件 將成品文件導(dǎo)出成HTML文件格