《網(wǎng)頁動畫設(shè)計與制作》講義

1、1 / 6網(wǎng)頁動畫設(shè)計與制作講義學(xué)習(xí)指導(dǎo)： 在你學(xué)習(xí)本課程之前，你應(yīng)該要先學(xué)習(xí)網(wǎng)頁美術(shù)設(shè)計課程和用戶界面設(shè)計課程，對 網(wǎng)頁有了基本的認(rèn)識。引言網(wǎng)頁動畫設(shè)計與制作課程，確定兩個制作項目案例：Flash交互動畫廣告制作和HTML5交互動畫廣告制作。 網(wǎng)頁動畫廣告具有傳播范圍廣、 交互性強、 針對性強并且能夠精確統(tǒng)計 受眾的數(shù)量和接受程度等種種傳統(tǒng)廣告不可比擬的優(yōu)勢，受到了廣大廣告主的歡迎， 成為了品牌推廣、商業(yè)活動等等重要的宣傳手段之一。矚慫潤厲釤瘞睞櫪廡賴賃軔。目前網(wǎng)頁動畫廣告的市場正在以驚人的速度增長，網(wǎng)頁動畫廣告發(fā)揮的效用越來越顯得重 要。以致廣告界甚至認(rèn)為互聯(lián)網(wǎng)絡(luò)將超越路牌，成為傳統(tǒng)四大媒

2、體（電視、廣播、報紙、雜 志）之后的第五大媒體。因而眾多國際級的廣告公司都成立了專門的 “網(wǎng)絡(luò)媒體分部 ”，以開 拓網(wǎng)頁動畫廣告的巨大市場。聞創(chuàng)溝燴鐺險愛氌譴凈禍測。定義什么是網(wǎng)頁動畫廣告？網(wǎng)頁動畫廣告指運用專業(yè)的廣告橫幅、 文本鏈接、 多媒體的方法， 在 互聯(lián)網(wǎng)刊登或發(fā)布廣告， 通過網(wǎng)絡(luò)傳遞到互聯(lián)網(wǎng)用戶的一種高科技廣告運作方式。殘騖樓諍錈 瀨濟溆塹籟婭騍。學(xué)習(xí)目標(biāo) 通過任務(wù)引領(lǐng)型的項目活動，熟悉平面設(shè)計軟件Photoshop和Illustrator， 網(wǎng)頁動畫制作軟 件Flash和Edge,并能將這些軟件運用到網(wǎng)頁動畫設(shè)計與制作中，熟悉網(wǎng)頁動畫設(shè)計與制作的一般步驟，熟悉在設(shè)計過程中常用到的色

3、彩搭配、圖形組合、界面布局知識，以完整網(wǎng)頁 動畫設(shè)計為任務(wù),熟悉設(shè)計過程中的重要環(huán)節(jié)：項目分析與理解、UI界面分析、交互動作設(shè)計表現(xiàn)、 動畫和節(jié)奏制作規(guī)劃等。 形成良好的團結(jié)協(xié)作精神, 主動適應(yīng)團隊工作的職業(yè)素 養(yǎng)。釅錒極額閉鎮(zhèn)檜豬訣錐顧葒。職業(yè)能力培養(yǎng)目標(biāo) 能了解網(wǎng)頁動畫設(shè)計與制作涉及的相關(guān)行業(yè)及崗位工作內(nèi)容。能了解網(wǎng)頁動畫設(shè)計與制作的通用制作流程。能了解網(wǎng)頁動畫制作工具Adobe Flash和Adobe Edge的操作使用規(guī)范。 能掌握網(wǎng)頁動畫設(shè)計方法及基本制作步驟。能掌握運用Adobe Flash、Adobe Edge等軟件制作網(wǎng)頁動畫的基本方法。 能具備綜合運用各方面知識設(shè)計并制作網(wǎng)頁

4、動畫的基本能力。1.1、網(wǎng)頁動畫廣告的歷史和前景據(jù)艾瑞咨詢集團近日發(fā)布的一份中國網(wǎng)絡(luò)廣告市場份額報告預(yù)測,2011年中國網(wǎng)絡(luò)廣告市場規(guī)模將達(dá)到370億元, 與2007年的106億元相比增加兩倍多。 報告對2007年中國網(wǎng) 絡(luò)廣告市場份額進(jìn)行了分析,去年中國網(wǎng)絡(luò)廣告持續(xù)快速增長,市場規(guī)模達(dá)106億元,同比增長753。其中, 品牌廣告和搜索引擎廣告都不同程度推動中國網(wǎng)絡(luò)廣告市場規(guī)模增長,其中品牌廣告同比增長653,搜索引擎廣告1086。彈貿(mào)攝爾霽斃攬磚鹵廡詒爾。1.2、網(wǎng)頁動畫廣告的優(yōu)勢（1）網(wǎng)頁動畫廣告的傳播沖破了時間和空間的限制通過國際互聯(lián)網(wǎng)絡(luò)把廣告信息24小時不間斷地傳播到世界各地。 只要具

5、備上網(wǎng)條件, 任何 人在任何地點都可以閱讀。謀蕎摶篋飆鐸懟類蔣薔點鉍。（2）網(wǎng)頁動畫廣告可以精確進(jìn)行受眾信息的統(tǒng)計在互聯(lián)網(wǎng)上可以通過廣告的報表系統(tǒng)可以精確的統(tǒng)計出廣告有多少次點擊量,以及具體是什么地方的用戶,在什么時間段等等即時的數(shù)據(jù)和信息。從而有助于客商正確評估廣告效果, 審定廣告投放策略，以便達(dá)到更好的廣告投放效果。廈礴懇蹣駢時盡繼價騷巹癩。（3）網(wǎng)頁動畫廣告?zhèn)鞑ツＪ降慕换バ?、人性?在互聯(lián)網(wǎng)廣告中，用戶被賦予了相當(dāng)大的主動性，用戶可以跟內(nèi)容之間發(fā)生很多交互行為， 比如用戶可以根據(jù)主觀意愿隨意改變信息的來源、 順序、數(shù)量等等， 而內(nèi)容本身也會根據(jù)用 戶的信息、 操作的習(xí)慣等等調(diào)整信息內(nèi)容、

6、 改變信息顯示方式， 從而更加迎合用戶的需要達(dá) 到2 / 6交互的目的。 所以我們在網(wǎng)上瀏覽的時候可以關(guān)閉或者縮小廣告， 也會發(fā)現(xiàn)當(dāng)我們?yōu)g覽數(shù) 碼產(chǎn)品內(nèi)容的時候，呈現(xiàn)的廣告也恰好是關(guān)于數(shù)碼產(chǎn)品主題的， 而且如果受眾對這個廣告感 興趣的話還可以點擊對于的按鈕獲取更多的信息。 這樣廣告廠商就可以直接更潛在的消費者 建立了某種意義上的聯(lián)系，如果加上電子商務(wù)的配合，完全可以實現(xiàn)實際的購買消費行為。煢楨廣鰳鯡選塊網(wǎng)羈淚鍍齊。（4）網(wǎng)頁動畫廣告的多媒體性 隨著互聯(lián)網(wǎng)逐漸發(fā)展成實時的、 動態(tài)的、 交互的多媒體世界時， 網(wǎng)頁動畫廣告也同樣的具有 非常強烈的多媒體特征。網(wǎng)頁動畫廣告可以把文字、圖片、聲音、動畫、

7、三維、影視等等各 個方面結(jié)合起來，創(chuàng)造出美輪美奐的視覺效果。鵝婭盡損鵪慘歷蘢鴛賴縈詰。1.3、網(wǎng)頁動畫廣告的類型（1）、網(wǎng)幅廣告（Banner） 網(wǎng)幅廣告是互聯(lián)網(wǎng)上最常見、 最基礎(chǔ)、 最流行的一種廣告形式， 約占所有互聯(lián)網(wǎng)廣告的百分 之六十。網(wǎng)幅廣告一般以限定尺度表現(xiàn)商家廣告內(nèi)容的圖片形式，放置在廣告商的頁面上。 網(wǎng)幅廣告從外形上主要有橫幅廣告、 豎幅廣告和方形廣告三種； 網(wǎng)幅廣告從運動形態(tài)上分可 以分為靜態(tài)廣告、動畫廣告和交互廣告三種?；[叢媽羥為贍僨蟶練淨(jìng)櫧撻。（2）、視頻廣告 網(wǎng)絡(luò)視頻廣告其實就是電視廣告中網(wǎng)絡(luò)媒介上的移植， 主要的投放方式有兩種。 一種是投放 在傳統(tǒng)網(wǎng)頁上的播放視窗， 基

8、本上是在不影響網(wǎng)頁載入的情況下在網(wǎng)頁的左下角或者其他位 置出現(xiàn)視頻播放窗口來播放廣告， 當(dāng)然用戶可以關(guān)閉和縮小該窗口； 而另外一種就是投放在 網(wǎng)絡(luò)視頻中貼片廣告， 就是人們在網(wǎng)上觀看視頻的時候， 在正是內(nèi)容播放的前后可能會有幾 秒鐘的插播廣告，預(yù)頌圣鉉儐歲齦訝驊糴買闥。（3）、交互式廣告 交互式廣告的特點在于廣告?zhèn)鬟_(dá)的核心在于交互操作所呈現(xiàn)的信息傳達(dá)。 本來很不起眼的廣 告正是由于受眾的交互操作而產(chǎn)生了視覺上的巨大變化和感官刺激， 這是這種交互過程的信 息傳遞即達(dá)到廣告宣傳的目的， 也讓受眾在不知不覺中加深了廣告內(nèi)容的印象。 目前網(wǎng)絡(luò)上 常用的交互式廣告有交互游戲性廣告、 條幅擴展式廣告兩種，

9、 當(dāng)然還有一些創(chuàng)意性的交互廣 告。滲釤嗆儼勻諤鱉調(diào)硯錦鋇絨。（4）、推廣網(wǎng)站廣告 推廣網(wǎng)站是現(xiàn)在網(wǎng)頁動畫廣告整體營銷戰(zhàn)略中非常重要的一個環(huán)節(jié)， 尤其是對品牌概念推廣 或者新產(chǎn)品的推廣。1.4、網(wǎng)頁動畫廣告的要素（1）廣告主 廣告主即廣告的傳播者，網(wǎng)頁動畫廣告的廣告主就是通過網(wǎng)絡(luò)發(fā)布自己的廣告內(nèi)容的企業(yè)、 機構(gòu)或個人。（2）廣告內(nèi)容 廣告內(nèi)容是廣告要素的主體，對于受眾，他們直接接觸的就是廣告內(nèi)容。（3）廣告媒介 廣告媒介是指傳遞廣告訊息的載體。網(wǎng)頁動畫廣告的媒介就是國際互聯(lián)網(wǎng)絡(luò)。更具體地說， 網(wǎng)上一個個Web頁面，就是網(wǎng)頁動畫廣告的載體。網(wǎng)頁動畫廣告媒介與傳統(tǒng)廣告媒介最大 的不同是網(wǎng)頁動畫廣告媒

10、介所具有的實時互動性， 因此也被稱為互動媒介。 在網(wǎng)上， 人們可 以自主地搜索、 選擇廣告，想看什么就看什么，對于受眾，這種廣告媒介更具自主性和娛樂 性。鐃誅臥瀉噦圣騁貺頂廡縫勵。（4）廣告受眾 廣告受眾即廣告所針對的目標(biāo)對象， 也可以解釋為廣告訊息的接收者。 網(wǎng)頁動畫廣告的受眾 就是廣大上網(wǎng)的人 網(wǎng)民擁締鳳襪備訊顎輪爛薔報贏。（5）廣告效果廣告效果指一次特定時期內(nèi)的廣告所取得的結(jié)果， 以及與預(yù)先目標(biāo)的距離。 廣告的最終效果 直接體現(xiàn)廣告的成功與否。贓熱俁閫歲匱閶鄴鎵騷鯛漢。1.5、網(wǎng)頁動畫廣告和FLASH1）、Flash和Photoshop、Illustrator實現(xiàn)無縫鏈接，F(xiàn)lash軟件

11、可支持直接導(dǎo)入PSD文件 和AI文件并保留結(jié)構(gòu)和圖層，把你設(shè)計的創(chuàng)意快速導(dǎo)入到Flash軟件中開始制作。壇摶鄉(xiāng) 囂懺蔞鍥鈴氈淚躋馱。2）、Flash基于時間軸的動畫是基于傳統(tǒng)動畫的方式，并給予了高度的自由度，為你的網(wǎng)頁 動畫廣告增添動感。蠟變黲癟報倀鉉錨鈰贅籜葦。3）、Flash提供的繪圖工具可以讓你輕松繪制常見的矢量圖形，并配合色彩功能可以繪制你 想要的形狀和色彩效果買鯛鴯譖曇膚遙閆擷凄屆嬌。4）、使用新的ActionScript 3.0語言節(jié)省時間,該語言具有改進(jìn)的性能、增強的靈活性及更 加直觀和結(jié)構(gòu)化3 / 6的開發(fā)，為你的網(wǎng)頁動畫廣告加入非凡的交互功能。綾鏑鯛駕櫬鶘蹤韋轔糴飆鈧。5）

12、、使用全面的視頻支持，創(chuàng)建、編輯和部署流和漸進(jìn)式下載的Flash Video。使用獨立的視 頻編碼器、Alpha通道支持、 高質(zhì)量視頻編解碼器、 嵌入的提示點、 視頻導(dǎo)入支持、QuickTime導(dǎo)入和字幕顯示等等，確保獲得最佳的視頻體驗。驅(qū)躓髏彥浹綏譎飴憂錦諑瓊。6）、使用Flash Lite軟件為移動設(shè)備創(chuàng)建交互式應(yīng)用程序和界面。1.6、網(wǎng)頁動畫廣告和HTML5（Edge）HTML5網(wǎng)頁動畫制作（Adobe Edge Animate）主要是通過HTML5、JavaScript、jQuery和CSS3制作跨平臺、 跨瀏覽器的網(wǎng)頁動畫， 其生成的基于HTML5的互動媒體能更方便的通過互聯(lián) 網(wǎng)傳輸

13、，特別是更兼容移動互聯(lián)網(wǎng)。貓蠆驢繪燈鮒誅髏貺廡獻(xiàn)鵬。Adobe Edge Animate,目的是在瀏覽器互動媒體領(lǐng)域取代Flash平臺，創(chuàng)作HTML5動畫，在未來的網(wǎng)頁動畫領(lǐng)域發(fā)揮更大的作用。其特點：鍬籟饗逕瑣筆襖鷗婭薔嗚訝。建立的應(yīng)用文件非常小而精煉， 可以彌補移動設(shè)備的儲存卡容量相對較小， 也減輕設(shè)備的運 算量，從而節(jié)省電源最優(yōu)化的程序代碼及圖片， 可以彌補移動設(shè)備的連線速度較慢的問題， 節(jié)省移動設(shè)備的網(wǎng)絡(luò) 流量2.1、網(wǎng)頁動畫廣告的策劃流程（1） 、確定網(wǎng)頁動畫廣告的預(yù)定目標(biāo) 網(wǎng)頁動畫廣告的目的就是通過廣告內(nèi)容信息的傳達(dá)使消費者能夠?qū)ζ放苹蛘弋a(chǎn)品有一定的 認(rèn)知和認(rèn)同感，從而觸動消費行為。

14、構(gòu)氽頑黌碩飩薺齦話騖門戲。（2） 、確定網(wǎng)頁動畫廣告的目標(biāo)群體簡單來說就是確定網(wǎng)頁動畫廣告希望讓哪些人來看，確定他們是哪個群體、 哪個階層、 哪個區(qū)域。（3） 、進(jìn)行網(wǎng)絡(luò)廣告創(chuàng)意及策略選擇在這個策劃環(huán)節(jié)中， 廣告主要確定廣告的形式， 確定廣告內(nèi)容或者主題， 比如廣告標(biāo)題是一 句吸引消費者的帶有概括性、 觀念性和主導(dǎo)性的語言。 發(fā)展互動性： 如在網(wǎng)頁動畫廣告上增 加游戲功能， 提高訪問者對廣告的興趣。 合理安排網(wǎng)絡(luò)廣告發(fā)布的時間因素： 網(wǎng)頁動畫廣告4 / 6的時間策劃是其策略決策的重要方面。輒嶧陽檉籪癤網(wǎng)儂號澩蠐鑭。(4) 、選擇網(wǎng)絡(luò)廣告發(fā)布渠道及方式網(wǎng)上發(fā)布廣告的渠道和形式眾多，各有長短2.2

15、、網(wǎng)絡(luò)廣告的表現(xiàn)元素(1)、文字元素在廣告設(shè)計中，文字是必不可少的一種元素在一個網(wǎng)絡(luò)廣告創(chuàng)意中，必定有廣告的標(biāo)題、 廣告內(nèi)容等等(2)、圖形元素和動態(tài)圖形圖形元素特別是動態(tài)圖形元素是比文字更直觀的信息元素，也是最容易體現(xiàn)藝術(shù)性和設(shè)計性的元素。而動態(tài)圖形更是能夠在有限的廣告空間中把運動的圖片信息通過速度、顏色、大小等等不同的運動組合方式把更多的信息傳達(dá)給觀眾。堯側(cè)閆繭絳闕絢勵蜆贅瀝紕。(3)、視頻元素視頻元素是最近幾年網(wǎng)頁動畫廣告逐漸風(fēng)行起來的一個廣告視覺元素, 頻的視覺沖擊力更強，感官刺激更直觀，具有強烈的吸引用戶的能力。減。(4)、交互元素網(wǎng)頁動畫廣告中交互元素主要指的是用戶和廣告進(jìn)行交互操

16、作的方式。差異性便會產(chǎn)生不同的交互動作模式，常用的主要有：點擊(on Click)、鼠標(biāo)移動(onMouseMove)、移上去(onMouseOver)、移開時(onMouseOut)、拖動(startDrag)、 停止拖動(stopDrag)和鍵盤的操作等等。凍鈹鋨勞臘錯癇婦脛糴鈹賄。III III!探2liltUUJ相比于文字圖片，視識饒鎂錕縊灩筧嚌儼淒儂由于交互設(shè)計目的的3.1、互動汽車廣告實例制作3.2、大眾汽車互動廣告實例制作5 / 6講解網(wǎng)頁動畫廣告中比較流行的一種廣告形式，就是交互廣告制作。通過實例的操作講解了你需要知道的關(guān)于如何發(fā)揮FLASH中交互腳本的創(chuàng)造性運用結(jié)合廣告的動畫

17、技巧來創(chuàng)作出令人印象深刻的交互廣告。而所涉及的交互腳本AS3則是整個交互性的核心所在，特別在后 一個廣告實例中，我們學(xué)習(xí)了如何給對象綁定不同的鼠標(biāo)事件（鼠標(biāo)移上去、鼠標(biāo)離開、鼠標(biāo)移到）以及循環(huán)事件的方法，如何使用if判斷語句來進(jìn)行一些巧妙的應(yīng)用。AS3的語法和類庫都比較復(fù)雜，況且還有很多的外置庫的開發(fā)，但是對于網(wǎng)頁動畫廣告來說，并沒有涉及到非常復(fù)雜的交互應(yīng)用層面的腳本，所以這些腳本還并不是非常復(fù)雜和難以理解的，應(yīng)該也可以被廣大的設(shè)計人員所接受并能理解應(yīng)用。恥諤銪滅縈歡煬鞏鶩錦聰櫻。4.1、手風(fēng)琴橫幅交互動畫廣告實例制作Nuevo PaxsnlYaque *Nuevo PassalYa鼻口bes que it siente.wmfts.voSk wnq rn .r /pnA aiFNuevo PassatYa s白b疤生勺