gSkinner - Home

Prep For Zoe JSFL Command

Posted on August 29, 2012 by Grant Skinner

We’re recently been working on some pretty cool CreateJS projects with heavy dependencies on sprite sheet animations. Our sprite sheet export tool, Zoë, does a pretty good job, but it’s limited to exporting the main timeline of a published SWF. To facilitate an efficient designer/developer workflow, we really needed a solution that would let us maintain a single FLA, containing multiple animated symbols, and export them to a single combined spritesheet.

We considered using the new export to spritesheet feature in CS6, but it was missing some features we needed. Zoë offers multi-image sprite sheets (important when exporting smaller sprite sheets for mobile compatibility), configurable smart frame reuse, and flexible registration point export for EaselJS. It’s also open source, so we could modify it to work the way we needed.

To facilitate this workflow, I wound up writing a (fairly) simple JSFL command called “Prep for Zoe”. It takes multiple symbols, copies them as Graphic instances, distributes them to the main timeline, and copies their labels appropriately. If no label is specified on the first frame of a symbol (or it is a bitmap), it will automatically add a label based on the symbol’s name. It will even warn you about duplicate labels. Finally, it publishes your FLA to generate an updated SWF.

The end result is a single SWF with all the animations and labels on the main timeline, which you can bring it into Zoë to export them all as a spritesheet.

To use it, you just place all of the symbols you want to include in a single guided layer on your stage then run the command. Your main timeline will be prepped for you, and the SWF will be automatically published. Need to make changes? Edit your guide layer, and run the command again – it will automatically delete all the old layers, rebuild the timeline, and export a new SWF.

By default, the registration point (aka regX/Y in EaselJS) for every symbol will be set at the symbol origin. It is represented in the built out timeline with an empty symbol instance named “registrationPoint”. If you want to set up custom registration points for each symbol, you can do so by putting each symbol on it’s own frame in the guide layer, and adding a “registrationPoint” instance for each. These registration points will be preserved in the prepared timeline. Check out the included “advancedExample.fla” file to see this in practice.

Once your SWF is ready, just bring it into Zoë, configure the settings as appropriate, and push “Export”. Once you set up a SWF once, Zoë will remember the settings for it, so exporting a new sprite sheet from your FLA is as simple as running Prep for Zoë to update the SWF, then running export in Zoë. Hand the updated image(s) and JSON data to a dev, and it’s ready to be integrated into a game or other experience.

You can grab the JSFL command here, including a couple of example FLAs to get you started. To use the command, either double click the JSFL file (this will immediately run it on the front-most FLA if Flash is open), or copy it into the Commands folder in your Flash config directory – it will then be available in the Commands menu. You can download Zoë here.

Follow @gskinner on Twitter for more news and views on interactive media.
10 Comments

[...] File Size for Images … Prep For Zoe JSFL Command New CreateJS Version Launched Flash Pro to HTML5 - Toolkit f… Disable Local Security In Chro… [...]

Posted by: gskinner.com: gBlog: Redu… on Aug 29, 2012 9:57pm URL: http://gskinner.com/blog/archives/2012/08/red…

Hi Grant,

Need some information regarding the Flash to html 5 conversion using a Flash CS6 with Create JS tool kit, i am trying to convert a Flash MX timeline game. But i am not able to see anything on the browser after i published.

Is this toolkit is limted. Let me know if you have any examples which are already converted.

Thanks in advance

Regards,
Suman

Posted by: Suman Raju on Aug 29, 2012 11:28pm URL: http://www.sumanraju.com

Sounds just like what I was looking for.
One question though,what version of Flash is required?
Thanks

Posted by: Julio Garcia on Aug 30, 2012 5:24am URL: http://www.randomnoise.org

Is zoe able to export the animation cord to json?

Posted by: Adam on Aug 30, 2012 6:08am

Suman - this isn't really a support forum for Toolkit, and that's not a lot of information for me to help you with. Sorry.

Julio - That's actually a good question. I've been using it in CS6, but I don't think it has dependencies on any new APIs (but I'm not certain). If it works for you in an older version, let me know!

Adam - I'm not certain what you mean by animation "cord". It will export all of the animation frame sequences as JSON data.

Posted by: Grant Skinner on Aug 30, 2012 3:11pm

Right now there are benefits with choosing one approach over the other. One has this but not that, and vice versa. (CS6 vs ZOE).

In the end we had to go with CS6 but it looks like this solves a major problem we had with using ZOE (exactly what you mentioned in the post).

Is the latest version of ZOE ready for using NEXT? That quickly became a nuisance when we started using NEXT.

Thanks!

Posted by: Brad Manderscheid on Sep 3, 2012 5:52pm URL: http://actionmouse.com

Ah that's right, ZOE exports the data not the actual objects, so never mind on the question about NEXT support

Posted by: Brad Manderscheid on Sep 3, 2012 6:15pm URL: http://actionmouse.com

[...] way to create sprite sheets is to use Zoë and flash, plus a JSFL script that makes it possible to have your animations in nested [...]

Posted by: FlashPad » Blog Arc… on Sep 7, 2012 8:57am URL: http://durej.com/?p=312

[...]      Use the tips on spritesheet above. In addition to spritesheet at run-rhymes, Zoë provides better reuse of the frames, with a configurable threshold for reuse frames between their similar. To make things even easier, we have created a tool that acts as a wizard in this workflow. Take a look at Prep for Zoë JSFL Command! [...]

Posted by: HTML5 games: create video… on Feb 6, 2013 2:57pm URL: http://valentinbg.wordpress.com/2013/02/06/ht…

Grant, I would like to share really weird issue with "Prep for ZOE", which appears to be a JSFL bug.

On just one of my machines (fast Core i7, Windows 7 64bit, Flash CS6 and CS4), "Prep for ZOE" fails all the time on any FLA with more than ~10 symbols.

I added some fl.traces(timeline.layers[instanceIndex].frames[frameIndex].elements.length). What happens is that randomly doc.addItem({x:instance.x, y:instance.y}, symbol) reports "true", but adds nothing to the stage!

When I add "alert" just before the addItem (or simply run the script on slower notebook) all is fine. So it really looks like racing condition (my own idea is that frame is not really created before symbol is added). Have you faced anything like that?!

Posted by: Sergey on Jun 17, 2013 4:20pm