Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
joakimhoegset

Multiple tweens one button [SOLVED]

Recommended Posts

Hi,

How would I go about tweening an image more then once on the same button?

I have one button and on the first click it tweens the image to x:100.

The second time I press the button it takes the image and tween in from wherever it is to x:200, third time 300.

How would I do this?

 

Thx,

Joakim

Link to comment
Share on other sites

There are many ways you could do this. Here are a few:

 

1) If you just want it to keep moving 100 pixels more each time you click the button, just use a relative value like this:

 

function onButtonClick(event:MouseEvent):void {
   TweenLite.to(mc, 1, {x:"100"});
}

 

If you want to make the destination value increment 100 pixels each time, you'll need to track that like:

 

var xDest:Number = mc.x:
function onButtonClick(event:MouseEvent):void {
   xDest += 100;
   TweenLite.to(mc, 1, {x:xDest});
}

 

2) If the destination values are not equal values apart, you could store them in an Array and increment through them like:

 

var positions:Array = [0, 100, 200, 250, 425];
var curPosition:uint = 0;
function onButtonClick(event:MouseEvent):void {
   curPosition = (curPosition + 1) % positions.length;
   TweenLite.to(mc, 1, {x:positions[curPosition]});
}

 

3) You could create a TimelineMax and put all the tweens one-after-the-other with a label at each spot, and then use tweenTo() and getLabelAfter() together to step through the sequence.

 

Just a few off the top of my head :)

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×