tag:blogger.com,1999:blog-68174266710355823112024-02-19T11:07:12.221+02:00After Effects SnippetsAnonymoushttp://www.blogger.com/profile/04854262501238990421noreply@blogger.comBlogger5125tag:blogger.com,1999:blog-6817426671035582311.post-40045309991305854552016-07-14T15:09:00.000+02:002016-07-14T15:14:49.625+02:00How to make something useful in Extendscript pt. 4<div>
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.<br />
<br />
After some blundering around I was able to target the first layer in an active comp, and apply a wiggle to the position property.</div>
<blockquote class="tr_bq">
app.project.activeItem.layer(1).property("Position").expression = "wiggle(2,2)";</blockquote>
<div>
What I really wanted though was to target a <b>currently selected</b> property, since I wiggle other things sometimes. There I got stuck, luckily AE guru Dan Ebberts <a href="https://forums.creativecow.net/thread/227/9812" target="_blank">helped me out</a> with this:</div>
<div>
<blockquote class="tr_bq">
props = app.project.activeItem.selectedProperties;<br />
for (var i = 0; i < props.length; i++){<br />
if (props[i].canSetExpression){<br />
props[i].expression = "wiggle(2,2)";<br />
}<br />
}</blockquote>
</div>
<div>
This works, thanks again Dan. This whole code now replaces the 'alert' part of our button action</div>
<div>
<blockquote class="tr_bq">
if (myList.selection.text=="script01"){<br />
<< alert("pressed something"); >><br />
};</blockquote>
</div>
<div>
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 <a href="https://en.wikipedia.org/wiki/Escape_character" target="_blank">escape characters</a>. This is where the <a href="http://www.freeformatter.com/javascript-escape.html" target="_blank">freeFormatter</a> escape character tool comes in handy.<br />
<br />
As a follow on I found François Tarlier's code on <a href="http://www.smipple.net/snippet/francoisgfx/Set%20Expression%20to%20selected%20property%20(in%20AE)" target="_blank">smipple</a> to be very helpful in working out more complex if statements and alerts.</div>
<div>
<br /></div>
<div>
Cheers.</div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br />
<br /></div>
Anonymoushttp://www.blogger.com/profile/04854262501238990421noreply@blogger.com0tag:blogger.com,1999:blog-6817426671035582311.post-86256947911246426202016-07-14T14:11:00.000+02:002016-07-14T15:15:09.890+02:00How to make something useful in Extendscript pt. 3From the end of <a href="https://aesnippets.blogspot.co.za/2016/07/how-to-make-something-useful-in_14.html">Part 2</a> it looks like this:<br />
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4YYuTKTulVuOQp_Cn_o3JzVuoXpQF3yK-OM4vIfnuw0ICvhw7Qq_3boLk-EJDzUg-tdPDQXEvCFW2PvTUYxHzy_j8olslpZbBYdFHal4v3naqPYXh24quuQvX_W1NNp2WirTHFL83/s1600/window-butto.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4YYuTKTulVuOQp_Cn_o3JzVuoXpQF3yK-OM4vIfnuw0ICvhw7Qq_3boLk-EJDzUg-tdPDQXEvCFW2PvTUYxHzy_j8olslpZbBYdFHal4v3naqPYXh24quuQvX_W1NNp2WirTHFL83/s1600/window-butto.png" /></a></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
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:</div>
<div>
<blockquote class="tr_bq">
var myList = myPanel.add ("listbox",[10,10,200,280]);</blockquote>
we just have to add the items for list directly afterwards:<br />
<blockquote class="tr_bq">
myList.add ("item", 'script 01');<br />
myList.add ("item", 'script 02');<br />
myList.add ("item", 'script 03');</blockquote>
</div>
<div>
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. </div>
<div>
<blockquote class="tr_bq">
myList.onDoubleClick = function () {...}</blockquote>
</div>
<div>
Within the "myList.onDoubleClick" function is the code for what happens on the selected list item.<br />
<blockquote class="tr_bq">
if (myList.selection.text=="script 01"){<br />
alert("pressed something");
<br />
};
</blockquote>
</div>
<div>
There are two ways of doing this as well, you can use <b>selection.text==""</b> and type the name of the item, or you can use <b>selection.index==0</b> and that will return the first item in the list. Handy.<br />
<br />
This example uses both those methods and creates actions for the first 2 list items:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCVlfSO_kuzbYBEudAAfCQ6s_quULM9fAh-8xJai3M2U-Nfk1qr7_8EKxF2_iOf2ChuNLxhA26_ZucavLT8S-amZje6sQVlB-MEJs1zgvonrTPab56vskl4rCWWmAUXFuciM2vPCq0/s1600/window-list.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCVlfSO_kuzbYBEudAAfCQ6s_quULM9fAh-8xJai3M2U-Nfk1qr7_8EKxF2_iOf2ChuNLxhA26_ZucavLT8S-amZje6sQVlB-MEJs1zgvonrTPab56vskl4rCWWmAUXFuciM2vPCq0/s1600/window-list.png" /></a></div>
<br />
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.<br />
<br />
More of that in the last bit <a href="http://aesnippets.blogspot.co.za/2016/07/how-to-make-something-useful-in_72.html">Part 4</a>.<br />
<br />
<br /></div>
Anonymoushttp://www.blogger.com/profile/04854262501238990421noreply@blogger.com2tag:blogger.com,1999:blog-6817426671035582311.post-32148947072951051032016-07-14T10:05:00.002+02:002016-07-14T14:15:12.417+02:00How to make something useful in Extendscript pt.2So from <a href="http://aesnippets.blogspot.co.za/2016/07/how-to-make-something-useful-in.html">Part 1</a>. we already have our Window being created.<br />
<br />
In this line we create a newWindow that is a “palette” and name it My Window<br />
<blockquote class="tr_bq">
(“palette”,”My Window”,undefined)</blockquote>
<b>Undefined</b> refers to the position and size of the palette.<br />
<br />
<br />
If we want to start controlling the design a little we can instead write<br />
<blockquote class="tr_bq">
(“palette”,”My Window”,[100,100,300,300])</blockquote>
Inside those square brackets the values represent [xPos, yPos, width, height].<br />
<br />
<br />
Next we want to start populating the palette with our <b>Things</b>.<br />
<br />
This is the full code we have so far:<br />
<blockquote class="tr_bq">
function createUI(thisObj) {<br />
var myPanel = (thisObj instanceof Panel) ? thisObj : new Window("palette", "My Window", [100, 100, 300, 300]);<br />
myPanel.add("button", [10, 10, 100, 30], "Tool1");<br />
<br />
return myPanel;<br />
}<br />
var myWindowPanel = createUI(this);</blockquote>
<br />
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:<br />
<blockquote class="tr_bq">
myPanel.add("button", [10, 10, 100, 30], "Tool1");</blockquote>
We add a button type object to myPanel, define the pos and size and supply the button text as Tool1.<br />
<br />
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<br />
<blockquote class="tr_bq">
myPanel.add("button", [10, 10, 100, 30], "Tool1");</blockquote>
to<br />
<blockquote class="tr_bq">
var myButton = myPanel.add("button", [10, 10, 100, 30], "Tool1");</blockquote>
and add this afterwards<br />
<blockquote class="tr_bq">
myButton.onClick = function () {<br />
alert("click")}</blockquote>
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.<br />
<br />
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.<br />
<br />
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 <a href="http://aesnippets.blogspot.co.za/2016/07/how-to-make-something-useful-in_88.html">Part 3</a>.<br /><br />Anonymoushttp://www.blogger.com/profile/04854262501238990421noreply@blogger.com0tag:blogger.com,1999:blog-6817426671035582311.post-6722631514936036852016-07-11T15:13:00.003+02:002016-07-14T14:14:22.366+02:00How to make something useful in Extendscript pt.1This is a short tutorial on how to create a dockable, <b>ScriptUI</b> panel for After Effects CC, that will hold a list of <b>expressions</b> and add them to a selected layer/property onDoubleClick.<br />
<br />
There are a handful of tutorials about extendscript, notably David Torno's series on <a href="http://www.provideocoalition.com/after-effects-extendscript-training-complete-series/" target="_blank">ProVideoCoalition</a>. This is a good series to watch if you're keen on learning from scratch and really getting into the coding side of things, but if you're like me and just need a basic understanding and a quick prototype turnaround then these are the essential resources:<br />
<br />
<a href="http://www.kahrel.plus.com/indesign/scriptui.html" target="_blank">Peter Kahrel's Script UI for dummies</a><br />
He has written a properly useful guide to extendscript for InDesign which obviously translates well into After Effects, minus the AE specific objects.<br />
<br />
<a href="https://github.com/fabiantheblind/extendscript" target="_blank">Fabian The Blind</a><br />
Some good layout experiments and UI snippets<br />
<br />
<a href="http://blogs.adobe.com/creativecloud/files/2012/06/After-Effects-CS6-Scripting-Guide.pdf" target="_blank">The After Effects Scripting Guide</a><br />
The official guide<br />
<br />
Javascript Tools Guide<br />
To be found in ExtendScript Toolkit / SDK .. on your computer<br />
<br />
<a href="http://www.freeformatter.com/javascript-escape.html" target="_blank">FreeFormatter.com</a><br />
Just a neat little Javascript escape character inserter that I found useful for adding AE expressions into my code<br />
<br />
<br />
<br />
To start with it's helpful to know there is a difference between coding a <b>Script</b> and a <b>ScriptUI</b>. After Effects sees the way Windows are constructed differently for each. <br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em; text-align: left;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyCrCBRYiaYvVPrj16iUMQOl4CceMYY0ivUmFxmV3uA2c1McOuWZCEcO3bmAZCjoWUE2-kouoabNAvJu7ODDXp7QKIY537aIKE6-2NoBtF1NSMMlZmlVp40H9E-ITgpo6jdcUIUepK/s1600/002.png" /><span style="color: #cccccc; font-family: "georgia" , "times new roman" , serif; font-size: x-small;">For a non-dockable script that runs from the script menu</span></div>
<br />
<div style="text-align: left;">
<div style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWw9xHmLTfxzqqFkXg1pD5ZN50SGqdlUnpAO_HOk2fUQ7voq9I7Td3ACF9daBCXReOTZ8V045kHQEqV80oDEblKlaOUXI4FCeELNjg42E2l_aRahwTVpEL4zIIVIhZ80B0ahPVVXru/s1600/001.png" /><span style="color: #cccccc; font-family: "georgia" , "times new roman" , serif; font-size: x-small;">To create a dockable ScriptUI panel that runs from the window menu</span></div>
</div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
David Torno explains this well but I got confused following him because of another fundamental difference in structuring the code: code-based vs resource string.<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFdggoX9p781fIhZhybaqLBTTdMEUEhaf6FBpxcO2AnL9r1zbiryZKXLdFm7ExxeujVvVVJg490or6mKTGF0lZ1jBJH5ukl9L4qcv49N_g54vmc-tUo3iA-hy6fQIGIiiRV-wuz3rF/s1600/resString.png" imageanchor="1" style="clear: left; margin-bottom: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFdggoX9p781fIhZhybaqLBTTdMEUEhaf6FBpxcO2AnL9r1zbiryZKXLdFm7ExxeujVvVVJg490or6mKTGF0lZ1jBJH5ukl9L4qcv49N_g54vmc-tUo3iA-hy6fQIGIiiRV-wuz3rF/s1600/resString.png" /></a><br />
<br />
I lost Torno a bit in his series because I thought ScriptUI would only work with resource string [above] but in fact you can code these in the simpler, more modular format that Pater Kahrel's guide is mostly written in [below].<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglk5yExB6eSnP1psAZl4f1RY4enidow9TFosK5dhNzO-gKCJPqiKOLKy6pRQFoztXOxS2XCU29En9RzaGBjX2K-3dRtkElwYtIiGJdukOrQoPsGiq93VUlw34ctaoRz507flQ1irjM/s1600/codeBased.png" imageanchor="1" style="clear: left; font-family: Times; margin-bottom: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglk5yExB6eSnP1psAZl4f1RY4enidow9TFosK5dhNzO-gKCJPqiKOLKy6pRQFoztXOxS2XCU29En9RzaGBjX2K-3dRtkElwYtIiGJdukOrQoPsGiq93VUlw34ctaoRz507flQ1irjM/s1600/codeBased.png" /></a><br />
<br />
Such is life.<br />
<br />
<a href="https://aesnippets.blogspot.co.za/2016/07/how-to-make-something-useful-in_14.html">Part 2</a> will be more about creating the window for a ScriptUI, adding buttons and calling functions.<br /><br />Anonymoushttp://www.blogger.com/profile/04854262501238990421noreply@blogger.com0tag:blogger.com,1999:blog-6817426671035582311.post-64375364821805924962016-07-11T13:47:00.002+02:002016-07-11T13:50:54.261+02:00init.<span style="background-color: black; color: #eeeeee; font-family: "georgia" , "times new roman" , serif;">Some bits of code and techniques for Adobe After Effects.</span>Anonymoushttp://www.blogger.com/profile/04854262501238990421noreply@blogger.com0