Scroll bar animation with forward and back buttons only?

Hey there-

I have a Sprite that when wider than the stage creates and displays two buttons, a forward and back button.  So far this successfully scrolls the Sprite across the screen in either direction.  But what if I wanted to create bounds for the scroll animation?  

For instance, stop the animation from moving any further left if the Sprite.width crosses a certain point or vise versa, disallow the Sprite.x to move forward from the stage's 0 X origin? Oh and grey out the buttons when one is rendered useless in terms of the bounds created.  

Thanks! Any help is appreciated!  I attached a .gif for visual purposes.
var containerObj:Sprite = new Sprite();
containerObj.x = 0;
containerObj.y = 0;
containerObj.width = 400;
//stage.stageWidth = 300;
 
checkBounds();
 
function checkBounds():void {
	if (containerObj.width >= stage.stageWidth) {
		displaySliders();
	}
}
 
function displaySliders():void {
	var btnContainer Sprite = new Sprite();
	var forBtn:Sprite = new Sprite();
	var backBtn:Sprite = new Sprite();
	foBtn.width = 20
	backBtn.width = 20;
	forBtn.x = 0;
	backBtn.x = forBtn.width;
	addChild(btnContainer);
	btnContainer.addChild(forBtn);
	btnContainer.addChild(backBtn);
	btn.addEventListener(MouseEvent.CLICK, clickBtn);
}
 
var begin:Number = containerObj.x;
var finish:Number = 0;
 
private function clickBtn(evt:MouseEvent):void {
	beginPos = containerObj.x;
	finishPosR = containerObj.x - 40;
	finishPosL = containerObj.x + 40;
	
	if (evt.target==lBtn) {
		var myTween1:Tween=new Tween(containerObj,"x",Strong.easeOut,beginPos,finishPosL,.5,true);
	}
	if (evt.target==rBtn) {
		var myTween2:Tween=new Tween(containerObj,"x",Strong.easeOut,beginPos,finishPosR,.5,true);
		}
	}
}

Open in new window

scroll-bar-dia.gif
workedAsked:
Who is Participating?
 
Eaddy BarnesConnect With a Mentor ITCommented:
here is a peace of your code with the if statements inside:

private function clickBtn(evt:MouseEvent):void {
        beginPos = containerObj.x;
        finishPosR = containerObj.x - 40;
        finishPosL = containerObj.x + 40;
        
        if (evt.target==lBtn) {
                if(finishPosL >= (stage.stageWidth - containerObj.width))
{
finishPosL = (stage.stageWidth - containerObj.width);
}
				
				var myTween1:Tween=new Tween(containerObj,"x",Strong.easeOut,beginPos,finishPosL,.5,true);
        }
		
        if (evt.target==rBtn) {
			if(finishPosR <= (stage.stageWidth - stage.stageWidth))
{
finishPosR = (stage.stageWidth - stage.stageWidth );
}
                var myTween2:Tween=new Tween(containerObj,"x",Strong.easeOut,beginPos,finishPosR,.5,true);
                }
        }
}

Open in new window

0
 
Eaddy BarnesITCommented:
You would have to introduce a line of code in case the x location of the containerObg exceeds the width of the stage.

the script would look like the following.

//this would keep it from passing the right side of the stage
 
if(containerObj.x >= stage.stageWidth)
{
containerObj.x = (stage.stageWidth - containerObj.width);
}
 
//this would keep it from passing the left side of the stage
 
if(containerObj.x <= (stage.stageWidth - stage.stageWidth))
{
containerObj.x = (stage.stageWidth - stage.stageWidth );
}

Open in new window

0
 
workedAuthor Commented:
So where would I put this code exactly?  I'm not sure where I would place the if ( conditional )...
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.