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

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

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

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

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

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

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

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

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

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

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

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

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

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