Box O’ Tricks

(version 1.87) Docs


Box O’ Tricks (BoxOfTricks.jsxbin) is a script for Adobe After Effects (version 11, CS6 or later) that creates a dockable panel that can be made to hold buttons to do just about any task you might use repeatedly. The buttons can activate scripts (.js, .jsx, .jsxbin), effect presets (.ffx), or executables, a.k.a. applications (.exe files on Windows; .app files on OSX). The panel can be reduced to a narrow vertical “button strip”, so “screen real estate” is optimized. It is easily configured and customizable.


Installing Box O’ Tricks:

The installer will install the script into the After Effects UIScript Panels folder in the AE Scripts folder. Also installed into this folder is a folder called “BoxOfTricksFiles”, which contains an image (“BOTICON.png”) for the icon button image for the “about” button ( bot.png ), which is not made to be edited (or deleted -- but I suppose you can edit it if you want to), and a sequence of png images for each custom button in the button strip -- these you can edit or replace. Each of the editable png images may be replaced with whatever png image you want (the size of each button is 25x25). The default custom buttons are simply numbered images from one to thirty:


 bot1.png bot2.png bot3.png bot4.png bot5.png bot6.png bot7.png bot8.png bot9.png bot10.png ... 


It might be a good idea to keep a back-up of the default number sequence images. And feel free to make your own numbered sequence set (using After Effects would be one way of doing it).


First Run:

When you first run the script (from the AE Window menu), the B.O.T. panel will appear, probably undocked, with a “Box O Tricks” icon button and a “Configure ...” button. Pressing the icon button on the left will display a basic info message. Pressing the Configure button will allow you to build your custom column of buttons; you can do this now or after docking the panel -- but it is probably better to do it after docking the panel, as it does recognize the height of the frame/panel for listbox-resizing purposes.

B.O.T. is designed to be docked into the After Effects UI on the far right side of either the entire AE “unified” interface or some frame within the interface. I prefer the far right of the main interface. In normal work mode you can have this strip minimized to its smallest width to optimize screen real estate. When you need to check on one of the custom buttons or configure the panel further, you can slide the left edge of the panel to the left to reveal the buttons’ corresponding file names, and the configure button.


The preferences file (do not edit unless you really know what you’re doing) lives in the top level of the /Users/<username>/Library/Application Support/ directory on OSX, on Windows in C:\Users\<username>\AppData\Roaming\.

You may have a set of B.O.T. buttons that you like and want to keep but, in starting a new project, a whole new set would be better for the new project. What to do? One way to deal with this is to copy the B.O.T. preferences file (“botricks_prefs”) somewhere for backup and build a new set (or modify a copy of the original). If you want to go back to your original set, you can swap preferences files. Make sure, though, that you also copy/back-up your png image set associated with the buttons! If you really know what you’re doing, you can write your own script to swap out buttons preference- and image-sets.


Size of Button List:

The container that holds the list of buttons is called a listbox. If you have enough buttons (macros) in the list to exceed the height of the panel, scrolling becomes an issue. To allow for correct scrolling, the height of the listbox within the panel must not be taller than the panel (or frame) in which the listbox resides. This is because scrolling does not “exist” for scripted UI panels themselves, but scrolling does exist for listboxes (within a UI panel). For this reason there are the “-“ and “+” buttons at the top of the panel to the right of the “Configure” button, and a “save height” button. These plus and minus buttons act as regular push buttons, but are also what I like to call “tickle buttons”, which, when the Shift key is held down, will activate the button simply by wiggling the cursor over the button. When you have adjusted the height to be the way you like it, you must press the “save height” button to save the height value, otherwise redrawing the listbox will revert to the previously saved or default height.

You can re-build the whole button list by Shift-clicking on the top icon button. This is good because it allows you to update the list to include button graphics (png images) you may have just created. The list will also redraw when you exit “Configure” mode, even if you “Cancel”.

Speaking of Shift-clicking, if you Shift-click on any of the macro buttons in the list, the name of the file associated with (linked to) that button is reported in AE’s Info panel.


Modifying Existing Button Sets:

Using the Configure panel, you can remove a button if you don’t need it any more. If you remove it, it is replaced with a stand-in number string (e.g. #3) so the buttons will not lose their place in the list order (unless it is the last item in the list). You can also replace an existing button in the list with a different one. Keep in mind that you still need to make changes to the png image associated with that macro button.


Using Different Button Dimensions:

The default button set is 25 pixels by 25 pixels. These dimensions were for my own aesthetic preference, and also because this size makes for perfect minimum width placement. I wanted a button bar minimized to the smallest size on the right side of my UI, with custom images that I can easily recognize to be the actions linked to the buttons. There are plenty of people who might want each button to be a size that accommodates a short text string, like “subtle glow” or “tweak curves”, for example. This won’t work for 25x25 buttons; two or three letters is all you can manage at that size. Fortunately, this “text button” feature is possible for B.O.T., but requires you render your own button sequence at your desired size. For example, you can use pngs that are 70 pixels wide by 15 pixels tall. This gives you more space for a short text string. But it does make for a slightly awkward placement of the “Configure” button at the top. 60 pixels wide allows you to hide the Configure button. It’s up to you to work out what you like best.



About the Preferences file:

You should not need to edit the preferences file that Box O’ Tricks uses. But this section describes the format of the preferences file if for some reason you need to modify it.


1) The first line of the file is a comment. There must be a first line.

2) The next line consists of an asterisk (*). This asterisk line must exist.

3) The following lines contain the file names.

4) At the end of this file name list, there must be two ‘returns’ (in JavaScript, “\r\r”).

5) After the two returns, the next line is a double asterisk (**). This line must exist.

6) The following lines contain the file paths.

7) Nothing must follow these file paths (apart from empty lines).


Any line in either the file name list or the file path list that consists of only a dash (-) represents an empty button space, as when you use the “Remove Selected” button, and an empty slot is created from this line that does nothing (apart from display the button’s position [number] in the list).

Whether the file name list or file path list contain actual objects or “empties” (“-“s), both lists should be ‘in sync’, so that a path and its corresponding file name (or two dashes) should appear in both lists in exactly the same list position)