Making a Scrollable View With actionscript 3.0

[magejets]

I am trying to create a scroll view using the drag and drop code snippet. Is there any way I can constrain this drag and drop code to only one axis, or is there other code that I should use altogether?

Here is the code I currently have that drags in 2 dimensions:

movieClip_1.addEventListener(MouseEvent.MOUSE_DOWN, fl_ClickToDrag);

function fl_ClickToDrag(event:MouseEvent):void

{

movieClip_1.startDrag();

}

stage.addEventListener(MouseEvent.MOUSE_UP, fl_ReleaseToDrop);

function fl_ReleaseToDrop(event:MouseEvent):void

{

movieClip_1.stopDrag();

}

[JoãoCésar · Accepted solution]

Hi.

You can pass a Rectangle instance to the startDrag method to limit the drag.

In the example below, I have a rectangle that takes the whole stage width. So the user is able to drag across the x axis without having the rectangle leaving the stage.

import flash.events.MouseEvent;
import flash.geom.Rectangle;
function beginDrag(e:MouseEvent):void
{
    e.currentTarget.startDrag(false, new Rectangle(0, e.currentTarget.y, -stage.stageWidth, 0));
    stage.addEventListener(MouseEvent.MOUSE_UP, endDrag);
}
function endDrag(e:MouseEvent):void
{
    stopDrag();
    stage.removeEventListener(MouseEvent.MOUSE_UP, endDrag);
}
movieClip_1.addEventListener(MouseEvent.MOUSE_DOWN, beginDrag);

FLA download:

animate_cc_as3_drag_in_one_axis.zip - Google Drive

Please let us know if this clarifies things for you.

Regards,

JC

[magejets]

Thanks so much. This is exactly the code I was looking for.

[JoãoCésar]

Excellent! You're welcome!

Just one note on I typo of mine...

This line...

e.currentTarget.startDrag(false, new Rectangle(0, rec.y, -stage.stageWidth, 0));

... should read:

e.currentTarget.startDrag(false, new Rectangle(0, e.currentTarget.y, -stage.stageWidth, 0));

And that's it.

Regards,

JC