Revision of HOW-TO: Convert Animated GIF (or Video) to Image Sequence in Photoshop; Import Image Sequence to Construct from Thu, 02/25/2010 - 20:26

zum's picture

As far as I know, Construct can't import anigifs yet. I thought it might be helpful to post this, since I had to poke around a bit to get a quick pipeline going. Hopefully it'll encourage more folks to try Construct -- it's a great tool, but for its lack of handy stock graphics.

Incidentally, recent versions of Photoshop have all but removed support for handling anigifs, delegating that task instead to another Creative Suite product, Fireworks (a mostly-redundant holdover from Adobe's acquisition of Macromedia.) Screw that! Photoshop can still do the stuff it used to -- the functionality's just been deliberately obscured. Cheggit:

(Using Photoshop CS3 in Windows; earlier/later revisions might be different.)

Hit File > Import > Video Frames to Layers...

What's this? Doesn't look like it recognizes .gif as a valid video file type. There's not even an option to list all files in the "Files of type" drop-down!

Let's just try putting *.* in the filename box and forcing our selection anyway.

Whoa! It works! Be sure "Make Frame Animation" is checked.

You may want to process the image at this point: remove a background, or apply your favourite zany filters. Just be sure that the changes are propagated to the frames correctly. (You should have the Animation panel open; hit Window > Animation if you don't.)

Done? Excellent. Go to Export > Render Video...

What we want is Image Sequence: PNG. Critically, if you have transparency in your image, make sure you have an alpha channel enabled at the bottom of the dialog. Straight - Unmatted is fine.

And you're set! Now to put this baby to use. Create a new Sprite in Construct. Close the Picture Editor it opens up -- we don't need it.

Select your new Sprite, then go to the Animator tab. Click on the pre-existing angle in the default animation. (This is a bit fiddly.)

Right-click in the lower half of the panel and pick Import Frames.

Navigate to your image sequence and hit Ctrl-A to select 'em all.

That oughta do it. The next dialog is mostly skippable -- you can pick a mask colour and rotate or flip the image. If you were importing a sprite sheet, this is also where you'd define how it should be chopped up.

We're just about done. Right-click on the first (empty) frame of your animation and remove it. Now, your image'll probably be squished or streched a bit to fit the 128x128 default size of the Sprite. We can fix that.

Choose "Make 1:1" in the Properties section of the Properties panel for your Sprite.

That's it! We could probably speed up the conversion process by creating a Photoshop Droplet, a macro of actions that's saved as a shortcut file you can drag-and-drop images onto. I haven't tried it for this yet, but it would essentially turn conversion into a one-click procedure -- much nicer.

Anyway, the real reason I made this topic was so I could have a random place to dump stupid .gifs I come across. Yeaaaahhh!

pensive-mosquitoes