Mouse snap when using pressmove

Question

I am re-creating a timeline scrubber from Edge which is just about working, but I am having trouble getting my slider button (sliderBtn) to snap to the mouse when I drag it. I have it set to drag within the boundaries of a rectangle (like a video timeline scrubber), but when I press and drag the sliderBtn seems to jump about 50 pixels to the right of where my mouse pointer is. Any thoughts? Note that I am setting the tick event to paused when you roll over the rectangle so that the animation stops when you're scrubbing.

scrubBoundary = new createjs.Shape();

scrubBoundary.graphics.beginStroke("#999")

.setStrokeStyle(1)

.beginFill("red")

.drawRect(247, 527, 455, 10);

scrubBoundary.snapToPixel = true;

scrubBoundary.setBounds(247, 527, 455, 10);

bounds = scrubBoundary.getBounds();

stage.addChild(scrubBoundary);

//Create slider button

sliderBtn = new lib.sliderBtn();

sliderBtn.cursor = "pointer";

stage.addChild(sliderBtn);

function handleTick(event) {

if(!event.paused && exportRoot.currentFrame < exportRoot.totalFrames){

sliderBtn.x = bounds.x + bounds.width * (exportRoot.currentFrame / exportRoot.totalFrames);

}

scrubBoundary.on("mouseover", function (evt) {

paused = false;

doPauseActions();

});

sliderBtn.on("pressmove", function (evt) {

evt.currentTarget.x = Math.max(bounds.x, Math.min(bounds.x + bounds.width - sliderBtn.getBounds().width, evt.stageX));

controlTimeline();

});

KeelyM · Accepted Answer

I created a slider in a project recently and experienced a similar offset situation. I couldn't figure out what was causing it, but one work around I found was to subtract an integer from the evt.stageX to correct for the offset. For example, if you guess your item is offsetting about 50 pixels to the right, maybe try evt.stageX-50

I just kept experimenting with numbers until I found one where the offset seemed to be corrected enough.

However, in the other forum where I discussed this issue, another user provided some code which worked for my slider and I stopped having the offset problem. I'm not a coder, so I'm not entirely sure why this worked over what I had (what I had was something similar to yours), but here is that thread - mouse position problem with stage size changes - branched [kglad] Towards the bottom you should find the code that another user provided which ended up also working for me.

Hope this helps!

ClayUUID · Answer

The correct behavior would be that it not snap at all. When you click on a window scroll bar, does the scroll thumb snap to the mouse position? No, it stays where it is, and only moves when you explicitly drag it.

To do this you save the mouse offset from the object center on drag start, then apply it every time you update its position. This is my own code to do this. You'll have to adapt it to your setup.

// capture offset of click origin from object origin
this.offset = {x:this.x - evt.stageX / stage.scaleX, y:this.y - evt.stageY / stage.scaleY};

// calc new position
var newX = Math.round((evt.stageX / stage.scaleX) + this.offset.x);
var newY = Math.round((evt.stageY / stage.scaleY) + this.offset.y);

Also why are you using code to draw your scrub background instead of drawing it within the editor?

Wait... you're pausing the timeline just from moving the mouse over the scrub bar? That seems like it would be really annoying for the user.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded