哈囉！又到了快樂的教學時光，

向大家介紹有關AE的輸出的一些小技巧！

你可以在這篇文章學到：

1.AE Render Queue及Media Encoder的基本設定

2.批量輸出影片

3.AE圖片檔輸出

4.AE透明背景輸出

5.AE 如何輸出GIF

6.AE 如何輸出HTML動畫

1.AE Render Queue及Media Encoder的基本設定

首先要輸出AE檔案，一定要在AE中選中你想輸出的Compsition才能選擇輸出，

必須點選Project視窗的Comp或是點選時間軸上的Comp(時間軸視窗框亮起)。

選取後在上方Composition中可選擇

Add to Adobe Media Encoder Queue(快捷鍵 Ctrl + Alt + M)

Add to Render Queue (快捷鍵 Ctrl + M)

先說Add to Render Queue好了，

選擇後，你的Comp就會被加到AE內的Render Queue序列，

這裡有三個藍色亮起的文字可以做基本設定。

點選Render Settings後的藍色文字可以進入這個視窗：

上方黃色框框內可以做一些輸出品質的設定，

如Quality可設定品質高低、

Resolution可以設定輸出的畫質(Full、1/2、1/3、1/4)等。

Time Sampling底下可以設定輸出圖層、範圍(工作範圍/全Comp)：

Frame Rate可以設定輸出楨數、時間點：

點選Output Module Setting後的藍色文字可以進入這個視窗：

上方黃色框內的Format可以設定輸出格式。

Video Output底下的Channels可以設定輸出色彩通道，

RGB、Alpha、RGB+Alpha。

再往下的Resize，預設為沒有勾選的狀態，

勾選後可以重新設定輸出後的長寬、品質等。

Crop也是預設為沒有勾選，

勾選後可以設定輸出後的四邊裁切寬度。

最後最底下則是可以設定音訊。

點選Output To後的藍色文字可以進入這個視窗：

這裡則是選擇匯出位置。

全部設定好了之後就可以按Render按鈕輸出囉！

當然你可以將輸出的設定設為預設，

每個藍字旁邊都有個下拉選單，設定好輸出設定之後再到下拉選單選擇Make Template。

將名稱設定好：

之後就可以直接使用下拉選單選擇預設輸出設定囉！

接下來介紹Adobe Media Encoder Queue，

當然前提是你必須也安裝Adobe Media Encoder Queue才能使用這個輸出管道。

將Comp選擇Add To Adobe Media Encoder Queue之後，Encoder會自動開啟，

稍等一下會有你剛才選擇的Comp匯入序列。

這裡一樣有三串藍字可以選擇輸出設定，

第一串藍字旁的下拉選單可以選擇輸出格式，

Encoder提供的輸出格式比AE內建的還要更多，

例如最常使用的MP4(H.264)就沒有在AE的內建選項中，

需要時通常會到Encoder直接輸出成MP4。

第二串藍字旁的下拉選單可以選擇輸出品質：

最後一串藍字可以選擇輸出位置：

全部設定好之後就可以按下右上角的綠色箭頭開始輸出囉！

2.批量輸出影片

再AE的Render Queue中你可以一次匯入多個Comp，

但要特別注意，這裡的Comp是即時抓取AE內容的，

在這段期間更改Comp都會影響輸出的內容。

而Encoder則會在匯入序列時自動儲存一個當下時間點的AE暫存檔，

Encoder會抓取這些暫存檔，所以再原本的AE當中更改Comp內容也不會影響輸出的內容！

按下綠色箭頭之後就會自動跑完所有的Comp囉！

再輸出的預設資料夾中可以找到所有匯入Comp時的暫存檔，

點開暫存檔可以回到當時的AE檔案。

3.AE圖片檔輸出

AE也可以輸出圖片！

再輸出圖片前要特別注意時間軸上方的Work Area(輸出範圍)，

你可以設定好輸出範圍，如果你只想輸出一張圖也可以將範圍設為1楨。

Add To Remder Queue後再格式這邊選擇PNG Sequence。

輸出後就能得到圖片檔囉！美意楨都會被出書成一張PNG圖片。

4.AE透明背景輸出

如果你要輸出透明背景的影片或圖片的話，你需要有個透明背景的影片。

再輸出前建議點選預覽窗底下的切換顯示透明背景Icon檢查一下背景是否為透明。

嗯，沒錯 是透明的。

Add To Render Queue後再格式區選擇QuickTime。

接著再Channels選擇RGB+Ahpla。

輸出之後就能得到透明背景的影片囉！

如果要用QuickTime撥放Mov檔需要先安裝QuickTime哦！

5.AE 如何輸出GIF

AE內建的Render Queue沒辦法直接輸出成GIF檔，

必須匯入到Encoder中，

再序列中點選第二串藍字(符合來源-高位元速率)可以打開設定視窗：

再視窗中的鎘是選擇動畫GIF。

底下可以設定GIF的品質及長寬，

設定完畢之後輸出就會是GIF囉！

6.AE 如何輸出HTML動畫

如果要將AE動畫輸出為可以在HTML上撥放的動畫的話，

方法比較負責，需要先下載Bodtmovie擴充功能，

下載網址：https://github.com/airbnb/lottie-web

解壓縮之後在lottie-web-master資料夾 > build > extension中找到bodymovie.zxp，

待會要將這個擴充功能安裝到AE中。

要安裝這個擴充功能需要zxp installer ，

可以到底下的連結下載，

連結網址：https://aescripts.com/learn/zxp-installer/

點選你的電腦版本下載。

安裝之後打開會長這個樣子，

首先先點選File > Open。

選擇剛才的bodymovie.zxp之後點選OK。

安裝完成之後會出現這樣的畫面：

重新開啟AE之後就可以在Window > Extensions中找到Bodymovie囉！

打開Bodymovie長這樣，

這裡會顯示專案檔中所有的Comp，勾選黃色框框中的綠色按鈕選擇你想輸出的Comp。

點選率色文字選擇輸出路徑。

按下Render之後就等待輸出。

完成之後可以得到一個json檔，

之後再到lottie-web-master > build > old_parser中找到bodymovie_parser.jsx，

將這兩個檔案複製到網頁根目錄，新建一個html檔案。

開啟網頁之後就會發現動畫在網頁上撥放囉！

此教學專案檔下載(cc 2018以上)：