透過免費 mamoworld JSON AE Scripts，只要更新 JSON 檔案內容，就能快速更換 AE 影片中的文字與元素，讓您輕鬆建立 AE 動畫範本！


JSON (JavaScript Object Notation，JavaScript 物件表示法) 在網頁上的使用相當普遍，主要做為輕量級的資料交換使用，例如：政府資料開放平台 https://opendata.epa.gov.tw 上的天氣資料、環境監測數據、公車資訊…等，一般民眾都可以自由應用這些資料進行資料統計分析與應用程式設計，用不同的思考方式來呈現出數據背後的意義！

After Effect 中也可以使用類似的概念來製作動畫範本，不論是從 OpenData 網站取得的數據資料，或是您自行定義的相關內容，透過免費 mamoworld JSON AE Scripts，只要更新 JSON 檔案內容，就能快速更換 AE 影片中的文字與元素！

其實，使用經由讀取外部文字檔案更替 AE 影片內容的方式，在 PhotoShop 中也有支援相關的 JavaScript 語法與文字變數檔案，對於需要經常快速更換影片內的資料，或是需要進行大量資訊更換時，絕對是比「土法鍊鋼」的方式節省時間，又減少出錯的機會！









一、mamoworld JSON AE Scripts 下載

1.進入官方網站後，請按下 Download 下載！




2.將 mamoworldJSON 加入購物車，請不用擔心，費用是 0 元！






3.請先登入或建立新帳號，以進行後續的「結帳」動作



4.選按右上角的購物車圖示，進入頁面後按下「PORCEED TO CHECKOUT」結帳



接著依頁面上的結帳流程，完成「購物」的動作。


在訂單信件中會看到下載連結，就可以將 mamoworld JSON AE Scripts 下載下來囉！




二、mamoworld JSON AE Scripts 安裝

1.下載並解壓縮後，共有兩個檔案：how to install.pdf 是安裝教學文件



請將「mamoworldJSON.jsxbin」檔案複製到以下的 After Effect 安裝目錄：
  • Windows 版本：
    C:\Program Files\Adobe\Adobe After Effects CC 2019\Support Files\Scripts\ScriptUI Panels\
  • Mac OS 版本：
    /Applications/Adobe After Effects CC 2019/Scripts/ScriptUI Panels/

    2.開啟 After Effect 的 「Window」/ 「mamoworldJSON.jsxbin」面板



    若有出現「Allow Scripts toWrite Files and Access Network must be enabled」訊息，請到「Edit」/ 「Preferences」核選「Allow Scripts toWrite Files and Access Network」。



    ↑ AE CC 2019 以後的此選項的位置

    ↑ AE CC 2018 以前的此選項的位置



    三、mamoworld JSON AE Scripts 官方教學影片

    mamoworld 官方網站的 Youtube 頻道上有關於 JSON AE Scripts 的六段教學影片，您也可以參考看看喔！


    1. Data-Driven Animation with JSON in After Effects - Part 1: Linking Texts
    2. Data-Driven Animation with JSON in After Effects - Part 2: Linking Colors
    3. Data-Driven Animation with JSON in After Effects - Part 3: Show/Hide Layers
    4. Data-Driven Animation with JSON in After Effects - Part 4: Customizing Links
    5. Data-Driven Animation with JSON in After Effects - Part 5: Paths and Graphs
    6. Link Texts & Colors to a JSON text file in After Effects (Micro-Tutorial)



    四、取得 OpenData 上的即時天氣資料

    1.從以下的「政府資料開放平臺」取得「即時天氣資料」






    2.利用免費「JSON 內容分析」網站，讓資料更容易看懂

    下載後你使用「記事本」開啟剛才 JSON 檔案，將所有內容 Ctrl + A 全選並複製，貼到 http://json.parser.online.fr/ 的左邊文字欄位內，等待一點時間，就可以將資料以更適合視覺查看的方式顯示每筆資料，每個欄位名稱與數值都更容易理解！






    ※ 利用 OpenData 的 JSNO 資料只是方便我們快速取得相關的資訊，在接下來的 mamoworld JSON AE Scripts 操作中，其實也是可以自行輸入這些內容的！

    五、下載「氣象資訊」AE 專案檔

    這裏已經準備好一個「weather+json 練習檔」，包含用來顯示氣象資訊的文字圖層、三個天氣圖示的Compositon 與三個城市圖片的 Composition。





    ↑ 此 AE 專案檔已包含簡單的動畫效果


    ※請記得先將 mamoworld JSON AE Scripts 安裝完成，否則會出現以下的錯誤訊息，無法正常使用！


    ※另外，若已安裝  mamoworld JSON AE Scripts，還有出現此訊息，請檢 mamoworld.json 檔案是否有加入「Project」面板中。


    六、mamoworld JSON AE Scripts 基本使用重點提示

    只要先了解以下幾個 mamoworld JSON AE Scripts 的使用重點，就可以輕鬆在 AE 中使用它！

    1.After Effect 專案檔一定要先儲存

    是的，這就是第一個要注意的，當您開啟一個新的 AE 專案檔後，請先儲存，mamoworld JSON AE Scripts 才可以順利地在該資料夾中產生特定的 JSON 檔案！

    2.記得開啟「Window」/ 「mamoworldJSON.jsxbin」面板

    3.mamoworld JSON AE Scripts 文字內容設定方式

    • 選擇要設定的屬性，如文字圖層的「Source Text」即是替換此文字的內容
    • 按下「Connect」設定在 JSON 檔案中的相關欄位項目名稱




    • 完成設定後，在 AE 專案檔的資料夾中，會自動產生「mamoworld.json」文字檔案，可以使用文字編輯軟體開啟此檔案，內容如畫面的右側。




    4.mamoworld JSON AE Scripts 圖層「顯示 / 隱藏」(透明度) 設定方式

    mamoworld JSON AE Scripts 也像 JavaScript 一樣支援「階層」的用法 (項目名稱間以半型句點分開：A.a-1 )，例如範例檔案中的三個天氣圖示的「天氣圖示」Compositon 與三個城市圖片的「照片」 Composition，都是具有多個圖層的 Composition，可以透過「Opacity」屬性來設定要顯示哪一個圖層！




    • 一定要將所有圖層的「顯示」開啟
    • 選擇「Opacity」透明度屬性(可個別設定，也可按住 Ctrl 鍵，一次選擇多個圖層的 Opacity 屬性，批次設定)
    • 按下「Connect」設定要使用的 JSON 項目名稱：icon.sun、icon.cloud、icon.rain






    • 在 JSON 檔案中會將多出一個「icon」項目，裏面分別列出剛才的「子階層：sun、cloud、rain」，其數值為該圖層的「透明度」，0：隱藏、100：顯示。




    5.如何強制 AE 畫面顯示更新 JSON 檔案後的內容

    使用文字編輯器編輯 JSON 檔案並儲存後，如果 AE 畫面還沒有更新，可以依下面方式強制更新 AE 畫面。
    • 更新並儲存 JSNO 檔案
    • 在「Project」面板 mamoworld.json 檔案上按右鍵 / Reload Footage



    6.如何移除已設定的 mamoworld JSON AE Scripts 屬性

    完整的移除需要針對 AE 已加入的屬性與 JSON 檔案同步設定：

    • 選按已設定的屬性
    • 選按「Animation」 / 「Remove Expression」移除 Expression Scripts


    • 刪除 JSON 檔案中的相關屬性設定內容










    ※ 延伸閱讀：

    留言

    張貼留言