8
Replies
Basically I want a it to do this. But someone can click on the main dial portion and drag it down and up and when it's being dragged the needles spin between 0 and 360. Your code worked great for dragging on Y and limiting how high and low it can go.
This question has a sample bit of code that kind of works:
but the issue with it is that its not constrained to the drag. dragging or clicking rotates the needle and I don't really understand what it's doing... I tried to figure it out by playing with it and trying to comment outcertain bits and see if I can see/understand what is happening. But I'm so lost...
It also looks like your code can cover some of this already, like the mouse down and mousemove sections. so some of it seems redundant.
I need to learn to code... 😞
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:
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
AdChoices