FEffects

ver 3.0.0


FEffects is a library that enables you to create visual transitions like motion-tweens for example.
The package actually offers a Tween class and Robert Penners' easings are used here.
It can be used the same way, in your flash, flash9+, javascript, neko and cpp projects. You can of course use it in a NME project too (windows, linux, OSX, android, iOS, webOS, blackberry, HTML5).

FEffects is also available on http://code.google.com/p/feffects/

[feffects-chips.swf]

Install


In order to use FEffects, you need to install the library using haxelib, like that :
haxelib install feffects

Then you can use the library by adding -lib feffects to haxe commandline parameters.

Tutorial


FEffects' Tween is used especially to create visual transitions, but in fact, it's just a numerical value interpolation: The Tween class will compute the intermediate values according to the begin value, the end value the duration and the choosen easing function.
You can specify the object and the property you want to update or specify the callback function that will receive the computed value in argument. It's a float value, then you can do what you want with it and especially apply it for anything you want, any property (position, scale, rotation, alpha and more).
FEffects' Tween has the following methods:
  • start()
  • stop()
  • pause()
  • resume()
  • seek( n : Int )
  • reverse()

And the following getters:

  • duration
  • position
  • isPlaying
  • reversed

Examples


Sample.hx :
import feffects.Tween;
import feffects.easing.Bounce;

import flash.text.TextField;

class Sample {
    var tf    : TextField;
    
    function new() {
        tf = new TextField();
        flash.Lib.current.addChild( tf );
        
        // creating the tween
        var tween = new Tween( 0, 280, 5000, Bounce.easeOut );
        // setting the update function ( finished function is optional )
        tween.onUpdate( move );
        tween.onFinish( finished );
        // launch the tween
        tween.start();
    }
    
    function move( e : Float ) {
        tf.text = Std.string( e );
        tf.y = e;
    }

    function finished() {
        trace ( "tween finished" );
    }
    
    static function main() {
        var v = new Sample();
    }
}

Then, in order to compile this sample, here comes the build file : build.hxml
-swf9 sample.swf
-main Sample
-lib feffects

This sample shows a text field that falls from the top (0) to the bottom (280) of the scene. When falling, the text field displays the real intermediate value. The duration is set to 5000 ms.
As you can see, a simple callback function is called move and we use the computed value, given in argument, to set the y position of the text field. But we also use this value to display it simply as text.

But you can use the short syntax that allows you to set directly the property that will be modified using Reflection, like that :
Sample.hx :

import feffects.Tween;
import feffects.easing.Bounce;

import flash.text.TextField;

using feffects.Tween.TweenObject;

class Sample {
    function new() {
        tf = new TextField();
        flash.Lib.current.addChild( tf );
        
        // Creating and launching the tween (here onFinish function is optional)
        tf.tween( { y : 280 }, 5000 ).onFinish( finished ).start();
    }

    function finished() {
        trace ( "tween finished" );
    }
        
    static function main() {
        var v = new Sample();
    }
}

Tweens available

  • Quint.easeIn, Quint.easeOut, Quint.easeInOut
  • Sine.easeIn, Sine.easeOut, Sine.easeInOut
  • Back.easeIn, Back.easeOut, Back.easeInOut
  • Bounce.easeIn, Bounce.easeOut, Bounce.easeInOut
  • Circ.easeIn, Circ.easeOut, Circ.easeInOut
  • Cubic.easeIn, Cubic.easeOut, Cubic.easeInOut
  • Elastic.easeIn, Elastic.easeOut, Elastic.easeInOut
  • Expo.easeIn, Expo.easeOut, Expo.easeInOut
  • Linear.easeIn, Linear.easeOut, Linear.easeInOut, Linear.easeNone
  • Quad.easeIn, Quad.easeOut, Quad.easeInOut
  • Quart.easeIn, Quart.easeOut, Quad.easeInOut

More examples


All plateforms examples are in the sample directory in the library path.
You can see more samples, here
version #19500, modified 2013-06-18 02:00:27 by filt3rek