Highlighted

Createjs - dragging an object within a bounding box

Engaged ,
Aug 16, 2017

Copy link to clipboard

Copied

Hello,

I'm working in Adobe Animate CC and I'm trying to use javascript to create an interaction where the user drags an object along the Y axis, but the object remains within a certain area, or 'bounding box'. I was able to get the object (in this case, a movie clip with the instance name "handle") to be moved up and down with the mouse using this code:

this.handle.addEventListener("pressmove", fl_MouseClickHandler_2.bind(this));

function fl_MouseClickHandler_2(evt){

evt.currentTarget.y = evt.stageY;

}

I only want the object to move along the Y axis, so this worked really well. However, in my attempt to restrict how far the 'handle' will slide, I haven't been successful (I don't really know how to write code).

I found a good resource here: Text Drag (StackOverflow) - JSFiddle and have tried to adapt this code to meet my needs - this is how my code turned out -

var sliderBoundary = new createjs.Shape();

sliderBoundary.graphics.beginStroke("#999")

.setStrokeStyle(2)

.drawRect(623, 212, 143, 282.85);

var bounds = sliderBoundary.getBounds();

var handleBounds = this.handle.getBounds();

this.stage.addChild(sliderBoundary);

this.handle.addEventListener("pressmove", fl_MouseClickHandler_2.bind(this));

function fl_MouseClickHandler_2(evt){

evt.currentTarget.y = Math.max(bounds.y, Math.min(bounds.y+bounds.height-handleBounds.height, evt.stageY));

this.stage.update();

}

this.handleBounds.x = bounds.x, this.handleBounds.y = bounds.y;

this.stage.update();

When I test the project in Chrome - all the objects still show up, however the handle does not slide at all anymore.

Here's an image to give a better idea of what I"m trying to achieve - The lighter colored rectangle I want to slide up and down along the Y axis by dragging/moving the mouse, but I'd like it to stay contained within the darker stroke rectangle. If you can offer any advice on how to achieve this it would be much appreciated!

slider and handle.PNG

Adobe Community Professional
Correct answer by ClayUUID | Adobe Community Professional

A few things...

There is no need for any of those stage.update() calls. The stage already automatically updates at the frame rate you set.

Drawing the slider boundary, then using getBounds on it to get its bounds, is completely backward. You just drew it yourself, you obviously know how big the thing you just drew is.

getBounds doesn't work on shape objects, so it's returning null for both the boundary and the handle, which causes runtime errors.

You're assigning to the .x and .y of "handleBounds" instead of "handle", which also causes a runtime error.

Putting the .x and .y assignment on the same line separated by a comma is syntactically valid but pointless weirdness.

Anyway, this seems to work:

var handleHeight = 20; // actually half the height

var bounds = {x:623, y:212, width:143, height: 283};

var sliderBoundary = new createjs.Shape(); 

sliderBoundary.graphics.beginStroke("#999").

setStrokeStyle(2).

drawRect(bounds.x, bounds.y, bounds.width, bounds.height);

this.stage.addChild(sliderBoundary); 

this.handle.addEventListener("pressmove", fl_MouseClickHandler_2);

function fl_MouseClickHandler_2(evt) {

    evt.currentTarget.y = Math.max(bounds.y + handleHeight, Math.min(bounds.y + bounds.height - handleHeight, evt.stageY));

}

this.handle.x = bounds.x;

this.handle.y = bounds.y + bounds.height / 2; 

Views

2.5K

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

Createjs - dragging an object within a bounding box

Engaged ,
Aug 16, 2017

Copy link to clipboard

Copied

Hello,

I'm working in Adobe Animate CC and I'm trying to use javascript to create an interaction where the user drags an object along the Y axis, but the object remains within a certain area, or 'bounding box'. I was able to get the object (in this case, a movie clip with the instance name "handle") to be moved up and down with the mouse using this code:

this.handle.addEventListener("pressmove", fl_MouseClickHandler_2.bind(this));

function fl_MouseClickHandler_2(evt){

evt.currentTarget.y = evt.stageY;

}

I only want the object to move along the Y axis, so this worked really well. However, in my attempt to restrict how far the 'handle' will slide, I haven't been successful (I don't really know how to write code).

I found a good resource here: Text Drag (StackOverflow) - JSFiddle and have tried to adapt this code to meet my needs - this is how my code turned out -

var sliderBoundary = new createjs.Shape();

sliderBoundary.graphics.beginStroke("#999")

.setStrokeStyle(2)

.drawRect(623, 212, 143, 282.85);

var bounds = sliderBoundary.getBounds();

var handleBounds = this.handle.getBounds();

this.stage.addChild(sliderBoundary);

this.handle.addEventListener("pressmove", fl_MouseClickHandler_2.bind(this));

function fl_MouseClickHandler_2(evt){

evt.currentTarget.y = Math.max(bounds.y, Math.min(bounds.y+bounds.height-handleBounds.height, evt.stageY));

this.stage.update();

}

this.handleBounds.x = bounds.x, this.handleBounds.y = bounds.y;

this.stage.update();

When I test the project in Chrome - all the objects still show up, however the handle does not slide at all anymore.

Here's an image to give a better idea of what I"m trying to achieve - The lighter colored rectangle I want to slide up and down along the Y axis by dragging/moving the mouse, but I'd like it to stay contained within the darker stroke rectangle. If you can offer any advice on how to achieve this it would be much appreciated!

slider and handle.PNG

Adobe Community Professional
Correct answer by ClayUUID | Adobe Community Professional

A few things...

There is no need for any of those stage.update() calls. The stage already automatically updates at the frame rate you set.

Drawing the slider boundary, then using getBounds on it to get its bounds, is completely backward. You just drew it yourself, you obviously know how big the thing you just drew is.

getBounds doesn't work on shape objects, so it's returning null for both the boundary and the handle, which causes runtime errors.

You're assigning to the .x and .y of "handleBounds" instead of "handle", which also causes a runtime error.

Putting the .x and .y assignment on the same line separated by a comma is syntactically valid but pointless weirdness.

Anyway, this seems to work:

var handleHeight = 20; // actually half the height

var bounds = {x:623, y:212, width:143, height: 283};

var sliderBoundary = new createjs.Shape(); 

sliderBoundary.graphics.beginStroke("#999").

setStrokeStyle(2).

drawRect(bounds.x, bounds.y, bounds.width, bounds.height);

this.stage.addChild(sliderBoundary); 

this.handle.addEventListener("pressmove", fl_MouseClickHandler_2);

function fl_MouseClickHandler_2(evt) {

    evt.currentTarget.y = Math.max(bounds.y + handleHeight, Math.min(bounds.y + bounds.height - handleHeight, evt.stageY));

}

this.handle.x = bounds.x;

this.handle.y = bounds.y + bounds.height / 2; 

Views

2.5K

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
Aug 16, 2017 0
Adobe Community Professional ,
Aug 16, 2017

Copy link to clipboard

Copied

A few things...

There is no need for any of those stage.update() calls. The stage already automatically updates at the frame rate you set.

Drawing the slider boundary, then using getBounds on it to get its bounds, is completely backward. You just drew it yourself, you obviously know how big the thing you just drew is.

getBounds doesn't work on shape objects, so it's returning null for both the boundary and the handle, which causes runtime errors.

You're assigning to the .x and .y of "handleBounds" instead of "handle", which also causes a runtime error.

Putting the .x and .y assignment on the same line separated by a comma is syntactically valid but pointless weirdness.

Anyway, this seems to work:

var handleHeight = 20; // actually half the height

var bounds = {x:623, y:212, width:143, height: 283};

var sliderBoundary = new createjs.Shape(); 

sliderBoundary.graphics.beginStroke("#999").

setStrokeStyle(2).

drawRect(bounds.x, bounds.y, bounds.width, bounds.height);

this.stage.addChild(sliderBoundary); 

this.handle.addEventListener("pressmove", fl_MouseClickHandler_2);

function fl_MouseClickHandler_2(evt) {

    evt.currentTarget.y = Math.max(bounds.y + handleHeight, Math.min(bounds.y + bounds.height - handleHeight, evt.stageY));

}

this.handle.x = bounds.x;

this.handle.y = bounds.y + bounds.height / 2; 

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...
Aug 16, 2017 1
Engaged ,
Aug 17, 2017

Copy link to clipboard

Copied

Thanks so much!! I'm still trying to grasp how JS works, I appreciate this a lot!!

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...
Aug 17, 2017 0
New Here ,
May 08, 2020

Copy link to clipboard

Copied

How could I get an animation to play when I'm following the green dot along the guideline, stop it when I release it, and only move along the guideline?Screen Shot 2020-05-08 at 1.26.32 PM.pnghttps://we.tl/t-Eq5IxCIExs 

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...
May 08, 2020 0
kglad LATEST
Adobe Community Professional ,
May 08, 2020

Copy link to clipboard

Copied

use a tween of that dot and a guide layer to create that path. use mousedown to advance the tweened movieclip along its timeline as the mouse moves (either over the dot movieclip or something else).

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...
May 08, 2020 0