Question

I’ve been having trouble creating a mechanism to allow the user to select a span of time from a timeline. Basically i want them to be able to click and drag horizontally, and retrieve the start and end positions of that event.

I especially need to include the case where the event goes off the edge of the screen (even if the end position is snapped to the edge of the screen that’s fine).

While doing all of this, I want to be able to draw a box that goes from the start of the event to the current position of the mouse, so that it’s obvious which area if being selected.

Answer 1

Basically, it doesn’t seem to me that you’re dragging something. You just have a sequence of press, move and release. You will have to click on something, I bet you could consider the press event on the timeline itself. So it’ll be something like:

timeline.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);
timeline.addEventListener(MouseEvent.MOUSE_UP, onMouseUp);
// the next line just considers that leaving the object surface is the same as depressing the mouse button
timeline.addEventListener(MouseEvent.MOUSE_OUT, onMouseUp);

function onMouseDown(evt:MouseEvent):void {
    // add the event listener for the mouse move action
    timeline.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);
    // create the movie clip for the box
    // you get the mouse coordinates from evt.localX and evt.localY (relative to the origin of the timeline movieclip) or evt.stageX and evt.stageY (as global values)
}

function onMouseMove(evt:MouseEvent):void {
    // adjust the selection width and height
    // you get the mouse coordinates from evt.localX and evt.localY (relative to the origin of the timeline movieclip) or evt.stageX and evt.stageY (as global values)
}

function onMouseUp(evt:MouseEvent):void {
    // remove the event listener for the mouse move, that means that the function onMouseMove will no longer be called
    timeline.removeEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);
    // brush up and send the final coordinates of the selection to the next function
}

For the selection graphics itself, you can either use an instance of a movie clip from your library, or you could simply create an empty movie clip, make it semitransparent and draw a rectangle in it, like so:

var selection:MovieClip = new MovieClip();
selection.alpha = 0.5;
selection.graphics.beginFill(0x000000);
selection.graphics.drawRect(x,y,width,height);
selection.graphics.endFill();
this.addChild(selection);