Help with Javascript, dragging an object

Hi, Fiona!

Good to know that the code and the tips helped you!

Here is another sample.

This time I opted for an object oriented approach so it's easier to utilize the slider in different places.

The actual code for the slider is in the global script and a suggestion of how to control the an animation using two sliders is in the first frame of the main timeline.

To use the slider, you have to create an instance of it, pass the button and bar instances you want as the graphics for the slider and then you can customize the look and behavior of the slider using callbacks.

Try it:

https://bit.ly/39U13fF

Preview:

JS / JavaScript code:

Global script:

function setup()
{
exportRoot.Slider = function(button, bar, props)
{
if (!props)
props = {};

this.button = button;
this.bar = bar;
this.minX = props.minX || 0;
this.maxX = props.maxX || this.bar.nominalBounds.width;
this.callBacks = {};
this.button.mouseEnabled = false;
this.setRatio();
this.bar.on("mousedown", this.mouseDownHandler, this);
this.bar.parent.on("rollover", this.rollOverHandler, this);
this.bar.parent.on("rollout", this.rollOutHandler, this);
};

exportRoot.Slider.prototype.mouseDownHandler = function(e)
{
var bounds = this.button.nominalBounds;

this.point = this.getPointerPosition(e.currentTarget.parent);
this.offsetX = this.point.x >= this.button.x - bounds.width * 0.5 && this.point.x <= this.button.x + bounds.width * 0.5 ? this.point.x - this.button.x : 0;
this.pressed = true;
this.positionPointerFromPointer();
this.pressMove = this.bar.on("pressmove", this.pressMoveHandler, this);
this.pressUp = this.bar.parent.on("pressup", this.pressUpHandler, this);

if (this.callBacks.mouseDownHandler)
this.callBacks.mouseDownHandler(e, this);
};

exportRoot.Slider.prototype.rollOverHandler = function(e)
{
if (this.callBacks.rollOverHandler)
this.callBacks.rollOverHandler(e, this);
};

exportRoot.Slider.prototype.rollOutHandler = function(e)
{
if (this.callBacks.rollOutHandler)
this.callBacks.rollOutHandler(e, this);
};

exportRoot.Slider.prototype.pressMoveHandler = function(e)
{
this.positionPointerFromPointer();

if (this.callBacks.pressMoveHandler)
this.callBacks.pressMoveHandler(e, this);
};

exportRoot.Slider.prototype.pressUpHandler = function(e)
{
this.pressed = false;
this.bar.on("pressmove", this.pressMove);
this.bar.parent.on("pressup", this.pressUp);

if (this.callBacks.pressUpHandler)
this.callBacks.pressUpHandler(e, this);
};

exportRoot.Slider.prototype.getPointerPosition = function(target)
{
return target.globalToLocal(stage.mouseX, stage.mouseY);
};

exportRoot.Slider.prototype.positionPointerFromPointer = function()
{
this.point = this.getPointerPosition(this.bar.parent);
this.button.x = this.clamp(this.point.x - this.offsetX, this.minX, this.maxX);
this.setRatio();
};

exportRoot.Slider.prototype.positionPointerFromRatio = function(ratio)
{
this.button.x = this.minX + (this.maxX - this.minX) * (ratio || this.ratio);
this.setRatio();
};

exportRoot.Slider.prototype.setRatio = function()
{
this.ratio = this.button.x / (this.maxX - this.minX);
};

exportRoot.Slider.prototype.clamp = function(value, min, max)
{
if (value < min)
return min;

if (value > max)
return max;

return value;
};
};

Main timeline script:

var root = this;
var targetAnim = root.anim;
var labels, slider, slider1;

root.main = function()
{
setup();
document.body.style.backgroundColor = lib.properties.color;
createjs.Touch.enable(stage);
stage.mouseMoveOutside = true;
root.stop();
labels = targetAnim.labels.map(function(label){ return label.label; });
slider = new root.Slider(root.slider0.button, root.slider0.bar);
slider1 = new root.Slider(root.slider1.button, root.slider1.bar);

slider.callBacks.mouseDownHandler = function(e, target)
{
target.button.gotoAndStop(2);
root.update(target, slider1);
};

slider1.callBacks.mouseDownHandler = function(e, target)
{
target.button.gotoAndStop(2);
root.update(target, slider);
};

slider.callBacks.rollOverHandler = slider1.callBacks.rollOverHandler = function(e, target)
{
if (!target.pressed)
target.button.gotoAndStop(1);
};

slider.callBacks.rollOutHandler = slider1.callBacks.rollOutHandler = function(e, target)
{
if (!target.pressed)
target.button.gotoAndStop(0);
};

slider.callBacks.pressMoveHandler = function(e, target)
{
root.update(target, slider1);
};

slider1.callBacks.pressMoveHandler = function(e, target)
{
root.update(target, slider);
};

slider.callBacks.pressUpHandler = slider1.callBacks.pressUpHandler = function(e, target)
{
target.button.gotoAndStop(1);
};

root.update(slider, slider1);
};

root.update = function(current, other)
{
targetAnim.gotoAndStop(labels[Math.floor(current.ratio * labels.length)]);
other.positionPointerFromRatio(current.ratio);
root.ratioText0.text = "RATIO: " + slider.ratio.toFixed(2);
root.ratioText1.text = "RATIO: " + slider1.ratio.toFixed(2);
};

if (!root.started)
{
root.main();
root.started = true;
}

Files / source / download / FLA:

https://github.com/joao-cesar/adobe/tree/master/animate%20cc/html5_canvas/labels_slider

Please let us know if you have any further questions and I wish you a great learning adventure!

Regards,

JC

dumb reply