Skip to Content

Tools, Gadgets, Widgets

Another Fine Homemade Parachute Page, Crafted With Love

I often like to use tools in unexpected ways, just to see if I can, or if something will work for me. Sometimes because I’m lazy —a math teacher once told me the best mathematicians are the laziest ones, because they combine multiple steps efficiently rather than rewrite and rewrite— or because I don’t relish repetition, or because I’m trying to avoid human error.

Take This is Not an Image for example; it uses 1024 individually styled paragraph tags to create an "image" out of pure CSS. Still, I cheated a bit, and whipped up a Director tool that would record the RGB values of each pixel in a given image, convert the longform (eg, "rgb(102,102,102)") to hexidecimal ("#666666") to save space, and write out an HTML file that I could then add some interactive JavaScript to.

Click on either image below to see how a short Lingo script reads the first two rows of pixels (to save time), and converts them to CSS declarations that could be cut and paste into an HTML document:

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

The slow part in this script is not the reading and parsing of data, it’s the updating of information to the stage. Normally I’d wait until the script had finished reading all 1024 pixels, but to show the script looping through pixels, it makes more sense to show the progress line by line.

on imageToCode theMem
  member("pos").text=""
  pixels=0
  str=""
  repeat with r=0 to 1
    repeat with c=0 to 31
      h=member(theMem).image.getPixel(c,r).hexString()
      id="#x"&c&"y"&r&"{top:"&r*1&"px;left:"&c*1&"px;background-color:"&h&"}"&return
      member("pos").text=member("pos").text&id
      scrollByLine member "pos", 1
      pixels=pixels+1
      member("pixels").text="pixel"&&pixels
      updatestage
    end repeat
  end repeat
end

Other goofy uses for Director:

  • Comparing directories of images to look for bigger/smaller/more recent images, and moving them around appropriately (could be used to build your own file back-up utility);
  • Converting HTML files to XHTML (a bit nasty, but works);
  • Stripping out crufty (and useless) HTML from Word "Save as Web" files (can reduce a file’s size by over 80%);
  • Setting/changing file creator types on Macs prior to OS X;
  • Converting simple database/spreadsheets/text documents to HTML (works with FileMaker Pro, MS Excel, Word, basically any file that can be converted to plain text).

Actually, anything to do with text can be handled quite nicely with Director, which makes it a very powerful tool for, well, building tools.

Another example: because Director is extensible through Xtras, it continues to develop new features and capabilities. Here, we had a series of Photoshop files, each with a number of layers creating a composite image:

Using a particular Director Xtra, I could import the Photoshop files into Director, one layer at a time:

This had a couple of advantages, first and foremost that it allowed me to check for errors and make sure the layers were in the right sequence. I could then rename them according to a convoluted naming convention, and then, using yet another Xtra, export them to a series of files:

So in essense, 1 10-layered file has become 10 single-layered files, all through Director. Why? Because the next step was to convert those 10 graphics to 1-bit, black or white, and re-import them:

Now that we have a series of 1-bit graphics in Director, we can colour them using Lingo, giving us a) flexibility in colouring, and b) very small files: the Photoshop file itself is about 412kb; converted to 1-bit graphics, the same information takes up about 11kb. Here's an example of the finished animation:

If you click on the animation, you’ll see the colours change. For this project, there were 72 individual wrestling moves, each with 2-4 frames of animation, and either 19 or 26 layers, depending on the complexity. In total, there are some 5600 individual graphics, which compresses down to about 5MB, very useful for our downloaded game. Director didn’t have to be the end deliverable, it just worked very well as a bridge between Photoshop, where the art was created, and the end game engine, with a detour through DeBabelizer (which knocked the graphics from 24 to 1 bit). For 5600 graphics, which would be called up based entirely on their name, it helped as well to institute a workflow which minimized the problems caused by mis-naming a file or a layer. Director: stampin’ out human error since 198-whatever.

Interactive media, at least as it’s often taught in design school, tends to focus on semi-informative experiences, like a kiosk one might find as part of a display or exhibit, and, to a lesser extent, games. Another application of interactive tools, though, including the warhorse of off-the-shelf authoring suites, Director, is to make new tools. Director is a rapid application development tool, and so it may be powerful enough, and is certainly pretty speedy to develop in, and so it can get the job done to make tools and applications quickly without sacrificing power.

Elsewhere…

Fonts courtesy of
Screen_Shot_2011-05-06_at_4.34.16_PM.png
Hooray and huzzah!