Wednesday, June 20, 2012

Prezi in Adobe Illustrator. Part 1: Setting a Timer in Adobe Javascript

I've always really like poster-sized images in Illustrator for displaying site navigation diagrams.  You can zoom out to get a "big picture" view and then zoom in on the details.  Meng He shows a nice example of this in here Shindig Wireframe on Dribbble.  To get the full effect, click on the PDF version and then use your pan and zoom tools to explore.

This kind of document navigation reminds me alot of Prezi, the non-linear presentation software that Brian Stensrud turned me onto.  I've never used Prezi itself, but I've given presentations in that style (without the rotation).  There are two free javascript libraries that I know of that do similar things, dizzy.js and impress.js.

The basic idea behind all of these tools is very simple.  You define a sequence of frames on top of a large vector image and then use a script to navigate between them.  I've written a rough Adobe Illustrator script that does this already.  I'll upload the complete script in a later post.

One problem that I was having was animation.  In my current script, the pan and zoom just jump around.  This is fine, but you lose the context of the larger space, so I was looking for a way to do a simple linear animation between two zoom and pan states in Illustrator.  In a browser, you can call setTimeout() to get a callback after a period of time, but that method doesn't exist in the Adobe Illustrator version of Javascript.
Luckily, I was found a great post on stackoverflow that provided the answer.  Here's the code:

  $.setTimeout = function(func, time) {
        $.sleep(time);
        func();
  };

  $.setTimeout(function () {alert("hello world")}, 3000);

UPDATE: After trying to get animation running in Illustrator in several different ways, I'm giving up on it. The Illustrator UI never updates until my script is finished. The "sleep" function below doesn't seem to work the way I thought it might.  My next attempt will be to dump the SVG from Illustrator into an HTML 5 file and use dizzy.js or impress.js (see links above) to do the animation.

1 comment:

Anonymous said...

I know this is old, but did you ever try app.redraw() in your script to update the display?