Converting Flash Animation to Cocos2D

Question

Abstract

What I require is a technique, given a single, but layered Flash animation, to export the position and rotation of each key movie clip in every frame as XML.

Code to read in this information into a cocos2d-ready format would save a lot of time but isn't necessary as I know how to achieve this.

Our artists often draw vector using Flash and have wonderful and impressive animations. Our technique in the past to put this art into our games is to export the separate animations as a sequence of pngs, stick them in a sprite sheet, and turn them into CCAnimations.

This technique works well and we can get quite a lot of art into the 20MB over the air download limit thanks to spritesheets and pvrtc. As we grow, however, we are looking to make bigger and better games, and this would mean more art!

What I'd like to achieve now is a mass reduction in the amount of art by using a keyframing technique to mimic Flash behaviour, removing duplicate pieces of art.

i.e. Using the current technique, one character would take:

A walk sequence with 10 frames (say 100 * 300 resolution, 30k pixels) would have 10, full sized humans in each stance. (for a total of 1000 * 300 resolution, 300k pixels for one animation)

Say 5 similar animations for a total of 1.5 million pixels

The desired outcome for the same character:

1 right leg: (40 * 30, 1200 pixels)

1 left leg: (40 * 30, 1200 pixels)

1 torso (50 * 50, 2500 pixels)

1 left arm (40 * 30, 1200 pixels)

1 right arm (40 * 30, 1200 pixels)

1 head (30 * 30, 900 pixels)

Total (8200 pixels) for all animations

And an xml file to explain the transform of each part for each frame.

My knowledge of Flash is limited. I have exported a LOT of art, so that's not a problem, but I don't have much experience in Actionscript or in exporting other information. I have noticed the Export Motion as XML option but it doesn't provide the information I need (It doesn't traverse to the children of movie clips to get their transform).

The Objective-c side of things is less of a problem, I know how to parse XML, though if somebody has already written this too, I'd be very grateful if you'd like to share.

Answer 1

I wrote my own lightweight solution.

A simple library to export and animate Flash symbols in iOS / cocos2d, with included example.

Workflow:

• Create your animations in Flash as MovieClips with animated layers containing Graphic symbols.
• Export animations as JSON + frame PNGs using included JSFL script.
• Convert PNGs into sprite sheets (use your own tools, I use - http://www.codeandweb.com/texturepacker)
• Include animation JSON file(s) and sprite sheets in app bundle.
• Load textures, run complex multilayer animations on sprites using simple commands.

Check it out on github:

• FxAnimation for Cocos2d 2.x
• FxAnimation for Cocos2d V3 RC1

This is my first github submission and I'm curious how useful people find it, so let me know.

Answer 2

I never did find out about any existing tools and so ended up learning a bit of ActionScript and writing the solution myself.

Unfortunately due to corporate policies I won't be able to share my code but I will outline the steps I needed to take

---

ActionScript / Flash

• Step through each frame
• Get the children on the stage on that frame and note their transform
• Go through each of their children and note their transform with relation to their parent
• Do this recursively until the children have no children or you have reached a DrawingObject
• Save the information as XML

---

Art

• Export each symbol you need from the library and add to a sprite sheet. (I did this using JSFL)

---

Obj-C / Cocos2d

• The XML should contain a set of frames with a list of children for each frame and, recursively, each of their children. Each child node contains transform information.
• Read in this XML, adding children to frames of an animation as you find them and children to their respective parents. Apply children's transforms.

Hope this helps somebody else.

Answer 3

I assume your question is about the "mass reduction" part. You should definitely have a look at TexturePacker. With TexturePacker you can create texture atlases that contains only a single image of multiple, identical animation frames while retaining your ability to address that frame with its original filenames.

TexturePacker has a cocos2d and flash exporter, and can import from the usual file formats. If there's something not quite as you need it you can contact the author, Andreas Löw. He is very responsive and committed to providing the best texture packing tool possible.