How to do animation frame pngs?

Question

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 1

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.length;i++){
    layers[i].visible = false;
}

for(var i=0;i<layers.length;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:

• Best 2D animation software
• Open Source software for 2D graphic animation like this:
• Has anyone used Blender for prototyping animations of mobile apps?

Answer 2

You seem to be asking more than one question.

It might be easier to assemble an animation strip in Photoshop, since it can take the image borders into account. You can generate output images in Illustrator, but trying to create the entire strip may either prove unwieldly, or impossible if you exceed the artboard/canvas limits.

Unless you work faster in Illustrator, it doesn't help make animation that much easier than in Photoshop. Using either program, you can separate the image into components that can be transformed individually.

As for wanting to do this with PNG, there are two formats—APNG and MNG—that do allow animation, and are seeing increased adoption by browsers. APNG has the advantage of looking like a single-frame PNG by non-capable viewers, and currently being more widely adopted.

As AndrewH mentioned, the SVG vector format allows for animation, although I'm not aware of any programs that actually assist with animating SVG. You currently have to add code to the SVG via text editor.

"but it is a very time consuming process." Indeed.