Working with values

Understanding Value wrappers

AnimatedFloat / Value<A> for properties (like x, y, rotation etc..)

Value<A> wraps a single value, notifying listeners when the value changes.

Why does sprite.x = 10 does not work? Because of AnimatedFloats, which extends Value<A>. Many properties in Flambe are AnimatedFloats. Using animateTo-function on an AnimatedFloat value makes it dead simple to say, spin a sprite or fade out a sound.

💭 Note: To change the actual value, you should use the underscore.

Some examples

// Direct set value
sprite.x._ = 130;

// animate to 130px (absolute) with easing
sprite.x.animateTo(130, 1, Ease.backInOut); 

// animate += 10px (relative) with easing
sprite.x.animateBy(10, 1, Ease.backInOut); 

// coin flip animation
// scales 20 times from 1 to -1 at 0.8 seconds per flip
sprite.scaleX.behavior = new Sine(1, -1, 0.8, 20); 

// shake animation
sprite.x.behavior = new Jitter(sprite.x._, 20); 
sprite.y.behavior = new Jitter(sprite.y._, 20); 

// Edit global volume
System.volume._ = 0.5;

Value wrappers for several types

System.hidden._ // Bool
System.stage.orientation._ // Orientation

Listen to change events

sprite.x.changed.connect(function(to, from)
{
  trace('sprite x-pos changed from $from to $to');
});

Easings

Flambe supports a lot of common easing functions. An easy cheatsheet for choosing the right easing can be found here http://easings.net/en

Animation and timing

The classes in the flambe.script-package provide a way to compose complex animations. The Script component can be added to an Entity to give it some scripted behavior.

    var script = new Script();

    // First spin a sprite, and then fade out a sound
    script.run(new Sequence([
        new AnimateTo(someSprite.rotation, 360, 1),
        new AnimateTo(somePlayback.volume, 0, 1),
    ]));

    // Call a function every two seconds
    script.run(new Repeat(new Sequence([
        new CallFunction(function () {
            trace("Tick");
        }),
        new Delay(2),
    ])));

    entity.add(script);

More on composable animations can be found in this blogpost.