Tag Archives: Javascript

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

Why JSON?

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.

 

Kiril Ivanov animation in After Effects using ft-Toolbar

Kiril Ivanov is doing a crazy job with After Effects ! He did create some really nice animated character using some really nice rig and stuff.
And he decide to use ft-Toolbar in his workflow to be able to animate and set his rig faster. And he also had the idea of multi-toolbar which now is fully supported in version 1.27. Checkout his video :

Plugins & Scripts for After Effects at AEScripts.com

It has been for a while now, but I haven’t made an official announcement about it until now. So in case you haven’t notice yet, most of my Pixel Bender filter for After Effects are available on Lloyd Alvarez’s website which is called AEScripts.com. (But There are still all open source and you can name your own price 😉 )

AEScript is a great place to find many different kind of scripts or filters which can make your life easier on a every day basis. I would encourage you to go through all the scripts & filters list to see what exists. Because you might not need all them right now, but most of it have been made to solve problem people encounter with AE, so being aware that a script exists somewhere in case one day you have an issue with After Effect is a great knowledge for a user 🙂

As for today several filters and one script which I made are available there, but again check all the other ones as well, there are all incredible!

  • ft-Toolbar : create your own tool bar to apply Effects, presets, scripts, … in ONE click !
  • ft-CombineRGBA : let you swap channels or combine them from two different sources in 32bpc
  • ft-Cubic Lens Distortion : (un)distort your footage with a lot of accuracy using Syntheyes algorithm. Add or erase Chromatic Aberration as well
  • ft-Brightness Check : show you if pixels are too bright or dark in your comp, great to check if it “Broadcast-safe”
  • ft-Technicolor : mimic a 2-strip & 3-strip technicolor process
  • ft-Filmic Contrast : a one click contrast filmic looking using Perlin Gain.
  • ft-UVPass : re-texture directly in After Effect
  • ft-Clamp : clamp pixels value between defines one. Perfect to solve blending mode issue with 32bpc comp
  • ft-PPass2Matte : use a Point Pass to create 3d masks
  • ft-Auto White Balance : color balance in one click footages which had a bad white balance at the shooting time
  • ft-Vignetting : add a vignette effect to your comp

Please if you use them, let me know or post comment, show us what you did with it 🙂

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

Introduction

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.




Download

Script : ft-Toolbar for CS3, CS4 & CS5

Faster Array Sort in Javascript

Introduction :

Based on Eugene(inspirit) post about Faster Array Sort function in Flash, I ported his test code into javascript.
First of all, I’m mainly using JS for scripting into Adobe After Effects, Photoshop, … but not so much for web anyway. That being said I’m not a javascript guru, so bare with me if I did mistake, I took his code and just changed it a little bit so it would work in JS.

I still can’t make the “Flash Sort” (which seems to be the fastest one on AS) to work w/ JS. I don’t know what I’m doing wrong, if anyone has an idea ?

[UPDATE] Thx to MrDoob, “Flash Sort” works now !! I also add the check function and it seems some sorting still not working quite well.


Download Source Code :



Stats


Firefox

*******************************************
*******************************************
INFO
10 000 elements
User-agent header: Mozilla/5.0 (Windows; U; Windows NT 6.0; fr; rv:1.9.2.10) Gecko/20100914 Firefox/3.6.10 ( .NET CLR 3.5.30729; .NET4.0E)
——————————————————————–

JS BUILD IN SORT
Time : 18 ms
Sorting is OK
——————————————————————–

QUICK SORT + INSERTION SORT
Time : 9 ms
Sorting is wrong
——————————————————————–

3 WAY QUICK SORT
Time : 11 ms
Sorting is wrong
——————————————————————–

NON RECURSIVE QUICK SORT
Time : 15 ms
Sorting is OK
——————————————————————–

OPTIMIZED NON RECURSIVE QUICK SORT
Time : 16 ms
Sorting is OK
——————————————————————–

NON RECURSIVE QUICK SORT 2
Time : 13 ms
Sorting is OK
——————————————————————–

FLASH SORT
Time : 6 ms
Sorting is OK
——————————————————————–

IE 8

*******************************************
*******************************************
INFO
10 000 elements
User-agent header: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0; Trident/4.0; SLCC1; .NET CLR 2.0.50727; Tablet PC 2.0; .NET CLR 3.5.30729; .NET CLR 3.0.30729; .NET4.0C; .NET4.0E)
——————————————————————–

JS BUILD IN SORT
Time : 88 ms
Sorting is OK
——————————————————————–

QUICK SORT + INSERTION SORT
Time : 34 ms
Sorting is wrong
——————————————————————–

3 WAY QUICK SORT
Time : 47 ms
Sorting is wrong
——————————————————————–

NON RECURSIVE QUICK SORT
Time : 49 ms
Sorting is OK
——————————————————————–

OPTIMIZED NON RECURSIVE QUICK SORT
Time : 42 ms
Sorting is OK
——————————————————————–

NON RECURSIVE QUICK SORT 2
Time : 49 ms
Sorting is OK
——————————————————————–

FLASH SORT
Time : 30 ms
Sorting is OK
——————————————————————–

Chrome

*******************************************
*******************************************
INFO
10 000 elements
User-agent header: Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US) AppleWebKit/534.3 (KHTML, like Gecko) Chrome/6.0.472.63 Safari/534.3
——————————————————————–

JS BUILD IN SORT
Time : 13 ms
Sorting is OK
——————————————————————–

QUICK SORT + INSERTION SORT
Time : 4 ms
Sorting is wrong
——————————————————————–

3 WAY QUICK SORT
Time : 3 ms
Sorting is wrong
——————————————————————–

NON RECURSIVE QUICK SORT
Time : 3 ms
Sorting is OK
——————————————————————–

OPTIMIZED NON RECURSIVE QUICK SORT
Time : 3 ms
Sorting is OK
——————————————————————–

NON RECURSIVE QUICK SORT 2
Time : 3 ms
Sorting is OK
——————————————————————–

FLASH SORT
Time : 3 ms
Sorting is OK
——————————————————————–

Adobe After Effects

*******************************************
*******************************************
INFO
10 000 elements
OS : Windows Vista 6.0 Service Pack 2
——————————————————————–
JS BUILD IN SORT
Time : 291 ms
Sorting is OK
——————————————————————–
QUICK SORT + INSERTION SORT
Time : 237 ms
Sorting is wrong
——————————————————————–
3 WAY QUICK SORT
Time : 251 ms
Sorting is wrong
——————————————————————–
NON RECURSIVE QUICK SORT
Time : 287 ms
Sorting is wrong
——————————————————————–
OPTIMIZED NON RECURSIVE QUICK SORT
Time : 250 ms
Sorting is wrong
——————————————————————–
NON RECURSIVE QUICK SORT 2
Time : 298 ms
Sorting is OK
——————————————————————–
FLASH SORT
Time : 281 ms
Sorting is wrong
——————————————————————–

Experimental Animation based on sound with After Effects via AETuts+ (Audio Reactant Time Remapping)

My tutorial for AETuts+ is finally out !!
It covers Time Remapping, Waveform to keyframe conversion, expression, … I got really inspired by watching all those reels from motion designer or filmmaker with music most of the time from Hecq. I was wondering how they did their editing and cuts, so I came up with this idea. I don’t know if it’s the way they did it, but this is my approach.

Hope you like it !!!

Link : Audio Reactant Time Remapping Tutorial at AETuts+