Everything you need to start coding conveniently.

Ae - Set-up your Scripting environment for After Effects

Everything you need to start coding conveniently.

Setting up a scripting environment for After Effects

What’s a Rich Text element?

What’s a Rich Text element?

What’s a Rich Text element?

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

Long story short, adobe used to make “ExtendScriptToolkit” which was a text editor for writing and executing code. It had some good integration with other adobe software but it has been discontinued a few years back. You can still download it if you want to, but it is pretty outdated at this point and performs pretty poorly on mac.

To start scripting for After Effects my personal recommendation would be to use Atom + a package that sends scripts directly to After Effects created by the almighty renderTom

How to install:

Let’s set up your coding environment:

  1. Download and install Atom. it is a free and open source text editor made by github, it’s very customizable using ‘packages’ that you can download and install easily from inside the app, as well as themes to make it pretty and fun to stare at for hours and hours.
  1. Install Adobe Script Runner. Installing this package will give you the functionality to quickly send and test the scripts you will be writing to After Effects.

What kind of sorcery is this? 🧙

Follow the Good Boy Ninja on Twitter for After-Effects tips and tricks

Setting up & getting comfy:

Once you have those two installed, you can use Ctrl+N / Cmd+N to create a new document. In the bottom right corner of Atom you will see “Plain Text”. This means the current document doesn’t use any special formatting. If you click it and change it to ‘JavaScript’ you will notice that once we start coding Atom will automatically use contextual text colors to help you navigate easily through the code.

Now if we write the following code in our new document:

alert("I’ve been a good boy!");

We can press Ctrl+Alt+R / Cmd+Alt+R and look at that:

If you set up everything correctly your code was successfully sent to After Effects. The ‘alert()’ function creates a popup window that can display a string of text you enter inside the round brackets, inbetween quotation marks.

You can now save your file. Try to make sure you save it as “fileName.jsx”. As we’re mostly working with JavaScript we use the .jsx extension to save our files in a compatible format for After Effects to read.

Getting even comfier:

You’re ready to start writing scripts. I would also like to recommend you some other packages you can install now inside Atom to make the writing experience even nicer.

1. Atom Beautify will make your code pretty in 1 click. It never changes your code, but only cleans up the formatting so it looks tidy.

2.  Atom Brackets Glow really helps identifying pairs of brackets. You use a bunch of brackets in code of different kinds ( (), [], {} etc ) and you want to make sure you don’t leave them open. This packages highlights pairs when your typing courser approaches next to one of them.

3. Minimap helps you navigate longer codes by previewing the code page next to the scrollbar.

4. Highlight Selected highlights the current selected words throughout the entire code sheet, you can navigate your way around longer codes easily.

That should help you get off to a good start, you’ve got everything you need to start coding conveniently. Wiggle Wiggle Wiggle and good luck with your new adventure!

Good Boy Ninja
Motion Designer since 2008.
Maker of tools for Adobe After-Effects
Quick jump:
May 12, 2020
Similar Posts