tween a movieclip through next / prev buttons

[Seasonss]

Hi

 

I have a movieclip called square_mc.

I want this movieclip to move up 10 px every time a next button is clicked and down 10 px every time a prev button is clicked. How can I achieve that?

 

TweenLite.to(mc, 1, {y:117});

 

Normally without a tween I would do like this, but this does not animate, just moves the movieclip to a y position but it's incremental.

 

right.addEventListener(MouseEvent.CLICK, fl_ClickToGoToNextFrame);

function fl_ClickToGoToNextFrame(event:MouseEvent):void
{
nextFrame();
square_mc.y -= 8;
}

[jamiejefferson]

import com.greensock.*;

right.addEventListener(MouseEvent.CLICK, fl_ClickToGoToNextFrame);

function fl_ClickToGoToNextFrame(event:MouseEvent):void
{
  nextFrame();
  TweenLite.to(square_mc, 1, { y:String(-10) } );
  // OR
  TweenLite.to(square_mc, 1, { y:"-10" } );
}

When tweening to a value with type 'String', the value will be calculated relative to the target's current position. If square_mc is currently at y:100, then tweening to y:"-10" will be calculated as y:90. Then when square_mc is at y:90, tweening to y:"-10" will be calculated as y:80 etc.

 

However, this will have a small problem if the user clicks quickly, as square_mc could be in the middle of tweening, eg y is currently at 94, in which case the next tween will be calculated to y:84. I'm assuming this is not desired?

 

In this case, store the y value in a variable, so that absolute y values can be used.

 

import com.greensock.*;

right.addEventListener(MouseEvent.CLICK, fl_ClickToGoToNextFrame);

var square_mc_Y:int = square_mc.y;

function fl_ClickToGoToNextFrame(event:MouseEvent):void
{
  nextFrame();
  square_mc_Y -= 10;
  TweenLite.to(square_mc, 1, { y:square_mc_Y } );
}

[Seasonss]

Awesome thanks, I will try this method.

 

-