Babel Flash, the AS3 Localization Manager

Jan
10

Localizing any project is never fun to think about and usually not the ‘sexy’ part of a project.  I’d like to introduce you my latest library: Babel Flash.

Babel Flash is a free AS3 library whose goal is to make localizing your flash projects easier. It handles loading external font swfs and replace graphics and text on the fly. Setting it up can  both be done programmatically or in the IDE, so it’s both programmer and artist friendly.

Babel Flash uses the following XML format:

<data>
<fonts>

  <externalfont>
    <fontname> Class Name Of Font </fontname>
    <content> Location of font swf </content>
  </externalfont>

<fonts>

<locale>

  <language> the id for this language </language>

  <textasset>

    <id> unique id for this text asset, must match in all locales </id>
    <content> the actual text to be displayed </content>

    <!-- the remaining parameters for textfields can be added here as well -->
    <!-- just remember that its all lowercase and no spaces or underscores -->
    <font> the actual font name (may differ from classname of external font from swf)</font>
    <size> font size </size>

  </textasset>

  <graphicasset>

    <id> unique id for this graphic asset, must match all locales </id>
    <content> path to actual graphic asset </content>

    <!-- some of the remaining basic properites for sprites are supported -->
    <!-- just remember that its all lowercase and no spaces or underscores -->
    <x> x value </x>
    <height> height value </height>

  </graphicasset>      

</locale>
</data>

Once you’ve got the xml squared away, you then proceed to load it as follows:

BabelFlash.instance.addEventListener(BabelFlashEvent.READY, onBabelFlashReady);
BabelFlash.instance.loadLocalizationXML('testdata.xml');

Now there are two ways to set up the assets to be localized. The first way the programatic way:

var startingSprite:Sprite = new Sprite();
startingSprite.graphics.beginFill(0xFF0000, 1);
startingSprite.graphics.drawCircle(0,0,50);
startingSprite.graphics.endFill();

// xml id's from sample at the bottom of this post
// the 'graphic_test' string is the id of the asset target in the local of every language
var testBabelGraphic:BabelFlashSprite;
testBabelGraphic = new BabelFlashSprite('graphic_test', startingSprite);
// or you could testBabelGraphic.addChild(startingSprite)

addChild(testBabelGraphic);

Now every time you change then language the testBabelGraphic should automatically change to the new language’s asset.

// the 'en' is the language id in a locale.
BabelFlash.instance.changeLanguage( 'en' );

And here is the IDE way:

Step 1: Create a new library container, and change the base class to com.gltovar.babelflash.BabelFlashSprite

Create a new library object, and change its base class to com.gltovar.babelflash.BabelFlashSprite

Step 2:  Create a dynamic textfield in the symbol from step 1.

Create a dynamic textfield in the library element from step1

Step 3: Don’t worry about the name of the textfield.

Don't worry about the name of the text field...

Step 4: The container of the textfield is what matters and should match up with an id in the xml

The container's name is what matters.

Its the same process for graphics, but you just swap out a display object for a text field in the above steps.

Finally, there is a live demo. Just click on the picture and it will switch between english and spanish.

here’s the source for the above:

package
{
    import com.gltovar.babelflash.BabelFlash;
    import com.gltovar.babelflash.BabelFlashEvent;
    import com.gltovar.babelflash.BabelFlashSprite;
   
    import flash.display.Sprite;
    import flash.events.MouseEvent;
    import flash.text.TextField;
   
    public class BabelFlash_Example_AS3 extends Sprite
    {
        private var testBabelGraphic:BabelFlashSprite;
        private var testBabelText:BabelFlashSprite;
       
        public function BabelFlash_Example_AS3()
        {
            renderStartingGraphics();
           
            BabelFlash.instance.addEventListener(BabelFlashEvent.READY, onBabelFlashReady);
            BabelFlash.instance.loadLocalizationXML('testdata.xml');
        }
       
        private function renderStartingGraphics():void
        {
            var startingSprite:Sprite = new Sprite();
            startingSprite.graphics.beginFill(0xFF0000, 1);
            startingSprite.graphics.drawCircle(0,0,50);
            startingSprite.graphics.endFill();
           
            testBabelGraphic = new BabelFlashSprite('graphic_test', startingSprite);
           
            addChild(testBabelGraphic);
            testBabelGraphic.x = 100;
            testBabelGraphic.y = 100;
           
            testBabelGraphic.addEventListener(MouseEvent.CLICK, changeLanguage);
           
            var startingText:TextField = new TextField();
            startingText.text = 'starting text';
           
            testBabelText = new BabelFlashSprite('text_test', startingText);
           
            addChild( testBabelText );
        }
       
        private function onBabelFlashReady(e:BabelFlashEvent):void
        {
            BabelFlash.instance.changeLanguage( 'en' );
        }
       
        private function changeLanguage(e:MouseEvent):void
        {
            if( BabelFlash.instance.currentLanguage == 'en' )
            {
                BabelFlash.instance.changeLanguage( 'sp' );
            }
            else
            {
                BabelFlash.instance.changeLanguage( 'en' );
            }
        }
       
    }
}

and the xml

<?xml version="1.0" encoding="utf-8" ?>
<data>
    <fonts>
        <externalfont>
            <fontname>BlargFont</fontname>
            <content>blarg.swf</content>
        </externalfont>
    </fonts>
    <locale>
        <language>en</language>
        <textasset>
            <id>text_test</id>
            <content>Hello</content>
            <font>_sans</font>
            <size>24</size>
        </textasset>
        <graphicasset>
            <id>graphic_test</id>
            <content>apple_pie.jpg</content>
        </graphicasset>
    </locale>
    <locale>
        <language>sp</language>
        <textasset>
            <id>text_test</id>
            <content>Hola</content>
            <font>MetaPlusBold-Roman</font>
            <size>18</size>
        </textasset>
        <graphicasset>
            <id>graphic_test</id>
            <content>babelflash/taco.jpg</content>
            <x>-100</x>
        </graphicasset>
    </locale>
</data>

you need Bulk Loader to use this library. Get it here.

You can download the source and examples here

Browse the source here