《網(wǎng)頁美工》課件-第6章 網(wǎng)頁動畫

動畫是一種動態(tài)的視覺上的表達、形式和結(jié)構(gòu)，并隨時間推移而變化。動畫十分普遍，用途不盡相同，人們在計算機上、尤其是網(wǎng)頁上和在線廣告中常?？梢钥吹健Ｒ恍┰O(shè)計者使用動畫來傳遞信息，并認為在有限的計算機屏幕上動畫比文本有用的多，但是人們對于動畫的效果卻要小心謹慎。多數(shù)人在多數(shù)情況下認為網(wǎng)頁上的動畫是令人討厭的。很多瀏覽者在瀏覽網(wǎng)頁時常常會被網(wǎng)頁上的動畫所干擾，或者被分散了注意力，特別是當動畫不能給瀏覽者正在進行的工作帶來任何信息的時候。這種動畫被認為是對瀏覽者的“非主要信息刺激”或者“輔助刺激”。換句話說，他們不能對瀏覽者正在進行的查找數(shù)據(jù)任務(wù)或者當前所需要的信息帶來任何有價值的信息。這類非主要信息刺激動畫會引起視覺上的干擾，這種干擾影響了瀏覽者搜尋信息的能力。無關(guān)緊要的動畫經(jīng)常出現(xiàn)或者突然出現(xiàn)，往往會分散瀏覽者在有用信息上的注意力。因此，當人們在網(wǎng)頁上搜尋有用信息時，常常會受到這些動畫的干擾，正確獲得所需信息的時間也隨之變長，這十分令人討厭。第6章網(wǎng)頁動畫6.1網(wǎng)絡(luò)動畫的分類6.1.1FLAS動畫

FLASH動畫是近幾年出現(xiàn)的一種新的事物，他是由美國的MACROMEDIA公司推出的一款多媒體動畫制作軟件。它是一種交互式動畫設(shè)計工具，用它可以將音樂，聲效，動畫方便地融合在一起，以制作出高品質(zhì)的動態(tài)效果，或者說是動畫。6.1.2.GIF動畫

GIF廣泛支持Internet標準。支持無損耗壓縮和透明度。動畫GIF很流行，易于使用許多GIF動畫程序創(chuàng)建。

GIF只支持256色調(diào)色板，因此，詳細的圖片和寫實攝影圖像會丟失顏色信息，而看起來卻是經(jīng)過調(diào)色的。在大多數(shù)情況下，無損耗壓縮效果不如JPEG格式或PNG格式。GIF支持有限的透明度，沒有半透明效果或褪色效果6.1.3三維動畫三維動畫又稱3D動畫，是近年來隨著計算機軟硬件技術(shù)的發(fā)展而產(chǎn)生的一新興技術(shù)。三維動畫軟件在計算機中首先建立一個虛擬的世界，設(shè)計師在這個虛擬的三維世界中按照要表現(xiàn)的對象的形狀尺寸建立模型以及場景，再根據(jù)要求設(shè)定模型的運動軌跡、虛擬攝影機的運動和其它動畫參數(shù)，最后按要求為模型賦上特定的材質(zhì)，并打上燈光。當這一切完成后就可以讓計算機自動運算，生成最后的畫面。三維flash是利用計算機圖形學(xué)技術(shù)，將需要展示的產(chǎn)品在計算機中先進行逼真的三維模擬運行演示，然后再通過專業(yè)軟件壓縮轉(zhuǎn)換成一個完全適合在網(wǎng)頁上流暢運行的flash文件。三維flash在網(wǎng)頁上運行很流暢，瀏覽者無需下載插件，打開網(wǎng)頁就可看到產(chǎn)品演示。6.2網(wǎng)絡(luò)動畫的制作6.2.1常用軟件制作動畫的軟件包括：MayaSoftimage3DmaxLIGHTWAVEAlias是三維動畫制作軟件Animator、ANIMO、TOONZ、RETASPRO商業(yè)二維動畫TOOBBOOMSTUDIO、HARMONY、SOLO、flash網(wǎng)頁二維動畫制作網(wǎng)絡(luò)中常見的flash動畫是用FLASH制作的，一些banner是由FLASH或者imageready制作的，當然三維軟件制作的動畫也可以通過插件轉(zhuǎn)為二維動畫。6.2.2傳輸速度網(wǎng)絡(luò)傳輸速度是相對固定的，在此前提下，網(wǎng)站的文件量越小，傳輸?shù)男畔⑺俣染驮娇欤匀藗円M可能的對網(wǎng)頁進行優(yōu)化。6.2.3風(fēng)格統(tǒng)一統(tǒng)一，是指設(shè)計作品的整體性，一致性。設(shè)計作品的整體效果是至關(guān)重要的，在設(shè)計中切勿將各組成部分孤立分散，那樣會使畫面呈現(xiàn)出一種枝蔓紛雜的凌亂效果。網(wǎng)頁上所有的圖像、文字，包括象背景顏色、區(qū)分線、字體、標題、注腳什么的，要統(tǒng)一風(fēng)格，貫穿全站。6.3網(wǎng)絡(luò)動畫的指導(dǎo)方針研究結(jié)果表明人們必須小心地設(shè)計網(wǎng)頁動畫以免對瀏覽者產(chǎn)生負面影響。以下列出設(shè)計網(wǎng)頁動畫的十個原則。1．不要干擾在重要信息上的注意力。2．避免混亂。3．設(shè)定合適的持續(xù)時間。4．管理布局和組織顯示對象。5．遵守顏色的慣例。6．使用文本和聽覺信息來輔助動畫。7．關(guān)注對符號學(xué)的探究。8．遵從合作原則。9．向迪斯尼學(xué)習(xí)。10．避免設(shè)計“近視”。上機作業(yè)：通欄類廣告通欄類廣告是指占據(jù)網(wǎng)頁主要頁面寬度的網(wǎng)絡(luò)廣告，具有極強的視覺效果。一般出現(xiàn)在網(wǎng)頁或是某一版面的頂部位置，是對單個商品進行的宣傳廣告，也可以是其他廣告的主要加盟廣告。凱達數(shù)碼廣告一、文件大小760×90，黃色。二、創(chuàng)建各個圖形元件1、導(dǎo)入圖片2、藍色矩形元件3、11個文本元件4、圓卷元件5、3個數(shù)碼元件三、創(chuàng)建各個影片剪輯元件1、“數(shù)碼動畫”影片剪輯，插入10個圖層，在所有圖層的第60貞插入貞。然后分別在各個圖層上制作各相應(yīng)的動畫效果。（注意：貞的先后順序）2、“VI動畫”影片剪輯，插入1個圖層，在所有圖層的第35貞插入貞。選擇圖層1，將VI元件拖到舞臺中，制作VI動畫效果。選擇圖層2，將文本8拖到舞臺中，制作文本8動畫效果。（注意：貞的先后順序）3、“文本1動畫”影片剪輯。將文本5拖到舞臺中，在圖層的第55貞插入貞，Ctrl+B打散文字將文字分散到各個圖層，然后制作相應(yīng)的文字動畫。選擇圖層1，將文本6和文本7分別拖到舞臺中，制作兩個文本動畫效果。（注意：貞的先后順序）。4、“文本2動畫”影片剪輯。選擇圖層1，將文本9拖到舞臺中，制作文本9動畫效果，在第50貞插入貞。插入圖層2，將文本10拖到舞臺中，制作文本10的動畫效果。（注意：貞的先后順序）四、合成動畫返回場景，插入4個圖層。1、選擇圖層1，將數(shù)碼動畫影片剪輯拖到舞臺中，在第60貞插入貞。2、選擇圖層2，在第60貞插入關(guān)鍵貞，將文本動畫1拖到舞臺中，在第115貞插入貞。3、選擇