Animation workflow

## Tools Flambe works very close with Flash IDE in combination with Flump. Download Flump here: http://threerings.github.io/flump/ Read the manual: https://github.com/threerings/flump/blob/master/README.md

Use Flump exported animations in Flambe

First you need to create an animation in Flash, save as animations.fla (outside assets folders). In Flash, every animation needs to be a library-symbol with _actionscript base class flash.display.MovieClip, and every element of the animation, should be have the base class flash.display.Sprite. Run and export Flump (more details here). Sprites will end up in the spritesheet (atlas), animations will be stored in a json file.

Let's say you have the following setup; A assetpack called "bootstrap", and the Flump exported directory called "animations" (matches .fla-name). This is how the folder structure should look, after you've succesfully exported from Flump.

/assets/
/assets/bootstrap/
/assets/bootstrap/animations/
/assets/bootstrap/animations/atlas0.png
/assets/bootstrap/animations/atlas1.png
/assets/bootstrap/animations/library.json

Then, you need this code to create and display your animation. You'll need a MoviePlayer. The MoviePlayer needs a Library, that is the exported Flump library containing movies and sprites.

var library = new Library(pack, "animations"); // pack references to an already loaded assetpack 'bootstrap'.
var moviePlayer:MoviePlayer = new MoviePlayer(library);
moviePlayer.loop('MyAnimation'); // start looping the animation with linkage name "MyAnimation"
var entity = new Entity().add(moviePlayer); // add the MoviePlayer-component to the Entity

System.root.addChild(entity); // add on top of stage;

• For demo's with implemented animations, check the official Flambe demos (for example "monster" or "horses").
• More information on loading (external) assets and assetpacks, read Working with assets.

A MoviePlayer is a convenient controller to play through multiple different movies. Designed for characters and objects that have a separate Flump symbol for each of their animations, and need to switch between them. The played movies will be added to a new child entity of the owner.

Get position of element from a specific layer

From flump-exported animations, you can grab its children via the layer names.

var moviePlayer:MoviePlayer = owner.get(MoviePlayer);
var movieSprite:MovieSprite = moviePlayer.movie._; // first grab the current playing MovieSprite
var layer:Sprite =  movieSprite.getLayer("Car").get(Sprite); // grabs sprite of layer called "Car"
var matrix:Matrix = layer.getLocalMatrix();
		
trace(matrix.m02, matrix.m12); // outputs x,y position

Looking for a demo project with animation? See https://github.com/aduros/flambe-demos/tree/master/monster