How to make something useful in Extendscript pt. 4

The essence of my panel is to store my commonly used expressions. I'm not very good at remembering them, probably because I don't know the Javascript fundamentals very well, so a panel that stores them all would be useful.

After some blundering around I was able to target the first layer in an active comp, and apply a wiggle to the position property.

app.project.activeItem.layer(1).property("Position").expression = "wiggle(2,2)";

What I really wanted though was to target a currently selected property, since I wiggle other things sometimes. There I got stuck, luckily AE guru Dan Ebberts helped me out with this:

props = app.project.activeItem.selectedProperties;
for (var i = 0; i < props.length; i++){
  if (props[i].canSetExpression){
    props[i].expression = "wiggle(2,2)";
  }
}

This works, thanks again Dan. This whole code now replaces the 'alert' part of our button action

    if  (myList.selection.text=="script01"){
        << alert("pressed something"); >>
        };

The only issue left was in formatting the expressions I wanted to use. In order to accommodate the Javascript characters within the expressions you have to format it using escape characters. This is where the freeFormatter escape character tool comes in handy.

As a follow on I found François Tarlier's code on smipple to be very helpful in working out more complex if statements and alerts.

Cheers.

How to make something useful in Extendscript pt. 3

From the end of Part 2 it looks like this:

We create the window, add the button, then create an onClick function for the button. To add a list instead of a button it looks similar:

var myList = myPanel.add ("listbox",[10,10,200,280]);

we just have to add the items for list directly afterwards:

myList.add ("item", 'script 01');
myList.add ("item", 'script 02');
myList.add ("item", 'script 03');

A list [the object name is listbox] uses different actions to work since it behaves differently to a button, we can use onChange and onDoubleClick. 

 myList.onDoubleClick = function () {...}

Within the "myList.onDoubleClick" function is the code for what happens on the selected list item.

if  (myList.selection.text=="script 01"){
   alert("pressed something");
};

There are two ways of doing this as well, you can use selection.text=="" and type the name of the item, or you can use selection.index==0 and that will return the first item in the list. Handy.

This example uses both those methods and creates actions for the first 2 list items:

Getting there, we have a dockable ScriptUI panel that does stuff.  The next bit of problem solving is how to apply an After Effects expression to a selected layer.

More of that in the last bit Part 4.

How to make something useful in Extendscript pt.2

So from Part 1. we already have our Window being created.

In this line we create a newWindow that is a “palette” and name it My Window

(“palette”,”My Window”,undefined)

Undefined refers to the position and size of the palette.


If we want to start controlling the design a little we can instead write

(“palette”,”My Window”,[100,100,300,300])

Inside those square brackets the values represent [xPos, yPos, width, height].


Next we want to start populating the palette with our Things.

This is the full code we have so far:

function createUI(thisObj) {
    var myPanel = (thisObj instanceof Panel) ? thisObj : new Window("palette", "My Window", [100, 100, 300, 300]);
    myPanel.add("button", [10, 10, 100, 30], "Tool1");
  
return myPanel;
}
var myWindowPanel = createUI(this);

So, roughly, we have a function called createUI with a new Panel named myPanel being created. It is a palette object named My Window and we define the pos and size. Then to add a button:

myPanel.add("button", [10, 10, 100, 30], "Tool1");

We add a button type object to myPanel, define the pos and size and supply the button text as Tool1.

Great. At this point it works, we have one little button but it doesn't do much. In order to add an action to the button we need to place the addition of the button inside a variable, so we change

myPanel.add("button", [10, 10, 100, 30], "Tool1");

to

var myButton = myPanel.add("button", [10, 10, 100, 30], "Tool1");

and add this afterwards

myButton.onClick = function () {
    alert("click")}

At this point testing becomes tricky because we're creating a ScriptUI panel and these don't seem to display in Extendscript independently, not like a standard 'script'. It's a bit of a hack but drop your jsx file into the scriptUI folder, restart AE so it will see it there and keep the jsx file you're working on in another folder. Then when you update it just drag and drop to overwrite the one in the scriptUI folder and relaunch from the window menu in AE.

If you just wanted, say, 3 or 4 buttons in your panel this would be good enough. You can just step and repeat, changing the var names of the buttons and putting different actions inside the onClick functions.

For my purposes I want a list to hold about 10 items and the actions are handled slightly differently for those, so I'll get into that in Part 3.