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\$
  • 1
    \$\begingroup\$ So to clarify, which part of your code does not work? What have you tried? \$\endgroup\$ – Tyyppi_77 Mar 30 '16 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 '16 at 12:03
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\$
  • \$\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 '16 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\$ – Tyyppi_77 Mar 30 '16 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 '16 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\$ – Tyyppi_77 Mar 30 '16 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 '16 at 13:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.