In this entry we are going to use FABLE as3 loader. This loader is able to load the xml that is generated by fable and load the world including the images into a flash project.

To take this tutorial we will start with this fable project, this project is a marble machine, contains some complex fixtures and some complex joints, next we can see the example of the project.

image

 

The first step is to publish the project. For this we only go to File and publish. This will generate the following files.

image

Now in this same folder we will create a flash file with any name. We will also set the box2d library and the as3 loader, that you can download from the loader section. So this will look like this.

image

Now in our flash file we will add two layers so that it ends like this.

image

In the first frame we will move to the actions-frame and add the following line.
var xml:XML = new XML((<![CDATA[

]]> ).toString());
So our flash looks like this.

image

This lines are a hack to make a xml with a multiline text. Now we will copy the contents of the .xml file that falbe generated and paste it between this two lines. It will look something like this.

image

Now We will get an a in our timeline like this.

image

It is important to mention that we need to have this layer on the top because the variable xml defined there will be used later in the layer that is below.

Now we move to the bottom layer and to the actions-frame tab and add the following lines of code.


import Box2D.Dynamics.b2World;
import Box2D.Common.Math.b2Vec2;
import flash.display.Sprite;
import flash.events.Event;

//Create the canvas where we will be drawing the world
var canvas:Sprite = new Sprite;
canvas.scaleX = canvas.scaleY = .25;
addChild(canvas);

//Create the world
var world:b2World = new b2World(new b2Vec2(), false);
//Create the as3 loader
var loader:Loader = new Loader(xml,world , canvas, true);
//If we have images load them
loader.loadImages(xml);

//Set the physics simulation data Those are the settings used in FABLE
var timeStep:Number = 1 / 30;
var velocityIterations:Number = 6;
var positionIterations:Number = 2;

//Add a listener to drive the physics simulation
addEventListener(Event.ENTER_FRAME,
function(e:Event):void{
//The call to the world physics
world.Step(timeStep, velocityIterations, positionIterations);
//THe call to sync the images
loader.synk();
});

So it will looks like this.

 

image

 

There some interesting things here, as you can see I am setting the canvas scale to .25, this is because the original fable project has a size of 2048×1536 pixels, that is huge so i am scalling it to 1/4 of the size.

Now we will set the flash project canvas to a value that is 1/4 the original fable canvas size, that is 512×359 and the frames per second to 30.

image

And we are set, now we publish the flash project and we should see the following.

image

This is the fable embeded in the page.


You can download all the files from here.

sources_apr-4-2014

The latest version of the loader is in the loaders page.

Loaders