網(wǎng)頁設(shè)計(jì)與制作項(xiàng)目五

1、網(wǎng)頁設(shè)計(jì)與制作項(xiàng)目五利用Flash CS6制作網(wǎng)頁動畫利用Flash CS6繪制簡單圖形1制作基本動畫2設(shè)計(jì)網(wǎng)站的動態(tài)按鈕3在Flash中插入音頻和視頻4利用Flash發(fā)布和保存作品5任務(wù)1利用Flash CS6繪制簡單圖形一、理解Flash動畫產(chǎn)生的原理在Flash中，每一個(gè)畫面稱為一個(gè)幀。一個(gè)Flash動畫包括許多獨(dú)立的幀，每一個(gè)幀都與前一個(gè)幀略有不同。其中，關(guān)鍵幀定義了動畫在哪兒發(fā)生改變。例如，何時(shí)移動或旋轉(zhuǎn)對象、改變對象大小、增加對象、減少對象等。每一個(gè)關(guān)鍵幀都包含了任意數(shù)量的符號和圖形。當(dāng)Flash動畫到達(dá)時(shí)間軸上的關(guān)鍵幀時(shí)，它可以做一些常規(guī)電影所不能做的事情幀動作。通過設(shè)置幀動作來

2、完成一些任務(wù)，如暫停在某個(gè)幀、跳到其他幀、在瀏覽器里打開URL地址等。任務(wù)1利用Flash CS6繪制簡單圖形二、認(rèn)識Flash CS6的工作界面“開始頁”窗口Flash CS6的工作界面任務(wù)1利用Flash CS6繪制簡單圖形二、認(rèn)識Flash CS6的工作界面Flash CS6的工作界面一般分為以下五大部分:菜單工具欄舞臺時(shí)間軸工具箱浮動面板任務(wù)1利用Flash CS6繪制簡單圖形三、文字對象的編輯(一)文字的處理在Flash CS6中可以按多種方式使用文字:創(chuàng)建靜態(tài)文本，指定其內(nèi)容和顯示外觀;創(chuàng)建動態(tài)文本或可輸人的文本域，從文本域中輸人動態(tài)文本;使用各種文本的編排方式，如右對齊、左對齊、

3、橫排、豎排;設(shè)置文字的字體、字號、樣式、間距、顏色和對齊方式等。任務(wù)1利用Flash CS6繪制簡單圖形三、文字對象的編輯(二)創(chuàng)建文本Flash CS6提供的文本工具位于工具箱中，當(dāng)用戶單擊選擇工具箱中的文本工具后，在舞臺中單擊鼠標(biāo)，在單擊位置處就會出現(xiàn)一個(gè)空白的字符輸人框，此時(shí)用戶可以在輸入框中輸入文字。拖動調(diào)整柄改變文本塊的寬度任務(wù)1利用Flash CS6繪制簡單圖形三、文字對象的編輯(三)文本的屬性設(shè)置文本的屬性設(shè)置設(shè)置文本的位置和大小設(shè)置文本的字符屬性設(shè)置文本的段落屬性設(shè)置文本鏈接濾鏡任務(wù)1利用Flash CS6繪制簡單圖形三、文字對象的編輯(四)文本的類型靜態(tài)文本動態(tài)文本輸入文本任

4、務(wù)1利用Flash CS6繪制簡單圖形三、文字對象的編輯(五)分離文字并進(jìn)行編輯用戶輸入的文字都是文字對象，不能作為圖形處理。要想將文字作為圖形處理，必須先把文字分離。分離文字的操作是:先選中文字對象，然后執(zhí)行菜單命令“修改”一“分離”，或選中文字對象后直接按Ctrl+B組合鍵，按一次分離成單個(gè)字，再按一次分離成圖塊。任務(wù)1利用Flash CS6繪制簡單圖形四、圖形對象的編輯(一)選擇對象選擇矢量圖形的一部分進(jìn)行編輯操作任務(wù)1利用Flash CS6繪制簡單圖形四、圖形對象的編輯(二)刪除、移動和復(fù)制對象刪除對象移動對象復(fù)制對象任務(wù)1利用Flash CS6繪制簡單圖形四、圖形對象的編輯(三)使用

5、橡皮工具擦除圖形對象橡皮工具及五個(gè)擦除模式按鈕標(biāo)準(zhǔn)擦除擦除填色擦除線條擦除所選填充內(nèi)部擦除任務(wù)1利用Flash CS6繪制簡單圖形四、圖形對象的編輯(四)對圖形對象的常用編輯1.對圖形對象的大小進(jìn)行縮放2.改變圖形對象的中心點(diǎn)位置3.旋轉(zhuǎn)圖形對象4.使圖形對象發(fā)生切變?nèi)蝿?wù)1利用Flash CS6繪制簡單圖形四、圖形對象的編輯(五)對多個(gè)圖形對象的編輯組合多個(gè)對象的層次對齊對象多個(gè)對象分配到層調(diào)整多個(gè)對象的位置任務(wù)1利用Flash CS6繪制簡單圖形五、使用Flash CS6繪制簡單圖形實(shí)例新建圖形元件繪制樹葉圖形給繪制好的樹葉上色創(chuàng)建樹葉組圖形元件創(chuàng)建樹枝并合成樹形狀12345任務(wù)2制作基本動

6、畫一、認(rèn)識形狀補(bǔ)間動畫(一)形狀補(bǔ)間動畫的概念在Flash的“時(shí)間軸”面板上，在一個(gè)時(shí)間點(diǎn)(關(guān)鍵幀)繪制一個(gè)形狀，然后在另一個(gè)時(shí)間點(diǎn)(關(guān)鍵幀)更改該形狀或繪制另一個(gè)形狀，F(xiàn)lash根據(jù)兩者之間幀的值或形狀來創(chuàng)建的動畫被稱為形狀補(bǔ)間動畫。這是Flash制作動畫的一般方法。任務(wù)2制作基本動畫一、認(rèn)識形狀補(bǔ)間動畫(二)構(gòu)成形狀補(bǔ)間動畫的元素形狀補(bǔ)間動畫可以實(shí)現(xiàn)兩個(gè)圖形之間顏色、形狀、大小、位置的相互變化，使用的元素多為用鼠標(biāo)繪制出的形狀。如果使用圖形元件、按鈕、文字，則必須先分離對象然后再進(jìn)行變形。任務(wù)2制作基本動畫一、認(rèn)識形狀補(bǔ)間動畫(三)創(chuàng)建形狀補(bǔ)間動畫的方法在“時(shí)間軸”面板上動畫開始播放的地方

7、創(chuàng)建或選擇一個(gè)關(guān)鍵幀并設(shè)置要開始變形的形狀，一般一幀中以一個(gè)對象為好，多個(gè)對象可以通過增加層來解決。在動畫結(jié)束處創(chuàng)建或選擇一個(gè)關(guān)鍵幀并設(shè)置要變成的形狀，右鍵單擊開始幀，選擇“創(chuàng)建補(bǔ)間形狀”，此時(shí)，“時(shí)間軸”面板上的變化如圖所示，一個(gè)形狀補(bǔ)間動畫即創(chuàng)建完畢。形狀補(bǔ)間動畫任務(wù)2制作基本動畫一、認(rèn)識形狀補(bǔ)間動畫(四)認(rèn)識形狀補(bǔ)間動畫的“屬性”面板Flash的“屬性”面板隨鼠標(biāo)選定的對象不同而發(fā)生相應(yīng)的變化。當(dāng)建立了一個(gè)形狀補(bǔ)間動畫后，單擊時(shí)間幀，彈出“屬性”面板，如圖所示。形狀補(bǔ)間動畫的“屬性”面板任務(wù)2制作基本動畫二、使用形狀補(bǔ)間動畫創(chuàng)建文字變形動畫創(chuàng)建新文檔輸入文字并打散測試并保存動畫任務(wù)2制作

8、基本動畫三、添加形狀提示的文字動畫形狀提示的作用添加形狀提示的方法添加形狀提示的技巧任務(wù)2制作基本動畫四、認(rèn)識動作補(bǔ)間動畫(一)動作補(bǔ)間動畫的概念(二)構(gòu)成動作補(bǔ)間動畫的元素(三)形狀補(bǔ)間動畫和動作補(bǔ)間動畫的區(qū)別(四)創(chuàng)建動作補(bǔ)間動畫的方法(五)認(rèn)識動作補(bǔ)間動畫的“屬性”面板任務(wù)2制作基本動畫五、使用動作補(bǔ)間動畫創(chuàng)建小球運(yùn)動動畫(一)創(chuàng)建新文檔(二)創(chuàng)建小球元件(三)測試并保存動畫(四)小球運(yùn)動的變化1漸隱漸顯(五)小球運(yùn)動的變化2變小變大(六)小球運(yùn)動的變化3按指定路徑運(yùn)動任務(wù)2制作基本動畫六、認(rèn)識遮罩動畫1遮罩的概念2構(gòu)成遮罩層和被遮罩層的元素3創(chuàng)建遮罩的方法4遮罩中可以使用的動畫形式5應(yīng)

9、用遮罩時(shí)的技巧任務(wù)2制作基本動畫七、使用遮罩創(chuàng)建動畫 (一)創(chuàng)建影片文檔 選擇菜單中的“文件”“新建”命令，在彈出的面板中選擇“常規(guī)”“ActionScript 3. 0”選項(xiàng)，新建一個(gè)文件大小為400 X 400像素的Flash文件，背景顏色設(shè)為黑色，如圖所示。任務(wù)2制作基本動畫七、使用遮罩創(chuàng)建動畫(二)創(chuàng)建元件1.創(chuàng)建“線條”元件任務(wù)2制作基本動畫七、使用遮罩創(chuàng)建動畫(二)創(chuàng)建元件2.創(chuàng)建“線條組”元件任務(wù)2制作基本動畫七、使用遮罩創(chuàng)建動畫(二)創(chuàng)建元件3.創(chuàng)建“閃光”元件任務(wù)2制作基本動畫七、使用遮罩創(chuàng)建動畫(二)創(chuàng)建元件4.創(chuàng)建“紅星”元件任務(wù)2制作基本動畫七、使用遮罩創(chuàng)建動畫(二)創(chuàng)

10、建元件5.創(chuàng)建動畫動畫最終效果任務(wù)2制作基本動畫八、認(rèn)識骨骼動畫步驟：使用骨骼工具將多個(gè)元件實(shí)例進(jìn)行骨骼綁定在某幀處移動一個(gè)骨骼帶動相鄰骨骼運(yùn)動重復(fù)第2步，直到動畫設(shè)置完成任務(wù)2制作基本動畫九、創(chuàng)建骨骼動畫(一)創(chuàng)建影片文檔(二)創(chuàng)建元件(三)創(chuàng)建骨架(四)創(chuàng)建骨骼動畫(五)測試并保存動畫任務(wù)2制作基本動畫十、創(chuàng)建形狀骨骼動畫創(chuàng)建影片文檔創(chuàng)建形狀測試并保存動畫任務(wù)3設(shè)計(jì)網(wǎng)站的動態(tài)按鈕一、認(rèn)識Flash CS6的按鈕“創(chuàng)建新元件”對話框按鈕的四個(gè)幀任務(wù)3設(shè)計(jì)網(wǎng)站的動態(tài)按鈕二、按鈕的使用方法(1)常用法:第1,2,3幀顏色不同，中心點(diǎn)要對齊，第4幀的顏色可任意選擇，面積大小就是鼠標(biāo)的反應(yīng)區(qū)域大小。

11、(2)隱藏按鈕:第1幀是空白的關(guān)鍵幀，第2幀是要顯示的內(nèi)容，第3,4幀可與第2幀相同。(3)透明按鈕(也稱隱形按鈕):只有第4幀顯示反應(yīng)區(qū)域，第1,2,3幀為空白幀。(4)按鈕的第2,3,4幀可以放聲音文件，被觸發(fā)的時(shí)候，聲音就會播放。(5)按鈕里不能放置按鈕元件，但可以放置影片剪輯。(6)文字按鈕是含有文字的按鈕，最好是分兩層:一層放文字，一層放反應(yīng)區(qū)域。任務(wù)3設(shè)計(jì)網(wǎng)站的動態(tài)按鈕三、按鈕制作實(shí)例基本按鈕的制作文字按鈕的制作任務(wù)3設(shè)計(jì)網(wǎng)站的動態(tài)按鈕四、使用按鈕來控制影片的播放認(rèn)識“動作”面板動作腳本的分類幀動作腳本按鈕動作腳本任務(wù)4在Flash中插入音頻和視頻一、在Flash中應(yīng)用聲音(一)將聲音導(dǎo)入Flash(二)引用聲音(三)聲音屬性的設(shè)置和編輯任務(wù)4在Flash中插入音頻和視頻二、在Flash中應(yīng)用視頻(一)Flash支持的視頻類型(二)導(dǎo)入視頻(三)視頻特效任務(wù)5利用Flash發(fā)布和保存作品一、Flash作品的優(yōu)化(一)在制作靜態(tài)元素時(shí)進(jìn)行優(yōu)化(二)在制作動