HOW-TO: Convert Animated GIF (or Video) to Image Sequence in Photoshop; Import Image Sequence to Construct

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. Also, please suggest easy alternatives that don't require proprietary software if you got 'em!

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

Radix's picture

I just want to say that I

I just want to say that I played Fahrenheit recently and I spun that old lady for like five minutes.

zum's picture


I don't even remember that lady. Maybe vaguely. Of course, I don't remember this, either:

so I think I've probably wiped all memory of this game from my mind except the Simon Sex.

snapman's picture

How could you forget her?

How could you forget her? She's the creepy old lady with evil birds, who turns out to be an EVIL AI CONSTRUCT.
And that's a spoiler, but only in the sense that it spoiled the game.

edit: on topic: you could also use IrFanview, which has a neat "explode animated gif to images" function built right in.

also on topic: I really do want to start using construct some time, but the only tutorial I could find on making platformer games said it wasn't updated for the newest version of construct yet. :(

Radix's picture

I don't remember that

I don't remember that either, must have been one of the bonus videos.

(Spoiler: the old lady wasn't an evil AI at the part where you can spin spin spin.)