SWFSheet – create sprite sheets from SWFs

[EDIT: Just released a beta of SWFSheet 1.1 here: http://www.bit-101.com/blog/?p=2948]
[EDIT: Version 1.1 final released: http://www.bit-101.com/blog/?p=2977]

SWFSheet is a program I created in most of a day back in late December. I finally polished it up this week and it’s now ready for release. The idea is to take an animation created in Flash, and generate a sprite sheet from it. A sprite sheet, for those of you who may not be familiar, is a single large bitmap containing several frames of an animation, usually layed out in a grid. These can be loaded in very efficiently by games, and each frame shown to recreate the animation.

I had the idea for this program while attempting to port some Flash stuff to the iPhone. And later while making other mobile games, I found that Flash was still the best tool to create animations. It has a powerful time line, easy to use drawing tools, tweens, 3D, and of course, powerful scripting with ActionScript. However, getting a nice looking Flash animation into a sprite sheet that could be used with cocos2d on the iPhone/iPad or with XNA for Windows Phone 7 was not so easy. I did it by hand a couple of times, and it wasn’t very fun. Thus, SWFSheet was born.

SWFSheet is an AIR application and has been tested on Windows and Mac. You create your SWF however you want. Flash CS5 or earlier, Flash Builder, or anything else that outputs a SWF. It doesn’t matter how it’s created. Then you load the SWF into SWFSheet.

swfsheet screenshot

Immediately, you’ll see the live loaded SWF running in the upper left panel. The program will then capture an image of the SWF on each frame for the number of frames you have specified (default 15) and arrange them in a grid on the bitmap. Once that is done, it will then animate this bitmap using the same techniques you would use to animate a sprite sheet in a real game. This is seen in the lower left panel. You can adjust how many frames you want to capture to make sure you get your whole animation and have it loop smoothly. And you can adjust the frame of exactly how much area is captured in each frame, to maximize space on the bitmap. If there is not enough space to capture all frames, you can choose a larger bitmap. After any changes, you need to click “Capture” to re-capture the frames based on the new settings.

Often when scripting animations, you will have various transformations or other changes happening in an onEnterFrame type of loop. This can sometimes cause a glitch, as the first frame is captured before the first enterFrame handler fires, and thus does not have the initial transformations applied. There is a “Skip first frame” checkbox which handles this situation. There are also options for smoothing, which may or may not make any difference in a specific animation, and for transparency. By default, a loaded in SWF will have a transparent background, but you can override this to make an opaque bitmap with any color background you want. And you can change the preview frame rate – of course this doesn’t change the bitmap at all, but can give you an idea what your animation will look like at your target frame rate.

Note that there are a limited number of sized of bitmaps. Sprite sheets can almost always take advantage of extra efficiency when created in power-of-two sized squares – 64×64, 128×128, 256×256, etc. Thus, these are the only choices. A future version may make possible custom sizes if enough people ask for it.

Here’s the AIR installer:

SWFSheet Installer

And here are some test files to get started with:

Test Files

Enjoy!

ps. Another tool you might be interested in is Mike Jones’ Sprite Sheet Maker, which is more geared to making sprite sheets from a series of separate image files. Similar outcome, different use cases, depending on what kind of input you are starting from.

This entry was posted in ActionScript, Flash, General, iPhone, Objective C, Silverlight, Technology, Windows Phone 7. Bookmark the permalink.

56 Responses to SWFSheet – create sprite sheets from SWFs

  1. Veronique Brossier says:

    I bow to you.
    Such a simple idea but yet only Keith The Great thought of doing it and giving it away.

  2. Antonio says:

    This is pure awesomeness, Keith. Would it later be able to output an XML and/or PLIST for loading the sheet back into Flash or Cocoas2D? This would save soooo much time generating sprite sheets for iOS.

  3. 8bitjeff says:

    Shit! I was just doing this by hand today and dreading the 100 more I need to do. Then Mr. Genius comes along and brightens up my tomorrow! This is going to make the Flash to iOS graphic conversions much easier than I had ever imagined. Thanks!

  4. Boris says:

    Great tool! Thanks for sharing.

  5. Sander says:

    Very nice. Thanks!

  6. Juwal Bose says:

    Great app 🙂 Totally useful as i am trying creating sprite sheets for IOS development. Although i had wish these 2 apps were combined into one very powerful app 🙂 Mentioning about Mike Jones app. It would be wonderful if you guys can get together on that .. but no complaints as we can use any of these as need arises. Keep up the good work.

  7. John says:

    Hey:

    Great start… it would be nice if it created a .plist file also juke like Zwoptex does. Going a step further get it to crop the individual sprites so sprite animations that change shape get packed tighter.

    Regards:

    DJ

  8. Tom Ortega says:

    You are a god. I’m sure you were for other reasons, but this alone makes the other gods shake in their boots. LOL

    Seriously, though, this is *exactly* what I need to round out my game dev toolset. This along with the Pixelwave framework will make my iOS gamedev a breeze!

    Haven’t tried the tool yet, but I’m sure it’ll work. Thanks again for sharing.

  9. Ronny says:

    Great work, Keith!
    Been playing with something similar yesterday. Yours is perfect though. Mine’s just a quick fix. Yours seems like a decent tool that every game dev will be able to use, if not ‘need’.
    Totally digging it! Thanks for sharing it!

  10. Alex Nino says:

    Hi there, it sounds interesting. Is it actually possible use it in dynamic animations generated on the fly through actionscript? I am currently facing similar scenarios where I have to take snapshots of every single frame when rendering the animation 🙁
    I will take a look on it later, cheers!

  11. mousedown says:

    Great! I had been using SWFToPNG but this is better. Cheers, Keith.

  12. Bog Imp says:

    Can you share source code? I want add features:
    – select MovieClip from shared object by name
    – add select box that contain all shared instance that we add to document root

  13. Scottae says:

    Brilliant idea. I’ve needed this for a long time but never knew it.

  14. Bjarne says:

    This is awesome! Thanks!

  15. JLM says:

    Keith, sounds interesting just on the ferry back to france so won’t download it now as connection sucks over my mobile, but wondered if you were releasing the source, as I have an idea for extending it.

  16. Very cool AIR app!

    I am trying to use this converter with jQuery animation so that my “Flash animation” works on the iPad:
    http://www.spritely.net/documentation/

    Sort of work, if the all the sprites are arranged next to each other (I use Photoshop to do the re-arrangement).

    How about an option to do so? (arrange the resulting PNG sprites, next to one another, instead of 512×512). If original SWF is 100 x 100, result will be 1500 x 100 for 15 sprites.

    Thanks!

  17. derek knox says:

    Very awesome tool, the Flash IDE is great for frame by frame animations and quite a bit more if you know some good ol’ fashion JSFL 🙂

  18. M says:

    Nice app. However, when I tried to make it with my animations I did not get any capture or bounding box. Are there any restrictions?

  19. FlashgGen says:

    Awesome work Keith. This is a great app.

    For those interested, my Sprite Sheet Maker is, as Keith says, more geared to creating animation sprite sheets (albeit a little feature sparse at the moment as the initial app only too a couple of hours to create).

    Mike 🙂

  20. Madjack says:

    Hey anyone having problems with this app? Im running windows xp, and am using flash cs4, when i load my swf i can see it play in the “live” window, but it doesnt create any of the frames. ive tried changing the bitmap size and all that stuff. when i download the test files, those will work. what am i doing wrong? or how do i need to format my swf so it will work?

    • keith says:

      1. Make sure your swf is published as flash 9 or 10, and actionscript 3.
      2. Keep your stage size as small as it can be – just large enough to fit the content animation, ideally less than 256×256.

      I might need to make the two left hand windows scroll or zoom or something.

      • Madjack says:

        ok so it sounds like it doesnt support bigger than 256×256 then? my display field is 350×350, id like to not have it any smaller if possible

        • Madjack says:

          hmm even when i cut my animations display down to a very small size, it still doesnt work, maybe something is funky with my document, ill look around

        • keith says:

          it will support swfs bigger then 256, but you won’t be able to see the swf in the preview window very well. if it’s still not showing up, it may be an AVM1 swf (actionscript 2)

          • Madjack says:

            hmm interesting, i can now see several frames in the bitmap capture window (after messing with some settings) but each frame is the exact same as the starting frame, tried the skip first frame button… any ideas?

          • keith says:

            if you want to send me the swf, i’ll check it out.

  21. Madjack says:

    sure, cant seem to find your email info….

  22. Hamed says:

    Oh noes, someone has a competitor to SWF2SpriteSheet, my ultimate creation 🙁 Ah well, I guess I had my chance to monetize and I did my best 😉

    About the technology, I assume you are blitting each frame of the animation in a loop into the next section of the SpriteSheet, probably through BitmapData.draw() If so, then the restrictions of the BitmapData still apply no?

  23. Adam says:

    Have you thought about testing for frame duplicates, and only outputting one copy of the sprite to the spritesheet, and referencing that same sprite multiple times as needed in the metadata?

    • keith says:

      I guess that’d be possible. As far as I’m concerned, I’m pretty much done with the program, but if I get a few feature requests like this, I might work on them for a new version.

  24. Maikel says:

    I find this really, really useful. Maybe it could be just what I need for my project, although I need different sprite sizes for my characters. I’d like to know if you plan to improve this program. Could you email me, please?

    Keep up the nice work!

  25. SergeDavid says:

    That sure is pretty nifty, I’ve been doing my sprite sheets by hand myself and the most tedious part is the actual making the character / explosion / etc look good. This could be pretty helpful though for some easier animation work that shows a transition of an object or text (Like you did in the video) compared to someone walking around in the default eight movement directions.

    Cheers!

  26. Femic(China) says:

    WOW,It’s Great! I Like it so much!

  27. Chris says:

    Really useful little app. One request, could we please have an option to output a set of bitmaps but retaining the bitmap size?

    Both Zwoptex and TexturePacker have great packing functionality, and TP also has dithering and compression that makes my life a lot easier. Neither of them however does this.

  28. Jackie says:

    This is really sweet, thanks for sharing this awesome tool with us~~

  29. Alama says:

    Bravo for this app, it’s comical, I just finished AS3 application that does the same thing .. capture every frame of a movieclip by a method graphic.draw () and then store in an Array bitmapData .. Except that it’s to make pixelised clone of a MovieClip :-))

    By cons, your application suffers from a major problem, it is not possible to set value of x, y negative! Yet sometimes it does, especially when the graphics are centered 0,0.

  30. Michael says:

    perfection ,thanks kith!

  31. TheDarkIn1978 says:

    this is exactly what i was looking for! thanks much keith!

  32. TheDarkIn1978 says:

    i seem to be having a problem loading a swf. i’m not sure why it’s not working – i just accepted a new point update for AIR 2.7.

    as a test i’ve created a simple 200 x 200 swf with the following code, but it doesn’t appear to open or show a live preview. i’m using SWFSheet 1.1

    —–

    var shape:Shape = new Shape();
    shape.graphics.beginFill(0xFF0000, 1.0);
    shape.graphics.drawRect(-50, -50, 100, 100);
    shape.graphics.endFill();

    shape.x = stage.stageWidth / 2;
    shape.y = stage.stageHeight / 2;

    addChild(shape)

    addEventListener(Event.ENTER_FRAME, enterFrameEventHandler);

    function enterFrameEventHandler(evt:Event):void
    {
    shape.rotation += 2;
    }

    —–

  33. Yonas Kolb says:

    This is great.
    I’ve also just created an application in AIR that allows you to markup sprite sheets with animations and then export that to use in your own application. It’s especially useful for sprite sheets that contain sprites of various sizes.
    Spritesheet Animation Tagger

  34. Luis says:

    This is just what i need for my proyect, thanks so much 🙂

  35. corey says:

    Nice tool. Thank you very much for your generosity!

    Suggestion/request: Make it so that the save & load dialogs remember the last file path. Those of us working on projects with deeply nested file structures will sing your praises even louder 🙂

  36. Phong Linh says:

    Thank you for a very useful tool. New version has the convenient improvement.

  37. Daniel Dourado says:

    Great Tool, really useful! Thank you very much.

    I noticed a bug in it.

    Ill say what i DID:

    -loaded swf
    set width 50
    set height 77
    set total frames 40
    set smoth true
    set custom size 500×308
    when i set to export metadata, the y value comes wrong. first it comes with the value of the height of the sheet. if you export again, it adds this value, so it comes the height *2 and so on.

  38. AlexS says:

    Im working with ToonBoom and I think it’s AS2- that won’t work, will it? because as a previous person said it shows up only on the upper left frame but nowhere else.

  39. Erebar says:

    Im working with a 960*640 animation, but I cant capture it, Ive tested with smaller sizes and it does work. Why it doesnt support bigger resolutions?

  40. Greg O'Brien says:

    Really amazing stuff. Very helpful for a project im working on. Thank you for sharing this.

  41. Jake says:

    Amazing.. thanks so much for this great tool.

  42. Cang says:

    I am using your tool(SWFSheet) but it get images not exactly. for each image, it only get 1/4 that image.

Leave a Reply