Issue with making mousemove working with touch

[shira5EB9]

Hi there,

I'v used your expmple for scroll bar : https://community.adobe.com/t5/animate/slider-to-control-timeline/td-p/9909532
I need to to controll the volume. So far it's working while using mouse move, my issue is with how to make it working also with touch.
I'v added this line: createjs.Touch.enable(stage); 
All the other gestures are working proprely with mouse+touch, just this function not working with touch.
Thank you for helping! 

this is the function:
$(document).mousemove(function () {
if (isCreateV == true && volControler.currentFrame == 1) {
volControler.button.on("mousedown", function (e) {
e.target.offsetX = (e.stageX / stage.scaleX) - e.target.x;
}.bind(volControler));

volControler.button.on("pressmove", function (e) {
e.target.x = volControler.clamp((e.stageX / stage.scaleX) - e.target.offsetX, (volControler.bar.x - 200), (volControler.bar.x + volControler.bar.nominalBounds.width) - 200);
volControler.setProportion();
}.bind(volControler));
volControler.setProportion = function () {
var prop = (volControler.button.x - (volControler.bar.x - 200)) / (volControler.bar.nominalBounds.width);
//volControler.txt.x = volControler.button.x;
//volControler.txt.text = prop;
createjs.Sound.volume = prop;
if (prop == 1) {
volControler.bar.gotoAndStop(59);
} else {
volControler.bar.gotoAndStop(volControler.bar.timeline.duration * prop);
}
}.bind(volControler);
volControler.clamp = function (value, min, max) {
if (value < min)
return min;
else if (value > max)
return max;
else
return value;
}
setTimeout(volControler.setProportion, 0);
}
});

[shira5EB9]

Help anyone???

[JoãoCésar]

Hi.

You're relying on a event of type mousemove. For mobile, you shoud rely on the pressmove event.

Also, do you mind providing some more info of what you want to achieve?

Regards,

JC

[shira5EB9]

Hi,
First, thanks for you answer!

My goal is to be able changing the volume of the game by dradding the dot on the slidebar (atteching photo). It worked perfect with mouse, I need it to worked also with touch.

Secound, how can I apply the pressmove event within my function? (I tried to just switch it like this

 $(document).pressmove(function () {

and it gave me error - pressmove is not a function.

Thank you for your help, waiting for your reply.
Shira

[JoãoCésar]

The pressmove event belongs to CreateJS. You're adding the event to the document itself.

Anyway, here is a sample:

Try it:

https://bit.ly/3AVF4QE

JavaScript code:

var root = this;
var slider = this.slider;
var soundButton = slider.soundButton;
var playButton = slider.playButton;

document.body.style.backgroundColor = lib.properties.color;
createjs.Touch.enable(stage);

soundButton.on("click", function(e)
{
	slider.gotoRatio(0);
});

playButton.on("click", function(e)
{	
	if (slider.sound)
		slider.sound.stop();
	
	slider.sound = createjs.Sound.play("RaceCar");
	slider.sound.volume = slider.ratio;
});

slider.move = function(e)
{	
	var target = e.currentTarget;
	var parent = target.parent;
	var mouseX = parent.globalToLocal(target.stage.mouseX, target.stage.mouseY).x;
	var bounds = target.nominalBounds.width;
	
	parent.ratio = mouseX / bounds + 0.5;
	parent.gotoRatio();
	parent.button.gotoAndStop(e.type !== "pressup" ? 1 : 0);
};

slider.gotoRatio = function(ratio)
{
	if (ratio !== undefined)
		this.ratio = ratio;
		
	this.gotoAndStop(Math.floor(this.totalFrames * this.ratio));
	
	if (this.sound)
		this.sound.volume = this.ratio;
};

slider.loop = false;
slider.ratio = 0;
slider.hit.on("mousedown", slider.move);
slider.hit.on("pressmove", slider.move);
slider.hit.on("pressup", slider.move);

Files / code / source / FLA:

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

I hope it helps.

Regards,

JC

[shira5EB9]

Hi!
Thank you for your explanation! 
I'm still facing issues and don't know why. 
My slider object isn't on the stage, it create dynamicly and also I'm adding it on a container and not on the stage.
1. should I add :

createjs.Touch.enable(container);   ?

2. Because the objects are dynamic when I'm trying to fit your code to mine I'm getting errors about the functions (like slider.move = function(e)...) because it is creating later on the code. How can I pass it? 
3. BTW, on your example then I'm trying the mobile view (device toolbar on the inspactor) I can't dragg the white dot, only clicking on the bar and it moves accurddinly. (with mouse press is workes perfect) , can I make the dragging worked with touch also? 

If you can send the fla file here it will be wonderful! 

Thank you again very much!