Flex tweening effects

Submitted by Falken on

So, you've been able to tween various properties of objects in Flex ([node:1354]) to make them fade in and out and what have you, but how do you get that cute 'bounce' effect where the property overshoots the end value and takes a while to settle down ?

The answer is burried in the mx.effects.easing classes. What you do is assign the type of ease (I like either Bounce.easeOut or Elastic.easeOut) to the Tween after you create it:

import mx.effects.Tween;
import mx.effects.easing.Elastic;
...
var t:Tween=new Tween(this,_percent,p,500);
t.easingFunction=mx.effects.easing.Elastic.easeOut;

Easy once you know how, eh ? You might want to read a slightly outdated article, but with some handy examples here or the more scary Adobe docs here.

Sections

Submitted by Falken on Tue, 04/24/2007 - 16:12

Permalink

Note this works with non-Tween based effects, and obviously from MXML too, as shown below.

<mx:WipeUp id="fadeOut" duration="250" moveEasingFunction="mx.effects.easing.Exponential.easeIn" />

Though it appears you still need to import the 'Exponential' (or whatever) on the same page.

Tom