Question

I’m working on a very simple first step of a project I’m doing: a memory timeline. Basically, a timeline with years listed on them. It’s a line and you’re supposed to be able to move it horizontally to go to the year of your choosing, then add events and information.

Right now, I’m trying to implement that line, which I suppose is going to have to be infinitely wide, and the drag&drop functionality.

I’ve got something working but it’s bugged and I don’t see what’s going wrong. I’m not that experienced with Flash so I’m asking here.

This is the code. The stage is empty and there is no code on the timeline. Just this one Document class, created from the Properties:

package {

    import flash.geom.Rectangle;
    import flash.events.MouseEvent;
    import flash.display.Sprite;


    public class Document extends Sprite {

        // rootMc, global container
        public static var rootMc:Sprite = new Sprite();
        public var test:Sprite = new Sprite();

        public function Document() {
            test.graphics.beginFill(0x000000);
            test.graphics.drawRect(0, stage.stageHeight/2, 2000, 6);
            test.graphics.endFill();

            test.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
            test.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);

            addChild(rootMc);
            rootMc.addChild(test);
        }

        function mouseDownHandler(evt:MouseEvent):void {
            trace("mouseDownHandler");
            var sprite:Sprite = Sprite(evt.target);
            sprite.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
                    //Limit the drag to a horizontal rectangle
            sprite.startDrag(false, new Rectangle(0, sprite.y, 2000, 0));
        }

        function mouseUpHandler(evt:MouseEvent):void {
            trace("mouseUpHandler");
            var sprite:Sprite = Sprite(evt.target);
            sprite.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
            sprite.stopDrag();
        }

        private function mouseMoveHandler(evt:MouseEvent):void {
            trace("mouseMoveHandler");
            evt.updateAfterEvent();
        }
    }

}

The problems are:

1. The drag&drop only works when I click exactly on the line. I’d like there to be some room above and below that I can also click. But the line must never move vertically, not a single pixel. I have no idea how to implement this right now.
2. Related to the first problem: The mouseUpHandler will only be called if my cursor is on the line. If it’s off by even a pixel and I let go of the mouse button, the dragging will continue. I then have to move back on to the line, click down again and let go. I want to make it so that the dragging stops no matter where I let go of my mouse button. Or when the mouse leaves the stage.

This is probably just a lack of experience. I don’t know what functions exist to deal with this functionality. So I’m asking about that here. And at the same time it’s a chance to get some feedback on the code.

Answer 1

Here is my advice to pin point your problems concerning the drag & drop.

Problem 1:
Just create an invisible container behind the black line, so that the ‘test’ MovieClip is made bigger. But only the black line will be visible. You can accomplish this by adding following code before the black line is drawn:

test.graphics.beginFill(0xffffff,0); 
// white container with 0 alpha
test.graphics.drawRect(0, stage.stageHeight/2 - 10, 2000, 26); 
// start 10px before and end 10 px after
test.graphics.endFill();

Problem 2:
It would be better if you add the MouseEvent.MOUSE_UP eventlistener to the stage, and not to the ‘test’ MovieClip. Just use this:

this.stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);