在本篇教學中你可以學到的有：

1. 文字材質的接合

2. Shape路徑的筆畫動態

3.包含有人提問的↓

它等同於Shape路徑的筆畫動態，所以在這篇文章中會一起說明。

※原作動態上還有些吃邊的效果，例如文字G的左側邊邊、交接後超過的部分處理，這部分本篇文章並不會講到。

哈囉！

應該有很多人喜歡看連續劇，無論是哪種連續劇，他們都會有自己的標題或開頭動畫，沒有開頭動畫也好歹有標準字…

這次要來學習的是怪奇物語的片頭～

雖然它應該是用3D CG，不過在AE內也可嘗試看看類似的效果。

怪奇物語的片頭在設計上非常用心，字體使用ITC Benguiat，加大了S和R，以及更多的曲線。

在風格依據上實際採用Kodalith透明印刷膠片來拍攝、模擬80年代的風格，當時必須使用攝影台，一格一格的拍攝出動畫。團隊藉此還原實際會呈現的邊緣模糊、抖動、鏡頭光暈和紋理，而這些甚至都是"錯誤的"行為，在當時會被認為不專業、不可以犯的錯誤，他們卻將這些作為怪奇物語片頭的風格和特色。

最後，再將這些參考應用在CG上。

1. 文字材質的接合

那麼在AE裡……

新建專案和COMP，用文字工具輸入"ZU"(或你想要輸入的文字啦…英文數字字體較好)。

然後將文字轉成形狀圖層Shapes。

它就會自動將文字創建成Shape，每個文字都會是獨立的群組。

接著，由於文字本身只是要作為Alpha用，主體是材質，所以將兩個文字分開來。

CTRL+D複製一個後，分別將Z和U刪除；一個留Z，一個留U。

CTRL+ALT+SHIFT+Y創建一個空圖層，這個圖層要拿來做為文字Shape和材質的位移參考。

目前還沒有加入材質，所以先將文字的Position綁定空圖層Z的座標。

這邊要注意的是，因為空圖層預設的路徑位置是COMP的中心，文字的座標並非在COMP中心，所以要先將空圖層Z的座標更改為和文字的座標一樣，

這裡的文字是928.0,676.0，空圖層也必須是這個數值，才可以將文字綁定它。

然後Z和U都這樣做～

並且設定好路徑動畫：

讓Z從左邊向右靠、U從右邊向左靠，然後彼此靠攏、合併在一起。

稍微設定一下動態的曲線：

然後加入材質～

這邊是用Fractal Noise做為材質，你也可以匯入自己的素材來代替。

將它挪到Z Shape的下層，並讓它吃Alpha。

這邊Mask遮罩其實沒什麼意義，只是想拿來對之後的位置…(略)

兩個都這樣做會是這樣：

不過你會看見他們的交界、重疊處會有點明顯的分隔差異，

那是因為材質吃到的位置並沒有連貫在一起，所以剛才的遮罩就能派上用場。

兩個文字重疊時，藉由遮罩來調整材質位置，讓兩邊文字的材質都是連貫的，重疊在一起時才不會有太大的分隔。

現在看起來就好很多了：

噢！這裡的混合模式我選擇Lighten。

這裡將全部圖層(除了一開始的文字圖層)都轉變成3D Layer，然後加入攝影機。

再創建一個空圖層，取名為Camera，也轉為3D Layer，讓攝影機去綁定它。

接著打開攝影機的控制，開啟焦距模糊，並設定一下焦點。

這裡我將全部都Pre-Compose起來，並命名一下。

並用Tint來加入紅色色調，以及光暈效果。數值如上。

上圖你會看到我有兩個TITLE COMP，另一個的作用是要來做更誇大的鏡頭光暈。

數值如上。

這樣文字周遭又包覆了一層紅色光暈。

再複製一個一樣的，拉到最底層，取名為BG LIGHT，要用同樣的方法製作背景：

不過這邊會將它模糊～

基本上OK，只需要額外調整色彩、畫面顆粒等等的大致就完成，不過這樣的內容似乎太空洞了。

而且指淵還少了個6。

2. Shape路徑的筆畫動態

我們開啟AI，輸入文字 "6"：

然後到Typekit找一些字體，這邊要找的是很細的字體。

如果你沒有這個功能，那請更新至CC以上。

這個網站可以選擇一些關鍵類別，例如你要搜尋細部的字體，

那我這邊找到了這個，有Hairline型的字體。

點選右邊的SYNC即可同步到你的電腦裡，ADOBE也能及時載入這個字體。

將文字改為這個Lato Hairline型：

這邊其實只是要參考這個字體而已，比起用即時描圖抓路徑，我這邊選擇自己用鋼筆工具畫路徑：

自己用鋼筆工具畫好的路徑。

這樣做是因為AE、AI內無法將文字轉變成單條線，而我不想讓文字有外框。

將這個AI匯入進AE：

然後轉變成向量Shape：

打開裡面的項目，

將線條的寬度改為20。

然後將Path 1和2個別加入Trim Paths。

然後選擇圓形Path的左邊節點，讓它設為起始點。

設定Trim Paths的結束點，

讓它有畫出來的動畫。

像這樣：

不過處理到圓形的那個筆畫會發現，它開始畫時是向右上方筆畫前進，而不是繼續往下：

我要讓它接著第一筆畫繼續往下畫，可以這樣設定：

將Start和End都設為100%，再將End數值從100%降為0%。

而第一筆畫的結束點要和圓形筆畫的開始點銜接在一起：

頭尾的沙漏屬性可以選擇關鍵影格後按F9，中間的圓形關鍵影格可以按住CTRL單點它們，或是右鍵關鍵影格來選擇屬性。

大致處理一下：

範例：

原作文字有點鋸齒邊緣…最後才發現，哈。

那要增加鋸齒邊緣的效果，就是將文字加入Roughen Edges效果，然後Pre-Compose後(一定要這麼做)再去綁定各自的空圖層位移。

沒有Pre-Compose的話Roughen Edges效果是吃不到位移的哦！

原作非常精緻，這邊也只能做個大概，像是邊緣的鋸齒也不會是用Roughen Edges來製作，整體當然也不會是AE。AE哭哭。

但有更多的嘗試與學習才能精進自己，對吧！

那麼這個又要怎麼做呢？

首先畫一條線(Shape)：

你會看見Shape內的屬性是這樣：

因為畫的是線條，所以沒有填色(Fill)，只有Stroke。

然後加入Offset Paths。

你會發現原本的單條線段變成了封閉的線段。(如上圖)

Round Join選項可以讓你的封閉面改為半圓形。

這時再加入Trim Paths：

雖然在上面怪奇物語的教學中知道，這個Trim Path可以讓路徑做移動，

不過你會發現，它是將線條做動態，而不是以我們用鋼筆畫的路徑作為依據：

Shape的參數也是有圖層關係的，我們將Trim和Offset交換一下。

就能以路徑當作依據來讓線條做動態囉～

簡單設定一下Start和End的結尾：

這邊在附贈一個簡單的表達式：

因為我們只單純做關鍵影格，它只會跑那麼一次，要讓它循環，手動就要Key很多關鍵影格，很麻煩，

所以可以按住ALT點小時鐘，打開表達式控制，輸入：loopOut("pingpong") ←紅字部分。

它能讓關鍵影格來回循環，而另一種 loopOut("Cycle")則是頭尾循環。還有更多的循環語法…(略)。

那成品就會像這樣：

不過，我不想讓它是頭尾交錯的循環，

所以可以在頭尾再設立關鍵影格：

並且將頭設為0.5%，尾設為99.5%。

因為若是100%，Start和End都為100%的話會是什麼東西都沒有，這樣在循環到頭跟尾的畫面時會有閃爍感(因為紅線消失而閃一下)。

成品會像這樣：

以上就是這次的AE小教室，喜歡的話也請分享出去，

我們下次見～