0
\$\begingroup\$

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.. :)

\$\endgroup\$
2
  • 1
    \$\begingroup\$ So to clarify, which part of your code does not work? What have you tried? \$\endgroup\$
    – user35344
    Mar 30, 2016 at 12:01
  • \$\begingroup\$ The one that's missing. :) I've tried some math stuff with calculating Y of the knob, frame and stage, but that was a lot of code and somehow even worked, but I'm looking for alternatives, brand different ideas. \$\endgroup\$
    – That Marc
    Mar 30, 2016 at 12:03

1 Answer 1

1
\$\begingroup\$

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);.

\$\endgroup\$
5
  • \$\begingroup\$ But I don't use drag events. Could that be applied to the touch_move event like I have in code as well? \$\endgroup\$
    – That Marc
    Mar 30, 2016 at 12:25
  • \$\begingroup\$ Sure, drag event is just a generic term of any motion that starts at a position and ends at another. This is not specific to any special event type. As long as you can calculate the start and end positions of a "movement", this will work. \$\endgroup\$
    – user35344
    Mar 30, 2016 at 12:27
  • \$\begingroup\$ Ah, ok. So, to clarify, I should add this just before setting the DisplayObject(...).y parameter, and the "sY" would be the position of the object set at Touch_Begin, while "eY" would be the changing parameter of current finger position (an event.stageY)? Is that correct? :) \$\endgroup\$
    – That Marc
    Mar 30, 2016 at 12:33
  • 2
    \$\begingroup\$ I have no idea how Flash works, so this is something that you need to figure out by checking their documentation about touch events. \$\endgroup\$
    – user35344
    Mar 30, 2016 at 12:34
  • 3
    \$\begingroup\$ The above comment is the very essence of programming. Knowing techniques, and then figuring out how to apply them in specific instances. The answer here explains how to do it, but the answerer doesn't know Flash. So you take your knowledge of Flash and implement his technique. Learning to do this will open things up for you! :) \$\endgroup\$
    – Almo
    Mar 30, 2016 at 13:08

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .