Animation workflow

Animation tools

Flambe works very close with the Adobe 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 (timeline) needs to be a library-symbol with Actionscript base class flash.display.MovieClip. Every symbol element in 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), timelines will be stored in a JSON file.

Check out this handy Flump Checklist for animators

Let's say you have the following setup; An 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

To display a single animation (MovieClip) you need a Library, which holds the data of the exported Flump library. You can call library.createSprite("MyAnimation") to

var library = new Library(assetPack, "animations"); // provide a loaded assetpack, and give name of library
var sprite = library.createSprite("MyAnimation"); // create sprite from the library
var entity = new Entity().add(sprite); // add the MovieSprite to the Entity
System.root.addChild(entity); // add to stage

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. Let's say you have a player that has an idle-animation and a jump-animation. The player will start display the jump-animation and fall back to the idle-animation when completed. After a play() it will always attempt to go back to the loop(). The played movies will be added to a new child entity of the owner.

var library = new Library(assetPack, "animations"); // provide a loaded assetpack, and give name of library
var moviePlayer:MoviePlayer = new MoviePlayer(library); // pass the library to the player
moviePlayer.loop("player_idle"); // loop the animation with linkage name "player_idle"
moviePlayer.play("player_jump"); // play the animation with linkage name "player_jump"
var entity = new Entity().add(moviePlayer); // add the MoviePlayer to the Entity
System.root.addChild(entity); // add to 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.

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._; // 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

Pause a MovieSprite

var movieSprite:MovieSprite = moviePlayer.movie._; // grab the current playing MovieSprite
movieSprite.paused = true;

Jump to certain MovieSprite position

This example sets the position to 0, which "rewinds" the MovieSprite.

var movieSprite:MovieSprite = moviePlayer.movie._; // grab the current playing MovieSprite
movieSprite.position = 0; 

Get symbol information of a MovieSprite

A MovieSprite holds a reference to the symbol it currently playing. You can grab useful information out of it:

var movieSprite:MovieSprite = moviePlayer.movie._; // grab the current playing MovieSprite
trace(movieSprite.symbol.duration); // total duration of this movie (in seconds)
trace(movieSprite.symbol.frames); // the total number of frames in this movie.
trace(movieSprite.symbol.frameRate); // the rate that this movie is played, in frames per second.
trace(movieSprite.symbol.name); // name of current symbol

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