Highlighted

Making a Scrollable View With actionscript 3.0

New Here ,
Apr 02, 2019

Copy link to clipboard

Copied

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

}

Adobe Community Professional
Correct answer by JoãoCésar | Adobe Community Professional

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

TOPICS
ActionScript

Views

343

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Making a Scrollable View With actionscript 3.0

New Here ,
Apr 02, 2019

Copy link to clipboard

Copied

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

}

Adobe Community Professional
Correct answer by JoãoCésar | Adobe Community Professional

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

TOPICS
ActionScript

Views

344

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Apr 02, 2019 0
Adobe Community Professional ,
Apr 03, 2019

Copy link to clipboard

Copied

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

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 03, 2019 0
New Here ,
Apr 03, 2019

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 03, 2019 1
Adobe Community Professional ,
Apr 03, 2019

Copy link to clipboard

Copied

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

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 03, 2019 0