Flex is a powerful and flexible language that allows to develop flash applications and web pages. However, some of the cases require more time spending when are done using Flex. One of them is a non-linear motion of an object. Being a trivial thing when has to be implemented in Adobe Flash CS, in Flex it requires more work.First of all, I wanted to mention that I am not not in anyway a guru in Flex, so, if there is a better way to do this effect, please let me know.
I have used Bezier curves along with the Tween Effect to accomplish the non-linear motion of an object. Please read here about the tween effect here. Some theory on Bezier Curves is described here.
The idea behind the Bezier curves is very simple - for a given set of point in space a simple parametric equation is created. The equation consists of a all given vectors weighted by a parametric functions.
For instance, for a cubic curve (4 given points) the equation will be:
As you can see when t=0 B(t)=P_0 ; when t=1 B(1)=P_3. When t is in between 0 and 1 the output of B is either approaching P_1 or P_2.
Now, when the underlying curve theory is somewhat covered let’s talk about the tween effect.
The tween mechanism is performed on a target object over a period of time. For instance, zoom, resize, fade, dissolve are tween effects. So, if we create an object with its coordinates being described by an equation above and thinking of parameter t as time - it should be possible to create an object that moves according to a chosen trajectory.
Here is the implementation of all said above. (Click on the green box to start the effect).
Here is the code.
Of course there is an issue of the velocity not being constant. There is no easy way to go around it, except to choose the points spaced by approximately equal distances. Other solutions are described here.
Hope it will save someone time.
Tags: flash, flex, translation
