How to create Scripts UI for After Effects

Hey there, I need to know how to create scripts UI or panel for after effects like Handy Seamless. I know that software created with java but I need more information.? That means I don’t know where to start.?

1 Like

I m curious about it too. When you look outside it seems like a messy work but there must be some sort of easy way.

Not an expert, so don’t blame me if some details are not accurate, but here you go:

Besides writng a complete plugin, there are two options to add UI-based add-ons to After Effects:

  1. a script with an UI panel (jsx or jsxbin file)
  2. an extension (mostly in a zxp container)

Motionbro, the software that comes with Handy Seamless Transitions, is an extension.
The Handy Seamless Transition Script (I think only included in the first few releases of HST) is a script.

The difference between an extension and a script is in the way they are build and also their functionalities. If you want to do complex UI stuff, an extension is a way to go, here you have the whole javascript, jquery UI animations etc. An extension does run a script in the background, but shows you a nice, neat interface as the frontend.

If all you need to have is some buttons, text inputs, etc, and you don’t need dynamic UI effects (like loading images and videos into the add-on that will then appear in the add-on panel itself), I’d advice to go the scriptUI route.

Here is a great starting point to scripting:

5 Likes

Thank you very much for your answer Creative, I think that’s all I need .

Any idea about HTML5 CSS process ?

This might be a valuable ressource for that, not for after effects per se, but a lot of the basics can be learned here:
https://www.w3schools.com/

1 Like

That was very helpful. Thank you so much.

Hi,
It is not very hard. Just need some easy html codes. also you can download the manfest files for your extension from gthub then go to edt the index file from folders( it is for eaxmple for clickable buttons) and your css folder for your them or backgrounds or font styles. then you need a signutere to runing your code and some edit from your Rigistery of your windows or mac. Edit the html files and css by nodepad++ and for find the uniqe codes for example import the file or make solid, install the extended script and search these codes. Wish you have many sales. (sorry for my not prefect language I come to canada for study) :slight_smile:

1 Like

Thank you, very helpful. Now we only need a roadmap a little detailed scheme like where to start, designing interface in PS ? Adapting it in HTML ? Defining functions in js like import comps, layers, activating effects properties then linking them to interface in js or html, packing files as extension ?

1 Like

Hi,

it’s better you design the UI in Adobe XD.you can write the some important codes in HTML 5 and some codes in js. best regards

2 Likes

Most of the resources for creating extensions are on Github, with the exception of a few tutorials like this. You can use Adobe XD to design a UI (which is what Adobe is pushing for), but it will really limit you when it comes time to add functionality and customisablity to your UI. I prefer using Sublime to edit my HTML, CSS, and JS, as I have full control!

Any addons you use in Sublime Text to run js files like ExtendScript ? HTML okay but I couldnt manage to run js files from Sublime Text.

Fantastic tutorial. As i see you save file and run it from After Effects. Is this the way debug or build UI ? Any easy way to see progress step by step like we debug html files from Chrome ?

Yeah I use a somewhat slower method to develop my UI, but it helps more on the scripting side of things! I don’t use any plugins, just Sublime to edit the code and save it! I believe you can run the HTML file from Chrome to get more realtime HTML/CSS/JS feedback as well, it may have some limitations though.

I just prefer to do everything from inside of AE, in order to better simulate all the possible cases the user may end up facing! If you do all your testing in Chrome, you’re going to have to do more testing in AE down the line, because you haven’t spent as much time messing around with your extension in its actual environment!

You re right it is proper way to test in AE. Thank you very much for your time and info it ll be very helpful.

Any notices to consider about compatibility in AE versions ?

That’s really hard to tell right now! In general with extensions, you want your CS Library version to match your manifest.xml file, and AE version for the best compatibility. BUT, since Adobe just removed support for all programs before CC 2018, the future is unclear! They’ve announced plans to move towards a new language and slowly get rid of the current ones, so we shall see how it goes. In general, extensions only work for versions CC 2014+, but now it looks like you’ll only need to worry about 2018 and 2019.

2 Likes

Well im working and almost done Beta version more in this thread

1 Like