With Flax, we can export two types of animation: key frame animation and skeleton animation. If we export key frame animation, then every frame will be drawn as a png, one frame means one png. It support all kinds of effect in Flash like filters/mask etc. But for skeleton animation, we only export its children  information, then reassemble its children in the game! This post will tell you how to export a key frame animation.

Open your Flash, create a new document named bearAnim.fla and then create a MovieClip animation named “bearHeadAnim”!

Please remember that any thing you want to export by Flax should check the “Export for ActionScript” option and name the “Class”. The “Class” name will be used to recreate the MovieClip in our game with the API. Our Class name here is “bearHeadAnim”.

Then, our artist completed the animation with 49 frames and 4 layers(labels, face, ear0 and ear1), “labels” layer has 3 labels named “start”, “middle” and “end”, we can goto and play/stop to some label in the game. Other 3 layers represent three part of the bear head.

Publish the bearAnim.fla to bearAnim.swf(Ctr&Enter). Open the Flax, load the bearAnim.swf.

Note that you can set the scale value on the red circle 2 for all the symbols, or set the scale for some MovieClip on red circle 3. The default scale is 1.0. If you set the scale to 2.0, then the exported image will be 2x larger than the original. We know the Flash graphic is vector graphic, so your scale will not make the exported image misty.With this feature, we can export different size of texture for different devices!

Click the Import button, you will see a texture atlas after a while of processing!

You can freely resize the texture size(see the red rectangle), and click Export button to export the texture. Then you will see  a bearAnim.json and bearAnim.png in the same folder as the bearAnim.swf.

How to use it in the game?

1. Download the Flax API: https://github.com/longyangxi/Flax-js

2. Include all the API files in the project.json(Cocos2d-html5 3.0 later)

3. Preload the bearAnim.json and bearAnim.png

4. Write the code.

var bearAnim = lg.assetManager.createDisplay(“bearAnim.json”,”bearAnim”);

this.addChild(bearAnim);

bear.setFPS(30);//set the animation FPS

bearAnim.play();//play the animation from current frame

bearAnim.stop();//stop at current frame

bearAnim.gotoAndPlay(“middle”);//play the “middle” animation again and again;

bearAnim.gotoAndStop(10);//stop at frame 10, the first frame is zero

bearAnim.playSequence(“start”,”end”);//play “start” first, then play “end” again and again