• Stars
    star
    225
  • Rank 177,187 (Top 4 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 8 years ago
  • Updated over 8 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

will export an After Effects project as a JSON object

ae-to-json

experimental

The purpose of this module is to create After Effects JSX/JS Script cript to:

  • Export After Effects files as JSON like Objects
  • Standardize After Effects to JSON Exporters
  • Create a platform on which renderers can be built on top of
  • Have proper unit tests to catch breaking changes in After Effects

Documentation on Adobe's After Effects scripting guide can be found here:

Usage

NPM

There are a few ways that you can consume this module. They are documented below:

Usage with the after-effects module

The after-effects allows you to run "functions" in After effects. Pass it one function it will return you the value in Node. No need to use the After Effects Scripting tools. To use with after-effects:

Install after-effects:

$ npm i ae-to-json after-effects --save

In Javascript:

var aeToJSON = require('ae-to-json/after-effects');
var ae = require('after-effects');

ae.execute(aeToJSON)
.then(function(json) {
  // do something with the json outout
})
.catch(function(e) {
  throw e;
});

Usage in After Effects' Scripting tools

Copy the contents of dist/index.js. The dist build will bring in es-5 shims and a JSON shim.

In After Effects go to:

  • File
  • Scripts
  • Open Script Editor
  • Paste contents into Script Editor

You should now be able to do something like:

JSON.stringify(aeToJSON(), null, '  ');

Build and use in your own JSX Scripts

Since After Effects currently uses a Ecma Script 3 engine you will need to shim in Ecma Script 5. Also you should shim in JSON also.

Install:

$ npm i ae-to-json es5-shim JSON2 --save

Javascript:

// shim in es5 functionality
require('es5-shim');

// you might want to make JSON be a global
JSON = require('JSON2');

var aeToJSON = require('ae-to-json');

// do something with the aeToJSON function

After this you'll most likely want to browserify the Javascript file defined above.

$ browserify index.js -o bundle.js

High Level Exported Format

Here's an example on an high level what will be exported from After Effects. For a more detailed example of an export check out: https://raw.githubusercontent.com/Jam3/ae-to-json/master/example/example.json

These files can be very large since we attempt to export everything but at least this small bit of documentation will help you get started traversing the exports:

{ 
  // meta data for the project
  project: {

    // items which are used in the Project panel
    // this includes: 
    //  Compositions, 
    //  Footage (images, videos, solids, etc.),
    //  Solids,
    //  etc.
    items: [
      // Composition Type
      {
        typeName: 'Composition',
        // these are the Compositions layers
        layers: [
          {
            // this includes all properties for this layer
            // properties are things like:
            //  Transform, (position, scale, rotation, anchor, etc.)
            //  Material Options,
            //  Effects,
            //  etc.
            properties: {

              // this is what the transform property would look like
              Transform: {

                // Transform's have their own properties
                // This is what X Position on a high level would look like
                "X Position": {

                  // if a property is animatable it will contain keyframes
                  // keyframes will be a two dimension array where each element
                  // on the second dimension is a key frame
                  "keyframes": [
                    // each key frame has a time (in seconds) which is at [0]
                    // a value which is at [1] (values can be scalar values 
                    // or arrays represented by arrays)
                    // 
                    // And an optional ease value. Generally you'd need more
                    // than one keyframe to have ease values.
                    // 
                    // It should be noted if no keyframes were added in After 
                    // Effects for ease of use one keyframe will be output with
                    // the value at time 0
                    [ time, value, ease ]
                  ]
                }
              }
            }
          }
        ]
      },
      {
        typeName: 'Footage'
      },
      {
        typeName: 'Folder',
        items: [
          // this items folder would contain
          // Compositions, Footage, Solids, etc.
        ]
      }
    ]
  }
}

Export Example

You can view an export example at (be forewarned these files are huge):

https://raw.githubusercontent.com/Jam3/ae-to-json/master/example/example.json

Testing

To run tests there are two scenarios. Run a test just once or watch the src/and test/ folders and run tests. Below are the commands to run tests:

To run test once:

$ npm test

To watch and run (better for development):

$ npm start

When run unit tests are run on the JSON out along with a testOutput.json file is exported to the root director of this repo.

License

MIT, see LICENSE.md for details.

More Repositories

1

math-as-code

a cheat-sheet for mathematical notation in code form
14,818
star
2

devtool

[OBSOLETE] runs Node.js programs through Chromium DevTools
JavaScript
3,774
star
3

nice-color-palettes

nice colour palettes as JSON
JavaScript
848
star
4

three-bmfont-text

renders BMFont files in ThreeJS with word-wrapping
JavaScript
764
star
5

glsl-fast-gaussian-blur

optimized single-pass blur shaders for GLSL
JavaScript
659
star
6

hihat

🎩 local Node/Browser development with Chrome DevTools
JavaScript
447
star
7

jam3-lesson-webgl-shader-threejs

Using custom vertex and fragment shaders in ThreeJS
JavaScript
361
star
8

jam3-lesson-webgl-shader-intro

A brief introduction to fragment shaders.
307
star
9

web-audio-player

a cross-browser WebAudio player
JavaScript
244
star
10

360-image-viewer

A standalone panorama viewer with WebGL
JavaScript
243
star
11

msdf-bmfont

Generate BMFont texture and spec using msdfgen
JavaScript
161
star
12

jam3-lesson

142
star
13

audiobuffer-to-wav

convert an AudioBuffer to .wav format
JavaScript
132
star
14

Invisible-Highway

Invisible Highway is an experiment in controlling physical things in the real world by drawing in AR. Simply make a pathway along the floor on your phone and the robot car will follow that path on the actual floor in your room. A custom highway with scenery is generated along the path to make the robots a little more scenic on your phone screen.
C#
130
star
15

awesome-streetview

beautiful [lat, lng] Google Street View locations
JavaScript
129
star
16

ffmpeg-gif

shell script to convert video to high quality GIF with ffmpeg
JavaScript
124
star
17

jam3-lesson-module-basics

intro to modular programming for frontend JavaScript
113
star
18

orbit-controls

generic controls for orbiting a target in 3D
JavaScript
110
star
19

nextjs-boilerplate

Jam3 NextJS Generator for SPA, SSG, SSR and JAMStack applications
TypeScript
107
star
20

svg-to-image

convert SVG text to a Image that can be drawn in canvas
JavaScript
103
star
21

voice-activity-detection

Voice activity detection
JavaScript
102
star
22

extract-streetview

extract street view spherical images and depth information
JavaScript
101
star
23

react-f1

F1 ui animation library for React
JavaScript
90
star
24

webgl-react-boilerplate

WebGL React App ⚑️
JavaScript
87
star
25

opentype-layout

word wraps and lays out Opentype.js glyphs
JavaScript
86
star
26

chaikin-smooth

Chaikin's smoothing algorithm for 2D polylines
JavaScript
82
star
27

f1

A stateful ui library
JavaScript
78
star
28

touch-scroll-physics

scroll physics for a scroll pane with edge bounce and velocity
JavaScript
77
star
29

preloader

A library for loading common web assets
JavaScript
69
star
30

three-png-stream

streams ThreeJS render target pixel data
JavaScript
66
star
31

layout-bmfont-text

word-wraps and lays out text glyphs
JavaScript
59
star
32

react-background-video-player

React background video component with simple player API
JavaScript
58
star
33

ios-safe-audio-context

create a WebAudio context that works in iOS and everywhere else
JavaScript
57
star
34

perspective-camera

a high-level 3D perspective camera
JavaScript
53
star
35

glsl-hsl2rgb

HSL to RGB color conversion in GLSL
GLSL
50
star
36

touches

simplified touch/mouse events for flick and swipe
JavaScript
45
star
37

ios-video-test

a test of inline iOS video playback
JavaScript
45
star
38

three-path-geometry

thick 2D lines for ThreeJS
JavaScript
42
star
39

jam3-lesson-canvas2d

open source code for a Canvas2D workshop at Jam3
JavaScript
41
star
40

maya-json-export

a generic Maya to JSON exporter for triangle meshes
JavaScript
41
star
41

glsl-100-to-300

transpiles GLSL tokens from v100 to v300 es
JavaScript
39
star
42

xhr-request

tiny http client for Node and the browser
JavaScript
39
star
43

webvr-gearvr-test

a simple test of WebVR running natively in GearVR
JavaScript
38
star
44

generator-jam3

This is a generator for Jam3 projects
JavaScript
37
star
45

google-maps-api

Get up and running with the google maps API quickly
JavaScript
34
star
46

babel-plugin-static-fs

statically transforms Node fs for the browser
JavaScript
33
star
47

ae-to-json-cli

This is a command line application to export After Effects files as JSON
JavaScript
33
star
48

tech-we-use

A list of technologies: modules, libraries, and tools we use
32
star
49

load-bmfont

loads a BMFont file in Node and the browser
JavaScript
31
star
50

jam3-testing-tools

a brief intro to testing tools
30
star
51

gl-pixel-stream

streaming gl.readPixels from an FBO
JavaScript
30
star
52

jam3-lesson-module-creation

introduction to creating a new npm module
29
star
53

threejs-generate-gif

Generate an animated GIF (using the GPU) from a threejs scene
JavaScript
29
star
54

tap-dev-tool

prettifies TAP in the browser's console
JavaScript
29
star
55

text-split

Utility for splitting text into chunks based on regex.
JavaScript
27
star
56

three-simplicial-complex

render simplicial complexes with ThreeJS
JavaScript
27
star
57

three-buffer-vertex-data

an easy way to set vertex data on a BufferGeometry
JavaScript
27
star
58

parse-dds

parses the headers of a DDS texture file
JavaScript
26
star
59

threejs-post-process-example

a tutorial on ThreeJS post processing
JavaScript
24
star
60

add-px-to-style

Will add px to the end of style values which are Numbers
JavaScript
24
star
61

google-panorama-by-location

gets a Google StreetView by [ lat, lng ]
JavaScript
24
star
62

mesh-heightmap-contours

Given a heightmap, generate a "contoured" terrain mesh
JavaScript
24
star
63

detect-import-require

list require and import paths from a JavaScript source
JavaScript
24
star
64

says

cross-platform 'say' command using Electron
JavaScript
23
star
65

background-cover

Simulate 'background-size: cover' on HTMLVideoElement and HTMLImageElement
JavaScript
23
star
66

analyser-frequency-average

gets an average intensity between two frequency ranges
JavaScript
23
star
67

webgl-components

Modular components and utilities used for WebGL based projects πŸ’…
TypeScript
22
star
68

video-element

A simple HTML5/YouTube Video Element with a unified interface
JavaScript
22
star
69

three-fluid-demo

ThreeJS fluid simulation demo
GLSL
22
star
70

delaunify

randomly delaunay-triangulates an image
JavaScript
22
star
71

camera-unproject

unproject 2D point to 3D coordinate
JavaScript
21
star
72

heightmap-contours

Generate a series of 2D contour meshes over a heightmap
JavaScript
21
star
73

glsl-blend-overlay

blend mode 'overlay' for GLSL
C
20
star
74

ray-3d

a high-level ray picking helper for 3D intersection
JavaScript
19
star
75

scroll-manager

A handler for scrolling inside elements with different eases
JavaScript
19
star
76

touch-pinch

minimal two-finger pinch gesture detection
JavaScript
19
star
77

three-orbit-viewer

quick harness for viewing a mesh with orbit viewer
JavaScript
18
star
78

css-transform-to-mat4

Will take a string which is a css transform value (2d or 3d) and return a mat4 or 3d transformation matrix from the string.
JavaScript
17
star
79

gl-shader-output

test a shader's gl_FragColor output on a 1x1 canvas
JavaScript
17
star
80

gh-api-stream

streams JSON content from a GitHub API
JavaScript
17
star
81

uploadr

CLI tool which uploads a folder via SFTP
JavaScript
17
star
82

camera-spin

Mouse/touch-draggable first-person camera
JavaScript
17
star
83

exif-orientation-image

Properly displays an image via canvas based on the exif orientation data.
JavaScript
16
star
84

jam3-lessons-react

Quick and brief reference for React development
15
star
85

preview-dds

preview and save DDS textures from the command line
JavaScript
15
star
86

meetup-creative-coding-webgl

A WebGL experiment created for Jam3's Creative Coding Meetup on October 23rd 2019.
JavaScript
14
star
87

detect-audio-autoplay

detects whether the browser can auto-play audio
JavaScript
14
star
88

ae-threejs-multichannel-sdf

A signed distance field Effect plugin for Adobe After Effects
C
13
star
89

slot-machine-button

🎰 React Slot Machine Button
JavaScript
13
star
90

google-maps-image-api-url

This module will return a string which is a url to load an image from the Google Maps Image API
JavaScript
13
star
91

webgl-to-canvas2d

Convert a webgl context or webgl canvas into a 2d canvas
JavaScript
13
star
92

f1-dom

Create f1 ui with the dom
JavaScript
12
star
93

nyg

Not another yeoman generator, a simplified project generator based around prompts and events.
JavaScript
12
star
94

camera-picking-ray

creates a picking ray for a 2D/3D camera
JavaScript
11
star
95

scroll-bar-width

Detect browser scrollbar size
JavaScript
11
star
96

nyg-jam3

Second generation of the Jam3 Generator, many new features and breaking change features
JavaScript
11
star
97

awwwards-stream

scrape Awwwards data
JavaScript
11
star
98

adviser

Jam3 quality advisor. Integrates checking for best practices at Jam3
JavaScript
11
star
99

google-assistant-21-days-of-gratitude

JavaScript
11
star
100

google-assistant-greeting-cards

JavaScript
10
star