AE動(dòng)畫在H5設(shè)計(jì)中的應(yīng)用研究

劉潔羽

摘 要：伴隨智能手機(jī)和互聯(lián)網(wǎng)移動(dòng)終端的普及，新媒體文化市場(chǎng)日益發(fā)展，H5制作也逐漸走入人們的視野，各行各業(yè)把H5作為自身企業(yè)文化宣傳和品牌形象推廣的重要渠道，同時(shí)H5的設(shè)計(jì)與制作成了行業(yè)的新寵。目前動(dòng)畫技術(shù)已經(jīng)開始在H5視覺設(shè)計(jì)中嘗試應(yīng)用了。文章對(duì)AE（Adobe After Effects縮寫）動(dòng)畫技術(shù)在該行業(yè)內(nèi)的應(yīng)用進(jìn)行了分析，認(rèn)為動(dòng)畫技術(shù)的引用可以提高H5視頻類的用戶體驗(yàn)，拓寬H5的應(yīng)用領(lǐng)域。

關(guān)鍵詞：H5;AE動(dòng)畫

一、H5和AE概念解析

H5是指第五代的HTML（HyperText Markup Language），即第五代超文本標(biāo)記語言，也泛指所有由H5語言產(chǎn)生的數(shù)字產(chǎn)品。在日常生活中手機(jī)、平板等設(shè)備瀏覽的網(wǎng)頁以及互聯(lián)網(wǎng)上看到的大部分營(yíng)銷類、互動(dòng)類的網(wǎng)頁都是由設(shè)計(jì)人員用第五代超文本標(biāo)記語言編寫而成的。H5的優(yōu)勢(shì)在于不僅能夠提供常用的音頻、視頻、圖像、本體等的在線編輯，豐富消費(fèi)者的體驗(yàn)效果，而且很好地解決了PC、安卓等移動(dòng)終端設(shè)備地兼容問題，大大簡(jiǎn)化門檻的準(zhǔn)入制度，為中小企業(yè)的營(yíng)銷推廣等活動(dòng)節(jié)約了宣傳成本，受到越來越多企業(yè)和設(shè)計(jì)師的青睞。

借助H5的靜態(tài)、動(dòng)態(tài)展示可以使消費(fèi)者獲得新奇的觀察視角和觸控體驗(yàn)，例如用H5制作的婚禮電子邀請(qǐng)函和會(huì)議電子邀請(qǐng)函，接收者可以一邊聆聽背景音樂一邊閱讀具體的內(nèi)容，還可以通過H5平臺(tái)進(jìn)行交流互動(dòng)，如送上祝福、預(yù)祝會(huì)議順利結(jié)束或者分享轉(zhuǎn)發(fā)等新奇體驗(yàn)。H5編輯器的作用可概括為，能夠通過簡(jiǎn)便的操作幫助用戶制作出畫質(zhì)精良、互動(dòng)體驗(yàn)順暢，、視聽效果豐富的移動(dòng)終端營(yíng)銷作品（可以是鏈接也可以是APP）。H5的圖像、音頻、視頻、地理信息、本地存儲(chǔ)、脫機(jī)緩存、雙向通信、新表單功能等，能夠更好地滿足營(yíng)銷市場(chǎng)對(duì)移動(dòng)終端設(shè)備的“輕應(yīng)用化”需求，并且符合“互聯(lián)網(wǎng)+”時(shí)代的發(fā)展趨勢(shì)。缺點(diǎn)是這類軟件在視頻編輯領(lǐng)域由于缺乏技術(shù)沉淀，不能提供很好的視頻體驗(yàn)。

AE是Adobe After Effects的簡(jiǎn)稱，是動(dòng)畫設(shè)計(jì)領(lǐng)域較為專業(yè)的電腦動(dòng)畫設(shè)計(jì)軟件，是由美國(guó)Adobe軟件公司推出并不斷更新著的專業(yè)影音視頻處理的付費(fèi)軟件。AE被廣泛用于影視、動(dòng)畫制作、后期特效和多媒體應(yīng)用的設(shè)計(jì)與制作中，借助AE軟件設(shè)計(jì)師可以為觀者呈現(xiàn)絢麗多彩的視覺特效，例如好萊塢大片中各種震撼人心的科幻場(chǎng)面。AE不僅可以幫助使用者進(jìn)行2D和3D合成，還可以與其他Adobe軟件交叉使用。如Adobe公司的圖片處理軟件Adobe Photoshop（簡(jiǎn)稱PS），可以配合AE進(jìn)行靜態(tài)照片的制作與修改，利用AE對(duì)多個(gè)PS層的關(guān)鍵幀、路徑進(jìn)行合成操作，制作出動(dòng)效流暢的合成效果。簡(jiǎn)單來說，AE可以輕松地控制高級(jí)的二維動(dòng)畫，其高效的視頻處理能夠確保高質(zhì)量的視頻輸出，而AE強(qiáng)大的光效特效為動(dòng)畫作品增添了一些傳統(tǒng)手繪動(dòng)畫難以完成的創(chuàng)意。為消費(fèi)者提供更好的視頻體驗(yàn)。不足之處在于由于是收費(fèi)軟件其普及率和正版率不高，入門技術(shù)難度較大，需要專門培訓(xùn)和學(xué)習(xí)才能更好地使用和掌握這一技術(shù)。

二、 AE動(dòng)畫技術(shù)在H5中的運(yùn)用

第五代超文本標(biāo)記語言標(biāo)準(zhǔn)的確定和規(guī)范及其優(yōu)勢(shì)的日益顯現(xiàn)，使得各大互聯(lián)網(wǎng)平臺(tái)如微信、微博等爭(zhēng)相對(duì)H5產(chǎn)品進(jìn)行推廣和普及，短短時(shí)間內(nèi)H5頁面及相關(guān)產(chǎn)業(yè)大熱，各式各樣的H5畫面、視頻等產(chǎn)品的編輯制作工具如雨后春筍般拔地而起，兔展、WPS H5等軟件迅速走入大眾視野。此類H5制作軟件在平臺(tái)設(shè)計(jì)上自主性強(qiáng)，操作自由度高，方便了不懂代碼的非從事專業(yè)設(shè)計(jì)的人群，但是這也造成了H5產(chǎn)品的良莠不齊，特別是視頻類作品。由于HTML的可視化編輯領(lǐng)域的開放性，致使許多不具備動(dòng)畫視頻基礎(chǔ)的非專業(yè)人員也可從事相關(guān)行業(yè)。這就需要在H5制作平臺(tái)中引入專業(yè)的視頻設(shè)計(jì)制作平臺(tái)，AE就是這樣一個(gè)平臺(tái)。

對(duì)比國(guó)內(nèi)2016年和2017年熱門的H5產(chǎn)品，視頻類的H5作品在2017年呈現(xiàn)出爆發(fā)式的增長(zhǎng)，一方面是由于H5軟件技術(shù)的日益成熟，另一方面是因?yàn)橄M(fèi)者想要獲取更加豐富的視聽體驗(yàn)。而AE動(dòng)畫技術(shù)在完善視聽體驗(yàn)領(lǐng)域的技術(shù)積累可以很好地解決這一矛盾。通過調(diào)研發(fā)現(xiàn)，2017年度比較熱門的視頻類H5作品如《春運(yùn)馴獸記》《入職第一天，網(wǎng)易爸爸教我學(xué)做人》等已經(jīng)開始引入AE軟件，將視頻素材經(jīng)過AE軟件進(jìn)行特效處理后導(dǎo)入H5制作平臺(tái)進(jìn)行互動(dòng)等程序的制作，這類H5作品的視頻流暢性和特效效果是其它普通H5作品所無法比擬的，帶來的視覺體驗(yàn)也更好。AE的加入可以將簡(jiǎn)單的矢量特效以及動(dòng)態(tài)化的漫畫更加順暢地展現(xiàn)出來。很好地提升了視頻類H5作品的動(dòng)畫效果和體驗(yàn)。

如《春運(yùn)馴獸記》，可以說是國(guó)內(nèi)目前在H5版本編輯器中將AE后期動(dòng)畫運(yùn)用的相當(dāng)成功的案例。運(yùn)用AE直接完成了兩段動(dòng)態(tài)漫畫的制作。除了讓原本靜態(tài)的漫畫動(dòng)了起來，還運(yùn)用AE的遮罩圖層和路徑動(dòng)畫功能完成了一些簡(jiǎn)單的煙霧和發(fā)光特效，在使漫畫人物動(dòng)起來的同時(shí)，運(yùn)用鏡頭的運(yùn)動(dòng)和后期剪輯令視頻看起來接近傳統(tǒng)手繪二維動(dòng)畫的效果，滿足用戶視覺觀賞體驗(yàn)質(zhì)量的同時(shí)又大大壓縮了視頻制作的工作量以及各格式體量。目前H5的制作編輯器只能導(dǎo)入格式體量較小的視頻文件，應(yīng)用AE制作這種輕量的動(dòng)畫能很好地利用H5的現(xiàn)有功能。

由此可見，AE軟件的引入符合當(dāng)下H5的發(fā)展趨勢(shì)。目前AE動(dòng)畫技術(shù)廣泛應(yīng)用于視頻類、動(dòng)畫類的H5作品制作中，提高了原畫繪制的利用率。其帶來的趣味化、特效化、娛樂性的視聽覺體驗(yàn)是符合廣大受眾需求的，也是符合H5平臺(tái)發(fā)展的。AE軟件可以提升H5作品整體的層次和品質(zhì)，可以為H5作品提供良好的畫面效果，同時(shí)有效降低了制作的時(shí)間成本。但目前AE軟件的學(xué)習(xí)成本較高，國(guó)內(nèi)正版軟件使用率不高，相應(yīng)的從業(yè)者不是很廣泛，AE軟件的引入需要H5平臺(tái)的從業(yè)者投入較高的成本和學(xué)習(xí)時(shí)間，但就最終的制作效果以及市場(chǎng)反響來看這種投入是值得的 。

三、AE動(dòng)畫技術(shù)在H5中運(yùn)用的意義

（一）加強(qiáng)用戶體驗(yàn)

加強(qiáng)用戶體驗(yàn)是H5作品不可忽視的優(yōu)勢(shì)，視頻類H5作品有利于多平臺(tái)推廣。它既可以實(shí)現(xiàn)視頻與互動(dòng)無縫銜接，其兼容性又可以無需轉(zhuǎn)換格式就能支持多終端應(yīng)用。另外，它順暢的視聽體驗(yàn)是其他H5產(chǎn)品所不具備的。當(dāng)AE技術(shù)的引入，不僅在技術(shù)上解決了H5視頻編輯領(lǐng)域不成熟的問題，而且和其他類似的應(yīng)用軟件相比較，用戶體驗(yàn)上營(yíng)造的氛圍更加震撼。在實(shí)際操作中AE的關(guān)鍵幀動(dòng)畫和特效效果能夠靈活地與H5制作編輯器銜接應(yīng)用，提升趣味性和娛樂性，能夠給用戶帶來更豐富有趣的視聽體驗(yàn)。

（二）拓寬使用范圍

目前國(guó)內(nèi)的H5主要應(yīng)用于微信等社交平臺(tái)，AE動(dòng)畫技術(shù)的加入使H5產(chǎn)品設(shè)計(jì)者可以考慮更廣泛的應(yīng)用范圍，特別是在視頻類H5的作品中，AE的加入可以提升產(chǎn)品的品質(zhì)，促使更多的企業(yè)加入到H5的推廣與研發(fā)中，為消費(fèi)者帶來更好的視聽體驗(yàn)。而且AE軟件的加入也能拓寬H5作品的傳播范圍，借助AE的國(guó)際化特征以及H5平臺(tái)的通用性，H5平臺(tái)特別是視頻類的H5作品將風(fēng)靡全球。

（三）豐富互動(dòng)形式

伴隨著AE技術(shù)的引入，為H5作品互動(dòng)提供了更多的可能。設(shè)計(jì)師的一些天馬行空的想法可以擺脫文案的束縛，通過AE 軟件呈現(xiàn)在體驗(yàn)者的移動(dòng)終端平臺(tái)，使人與機(jī)器之間多了一條溝通的橋梁，使他們之間的互動(dòng)不再只是點(diǎn)擊和滑動(dòng)，可以根據(jù)服務(wù)對(duì)象的具體需求，加入更有趣的視頻互動(dòng)形式。

四、結(jié)語

目前H5主要應(yīng)用于商業(yè)社交、產(chǎn)品推廣等領(lǐng)域，AE動(dòng)畫技術(shù)的加入可以提升H5產(chǎn)品的質(zhì)量，設(shè)計(jì)者可以為受眾帶來更加完善的交互體驗(yàn)，更好地覆蓋如場(chǎng)館、店面、展覽等線下實(shí)體空間的視頻電子終端平臺(tái)，彌補(bǔ)了傳統(tǒng)H5制作平臺(tái)不能很好地兼顧視頻體驗(yàn)的不足，與傳統(tǒng)的H5制作平臺(tái)相比，AE軟件技術(shù)能夠靈活地與H5制作編輯器銜接。它強(qiáng)大的動(dòng)畫、影視處理能力，成為H5視頻類作品取得完美視頻體驗(yàn)的保證，既能提升作品的趣味性和娛樂性，又能夠給受眾帶來更豐富有趣的視聽體驗(yàn)和新奇的互動(dòng)形式。

參考文獻(xiàn)：

[1]趙前，何嶸.動(dòng)畫片場(chǎng)景設(shè)計(jì)與鏡頭運(yùn)用[M].北京：中國(guó)人民大學(xué)出版社，2015.

[2]毛小龍.動(dòng)漫基礎(chǔ)[M].沈陽：遼寧美術(shù)出版社，2016.

[3]陳菁晶.新媒體競(jìng)爭(zhēng)環(huán)境下的德國(guó)報(bào)業(yè)發(fā)展對(duì)我國(guó)的啟示[J].遼寧高職學(xué)報(bào)，2013（2）.

作者單位：

衡水學(xué)院