<script type="text/javascript">

//<![CDATA[

function createTween() {

    var tween = $create(

    // type

    Pacem.UI.Tween,

    {   // * properties (JSON)

        // ===========================

        'object':

        // target object

        $get("myTweenedObject").style,

        'type':

        // tween type, choose among:

        // -> Pacem.UI.TweenType.double

        // -> Pacem.UI.TweenType.int

        // -> Pacem.UI.TweenType.color

        Pacem.UI.TweenType.color,

        'easingFunc':

        // Pacem.UI.Easing delegate

        Pacem.UI.Easing.Sine.easeOut,

        'finishedBehavior':

        // how to act at the end:

        // -> Pacem.UI.TweenFinishedBehavior.none

        // -> Pacem.UI.TweenFinishedBehavior.loop

        // -> Pacem.UI.TweenFinishedBehavior.yoyo

        Pacem.UI.TweenFinishedBehavior.yoyo,

        'property':

        // target property (of object)

        'backgroundColor',

        'unit':

        // tween type unit of measure:

        // -> Pacem.UI.Unit.pixels

        // -> Pacem.UI.Unit.points

        // -> Pacem.UI.Unit.picas

        // -> Pacem.UI.Unit.percentage

        // -> Pacem.UI.Unit.centimeters

        // -> Pacem.UI.Unit.millimeters

        // -> Pacem.UI.Unit.inches

        // -> Pacem.UI.Unit.emSpace

        // -> Pacem.UI.Unit.xSpace

        // -> Pacem.UI.Unit.none

        Pacem.UI.Unit.none,

        'start':

        // initial value

        0xff0000,

        'finish':

        // final value

        0x00ccff,

        'duration':

        // duration (in seconds)

        2.75,

        'delay':

        // initial delay (secs)

        .0

    },

    {  

        // * events (JSON)

        // ===========================

        'motionStarted':

        // 'motionStarted' handler

        tween_motionStarted,

        'motionChanged':

        // 'motionChanged' handler

        tween_motionChanged,

        'motionFinished': 

        // 'motionFinished' handler

        tween_motionFinished        

    }

    );

}

function tween_motionStarted(sender, args){

}

function tween_motionChanged(sender, args){

    // args.get_elapsed() -> seconds elapsed since start

    // args.get_currentPosition() -> tweened property current value

}

function tween_motionFinished(sender, args){

}

Sys.Application.add_load(createTween);

//]]>

</script>

<div id="myTweenedObject" style="height:100px">

</div>