How do I stop the edge of movieclips that extend the stage from entering stage boundaries in AS3?

Question

I have a background image that extends the stage, top and bottom, that's position is controlled by key presses which tweens the image. I want to stop the edge of the image at the top or bottom of the stage depending on which way the image is moving. I want this to apply to "layers_mc" and "bg_img".

Here's my code

import flash.events.KeyboardEvent;
import fl.transitions.Tween;
import fl.transitions.easing.*;

stop();

var isUpPressed:Boolean = false;
var isDownPressed:Boolean = false;
var tweenDown:Tween;
var tweenUp:Tween;

stage.addEventListener(KeyboardEvent.KEY_DOWN,onKeyboardDown);
stage.addEventListener(KeyboardEvent.KEY_UP,onKeyboardUp);
stage.addEventListener(KeyboardEvent.KEY_DOWN,onKeyboardDown2);
stage.addEventListener(KeyboardEvent.KEY_UP,onKeyboardUp2);

    function onKeyboardDown(e:KeyboardEvent):void
    {
        if (e.keyCode == Keyboard.DOWN)
        {
            isDownPressed = true;
        }

        if (e.keyCode == Keyboard.UP)
        {
            isUpPressed = true;
        }
    }

    function onKeyboardUp(e:KeyboardEvent):void
    {
        if (e.keyCode == Keyboard.DOWN)
        {
            isDownPressed = false;
        }

        if (e.keyCode == Keyboard.UP)
        {
            isUpPressed = false;
        }
    }

    stage.addEventListener(Event.ENTER_FRAME,loop);

    function loop(event:Event):void
    {

    var posit:Number = layers_mc.y;
    var xDown:Number = layers_mc.y - 200;
    var xUp:Number = layers_mc.y + 200;

        if (isDownPressed)
        {
            tweenDown = new Tween(layers_mc, "y", Regular.easeOut, posit, xDown, 2, true);                
            trace(layers_mc.y);
        }

        if (isUpPressed)
        {
            tweenUp = new Tween(layers_mc, "y", Regular.easeOut, posit, xUp, 2, true);
            trace(layers_mc.y);
        }
    }

     function onKeyboardDown2(e:KeyboardEvent):void
    {
        if (e.keyCode == Keyboard.DOWN)
        {
            isDownPressed = true;
        }

        if (e.keyCode == Keyboard.UP)
        {
            isUpPressed = true;
        }
    }

    function onKeyboardUp2(e:KeyboardEvent):void
    {
        if (e.keyCode == Keyboard.DOWN)
        {
            isDownPressed = false;
        }

        if (e.keyCode == Keyboard.UP)
        {
            isUpPressed = false;
        }
    }

    stage.addEventListener(Event.ENTER_FRAME,loop2);

    function loop2(event:Event):void
    {

    var posit2:Number = bg_img.y;
    var xDown2:Number = bg_img.y - 50;
    var xUp2:Number = bg_img.y + 50;

        if (isDownPressed)
        {
            tweenDown = new Tween(bg_img, "y", Regular.easeOut, posit2, xDown2, 2, true);                
            trace(bg_img.y);
        }

        if (isUpPressed)
        {
            tweenUp = new Tween(bg_img, "y", Regular.easeOut, posit2, xUp2, 2, true);
            trace(bg_img.y);
        }
    }

UPDATE: This did the trick

var posit:Number = layers_mc.y;
var xDown:Number = Math.max(-618.5, layers_mc.y - 200, stage.stageHeight - layers_mc.height); 
var xUp:Number = Math.min(500, layers_mc.y + 200);

Answer 1

Sounds like you want to constrain the object so you can't scroll it to a point where it's edge is seen?

In that case, you need to sanitize your value so it doesn't go beyond that point.

So, for moving the object down, instead of just subtracting 200 like your doing here:

var xDown:Number = layers_mc.y - 200;

Make the value whichever is bigger, the -y before the edge becomes visible, or the current value less 200.

var xDown:Number = Math.max(layers_mc.y - 200, stage.stageHeight -layers_mc.height);

If you take the stage height (or whatever your visible bounds are) and then subtract the height of your child object, that will give you top most point your object can be and still have it's edge at the bottom of the stage.

So, you need to be make sure all your values follow these rules: (using if statements, or Math.max/min etc)

Smallest allowed y point: stage.stageHeight - object.height;

Largest allowed y point: 0

Conversely, if you were also doing left and right panning:

Smallest allowed x point: stage.stageWidth - object.width

Largest allowed x point: 0

So your code would look something like this:

var xDown:Number = Math.max(layers_mc.y - 200, stage.stageWidth - layers_mc.height)); //make sure the value doesn't go less than stageWidth - layer height
var xUp:Number = Math.min(0, layers_mc.y + 200); //make sure the value doesn't go above 0