Skip to main content
S
shira5EB9
Participant
August 10, 2021
Question

Issue with making mousemove working with touch

  • August 10, 2021
  • 3 replies
  • 311 views

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);
}
});

    This topic has been closed for replies.

    3 replies

    JoãoCésar17023019
    Community Expert
    JoãoCésar17023019Community Expert
    Community Expert
    August 20, 2021

    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_slider

     

    I hope it helps.

     

    Regards,

    JC

    S
    shira5EB9Author
    Participant
    August 21, 2021

    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!

    JoãoCésar17023019
    Community Expert
    JoãoCésar17023019Community Expert
    Community Expert
    August 20, 2021

    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

    S
    shira5EB9Author
    Participant
    August 20, 2021

    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

     

    S
    shira5EB9Author
    Participant
    August 20, 2021

    Help anyone???

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices