illustrator scripting - How to do animation frame pngs?

I wonder if there is any automated way of doing animations like on https://www.dropbox.com/

An image is really a set of frames that is cyckled through with javascript. What I would like to know is if there is an easy way to make each frame in Illustrator. I can of course do each frame manually but it is a very time consuming process.

Answer

You can create animations in illustrator. Its a bit slow, and the tools aren't really meant for that (but nothing a few scripts can not fix), Here is an example of something i did as test a few weeks ago, it took about 15-20 minutes to make.

Image 1: A quick thing I made for fun when I drew a picture for a post on engineering.SE

Here us the process I used I drew each image on a separate layer than then exported them as AI files with a script like this:

#target illustrator


var layers = app.activeDocument.layers
for(var i=0;i    layers[i].visible = false;
}

for(var i=0;i    layers[i].visible = true;
    redraw();
    var f = new File("d:\\temp\\test_"+i+".ai");
    // hide next line to preview anim

    app.activeDocument.saveAs( f );
    layers[i].visible = false;
}

Now I wanted to use this in after effects so that i could do it better post processing on the thing if I wanted. So i exported each layer as a separate ai file. But you can directly make png files from illustrator if you want to assemble the thing in Photoshop, or some other tool like imagemagick.

PS: this script can be modified to use it as a preview of animation by commenting the line with save. This can help you anticipate problems.

Does something better exist?

Certainly, you can use after effects you can easily animate stuff in that. Or you could use a animation tool like flash, or indeed any 3D application. Many of the effects are also quite easy to conceive by making the frames with code. Some starter examples can be found for example here

Some related posts with tips: