【正文】 第九章 Flash網(wǎng)頁動畫設(shè)計(jì) Flash網(wǎng)頁動畫 設(shè)計(jì) 網(wǎng)頁設(shè)計(jì)藝術(shù) 主要內(nèi)容 網(wǎng)頁動畫的基本理論 1 Flash基本動畫設(shè)計(jì) 2 Flash網(wǎng)頁廣告設(shè)計(jì) 3 Flash導(dǎo)航設(shè)計(jì) 4 網(wǎng)頁動畫設(shè)計(jì)目前以采用 Flash制作動畫為主流，由于其卓越的視覺表現(xiàn)和互動效果，已經(jīng)被眾多網(wǎng)站所運(yùn)用。 Adobe Flash CS3能夠集圖形、聲音、動畫、視頻文件等各種多媒體素材為一體，制作出形式簡潔、內(nèi)容豐富、交互性強(qiáng)和極富感染力的動畫效果，為網(wǎng)頁設(shè)計(jì)提供了無限的創(chuàng)意空間。 網(wǎng)頁動畫的基本理論 ? 網(wǎng)頁動畫能以較小的面積吸引較多的注意力，對于要保證內(nèi)容豐富而有效面積有限的網(wǎng)頁設(shè)計(jì)而言，動畫形式無疑是一種極具吸引力的選擇。而對于追求點(diǎn)擊率為宗旨的廣告商來說，動畫形式的廣告更是上佳之選了。 ? 網(wǎng)頁動畫使信息從二維平面空間擴(kuò)展到時間的三維空間，為信息的展示提供了一個延伸的舞臺。通過時間的延續(xù)，網(wǎng)頁動畫能夠展示更多的網(wǎng)頁信息，并比靜態(tài)的圖像文字更具吸引力。 ? 網(wǎng)頁動畫能夠?qū)a(chǎn)品的展示以類似電影的形式展示出來，進(jìn)一步發(fā)揮圖形圖像的優(yōu)勢及突破平面靜態(tài)的局限，輔以適當(dāng)?shù)囊魳沸Ч?，能夠大大加?qiáng)表現(xiàn)的真實(shí)性、生動性和感染力，加強(qiáng)宣傳效果。而且能夠與網(wǎng)頁其它元素形成動靜對比，豐富了設(shè)計(jì)手段和表現(xiàn)形式，活躍網(wǎng)站的氣氛。 網(wǎng)頁動畫的特點(diǎn) ? 逐幀動畫是指構(gòu)成動畫的基本單位是幀，動畫由多幀畫面組成，每幀的內(nèi)容不同，前后相互聯(lián)系，后一幀畫面是前一幀的繼續(xù)。在逐幀動畫中，制作人員需要為動畫的每一幀創(chuàng)建內(nèi)容。網(wǎng)上常見的 GIF動畫就是典型的例子，動畫每一幀都是一幅圖片，因而文件比較大。 ? 漸變動畫是設(shè)定關(guān)鍵幀后，由軟件自動生成中間的變化過程。Flash動畫由于是矢量文件，文件小，動作銜接較好，可以實(shí)現(xiàn)連續(xù)變換的效果。 Flash漸變動畫分為運(yùn)動動畫和形狀動畫兩種。 網(wǎng)頁動畫的種類 ?1. 形式服務(wù)于內(nèi)容 網(wǎng)頁動畫的最重要的目的是信息的準(zhǔn)確傳達(dá)，形式為內(nèi)容服務(wù)、形式與內(nèi)容的統(tǒng)一是創(chuàng)意設(shè)計(jì)的出發(fā)點(diǎn)。在此前提下，尋找創(chuàng)意的突破口，達(dá)到既合情合理，又出人意料的效果。脫離內(nèi)容的表現(xiàn)形式將成為無本之木。內(nèi)容與形式的統(tǒng)一包括信息載體的選擇與信息內(nèi)容的統(tǒng)一、色彩與內(nèi)容的統(tǒng)一以及字體與內(nèi)容的統(tǒng)一等。有些頁面內(nèi)容不適合安排較多的動畫，這時設(shè)計(jì)者應(yīng)避免動畫過多地“抓”注意力，而忽視主題內(nèi)容的情形。 ? 視覺總是處在一個不斷運(yùn)動的狀態(tài)中，即使視覺主體是靜止不動的，視線也在按照視覺流程不斷搜索。如果網(wǎng)頁上某個區(qū)域是動畫形式，動靜對比使其引人注目。如果頁面上還有其它相當(dāng)?shù)膭赢媴^(qū)域，視知覺的生理本能，使視線游移于亮點(diǎn)之間，形成一條線；如果是多個動點(diǎn)，視線會游移于多點(diǎn)，每個點(diǎn)都未能得到足夠的關(guān)注，失去制作動畫的初衷。這一點(diǎn)在綜合網(wǎng)站的設(shè)計(jì)規(guī)劃中尤為重要。如果在頁面上必須出現(xiàn)不止一個動畫，也應(yīng)給予較大的區(qū)別，如采用面積的大小對比，或形成時間差別。 網(wǎng)頁動畫設(shè)計(jì)的原則 ? ? ? ? ? ? ? ? 網(wǎng)頁動畫的種類 Flash基本動畫設(shè)計(jì) Flash CS3軟件界面 ? 關(guān)鍵幀是特殊的幀，用于定義動畫中的變化。逐幀動畫每幀都是關(guān)鍵幀；補(bǔ)間動畫可以將動畫的變化的地方設(shè)置為關(guān)鍵幀，由 Flash自動創(chuàng)建關(guān)鍵幀之間的幀內(nèi)容，這也是 Flash動畫文件小的原因。 ? 沒有添加動畫對象的關(guān)鍵幀。在時間軸中，關(guān)鍵幀以實(shí)心圓表示，而空白關(guān)鍵幀以空心圓表示。 ? 顯示同一層上最后一個關(guān)鍵幀的內(nèi)容，用以時間的延續(xù)。在時間軸上，普通關(guān)鍵幀必須是跟在關(guān)鍵幀的后面，前面關(guān)鍵幀的內(nèi)容顯示在隨后的每個普通幀中，直到新的關(guān)鍵幀開始。 ?4．過渡幀（補(bǔ)間） 從起始關(guān)鍵幀到結(jié)束關(guān)鍵幀之間的許多幀。起始關(guān)鍵幀定義了對象在起始點(diǎn)的外觀，結(jié)束關(guān)鍵幀定義了對象在結(jié)束點(diǎn)的外觀?？梢詫?shí)現(xiàn)兩種動畫：動畫和形狀。 幀的類型 ? 選擇菜單“文件 |新建|Flash文件（ Action ）”，新建文件。 ? 使用工具箱中的文本工具，輸入“領(lǐng)跑者培訓(xùn)中心”文字，在下面屬性欄中設(shè)置文字大小與顏色。 制作逐幀動畫 ?3. 文字分離 現(xiàn)在文字是一個整體，選擇菜單“修改 |分離【 CTRL+B】 ”，將文字分離成獨(dú)立的文字。 制作逐幀動畫 ? 在時間線上單擊“圖層 1”右側(cè)時間軸上的第 2幀，單擊鼠標(biāo)右鍵，選擇“插入關(guān)鍵幀”（或按 【 F6】 鍵），同樣完成其它關(guān)鍵幀的插入，使時間線上出現(xiàn) 9個關(guān)鍵幀（因?yàn)橛?9個文字）。 制作逐幀動畫 制作 Flash動畫時，最重要的是正確使用幀。幀的操作一般有菜單和鼠標(biāo)右鍵展開快捷菜單兩種方法。 ?插入幀： 在插入幀之前，先單擊時間軸上需要插入幀的幀。可以選擇菜單“插入 |幀”，也可以單擊鼠標(biāo)右鍵選擇“插入幀”，快捷鍵 【 F5】 ；插入關(guān)鍵幀快捷鍵 【 F6】 。 ?刪除幀、關(guān)鍵幀或幀序列： 在選定該幀或序列后，選擇菜單“插入 |刪除幀”，或單擊右鍵選擇“刪除幀”。 ?移動幀或幀序列： 在選定該幀或序列后，拖動到所需的位置。 ?復(fù)制幀或幀序列： 在選定該幀或序列后（復(fù)制多幀需要按住 【 SHIFT】 進(jìn)行多選），單擊右鍵“復(fù)制幀”，選定目標(biāo)幀位置，單擊右鍵“粘貼幀”，用編輯菜單也可以。 ?轉(zhuǎn)換關(guān)鍵幀為普通幀： 右鍵單擊該關(guān)鍵幀，選擇“清除關(guān)鍵幀”命令。 ?修改補(bǔ)間序列長度： 可以拖動起始與結(jié)束關(guān)鍵幀的位置，也可以單擊關(guān)鍵幀之間的幀，再右鍵單擊，選擇插入幀或刪除幀。 制作逐幀動畫 ? 單擊時間軸上第一個關(guān)鍵幀，選擇使用工具欄中的“選擇工具”單擊文字“領(lǐng)”，然后設(shè)置屬性欄中的文字顏色為橙色。選擇第二個關(guān)鍵幀，選擇“跑”字，設(shè)置為橙色。采用同樣的方法依次設(shè)置其它關(guān)鍵幀。 制作逐幀動畫 ? 選擇菜單“控制 |測試影片 【 CTRL+ENTER】 ”，測試影片效果，我們發(fā)現(xiàn)動畫有些快，選擇菜單“修改 |文檔”，設(shè)置幀頻為 6fps（幀