Using Flash animations with SpriteBuilder

Posted by on January 15th 2015 @ 7:14 pm

BubbleBath AppStore

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
01.5 Flash Copy 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.

01.6 Flash Add Movie Symbol

Create new symbol

03 Flash Movie Symbol Config

Movie symbol configuration










Step 3: Now paste the frames into the symbol

01.7 Flash Paste Frames


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! 🙂 02 Flash Sprite Symbol


Step 5: Phew that step really took a long time, well this step is easy! Now that you have a Movie Symbol you can remove the frames from the scene and place your movie symbol there instead.04 Flash Movie Scene


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!)

05 SWF Importer

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.06 Finder SpriteBuilder Package


Step 9: Notice the extra scene that suddenly came in your SpriteBuilder project? It’s the animation, open the scene and we are finished!

07 SpriteBuilder



Tools used SpriteBuilder and SWF Importer.

If you like what we do and wish to donate to Saga’s Playground


Post filed under Development Blog.