Last time, we talked about using a Socket Object in After Effects CS3 to parse a data feed with E4X XML parsing. There are a lot of useful workflow operations I can think of that could make use of data feeds, but After Effects is a visual medium, so let’s do something visual, let’s import a set of flickr photos matching a tag. This is a proof of concept script, and before you plunge into experimenting you should check the terms of service of the web feed provider and respect the use of images you download. That said, let’s take a look at some code.
First of all, we create a Socket Object, and connect to our web feed. In this case we are looking for all photos tagged red referenced by this line
webConnect.write (' GET /services/feeds/photos_public.gne?tags=red HTTP/1.0nn');
We then fetch and parse the XML, and loop through looking for a link element with an enclosure attribute like so
for(entry in elements)
{
if(elements[entry].localName() == "entry")
{
var entryNodes = elements[entry].elements();
for(x = 0; x < entryNodes.length(); x++){
if(entryNodes[x].localName() == 'link')
{
if(entryNodes[x].@rel.toString() == "enclosure")
{
pictureArray.push(entryNodes[x].@href.toString());
}
}
}
}
}
Once we've gathered up an array of links, we download the photos using system.callSystem() and a command line app called curl. There is probably a Windows version of curl, but it probably won't be installed on your machine which makes this a mostly Mac script. This code handles the download and import. Note, my version of WordPress is really upset about using the keyword system in code listing, thus there is extra whitespace around the system.callSystem() call in the code listing below.
for(y =0; y < pictureArray.length; y++)
{
var picNameSet = pictureArray[y].split("/");
var picName = "/" + picNameSet[picNameSet.length -1];
var curlString = "curl -O " + pictureArray[y];
var retVal = sys tem.callSyste m(curlString);
var fileToImport = new File(picName);
var myProject = app.project;
if(fileToImport.exists)
{
var my_io = new ImportOptions(fileToImport);
if(my_io.canImportAs(ImportAsType.FOOTAGE)){
try{
myItem = myProject.importFile(my_io);
}catch(e){
alert('couldn't import flickr item with error: r' + e.toString())
}
}
}
}
I mentioned this code was slightly flawed. Network activities are by their nature asynchronous, our tasks go out into the ether and we don't now when or how they return. In this case I start the download and quickly check to see if the file is available. If it's not, I just skip it. In the real world of network activities this will never do. AE scripting by it's nature is a pretty synchronous activity, we do one thing and then another. As I explore this style of scripting I'm investigating work arounds on how to mesh the two styles of programming a bit better. For now, I just ignore it. grin. If you've got ideas about smart ways to handle asynch network scripting in After Effects, I'd love to hear about it.
Anyway, I run the script and import 20 or so photos matching the tag red. In this case I'm just discarding all the metadata and context information that make the photos really interesting, but it's a fun experiment and I get to see a bunch of cool photos. As I continue to explore, hopefully I'll come up with more robust network programming and more concrete tools for using web feeds in an interesting way.
Ben said
So cool, keep up the good work.
After Effects as a visual environment for web feeds is such a high potential area.
gantico said
wow, this is really cool! I should find a Pc version of curl, so that it might start playing with this…
Mark said
Hey, about the socket programming. Although i havent used javascript sockets (or what ever your using) the normal way with sockets is to loop reading an amount of data at a time (so 500 bytes or whatever) until you get to the end of what ever your getting. I think with a http header the end of the header is two end of line characters, i cant remember the exact code but that should help you out. Id imagine that XML has someting similar to dictate the end of file.
Hope that helps
Dale said
Hey Mark,
Thanks for the tip. That makes sense. I’ll have to experiment to see if I can get the subsequent data if I request less then the full file. Thanks for the tip.
Dale
michel said
Hi, does anyone has ever used a script to retrieve an RSS feed with socket.
Here is the code I use :
//–
var webConnect = new Socket;
var response = new String;
var rss = “”;
if(webConnect.open(“api.meteorologic.net:80″,”UTF-8”)){
webConnect.write(“GET /forecarss?p=Paris”);
response = webConnect.read(9999999);
response = response.toString();
var xmlStart = response.indexOf(“<?xml");
var xmlString = response.substring(xmlStart, response.length);
try
{
rss = new XML(xmlString);
}catch(e){ alert('error parsing XML with error \r ' + e.toString()) }
alert(rss);
}
//–
but the display "alert(rss);" is blank while the web page contains much information : http://api.meteorologic.net/forecarss?p=Paris
thanks for any help..
Michel