How to Tween A Variable with Flash and TweenLite

by carl schooff on September 20, 2010 · View Comments

in GreenSock Tweening Platform Tips

This movie requires Flash Player 9

Here we are going to explore one TweenLite / TweenMax’s nifty little unsung features: the ability to tween a variable over time. This little trick works great for animating scores in games and just making your life a touch sweeter. Like all things TweenLitey, its really easy.

Sample AS3 Code

import com.greensock.*;
import com.greensock.easing.*;

var score:Number = 0;
var targetScore:Number = 20;

TweenLite.to(this, 1, {score:targetScore, onUpdate:showScore, ease:Linear.easeNone});

function showScore(){
	trace(score);
	score_mc.score_txt.text = int(score);
	}

Resources

DOWNLOAD FILES: snorklTV_sample_TweenVariable_cs3

Official Greensock Tweening Platform Site
My TweenMax Intro Tutorial

Thanks for reading, if you have any questions, just post below.

Post to Twitter Post to Facebook

  • Laszlo Prekop

    Wow, I feel like I'm lost in an unlit labyrinth when all of a sudden you appear from thin air and while showing me my way out you point your flashlight in dark creepy corners revealing the treasures lie there and chattily explain their history and magical nature.
    var snorkl_TV:MagicalTreasure = new MagicalTreasure; // hope this makes sense :)

  • http://www.snorkl.tv/ carl schooff

    @Laszlo, it is my pleasure to shine my flashlight into those creepy corners for you. It is great to have you on the tour!

  • Patrick Mullady

    dig it man! I never thought to tween vars like that. You learn something new everyday! Thanks for the info!
    - P

  • http://www.snorkl.tv/ carl schooff

    thx for dropping in Patrick. Yeah, I didn't know much about doing this myself until recently.

  • Bailiwick

    Hello! Thanks a lot for your effort and sharing. I have one question though.
    According to your script above, following should work:

    var score:Number = 1.1234567890;

    score_txt.text = int(score);
    //'score_txt would be dynamic textfield on the stage.

    But when I test it, following error pops up.
    Error:1067: Implicit coercion of a value of type int to an unrelated type String.

    Why is your script working but example above doesn't?
    Thanks.

  • http://www.snorkl.tv/ carl schooff

    Greetings Bailiwick,

    I have a saying when I come across situations like you described… “Flash

    is a Jerk”.

    I have seen the error you described for myself many times and it makes me

    scratch my head. There are plenty of times when I don't see it as well.

    First to solve your problem do this:

    score_txt.text = String(int(score));

    This will force the number you put into the textfield to be a String and

    not a Number.

    It seems the textfield wants to have a String value as its text property.

    This really annoyed me when switching to AS3.

    Here's the kicker, how come I don't need to use this method in my

    example???? Honestly I don't know. In fact the first time I recorded this

    tutorial I was befuddled as to why I didn't have to do the String()

    conversion.

    I just messed around and tried to force the error you were getting and here

    is the deal.

    The error goes away and you don't need to force the String() conversion IF

    THE TEXTFIELD IS INSIDE A MOVIECLIP…?!?!!

    So in my example my textfield is inside of score_mc.

    I will need an AS3 heavyweight to offer some sound reasoning for WHY this is

    the case.

    I will probably do a quick tutorial on this as it is super annoying.

    Thanks SO MUCH for trying to work through this example and posting your

    troubles.

    Carl

  • Bailiwick

    Hi!
    Thanks again. Very thorough explanation. I will remember your tips because they are very useful.
    There's one more thing that can be done to not see the error pop up. Turn off Strict and Warning mode in AS3 publish settings. :-)
    But this is not recommended I guess, even thou this particular script would work.

    Keep up the good work.

  • Gimp

    This doesn't work when using the Document class. Do you know how to make it work with the Document class?

  • http://www.snorkl.tv/ carl schooff

    Hi Gimp,

    You will have to provide a bit more information. What doesn't work? What errors are you getting? Are you importing all the necessary classes?

  • Dza

    if youre calling this from inside a class, you need to make sure its a public property that you’re tweening. otherwise it throws a compiletime error.

    regards.robin

  • http://www.snorkl.tv/ carl schooff

    thanks Robin. I’m sure that will help some folks out of a jam.

    best,

    Carl

  • sjwest68

    Any chance you have this in AS2? I tried converting it and have it mostly working but I’m obviously not porting something over correctly.

  • http://www.snorkl.tv/ carl schooff

    try this: http://www.snorkl.tv/dev/tweenVariable/tweenVariableAS2.zip
    (fla only)

    the big thing is making your button function look like this:

    addTen_mc.onRelease = function(){

    targetScore+=10;
    TweenMax.fromTo(score_mc, 1.2, {_alpha:0, _yscale:0, _xscale:0},{_alpha:1, _xscale:2.1, _yscale:2.1, ease:Back.easeOut});

    TweenLite.to(_root, 1, {score:targetScore, onUpdate:showScore, ease:Linear.easeNone}); }

blog comments powered by Disqus

Previous post:

Next post: