mouse position problem with stage size changes - branched [kglad]

[montana321]

Was getting a weird effect that I was hoping someone had some insight into.

When published at smaller sizes the slider worked fantastic.

However, when you'd go full screen, the slider jumps ahead of the mouse.  So if you click on the slider and start to drag the slider will hop ahead of the mouse on the scroll bar and there will be a gap between the mouse and the slider.  Here's the thing -- the gap between the mouse and slider increases proportionally as slide along the x axis.  So in at a lower x value, it's almost nothing, but the gap gets steadily worse and you move along.

The slider keeps hopping ahead of itself, always to the right, and the severity increases proportionally the further you travel down the scrollbar.

var handleDistance = 4; //half the width 
var bounds = {x:20, y:367, width:610, height:20};

var sliderBoundary = new createjs.Shape(); 
sliderBoundary.graphics.beginStroke("#999") 
.setStrokeStyle(2) 
.drawRect(bounds.x, bounds.y, bounds.width, bounds.height); 
this.stage.addChild(sliderBoundary);

paramF(this.handle, 20, 0, 630, this.circuit.totalFrames-1);

this.handle.addEventListener("pressmove", fl_MouseClickHandler_2.bind(this));
function fl_MouseClickHandler_2(evt){
evt.currentTarget.x = Math.max(bounds.x + handleDistance, Math.min(bounds.x + bounds.width - handleDistance, evt.stageX));
this.circuit.gotoAndStop(Math.round(this.handle.m*this.handle.x+this.handle.b));
}

  
this.handle.y = 367 ; 
this.handle.x = bounds.x + bounds.width / 2;

this.stage.addEventListener("tick", moveslider.bind(this)); 
function moveslider(){

this.handle.x=(this.circuit.currentFrame-this.handle.b)/this.handle.m;

}

function paramF(mc,x1,y1,x2,y2){

mc.m=(y1-y2)/(x1-x2);

mc.b=y1-mc.m*x1
}

[kglad]

use the console.log to debug.

[KeelyM]

I'm having a similar issue with my slider that I posted about here - Draggable object jumps down away from mouse - Adobe Animate cc using Javascript Mine doesn't seem to increase exponentially though - it remains a static distance away from the mouse.

[kglad]

i've seen that problem before but i believe it was browser dependent (eg, present in ff, not in chrome, edge, ie).  i know it wasn't a coding error.

[KeelyM]

I've been testing it in Chrome and just tested in IE - doesn't seem to have any effect unfortunately.

[KeelyM]

The more I experiment with it however, it seems that the offset distance between the mouse and the draggable movieclip is based off of the number that I set for the height of the movieclip. When my movieclip height is set as 2, the offset is small, when I set it to 50, the offset is a much larger distance.

[montana321]

I'm getting it in explorer as well

[montana321]

Hm.

After much experimentation, I think that I've isolated my problem down to when I publish as responsive/scale to fit.

When I test with this feature off the scrollbar works fine.

But if I test with Responsive/scale to fit, the slider will pop to the right of the mouse when I increase the size of the screen, and then to the left of the mouse when I shrink I down.

[kglad]

if it's dependent on screen size, you can correct for the offset.

[montana321]

yea, I'm pretty sure that's what's going on -- the slider's getting lost when you change the size of the screen to anything but the original size.

how do you correct for offset?

[kglad]

use console.log and chart a few screensizes vs the offset.  there will be a simple scale factor that will relate the two.

[montana321]

Keeyley

Double check your registration point and the central point on your movieclip.

After solving that wild hopping action I was getting when going fullscreen, I saw what you meant.  There was a bit of a gap between the two.  I centered the movie clip to the moviecip stage and then realigned the rotation spot to the center of the handle and now it's working perfectly.

[KeelyM]

So for the life of me I haven't been able to figure out what is creating this offset. I even made another file from scratch and created a slider using the same code and the offset persists. As a workaround for now, I've just adjusted what the stage is reading as my mouse's Y position by subtracting from it (since my mouse was offsetting above the movieclip). So this is what my code now looks like -

this.yoke.addEventListener("pressmove", fl_MouseClickHandler_2.bind(this));
function fl_MouseClickHandler_2(evt){
evt.currentTarget.y = Math.max(bounds.y + yokeHeight, Math.min(bounds.y + bounds.height - yokeHeight, evt.stageY-150));
this.aircraft.gotoAndStop(Math.round(this.handle.m*this.handle.y+this.handle.b));
//alert (this.yoke.y);
}

I experimented with what integer to use, ending up using 150, so that the mouse is above the movieclip when it moves the movieclip.  It's not perfect, but it's better than having the offset.

[montana321]

If you had wanted to troubleshoot further, the code I had used is bellow.

Most of this came from your earlier thread that I hopped onto, the only real difference was I was going horizontal.

the handle is 9.6 wide.

Thought that maybe you could quick throw this into a dummy movie and see if you got the same offset.

Like I said I'm getting no offset whatsoever.

Works perfect.

var handleDistance = 4.8;
var bounds = {x:24 , y:542, width: 598, height:0}; 

var sliderBoundary = new createjs.Shape(); 
sliderBoundary.graphics.beginStroke("#999") 
.setStrokeStyle(2) 
.drawRect(bounds.x, bounds.y, bounds.width, bounds.height); 
this.stage.addChild(sliderBoundary); 

paramF(this.handle, 19, 0, 630, this.circuit.totalFrames-1);

this.handle.addEventListener("pressmove", fl_MouseClickHandler_2.bind(this));
function fl_MouseClickHandler_2(evt){
var p=this.globalToLocal(evt.stageX, evt.stageY);
evt.currentTarget.x = Math.max(bounds.x + handleDistance, Math.min(bounds.x + bounds.width - handleDistance, p.x));
 
this.circuit.gotoAndStop(Math.round(this.handle.m*this.handle.x+this.handle.b));
}

   
this.handle.y = 390; 
this.handle.x = (bounds.x + bounds.width)/ 2; 

this.stage.addEventListener("tick", moveslider.bind(this)); 
function moveslider(){ 

this.handle.x=(this.circuit.currentFrame-this.handle.b)/this.handle.m;

} 

function paramF(mc,x1,y1,x2,y2){

mc.m=(y1-y2)/(x1-x2);

mc.b=y1-mc.m*x1
}

[KeelyM]

I put this code into a brand new project - just making the handle movieclip and marking out the //this.circuit. . . . line

The handle functionality doesn't work at all for me, nothing moves. I'm using an HTML5 Canvas Document. Maybe it's something in our settings that is different? I'm just using the default publish settings. I have two layers - an actions layer and a layer for the handle. The code is all written on the first frame of the timeline.

[montana321]

yea, that's what I have too.

HTML canvas.

the handle variable name is "handle", and the circuit variable name is "circuit"?

[KeelyM]

For this case I didn't make a 'circuit' movieclip, just the handle. It's instance name is 'handle'.

[KeelyM]

Okay, I added the circuit movieclip, made it 10 frames long with this.stop(); on each frame, then tested again. Seems to be working now!

[montana321]

so, now did that have the same issue that you were seeing in your movie?

[KeelyM]

It appears to be, I've adjusted the code for the Y axis and added my movie clips and so far so good! Thanks for sharing this!