RabbitTween : new fast and easy transition/tween engine for Flash AS3

0 Flares Twitter 0 Facebook 0 Google+ 0 Email -- Filament.io 0 Flares ×

RabbitTween is a professional transition / tween engine written in ActionScript 3 for Flash.
It is fast, easy to use and written in an object oriented way and so easily customizable (code is commented)
If you want to know the “story” behind the RabbitTween, please follow this link.

RabbitTweenMax is making its apparition in the set. It allows to tween filters and much more coming soon.

Check out the new demo showing what you can actually do with RabbitTween and RabbitTweenMax.

Get Adobe Flash player

This movie demonstrates the use of updating starting values of tweened properties to make the tween transition between the “DNA” effect and the final position of each particle smooth. It also makes use of the RabbitTweenMax class to tween the DropShadowFilter and, most importantly, the DisplacementMapFilter. RabbitTweenMax allows you to tween the mapBitmap property of a DisplacementMapFilter to create animated distortions like this.

Keep in mind that this is the early stage of this tween / transition engine. More features will be added over the time as I need them for my own use.
Accent will be put on speed, ease of use, features and manageability.

Here is a list of the RabbitTween and RabbitTweenMax main features

Features RabbitTween RabbitTweenMax
Extremely fast AS3 engine (see speed tests) yes yes
Tween any numeric property of any object yes yes
Tween multiple properties at the same time and in 1 line of code yes yes
Update tween start values on the fly yes yes
Update tween end values on the fly yes yes
Optimized for DiplayObjects/MovieClips yes yes
Function callbacks : onStart, onUpdate and onComplete yes yes
Function callbacks parameters yes yes
Tween the tint of any DisplayObject/MovieClip (very optimized) yes yes
"autoAlpha" special property : toggle the "visible" property of any DisplayObject/MovieClip when its alpha is 0.0 or 1.0 yes yes
Advanced management of tween overwriting : NONE, OVERLAPPING PROPERTIES, ALL and CONCURRENT yes yes
Extra from() method that allows you to tween any object from specified values yes yes
Extra fromTo() method that allows you to specify starting and ending values for any tween yes yes
Tween filters like : DropShadowFilter, BlurFilter, GlowFilter, BevelFilter, DisplacementMapFilter and ColorMatrixFilter   yes
Unique: Tween mapBitmap property of DisplacementMapFilter using caching bitmap technique   yes
Tween mapPoint property of DisplacementMapFilter   yes
Tween color property of DropShadowFilter, GlowFilter and BevelFilter   yes

How to use RabbitTween and RabbitTweenMax

Well most of the RabbitTween class, and thus RabbitTweenMax class, is working like the TweenLite/Max classes.

To start a tween, you have three choices:

  • just set the destination values using the “to” static method:

[sourcecode language=’as3′]
import rabbit.easing.Expo;
import rabbit.tween.RabbitTween;

RabbitTween.to(mc, 2.0, {alpha:1.0, x:50, y:75}, 0.5, Expo.easeInOut);
[/sourcecode]

This tween is gonna change the alpha, x and y properties of the mc object from its actual properties values to the one specified.

the “to” method of the RabbitTween class takes as much as 8 parameters but only the 3 first are mandatory.
The first parameter, “mc“,  is the object you want to tween the properties of.
The second parameter, “2.0“, is the duration in seconds of the tween.
The third parameter, {alpha:1.0, x:50, y:75}, is an object containing the properties to be tweened and their destination values.
The fourth parameter, 0.5, is the delay in seconds before the tween actually starts.
And the fifth parameter, Expo.easeInOut, is the easing equation to be used to tween the properties.

  • set the starting values with the “from” method (actual values are set to be the end values):

[sourcecode language=’as3′]
import rabbit.easing.Expo;
import rabbit.tween.RabbitTween;

RabbitTween.from(mc, 2.0, {alpha:0.0, x:50, y:75}, 0.5, Expo.easeInOut);
[/sourcecode]

This tween is the same as the first one except that the values specified in the third parameter are the starting ones and the current values the ending ones.

  • set the starting and ending values with the “fromTo” method:

[sourcecode language=’as3′]
import rabbit.easing.Expo;
import rabbit.tween.RabbitTween;

RabbitTween.fromTo(mc, 2.0, {alpha:0.0, x:0, y:0}, {alpha:1.0, x:50, y:75}, 0.5, Expo.easeInOut);
[/sourcecode]

This tween is a combination of the two first ones. The third parameter takes the starting values of each properties you want to tween, and the fourth parameter takes their ending values.

I’ll try to write more tomorrow or the day after as I have to go now but just can’t wait before posting this note.
So here we go, you can download the latest source files here:

RabbitTween 0.2, tweening engine in AS3
0 Flares Twitter 0 Facebook 0 Google+ 0 Email -- Filament.io 0 Flares ×

9 Comments

  1. I love the DNA morph effect, how do you do this with Rabbit?
    Your engine looks very promising, keep the work up Thomas!

  2. admin

    Pretty simple actually, I’ll try to write a post about it.
    There is so much I need to say about this engine but don’t have the time for it.

  3. Joe

    How you are animating Displacement maps? Can you do it via: RabbitTween.fromTo?

    I found your website because I’m having a lot of trouble trying to rotate movieClip containing an image with a simple displacement map to distort the image…. When i rotate the main movieClip, the displacementMap filter WILL NOT ROTATE with the movieclip. It can only tween x and y.

    Thanks!

  4. Mhhhh, I’ll try to have a look at it soon.
    Here is an example of how to use animated displacement map with my tween engine:

    // properties From
    var oFrom:Object = { };
    // props to
    var oTo:Object = { };
    // props for DisplacementMapFilter
    var displace:Object = { };

    // this line specifies an array containing all the BitmapData objects for the displacement map
    // the tween engine animates the displacement filter by taking the next BitmapData object in the array on each frame (and restarts from zero when it reaches the end)
    // aDispEffectCache01 is the array containing all the BitmapData objects.
    displace.mapBitmap = aDispEffectCache01;
    // other props
    displace.scaleX = 0.0;
    displace.scaleY = 0.0;
    displace.componentX = 1;
    displace.componentY = 1;
    displace.overwriteIndex = 0;
    displace.overwrite = RabbitTweenMax.FILTERS_OVERWRITE_NONE;
    displace.removeOnComplete = true;

    oFrom.displacementMapFilter = displace;

    displace = { };
    displace.mapBitmap = aDispEffectCache01;
    displace.scaleX = 4 + Math.random() * 20;
    displace.scaleY = 4 + Math.random() * 20;
    displace.componentX = 1;
    displace.componentY = 1;
    displace.overwriteIndex = 0;
    displace.overwrite = RabbitTweenMax.FILTERS_OVERWRITE_NONE;
    displace.removeOnComplete = true;

    oTo.displacementMapFilter = displace;

    RabbitTweenMax.fromTo(content, 1.0, oFrom, oTo, 0.0, null, -1, -1, 1);

  5. Maybe try to apply the filter then rotate…
    Or put the DisplayObject you want to apply a filter on in an other DisplayObject. Apply the filter and then rotate the DisplayObject that contains the one with the filter applied on it…
    Sometimes flash requires tricks like that.

  6. Hi Thomas,

    It would be great to add rabbittween to the Fluxus as3 Library project. at http://fluxdb.fluxusproject.org/

    We can add the zip download for the moment but, have you thought about hosting the project source on Github or GoogleCode?

    Thank you.

  7. Hello,
    to be honest, I don’t really know what to do with this tweening engine. But you can use it for the moment as long as it stays the way it is and for non-commercial use.
    Tkx for your message and good luck with your project.
    cheers.

Leave a Comment