Creative Workflow Hacks

In my last post I talked about adding project and scene information to our timestamp script. We’ve covered using system.callSystem() as a gateway to information outside of After Effects. This time we are going to use After Effects built in Socket object to dynamically populate a DropDown list for our script. We’ll also pull JSON out of our old bag of tricks.

The Socket object allows you to set up a TCP connection with a server and exchange data with this server. A Socket is pretty versatile. We can set up different services like FTP file transfer, SMTP email, and Web services via HTTP. Today we are going to demo a very bare-bones Web Service using HTTP. How bare bones? Well, for this demo we are simply going to prepopulate some sample values in a JSON string and serve it up from a web server. In our next demo, we’ll go about connecting this service to different databases.

After Effects 7 introduced some useful new UI controls including a ListBox and DropDownList. Both of these controls work really well for grabbing multiple values like a group of projects, scene list, lower thirds or slate info. The main difference between the two is that a ListBox displays all of the values available and let’s you select multiple items if you rig it correctly whereas the DropDownList only displays one value at a time. For this demo we’ll use a DropDownList.

Typically, you would create an array of string values in your script and those values would populate your list. Like so…

var projectArray =["Sample Project1", "Sample Project2", "Sample Project3"];
win.projectList = win.add ("dropdownlist", [20,25,230,120], projectArray);

But what happens if you don’t know what values you’ll need in your list when you write your script? You can dynamically populate your script at script runtime. Aditionally, After Effects 7 has a strong event model that let’s you update information based on user interaction. We’ll also cover updating our info in a later demo.

So we’ve covered our UI control, what about the Socket? It is pretty straight forward. We set up our Objects with a typical Javascript Constructor and set some variables with the location of our Web Service and use the open(), write(), read(), and close() methods of the Socket object to communicate with our Web Server over port 80. Like so…

       webConnect	= new Socket;
	  response	= new String;
	  lines		= new Array;
	  if(webConnect.open("your-web-server.com:80")) {

		webConnect.write('GET /path/to/your/sampleProject.json HTTP/1.0nn');
		response	=  webConnect.read();
		lines		= response.split(/n/);
		projects	= lines[lines.length-1];

		webConnect.close();

		return projects.toString();
				
				
	}else{
		return  '{["unable to open webConnect via Socket"]}';
				
	}

There are a couple of lines of interest in the previous code. Notice how we use response.split(/n/) and lines[lines.length-1] above? We do this because we really are communicating at a low level with the Socket object and response = webConnect.read() includes the response header including the server information, response type, etc. We know we have a simple one-line JSON file at the end of our web service so we can simply grab the last line. In a more complex service we'd need to be much more robust. We also wrap our Unable to connect message with a JSON wrapper, return '{["unable to open webConnect via Socket"]}'; so that we can use eval() on the string even in an error condition.

Our final demo script.

//grab our projects via a simple web service
var projectsString = getProjects();
//check for existence of Projects string and populate DropDown with error if we don't have one

if(projectsString){
    //the JSON eval to get an array of projects
    var projectArray = eval(projectsString);
}else{
	var projectArray = ['Unable to connect to Projects Server'];
}

//buid and show our UI
var win = new Window('palette', 'Project DropDown Demo',[100,100,352,165]);
var w = buildUI();
w.show();

//the getProjects method, notice the nested function. The nested (inner) function is private to its containing (outer) function. This gives us an opaque interface for getProjects() that let's us do validation and webConnect without revealing the details of the connect. More on this in later demos

function getProjects() {
		
           	//here is where we do internal validation before we return a valid webConnect
		//things like version check etc.

		return webConnect();
		
           //the Socket connection setup
		function webConnect (){

			webConnect	= new Socket;
			response	= new String;
			lines		= new Array;
                 
                //open the connection, change the your-web-server.com obviously
			if(webConnect.open("your-web-server.com:80")) {
                      //Use GET to grab the JSON with the path to your web service
				webConnect.write('GET /path/to/your/sampleProject.json HTTP/1.0nn');
				//put the response in a variable
                      response	=  webConnect.read();
                      //grab the last line
				lines		= response.split(/n/);
				projects	= lines[lines.length-1];
                      //close the connection
				webConnect.close();
                      //return a string value to the eval()
				return projects.toString();
				
				
			}else{
                       //return a JSON string with our problem
				return  '{["unable to open webConnect via Socket"]}';
				
			}
		}
				
	}

//build our UI
function buildUI(){
		
	 if (win != null) {
	 	
		win.projectList = win.add ("dropdownlist", [20,25,230,120], projectArray);
		win.projectList.selection = 0;
		 
      }
         return win

	}

When I run our demo with this JSON

{["Sample Project1", "Sample Project2", "Sample Project3"]}

I get this in After Effects

Pretty nice. What's next? There isn't any security model so we'll either need to add authentication or run this service behind a firewall. We need to hook up our service to a database and develop methods for acquiring different sets of data. We're on our way.

The downloadable version of this script includes a link to a working demo that I'll try and keep running for a bit. It's pretty straight forward to set up on any working web server.

Downloadable version of this script and sample JSON file