We help IT Professionals succeed at work.

Scroll bar animation with forward and back buttons only?

worked
worked asked
on
Medium Priority
1,557 Views
Last Modified: 2012-05-06
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
Comment
Watch Question

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

Author

Commented:
So where would I put this code exactly?  I'm not sure where I would place the if ( conditional )...
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

Not the solution you were looking for? Getting a personalized solution is easy.

Ask the Experts
Access more of Experts Exchange with a free account
Thanks for using Experts Exchange.

Create a free account to continue.

Limited access with a free account allows you to:

  • View three pieces of content (articles, solutions, posts, and videos)
  • Ask the experts questions (counted toward content limit)
  • Customize your dashboard and profile

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.