Tricks Index

Brain Dump

It seems like there are certain things I've learned, forgotten, and been forced to relearn. Rather than write it down somewhere private, or pretending that I have a better memory than I actually do, I thought it might be helpful to put this stuff up on a webpage, and maybe it might get indexed by a search engine somewhere so that others might benefit from my struggles.


I haven’t looked at, or updated this in years! I have no idea if this all still works...

jQuery: Make an accordion index (like this one)

I'm starting to learn jQuery, so I figured that this page would be an ideal candidate for experimentation.

First, link to the online copy of the library in the head of your document.

You could also put a copy of the library on your site, by the way...

...and here's the jQuery script that also should be put in the head of your document:

// hide all the things
$('.thing ').hide();
//set each h2 to trigger showing things

And here's a typical section of the HTML. Notice that I encased the hidden section in a class named "thing."

<h2>How to pick a winning horse</h2> <div class="thing"> <p> Invent a time machine. Go to the future. Attend many horse races. Make notes. Return to the past and profit! </p> </div>

I half-figured this out on my own, and half swiped this from

After Effects: Fade layer in with expressions

I just had to do this today; an animation where you basically have a long line of layers spread out in Z-Space (offset from each other by 2000 pixels), being dragged by the camera using a common null. I wanted them to fade in gracefully, but not have to keyframe each one (and move the keyframes as the timing changed).

Add this expression to the opacity of each layer you'd like to fade in:

startFade = 2000;
endFade = 3000;
d = (thisComp.layer("Null 2").position[2]+thisLayer.position[2]) - thisComp.layer("Camera 1").position[2];

This expression assumes a couple of things. First, it assumes that there's a camera in the composition named "Camera 1." Secondly it assumes that there's a null in the scene named "Null 2." The values for startFade and endFade are tweakable to your needs.

What it does is subtract the z-distance of the camera's position from the layer's z-position (using the null's position plus the offset distance) to determine the value d. As d goes from startFade to endFade the values are faded from 0 to 100, fading it in.

Want to fade it out? Just swap the values, making the last line:


This was largely adapted from another script by Dan Ebberts, someone much brighter than I am.

Flash preloader with still frame

Let's say you want to load a Flash file, but it'll take a while to load, and you'd like to use a still frame of the first frame to occupy the space on the page until the movie has fully loaded. Here's what I've used in the past:

  • Make a preloader... call it preLoader.fla (or whatever). This is the file that is embedded in the webpage.
  • Make 2 layers. Name the first "actions" and the second "still" (naming is optional).
  • On frame 1, layer 1 add this script:
  • stop();
    this.myMovie.loadMovie("exampleSide.swf"); //replace with your filename!!
  • On frame 1, layer 2, put your standby still graphic (that will be replaced when the movie loads).

and voilà!

Be sure to test the actual swf, not using the preview function in Flash, which doesn't always accurately represent what will happen in a browser.

After Effects scripted type substitution

What if you have an After Effects comp that flies 2 words into screen, and then suddenly you're asked to do the same thing for 50 pairs of words? You could duplicate the comp and then tediously enter all the type, or you could be smart and use After Effects scripting.

This AfterEffects script takes a text file with words in it, sticks the words in the appropriate text layer, and makes then make comps from the input, and sets them up to render. The input file should be formatted to be easily imported into an array this example uses commas between word pairs separated by newlines (basically a comma separated file, like those exported from a spreadsheet or a database).

Here’s the script:

// Written and Copyright ©2005 by James Burns and J.C. Burns

// determine the currently selected object in the Project window
var curItem=app.project.activeItem;
// check to make sure it's a comp
if (curItem instanceof CompItem){
// If so, do main function
} else {
// if none were selected, advise them
alert("Please select a comp as the active item and run the script again");
// main function
function doIt(){
// Open input file
inputFile= fileGetDialog("Please pick the input file!","");

if (!inputFile){
alert("User cancelled script!");
} else {
// open file"r","TEXT","????");
// read file, break input into chunks, and store in an array
var readFile =;
var words= readFile.split("\n");

// Start undo group for handy undo
app.beginUndoGroup("Duplicated comps");

// Go through array, and for each word pair, make new comp from selected comp,
// stick words into two prepared text layers, named "word01" and "word02"

//make an array to hold references to the new comps
var newComps= new Array();

// Loop starts here
for (x=0; x < words.length; x++){
var tempArray= words[x].split(",");
var word01= tempArray[0];
var word02= tempArray[1];
var temp= curItem.duplicate();

// rename the comp word01 + "_" + word02;

// change the sourceText in the 2 layers

// add new comp to array of all comps created

// Loop ends
// Report on results
alert("Created "+ newComps.length +" new comps!");

// ask if we should add to render queue
var shouldAdd = confirm ("Add new created comps to Render Queue?");
if (shouldAdd){

function addToQueue(){
for (i=0;i // put finished comp into render queue

Make an index of a page

It’d be nice to auto-index a page according to its markup using JavaScript, wouldn’t it? Here’s what I came up with...

Here's the JavaScript part:

function makeIndex(){ // Make an array of all the h2 elements (the topics) topics = document.getElementsByTagName("h2") var topIndex=""; // loop through each tag and index and make anchors for (i=0; i< topics.length; i++) { tmpLink = "#link" + i; // make list item of each heading with link to anchor topIndex += "<a href=\"" + tmpLink + "\"<li>" + topics[i].innerHTML + "<\/li><\/a>"; // add anchor name to bookmark entry topics[i].innerHTML= "<a name=\"link" + i + "\">" + topics[i].innerHTML + "<\/a>"; } // get element where you want to place list myList = document.getElementById("thingList"); // and change the content to the list myList.innerHTML=topIndex; } // oh... and fire it off when the page loads... onload=makeIndex;

Here’s the HTML:

<h3>Index of topics on this page:</h3> <ul id="thingList"> </ul>

JavaScript to obscure email addresses

You don't want to leave email addresses out in the open in websites, unless you want a buncha spam emails promoting penis growth. A good alternative is to obscure the address enough that spambots won't be able to parse it easily. A human being could read the individual address if they tried, but this will break it up enough to confuse most ’bots out there...

// assign the "at" sign to a variable var atsign = "&#64;"; // assign the name of your domain to a variable for convienience var here = ""; // here's the function that gets called in the code function mailLink(name,isp,link){ document.write ("<a href=mailto:"+ name + atsign + isp +">" + link + "<\/a>"); } // here's how it's inserted into the HTML: <p>You can email the <script>mailLink("joeBlow","","webmaster")</script> for help!</p> ... or... <p>You can email the <script>mailLink("joeBlow",here,"webmaster")</script> for help!</p> ... which would be displayed like this:

You can email the for help!

Cycle through IMG elements and assign mouse events, using JavaScript

This could work for other elements, and I believe it to be cross-platform happy. In this case, there are a series of images inside of a DIV named “pictures” that I want to have mouseover events assigned to.

This function would be called in an onLoad handler, like in a <body> tag.

function init(){ // grab div named "pictures" var content=document.getElementById("pictures"); // search for image tags var thumbs = content.getElementsByTagName("IMG"); // search for anchor tags var pics = content.getElementsByTagName("A"); // go through image tags and assign function to mouseover for (i=0; i< thumbs.length; i++){ thumbs[i].onmouseover = growShrink; // This is for Netscape browsers... if (pics[i].captureEvents) thumbs[i].captureEvents(Event.MOUSEOVER); } // go through anchor tags and assign function to click for (i=0; i< pics.length; i++){ pics[i].onclick= showImage; // Again, for Netscape browsers... if (pics[i].captureEvents) pics[i].captureEvents(Event.CLICK); } }

How to shut off remote machines from your developmental website

Say you’re messing with some PHP/MySQL stuff on your test machine, which is connected to the internet, and you want to stop anyone outside from having access to your webserver. The easiest thing is to edit your httpd.conf file (found in /private/etc/httpd/ for you OSXers...) to only listen to your localhost machine, thusly:

(search for this section) # BindAddress: You can support virtual hosts with this option. This directive # is used to tell the server which IP address to listen to. It can either # contain "*", an IP address, or a fully qualified Internet domain name. # See also the <VirtualHost> and Listen directives. # BindAddress localhost

How to fill a JavaScript array, and then loop through it

(JavaScript part) <script> // Make an array containing all the class names myList= new Array( "First","Second","Third","Fourth","Fifth","Sixth","Seventh","Eighth","Nineth","Tenth"); // function that loops through array and fills out pulldown. function makePulldown(){ var pullDown=""; for(i=0; i<(mylist.length); i++) {pulldown += "<option> "+myList[i];} return pullDown; }; </script> (HTML part) // Make a form element that is filled by the array <form name="myForm"> <p>Select one of them:</p> <select name="pullDown1"> <script>document.write(makePulldown());</script> </select> </form>

Here it is in action:

Select one of them:

How to display HTML in an HTML document

Use the <xmp> tags. Yes, I know it's "depreciated," but it works (unlike <pre>).

Here it is in action:

<form name="myForm"> <p>Select one of them:</p> <select name="pullDown1"> <script>document.write(makePulldown());</script> </select> </form>

Picking a random item from a JavaScript array

(JavaScript part) // Make an array containing some items function pickOne () { var phrase = new Array( "This is the first phrase.", "Here's another.", "Another random phrase from a JavaScript script.", "Wha' chu talking about Willis?", "This is, what... the fifth phrase?", "I'm running out of things to add to this list", "This should be enough to test it." ) // This next line will pick a random number from 1 to the // number of phrases in the array... pretty clever, I think... var randNum = Math.floor(Math.random()*phrase.length); // This pops up an alert, picking a random phrase... alert (phrase[randNum]); } (HTML part) // Make a form element that is filled by the array <form name="myForm"> <input type="button" value="Click here" onClick="pickOne()"> </form>

Here it is in action:

Extracting items from a webarchive

Navigate to the directory where the archive(s) exist. and type in terminal: textutil -convert html <name of file to be extracted from>