Convert your Flash animations to SpriteBuilder.
Looking for support? Please visit the SpriteBuilder Forum.
The easiest way to get started is to download the app please see Releases for a binary.
If you want to try it right now, then download the conversion ready Tutorial Content. Then skip to the Conversion section of this Readme for more information.
Want to roll you rown?
The easiest way to build this app is to use Adobe Flash Builder 4.7+:
- Simply checkout this repository and then select
File/Import Flash Build Project.
- Select the repository folder and click
- Then select
You could possibly use Apache Flex to build, however this is an exercise for the reader.
This tutorial will cover the process of converting an existing FLA animation to SpriteBuilder, you will be using some awesome artwork kindly donated by Vincent Le Quang, Melissa Wallace and Anna Klonoff.
Note: You will require both FLA source files and the published SWF for any content you wish to convert.
Open pika.fla (CS5+), you should see a few funky looking creatures in various colours. To keep things clean create a
New Document and select
ActionScript 3.0, I called it bluebeast.fla.
Select the blue creature from
pika.fla and copy this into the new
Double click the
Pika run symbol from the library.
Hit play to watch this majestic beast run like the wind, would make a nice endless runner character....
Getting ready to export
Step 1) In the library view open properties for Pika run and ensure advanced options are expanded, tick the
Export for ActionScript, then tick
Export in frame 1, the base class should be
Great this will now be picked up as an animation for the conversion tool, you then need to ensure all of the component parts of this animation can be exported as textures. You can see various symbols such as Eye, EarFront and Horn in the Library view.
Step 2) Select all of the symbols from
BackLeg down to
Pika Run is not part of this group selection and then edit properties.
Step 3) Tick
type and ensure
Movie Clip is selected from the drop down. Tick
Export for Actionscript and change the dropdown to
Yes, don't worry about any warnings. Tick
Export in frame 1 andchange the dropdown to
Yes. Tick the
Base class and enter
flash.display.Sprite. Hit OK.
Step 5) Hit Publish
Ok you will most likely have some
Compiler Errors. Not a problem, let's fix this right now, double click the first error message. A window will popup, clear the text
stop();, close that window and save. Hit Publish again, great, it should be all working now.
Open SWF Importer
Step 1) Select the directory containing your bluebeast FLA and published SWF files. (I find it best to put these files in their down directory)
You should see
bluebeast listed in the Conversion Summary, if valid does not say Yes then you need to go back and check you followed the previous steps correctly.
Step 2) Select an export directory, if you want to export into an existing SpriteBuilder project then select the
SpriteBuilder Resources folder inside the desired
Note: As of SpriteBuilder 1.2 this folder will be
Step 3) Select the bluebeast and hit
Preview, looking good. Close this window.
Step 4) Hit Export All.
You should now have a file called bluebeast_pikarun.ccb and a bluebeastAssets folder in your export directory. If you exported directly into your project these files will now appear in your project resources.
Great let's see these in action in SpriteBuilder. If you didn't drop these straight into an existing SpriteBuilder project, you can easily create one try it.
Note: The CCB export has been tested against SpriteBuilder 1.1
Step 1) Create a new project, I called it 'bluedemo', it will open up the MainScene. Right click on
MainScene.ccb in the File view and select
Show in Finder.
Step 2) Copy the files from the export into this directory and then click back to the SpriteBuilder view. In a couple of seconds you will see
bluebeat_pikarun.ccb appear in
File view tab.
Step 3) Open this CCB and hit play, you should see the bluebeast running. That's it!
Common issues that cause "ERROR" in the converter
- The timeline of the animation symbol you want to publish cannot contain another symbol inside. The items in the timeline should contain/use only tweens.
- Make sure that the publish target inside the Publish Setting is set to the latest Flash Player version. Publshing the animation with old Flash Player versions can cause an error.
- The final animation that you want to convert should be in a symbol, not a scene.
- All the tweens used in the timeline must be present in the library section when publishing the animations.
- The published .swf file should have the exact same name with the .fla file.
Common issues that cause "Missing texture" in SpriteBuilder
- The converted ccb files and assets folder should be copied into the root folder of the SB package. If they're placed inside another folder(s), it will cause the "missing texture" issue in SpriteBuilder.
- The guys that did a load of hardwork, Three Rings
- SWF Importer/Ux/Conversion Tutorial, Martin Walsh
- Tutorial Flash content: Vincent Le Quang, Anna Klonoff and Melissa Wallace
See the LICENSE file for more info.