Intro
Super Animation Converter is a simple SWF file(a file format supported by Adobe Flash Player
software) converter. It can parse and extract transformation data from SWF file. With these
transformation data and the right images, you can reproduce the animation in any game engine just
as Adobe Flash Player can do.
The native animation solution in Cocos2d game engine is “frame by frame” animation, which
means if there are 20 frames in your animation, you need 20 pieces of image(texture), and draw
these images one by one on the screen to create animation effect. There are two flaws in this
solution:
1. High resource consuming, one frame one image;
2. Hard to make smooth animation, since no interpolation between frames, which means it
“jumps” directly from the current frame to the next frame.
So I try to provide a better animation solution which is based on Super Animation Converter for
Cocos2d game engine. The idea is very simple:
1. Use Flash as your animation editor, create any animation you want in it, then export these
animation as SWF file.
2. Parse the SWF file with Super Animation Converter, get the transformation data and images
from the SWF file.
3. Reproduce the animation in Cocos2d game engine with the transformation data and images.
I will introduce rules & steps you need to follow when creating animation in Flash, and source code
files need to be imported to the existed Cocos2d game engine in the next chapter.
Rules & Steps in Flash
I assume that you have the basic knowledge about Flash, you should know some key concept, like
Stage, Layer, Key Frame, Symbol and Classic Tween, etc.
Before you start to create you animation, one key rule you should know: Super Animation
Converter bases on Graphic Symbol in Flash, which means Graphic Symbol is the only symbol
you can place on the stage. Button & Movie Clip, any Vector Graphics are NOT supported by
Super Animation Converter.
Open the Flash, my version is CS6. Since we only use the basic function in Flash, you can use any
old version you have. Create new ActionScript 3.0 file, save it as “basic_transform.fla”.
Let's import the little blue logo of Cocos2d-x into the editor, select “File/Import/Import to Stage”.
Please remember that we only support PNG image right now. All items on stage should be
from external images, which means you cannot create visual items in Flash, example vector
graphics stuff, then convert them to graphics symbols. So before you make any animation,
you need to prepare all images needed , then import them into Flash to make animation.
Now you can see the little blue logo in the stage.
Remember, we only support Graphic Symbol. So you need to convert the little blue logo to graphic
symbol firstly. Select the logo in the stage, right mouse button, select “Convert to Symbol...” on
popup menu.
In the “Convert to Symbol” dialog box, please make sure:
1. Type must be Graphic;
2. Registration must be center. I always assume that the origin of symbol is located at the
center. If the transformation of your animation is wrong, maybe because the registration is
not center.