1

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.

  • Hi theva, can you re-upload your image, the one linked now goes to Dropbox homepage. – AndrewH Jun 29 '15 at 21:11
  • 1
    Yes, as it is supposed to, check the animations on their homepage! ;) – theva Jun 29 '15 at 21:19
  • That one flew over my head. I would suggest reading this article Creating an animated gif in Illustrator & Photoshop. I am not sure how to create a faster process for making an animated gifs. You can look into doing SVG animations if you have experience in coding. – AndrewH Jun 29 '15 at 21:37
  • I don't really want to do an animated gif. I want to make a super-wide png image which has each frame between the other (so that it can be animated by moving it sideways). Check one of dropbox images: cf.dropboxstatic.com/static/images/index/animation-strips/… – theva Jun 29 '15 at 22:10
  • I saw that when inspecting the code. I haven't see this done before. Any reason to do this over a gif? Anyways, after you create your scene. Figure our how many frames and then adjust the artboard accordingly. Then do object->move to move each scene. – AndrewH Jun 29 '15 at 22:14
4

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.

enter image description here

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:

  • Pleas note animation is always time consuming, In the beginning our biggest problem will be that you are not used to just work it out, but spend time on avoiding doing the work. – joojaa Jun 29 '15 at 23:20
  • Thanks for the alternative advices, I will check those out! :) – theva Jun 30 '15 at 20:35
1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.