Easer: A UI For Generating Tweens in Tweener, Flash Pro, and TweenLite

Here’s a handy tool you can use to create tweens without having to guess all the numbers involved. Just click and drag to create the graph of the tween, tweak your desired timing, and export to any of four formats: Flash’s native tweening engine, Tweener, TweenLite, or TweenMax. And if you’re a Tuts+ Premium member, you can grab the source code for the tool itself!

Use Easer

Easer is simple to use:

1. Click the Time button to set the easing time.
2. Click the red line to add a custom node. You can drag the control points left or right to adjust the curve for the ease transition. You also can delete node by pressing Delete on your keyboard.
3. Click Preview button to view your custom ease transition.
4. Pick your tween engine of choice, then click “COPY CODE” button.
5. Paste the code into your project’s source. Make sure you import the Easer class from the source download.

Example Code

import com.activetofocus.easer.Easer;
import caurina.transitions.Tweener;

var easerArr:Array = [{Nx:69,My:0,Ny:-263,Mx:0},{Nx:360,My:-210,Ny:-8.5,Mx:183},{Nx:442,My:-135,Ny:-259,Mx:397},{My:-200,Mx:520}];

Tweener.addTween(mc,{y:29, time:2, transition:Easer.to(easerArr)});

Get Easer’s Source

The download link at the top of this page is for the files required to use Easer. If you’d like to modify Easer, or just take it apart to see how it works, then you can get the source files for Easer itself from Tuts+ Premium.