Cocos2D Skeletal Animation : Part 2-CSDN博客

In part 1 of series, we discussed various tools we explored for doing skeletal animation for your game. Here, In part 2, we discuss in detail about How to use grapefrukt exporter.

1. First of all download the grapefrukt exporter from https://github.com/grapefrukt/grapefrukt-export.Once you have grapefrukt exporter downloaded, open a new flash document (I am using Flash CS5 and AS3).

2. Go to Properties-> Publish Settings-> ActionScript3 to open the Advanced ActionScript3.0 Settings window.

3. Here Click on the Library Path tab and click on the flash icon. Now browse to the \grapefrukt-grapefrukt-export-64f8939\grapefrukt-grapefrukt-export-64f8939\bin\grapefrukt-export.swc file and click OK. You will now see the grapefrukt exporter added to library paths.

4. Click OK again and now we have our exporter set. Now, Import all the png’s you want to use in your animation using File-> Import->Import to Library. The default symbols generated by Flash are of type graphic but the exporter needs symbols of MovieClip type. So just select all the automatically generated symbols and delete them.

Now drag all these pngs into the scene and manually convert each png into a symbol of type MovieClip by selecting the png on stage and pressing F8. Give a name to each symbol and make sure you select type as MovieClip. Click OK and repeat the same for all your PNGs on stage.

5. Once you’re done, select all of these symbols together simply by pressing ctrl+A and press F8. You see again see the convert to symbol dialog. Name this symbol as sheet, type Movieclip and make sure you check the checkbox saying Export for ActionScript. Finally click OK and you can now see the symbol “sheet” in your library.

6. Now all you individual symbols are combined into one super-symbol called sheet. In flash vocab, it’s called symbol inside a symbol. Now double click on the stage to go inside the sheet . Now, give unique instance names to all your symbols inside the sheet by selecting individual symbols and going to properties and naming them. Any unnamed instances are ignored by the exporter so you need to very careful while doing this.

7. You are now ready to make your animations here. You can scale, rotate and move the sprites and play with them to make your animation. Make sure you do your animations inside the sheet and not in the scene.

8. Now , next step is to label the frames. Click on the frames and you will see a label option in the properties window. Give any name and you’re done. Frame Labels are used when you need to loop certain animations.

9. And now the final step, Go to Window-> Actions and click on Scene 1 in bottom left menu and Paste the code given below. Replace the word sheet if you named your sheet something else.

 
          import 
          com.grapefrukt.exporter.simple.SimpleExport; 
         
          import 
          com.grapefrukt.exporter.extractors.*; 
         
          var 
          export:SimpleExport =  
          new 
          SimpleExport( 
          this 
          ); 
         
          export.textures.add(TextureExtractor.extract( 
          new 
          sheet)); 
         
          AnimationExtractor.extract(export.animations, 
          new 
          sheet); 
         
          export.export();

10. Now go to Debug->Debug Movie in Flash Professional and you can see your animation playing nicely. Click on click to output and save the data file . Unzip this and you can see all the pngs and an animations and sheet file.

The animation file has XML data of the animations and sheet file has basic information about the images. You can parse this information using TBXML or any other equivalent parser. We will soon share the XML to cocos2D convertor we wrote to read this data into cocos2d and make our animations play in cocos2D environment. Till then , experiment with this great tool by Martin and give us your views and comments. Also , you check this link https://github.com/TheDamArmada/Flash2Cocos2D

I am not a flash expert , so if there’s anything written above that is “wrong”, please write in comments so that we all can benefit from it.

Signing off,

Team MechMocha