AS3 Air - Custom slider - limit drag position

Question

I'm facing issues with finding the right solution for detecting and limiting the Sprite object "Knob" moved on y axis inside it's parent sprite "Frame", using FlashDevelop 5.

Using the code bellow I'm creating the frame on stage

private function init():void{
var frame: Frame = new Frame;
frame.x = 100;
frame.y = 100;
addChild(frame);
}

And in the Frame class, I create the child named "Knob" and add touch event listeners (with multitouch support, therefore using dictionary - Thanks to this post ):

public class Frame extends Sprite
    {
        public var knob: Knob;
        private var curTouchPoints:Dictionary = new Dictionary();
        
        public function Frame() 
        {
            addEventListener(Event.ADDED_TO_STAGE, addListeners);
            init();
        }
        
        private function addListeners(event:Event):void
        {
            stage.addEventListener(TouchEvent.TOUCH_MOVE, touchMove);
        }
        
                
        private function touchStart(e:TouchEvent):void 
        {
        curTouchPoints[e.touchPointID] = {obj: e.currentTarget, offsetX: e.localX, offsetY: e.localY}; //store the current object in the dictionary
        trace(e.currentTarget)
        e.currentTarget.addEventListener(TouchEvent.TOUCH_END,touchEnd);
        }

        private function touchMove(e:TouchEvent):void 
        {
          if (curTouchPoints[e.touchPointID]) {
          DisplayObject(curTouchPoints[e.touchPointID].obj).y = e.stageY-this.y - curTouchPoints[e.touchPointID].offsetY;
        }
        }

        private function touchEnd(e:TouchEvent):void 
        {
        delete curTouchPoints[e.touchPointID];
        e.currentTarget.removeEventListener(TouchEvent.TOUCH_END, touchEnd);
        }

        
        
        private function init():void 
        {
            this.graphics.beginFill(0xffffff, 1);
            this.graphics.lineStyle(1, 0x000000, 1);
            this.graphics.drawRect(0, 0, 120, 600);
            this.graphics.endFill();
            
            knob = new Knob;
            knob.x = 20;
            knob.y = 20;
            knob.addEventListener(TouchEvent.TOUCH_BEGIN, touchStart);
            addChild(knob);         
        }   

    }

The Knob class is simple sprite object:

public function FaderKnob() 
        {
            this.graphics.beginFill(0x000000, 1);
            this.graphics.lineStyle(1, 0x000000, 1);
            this.graphics.drawRect(0, 0, 80, 80);
            this.graphics.endFill();
        }
        

With the current code, it all works as expected except that I want to limit the Knob to never leave it's parent - Frame! Means, it's top coordinate will be 0, and it's bottom should be "Frame.heigth - Knob.height", so it stays fully inside.

I've been searching for the HitTestObject, but that doesn't do the work as the Knob is in the Frame all the time... :/

If it matters: The window is/will be transparent with chroma:none, and both, frame and knob should have alpha 0 (whole app is supposed to be fully transparent, to implement multitouch support on non-multitouch game) This is done fine now, just mentioning if it might matter for some HitTest procedures based on pixels or something.. I'm fairly new to AS3 and Air so please bare with me :-)

As a side note, I'd need to read the 8-bit "value" (0-255) based on the knob's position in its parent, which I have a slight idea of how to do, but I'm sure there's an easier way than what I imagined.. :)

Answer 1

This should be a pretty straight-forward task:

So let's say you have a handle at position hX, hY, and you have a drag event that you have verified started on the handle at sX, sY and ended at eX, eY. To add vertical scrolling, you would change the handle's y position like so: hY += (eY - sY);. Now, to stop the handle from going out of bounds, you would need to clamp that result to the given range, for an example like hY = clamp(hY, topMostPosition, topMostPosition + areaHeight - handleHeight);.