本教程通過介紹一個比較典型的網絡廣告條動畫(banner)設計的流程。來體現AE在應用中的多樣性!我們開始進入了解。

　　一. 任務描述：

　　對方提供了一個他們已有的平面文件(.PSD格式)，要求在不改變他們平面廣告風格的基礎上做動畫設計，時長大約十秒即可。規格是按照網站的要求：638 x83 px(對于他們的"設計"和"創意"我不做任何評價，這都是客戶已經定好的，在這個設計過程中，我只考慮motion design的問題)

　　一般來說，我認為在接到設計任務之后，首先應該對設計任務進行分析-------這比埋頭苦干更重要，磨刀不誤砍柴功嘛。

　　二.設計分析

　　設計分析中，包括素材源的分析和設計預想分析。

　　首先是素材源分析：

　　如上圖，我拿到的是一個包含了多個圖層及樣式的PSD文件，鑒于客戶要求，風格和元素不能改變，尺寸也被規定好了，所以我可以發揮的余地是非常小的，在有限的畫面中如何表現產品以及吸引眼球，是我做整個運動設計的重心。

　　因為我打算用After Effects來完成設計，因此，首先對素材源進行合理化的處理：精減圖層的數量，為圖層設置便于識別的名稱。(將psd導入AE之后我們就能明白合理的名稱是多么重要)

　　設計預想分析：

　　因為banner的高度只有83PX，所以，在有限的空間內，想要有力的表現產品，必須考慮細節;同時，作為一個廣告條，如何能夠吸引目光，就需要動作的透視，位移變化要強烈，而這種變化最好能有強烈的節奏感(比如快慢鏡頭的運用)。

　　從客戶的要求和我對產品的表現方法來看，以下元素是必須出現的。

　　企業名稱　　產品　　產品名稱　　廣告詞

　　元素出場流程我安排如下：(其實也就是簡單的分鏡)

　　①企業名稱 --> ②產品細節 --> ③產品+名稱 --> ④產品細節(換個角度) --> ⑤產品+廣告詞 --> ⑥產品+名稱(重復記憶)

　　三.設計過程及重點動作分析

　　第一個鏡頭：企業名稱做放大動作，造成上升感。(這個動作太簡單了，應該不要教程吧?―――時間軸上兩個點，前一個小元素略小，后一個點元素略大，就可以生成縮放動畫:)

　　第二個鏡頭：重點是酒瓶的運動。

　　上圖中，高亮區域是廣告條的實際范圍。(暗色部分都是最后看不到的)酒瓶在這個過程中， 快速從右下角飛向中間(從小到大)，然后轉變成超慢動作(形成視覺停留)，用來強化產品上的細節。(參見圖4)

　　酒瓶下方的白霧也是一個圖層，當酒瓶出現時，白霧層做微微放大動作，透明漸變出現。

　　為了讓動作效果更真實和更強烈，背景層可以與前面物體做反方向運動。

　　企業名稱 在酒瓶出現時就縮小消失了。

　　第三個鏡頭：產品名稱的出現+全局的產品。

　　這一步描述的是從產品特定到全局+產品名稱的過程。

　　這個過程中：

　　首先是產品(酒瓶)從中間快速移動到左邊，并同步縮小。

　　酒瓶周圍(酒瓶下面的層)迅速出現裝飾物，與酒瓶的"縮小"動作相反，裝飾物是"放大"，兩種反方向的動作會形成"合力"，使鏡頭的力度增強。(參見圖6)

　　同時產品名稱(logo)從右邊出現，縮小+徑向模糊。(參見圖7)

　　兩者出現之后，動作迅速由外轉慢，形成慢鏡頭。(慢鏡頭是提供信息瀏覽的主要方法)

　　圖7是關于logo字效出現的方法。(汗~ 我用的都是沒什么技術含量的方法和濾鏡，大家忍忍，權當照顧初學者)

　　還有，背景上看起來很絢的那一些霧狀物，就是之前那個"白霧層"，我讓它根據需要移來移去，加放大縮小而已，依然沒什么技術含量。汗~ 我覺得實現一個效果如果有多種方法的話，我肯定會選那種最簡單的方法。有時候，視覺特效玩的就是障眼法，只要能騙過眼睛，方法越簡單越好。

　　第四個鏡頭：從全局+展品再次回到產品局部

　　從大體來看，運動分兩個方向：

　　1、酒瓶及其裝飾物從左向右移動，并做Scale調整(放大)，動作與之前的酒瓶運動幾乎一樣，唯一不同是加了一點Rotation的變化(傾斜)

　　2、原來鏡頭中的產品名稱字樣，和背景一起，做反方向運動。

　　以上兩個動作，都配合 effect/blur/motion blur濾鏡，加強速度感。

　　之前的整個移動+模糊過程控制在不到半秒，也就是12幀以內，應該是極快速度，然后瞬即轉成極慢鏡頭，所有物體保持幾乎無法注意到的微距移動，(但不要靜止)

　　這時候體現的是產品細節，我們來為背景加一道光芒閃耀的效果。

　　這里會用到一個外掛插件 Light Factor。主要會有三個參數變化

　　Brightness,光暈亮度 (從 0變成97，意味著光芒從無到有)

　　Scale光芒大小(控制大小的變化，以生成閃爍的效果)

　　Light source光暈放射中心(跟著瓶子反方向微微移動，形成背光閃耀的效果)

　　第五個鏡頭：從細節返回產品全局+廣告詞

　　為了避免重復效果，這次使用元素先拉近(放大，拉出屏幕范圍)，再縮小進入。這次將產品挪到右邊，文字出現在左邊。

　　還得再說明一下，瓶子背后的那個光芒四射，其實也是PSD圖層，不是什么高級濾鏡，嘿嘿嘿。

　　第六個鏡頭：再次轉換至產品名稱(重復強化記憶)

　　這個鏡頭轉換中，將"中國一定贏"的廣告語透視翻轉成產品名稱"西鳳酒"，會用到兩個概念：3D 圖層和濾鏡Conner pin

　　首先來看3D圖層，點擊3D圖層開關，這樣可以把一個層從2維層轉成3維層，注意原來的中心點，變成了三維坐標。

　　同時，在Transform里新增了x、y、z三個軸向的rotation。

　　效果如圖12：

　　為了讓透視效果更加強烈，我們可以將 旋轉中心點的位置放到右邊來

　　點擊pan behind tool (鋼筆工具左邊再左邊，快鍵是Y)，來拖動中心點。見圖13。

　　這樣，文字基本上就可以做到水平翻轉的效果了，但是似乎還不夠"撲面而來"，所以再添加一個濾鏡：Conner Pin，見圖14。

　　Conner pin是一個系統自帶的濾鏡,它的作用我覺得有點像PS里的"任意變換"通過改變Conner pin的四個角，可以加強 3D 透視的變化效果，使文字旋轉更加立體和逼真。(參見圖14)

　　這樣，文字基本上就可以做到水平翻轉的效果了，但是似乎還不夠"撲面而來"，所以再添加一個濾鏡：Conner Pin，見圖14。

　　當廣告詞翻轉到與視線垂直成一線的時候，產品名稱再進進入。從視覺上看，就像是"廣告詞翻轉變成了產品名稱"(產品名稱進入的方法見"第三個鏡頭")

　　再看一次效果

　　分了六個鏡頭，基本上描述完了整個動畫設計過程。

　　這個"教程"里的濾鏡、動畫、效果基本上都用的是最簡單方法，同時，由于對方提供的是PSD的文件，我在做PSD文件的整理時，順便把一些可能的效果都在PS里做好，這樣進入AE之后效果上就可以偷懶，而把重點放在對于動作的設計上，而動作設計主要就是改變position、scale和rotation, 相對來說是比較容易的。

　　我們分層看，每個層的運動都是簡單的。

　　但是當所有的層整合起來以后，畫面是否還能流暢呢?主要是考慮的問題是層級的關系和動作的配合：哪個元素先運動?哪個后運動? 哪個物體的運動可以帶動別的? 哪個物體對別的物體可以產生反作用力? 哪些物體是重的?哪些物體是輕的等等，這些物與物的關系的處理上要下更多的功夫，最后的動作才會流暢。

　　回頭來看，很容易發現這個小動畫的動作設計一直是這樣循環的：慢動作(信息傳達) ------> 快動作(轉場) ------> 再慢動作，再快……….

　　而一般我們做影像設計，會根據音樂的節奏來設計動作，但這個banner的設計中沒有音樂的配合，所以在動作設計(Motion design) 上的難度會增加，最好要多試了幾次，找找感覺。

　　四.輸出交稿

　　這部分沒什么太過說的，由于動畫最后要在網上使用，所以輸出成SWF或者FLV是必須的，我試了兩種方法。

　　1.)我們可以點擊 File/export/adobe Flash(swf) 來得到swf文件。

　　經我測試，生成的文件較小，大約500多K，但覺得效果一般，運動也有點卡，圖層邊緣也有毛刺(畢竟swf還是表現矢量動畫更好一些。)

　　2.)所以我用了另一個方法：首先將片子輸出成AVI (LOSSLESS)，然后再將AVI導入flash cs3，(導入時選擇 fl8格式的中等質量)，可以得到一個性價比還不錯的質量。

　　然后再輸出成swf，我通常選JPG質量80%左右，最后生成的文件大約 600多K，還能接受，如果再大的話，可能就需要做下載條了。