View Ladislav Zigo's profile on LinkedIn

 
laco.wz.cz
Web



Custom easing tool is desinged for creating custom easing effects
(click on image to test online version)

From animators view you can convert Motion Tween to any easing effect

Examples for flash developers:

example1: tweening movieclip properties with custom easing

1. adjust your easing in Custom Easing Tool (window>other panels> custom easing tool)

2. click generate easing object

3. copy and paste generated code to first frame

actions in first frame:

#include "lmc_tween.as" // include tweening engine

// pasted generated code
customEasing = {};
customEasing.pts = [{Mx:0,My:0,Nx:62,Ny:-194,Px:3,Py:97},{Mx:65,My:-97,Nx:58,Ny:-6,Px:-24,Py:60},{Mx:99,My:-43,Nx:76,Ny:-276,Px:25,Py:119},{Mx:200, My:-200}];
customEasing.ease = function(t,b,c,d,pl){
var i,r;
r = 200 * t/d;
for(i = 0;r>pl[i+1].Mx;i++){
}
i=pl[i];
if(i.Px != 0){
r=(-i.Nx+Math.sqrt(i.Nx*i.Nx-4*i.Px*(i.Mx-r)))/(2*i.Px);
}else{
r=-(i.Mx-r)/i.Nx;
}
return b-c*((i.My+i.Ny*r+i.Py*r*r)/200);
}
// end of generated code

// usage:
// tween my_mc _x to 300 with custom easing in 3 seconds
my_mc.tween("_x",300,3,customEasing)

example2: customizing easing in V2 components (ComboBox, Tree, Accordion)

1. drag and drop to stage ComboBox component

2. set its name to "my_cb" and add some values in labels property

3. adjust your easing in Custom Easing Tool (window>other panels> custom easing tool)

4. click generate easing object

5. copy and paste generated code to first frame

6. assign pl (point list) parameter in customEasing.ease function

actions in first frame:

// generated code:
customEasing = {};
customEasing.pts = [{Mx:0,My:0,Nx:62,Ny:-194,Px:3,Py:97},{Mx:65,My:-97,Nx:58,Ny:-6,Px:-24,Py:60},{Mx:99,My:-43,Nx:76,Ny:-276,Px:25,Py:119},{Mx:200, My:-200}];
customEasing.ease = function(t,b,c,d){
// manually add this line
var pl = customEasing.pts;

var i,r;
r = 200 * t/d;
for(i = 0;r>pl[i+1].Mx;i++){
}
i=pl[i];
if(i.Px != 0){
r=(-i.Nx+Math.sqrt(i.Nx*i.Nx-4*i.Px*(i.Mx-r)))/(2*i.Px);
}else{
r=-(i.Mx-r)/i.Nx;
}
return b-c*((i.My+i.Ny*r+i.Py*r*r)/200);
}
// end of generated code

// usage:
// set easing style for my_cb component to customEasing
my_cb.setStyle("openEasing", customEasing.ease) ;
// you can too adjust duration of showing and hiding in miliseconds
my_cb.setStyle("openDuration", 1000);

 

Custom easing tool - videotutorial

 



download | examples | installation | custom Easing Tool | links