Tweener and tweening colors

I did a previous post about the static method Color.interpolateColor, but at that time, I hadn’t really tried Tweener yet. Let me tell you this, tweening colors has never been easier than with Tweener. I’m am going to redo the same example showing you how simple it is to use Tweener instead of Color.interpolateColor form the fl.motion.Color package. Here is the code, you just have to paste it on a frame an compile it to swf to make it work (you have to have the Tweener classes in your folder or in one of the default class folder).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import caurina.transitions.*;
 
var simpleSprite:Sprite = new Sprite();
simpleSprite.x = 100;
simpleSprite.y = 100;
simpleSprite.graphics.lineStyle();
simpleSprite.graphics.beginFill(0xff0000);
simpleSprite.graphics.drawRect(0,0,200,100);
addChild(simpleSprite);
simpleSprite.buttonMode = true;
 
simpleSprite.addEventListener(MouseEvent.MOUSE_OVER, makeBlue);
simpleSprite.addEventListener(MouseEvent.MOUSE_OUT, makeRed);
 
function makeBlue(e:MouseEvent):void{
  Tweener.addTween(simpleSprite, {_color:0x0000ff, time:1, transition:"easeOutQuart"});
}
function makeRed(e:MouseEvent):void{
  Tweener.addTween(simpleSprite, {_color:null, time:1, transition:"easeOutQuart"});
}

That’s it. And it does exactly the same thing and probably faster than the Tween classes. Notice that it takes only one line of code to change the color instead of the more complex method I used previously . Also you only have to import the Tweener classes as opposed to six import statements.

Well that’s it for today, I’ll try and investigate on more Tweener properties because it just keep surprising me.

, , ,

  1. #1 by jim - June 24th, 2008 at 17:19

    I was trying to get the color tween example working but I get the following error:

    ## [Tweener] Error: The property ‘_color’ doesn’t seem to be a normal object property of [object MovieClip] or a registered special property.

    I am not sure why I am getting this error. Do you know the reason why?

    Jim

  2. #2 by jim - June 24th, 2008 at 17:28

    The problem is that I hadn’t imported the color shortcuts class and initialized it. Adding the following code at the begining makes it work fine.

    import caurina.transitions.properties.ColorShortcuts;
    ColorShortcuts.init();

  3. #3 by Judie - July 10th, 2008 at 01:30

    I need Tweener code assistance. I need to change the color (to 50% black) on multiple movie clips when one movie clip is in the roll over state. When you roll off that movie clip the 50% black movie clips to to 0% black (or, normal). What would the Tweener code look like in a rollOver function? Thanks in advance.

  4. #4 by Steve - October 28th, 2008 at 20:01

    It would be the same……but it’ll be inside a onRollOver function;

    yourButton.addEventListener (‘mouseOver’, function()
    {
    Tweener.doTween(yourMC, {_color:0×000000, _alpha:50, transition:”easeOutExpo”});
    }

  5. #5 by Divya - September 19th, 2009 at 20:13

    i imported the color shortcuts class and initialized it. then added :

    Tweener.addTween(bg_mc, {_hue:120, time:1, delay:2, transition:”easeOutQuart”});

    But i got a syntax saying ‘ Access of undefined property Tweener ‘

    why?! … and thankyou

  6. #6 by lucianoaugusto - September 20th, 2009 at 13:51

    @Divya
    Hi, for solve this problem import at line 0 in As:
    import caurina.transitions.Tweener;

    =))

  7. #7 by twangrock - November 12th, 2009 at 06:26

    awesome, tweener is the nuts…

  8. #8 by Alexei - May 4th, 2010 at 22:39

    Thanks for the example

  9. #9 by Nepty - September 7th, 2010 at 16:30

    OHHHH, NO CAURINA! ….You think exist a method to do the same but using the Tween Class in the fl.transitions package? Instead of Caurina Library.

    Saludos amigos!

  10. #10 by Lewis Hughes - October 15th, 2011 at 05:24

    Hey Dominic! Thank you for sharing this. I can really use this on one project I am currently working on. Thank you for sharing this helpful post.

  11. #11 by Lewis Hughes - October 17th, 2011 at 16:42

    @Steve
    Excellent! Used this on my code as well. Thanks Steve!

  12. #12 by Kensh Gacilo - February 2nd, 2012 at 05:37

    This stuff is good but I think greensock is better.. I got a little problem here in handling some function.. Is anyone can help me here?

(will not be published)
Subscribe to comments feed
  1. No trackbacks yet.