Lock Button Once X Position Is Reached

[TweenNewbie]

Hello all,

 

I'm new in Flash and have (I think) a simple question. I have 2 buttons that move a long movie clip to the right or left across the stage. What I'd like to do is to lock the buttons once a certain x position is reached so that the movie clip doesn't move once it reaches either the beginning or end of the movie clip length. This is the code I have so far:

 

nxtBtn.addEventListener(MouseEvent.CLICK, _onClickNext);

prevBtn.addEventListener(MouseEvent.CLICK, _onClickPrev);

 

function _onClickNext(event: MouseEvent):void{

TweenMax.to(timeline_mc, 0.5, {x:"-960"});

}

 

function _onClickPrev(event: MouseEvent):void{

TweenMax.to(timeline_mc, 0.5, {x:"+960"});

}

 

I just don't know how to write an if/else statement.

 

Any help will be much appreciated!!

TweenMax_If_Else.zip

[Carl]

Hi.

 

Glad you are enjoying TweenLIte. 1 thing you want to be careful with is using relative values in tweens when those tweens are activated via button press.

 

suppose the first tween is running and timeline_mc is currently at an x of 400.

if you click the button again, TweenLite will want to tween to an x of (400 + 960) and you will end up somewhere between panels.

 

one way to solve that is to remove the event listeners from the buttons as soon as you click them and then re-apply the when the tween completes.

 

using that method you still have to check to see whether or not the next button click will move the timeline_mc beyond where it should go. for instance you would want to avoid tweening to panel 5 which does not exist.

 

----

 

I came up with another solution that allows multiple quick clicks but it ensures that

 

-tweens will always land on a value that is a multiple of 960 (only a full panel will be shown at a time)

 

-you can't go beyond the range of panels that you have (4)

 

---

 

replace your code with this code:

 

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

var panelWidth:Number = 960;
var lastPanel:Number = 3;
var currentPanel:Number = 0;
nxtBtn.addEventListener(MouseEvent.CLICK, _onClickNext);
prevBtn.addEventListener(MouseEvent.CLICK, _onClickPrev);

function _onClickNext(event: MouseEvent):void{
if(currentPanel < lastPanel){
 currentPanel++;
 doTween();
 }
}
function _onClickPrev(event: MouseEvent):void{
if(currentPanel > 0){
 currentPanel--;
 doTween();
 }
}
function doTween():void{
var destination:Number = -currentPanel * panelWidth
trace("currentPanel = " + currentPanel + " and destination = " + destination);
TweenLite.to(timeline_mc, 1, {x:destination});
}

 

 

----

please note that this solution includes concepts outside the realm of TweenLite and fall more into the category of "intermediate actionscript concepts". Unfortunately we don't have time to explain concepts like conditional statements in depth, but hopefully this sample code will give you a push in the right direction.

 

thanks for providing files that were very easy to work with.

 

c

[TweenNewbie]

Carl, thank you so much for your help! This totally works. I can't believe it was you who answered my question. I've been watching your tutorials on your site and am a big fan!!

 

Yes, you're right, the conditional statements are a bit out of my league but I'll keep checking your site to see if you post a tutorial about it. Thanks again!