Tag Archives: script

Adding JSON to Adobe After Effects

What is JSON ?

from json.org :

“JSON (JavaScript Object Notation) is a lightweight data-interchange format. It is easy for humans to read and write. It is easy for machines to parse and generate. It is based on a subset of the JavaScript Programming LanguageStandard ECMA-262 3rd Edition – December 1999. JSON is a text format that is completely language independent but uses conventions that are familiar to programmers of the C-family of languages, including C, C++, C#, Java, JavaScript, Perl, Python, and many others. These properties make JSON an ideal data-interchange language.”

JSON is used a lot by web service as response to replace XML.


Why not using the XML object ?

AE’s XML object is handy, but yet have some weird way to access attribute, which in some case can become problematic. On top that the XML object comes with lots of methods and properties to handle properly an XML.
JSON is pretty much a native Javascript syntax. An object with Key/Values. So you can parse it with any kind of loop or js accessor. It’s easier and faster to handle, and lighter than XML.

from http://www.w3schools.com/json/json_intro.asp :

Much Like XML

  • JSON is plain text
  • JSON is “self-describing” (human readable)
  • JSON is hierarchical (values within values)
  • JSON can be parsed by JavaScript
  • JSON data can be transported using AJAX

Much Unlike XML

  • No end tag
  • Shorter
  • Quicker to read and write
  • Can be parsed using built-in JavaScript eval()
  • Uses arrays
  • No reserved words


For AJAX applications, JSON is faster and easier than XML:

Using XML

  • Fetch an XML document
  • Use the XML DOM to loop through the document
  • Extract values and store in variables

Using JSON

  • Fetch a JSON string
  • eval() the JSON string

How to add it to AE ?

To add a JSON’s parser and stringifier to AE you could add this file to your script : https://github.com/douglascrockford/JSON-js/blob/master/json2.js
Just minify the code and put it at the beginning of your script.

Even better, to make sure the JSON object is always available when you launch AE, you can download this file and put it into the “startup” folder in your script directory. So the JSON object and function will be loaded at AE startup.


ft-Toolbar Tutorial

From AETuts+ :

“In this Quick Tip we will learn how you can create your own toolbar and customize it to your own liking… you can download the script from aescripts and the footage from here.”


You can watch the tutorial here : http://ae.tutsplus.com/tutorials/workflow/enhanced-your-workflow-ft-toolbar-a-customizable-toolbar-script/




Script : ft-Toolbar for After Effects CS3 CS4 & CS5


This script gives the ability to make your own custom toolbar with Effects, presets or any commands you use the most often.This script gives the ability to make your own custom toolbar with Effects, presets or any commands you use the most often.

Toolbar’s features :

* Edit UI : add, delete, order, config buttons of your toolbar.

* 5 kind of buttons:

  • EFFECT : set the name of the effect you want to use (See usage details below).
  • ANIMATION PRESET : select an animation preset file (ffx) to apply.
  • SCRIPT LAUNCHER : select an script file (.jsx or .jsxbin) to launch.
  • MENU : set the exact name of any menu item you want to call. For example : Time-Reverse Keyframes.
  • JAVASCRIPT : type any javascript that AE understands. More advanced, but you can do some crazy macro command with it.
  • OS : Any Operating System command you can run into your terminal can be set here. For example calc (on Windows) or open -a Calculator (on Mac) would start the calculator.

* Buttons Icon : You can assign a custom image icon to each button. You can create your own icons or download a free icon pack below. All icons will be downloaded and saved into the config file. When you export the config file (xml) for use on another machine all the icons will be included so no need to keep the .png files.  The buttons size can be set to any size you like, but it is a good idea for it to match the size of your icons.

Import/Export : you can import and export the config file to set the same configuration on several computer or for making backups

* Configuration file path (xml) : you can set the path of the saved config file (xml) anywhere you want. (ie. to a dropbox folder to keep all your computer sync with the same config). The config file will include encoded versions of any custom icons.


Script : ft-Toolbar for CS3, CS4 & CS5