Using Flash animations with SpriteBuilder
Yesterday we released BubbleBath, and with it came our intro animation.
The animation was done in Flash, and then exported to a SpriteBuilder CCB file using SWF Importer.
Below is the steps that was used.
Step 0: Create the animation you wish to use in your SpriteBuilder project, sorry I can’t help you with this one 🙂
Step 1: In order to export the actual animation, it first has to be hosted in a movie symbol, this is so that when flash creates the SWF file the animation it self is exported. So start by selecting the frames of all your layers for your animation. Right click the selection and Copy the frames
Step 2: Next you will create a new Movie Symbol in which your frames will be. Make sure the symbol is configured to be exported in frame 1.
Step 3: Now paste the frames into the symbol
Step 4: This step is unfortunately tedious, All frames has to be converted into a Sprite symbol, if for any reason you forget to convert one or more frames, SWF Importer will fail to export to SpriteBuilder CCB. Have fun! 🙂
Step 6: Save the file somewhere and push Alt + Enter to export from .fla to .swf
Step 7: Time to fire up SWF Importer. Point the Import Directory to the directory in which you have both .fla and .swf files. The Export directory is where your CCB file and Sprite assets will be exported. Finally Export! (Note if the Valid field is not Yes, you probably forgot to convert a frame to a sprite symbol!)
Step 8: Navigate to the export directory and copy the CCB file and the asserts directory. Navigate to the SpriteBuilder project you want to import the animation to. There will be the folder >>Your project<<.spritebuilder right click and choose “Show package content” to step into the folder. From there navigate to the Packages folder, there should be a folder “SpriteBuilder Resources.sbpack”, right click and “Show package content” paste your CCB file and the assets folder you copied earlier.
Step 9: Notice the extra scene that suddenly came in your SpriteBuilder project? It’s the animation, open the scene and we are finished!
If you like what we do and wish to donate to Saga’s Playground