Skip to main content
keeneys69316891
keeneys69316891
Participant
February 22, 2021
Answered

Tying Mouse movement to scrolling through frames

  • February 22, 2021
  • 2 replies
  • 552 views

New animate user here, I have an external scroll scroll wheel (like for an arcade) that creates horizontal mouse movement. I am trying to use it to control frames, does anyone have some simple code for this? I have found a lot of resources for dragging sliders to control frames or mouse movement controlling objects but I dont know coding well enough to strip those parts down to what I need. Not sure if this makes a difference but finished product would be HTML5

    This topic has been closed for replies.
    Correct answer JoãoCésar17023019

    Got it.

     

    Here is a simple demo.

     

    Preview:

    https://bit.ly/3sn7O0y

     

    JS code:

    var root = this;
var targetMC = root;
var currentRadio = root.radio0;

root.main = function()
{
	stage.mouseMoveOutside = true;
	createjs.Touch.enable(stage);
	root.stop();
	root.controlMC(targetMC);
	root.radio0.gotoAndStop(1);
	root.radio0.on("click", root.chooseRadio, root, false, { target: root });
	root.radio1.on("click", root.chooseRadio, root, false, { target: root.anim });
	stage.on("stagemousemove", root.stageMouseMoveHandler);
};

root.chooseRadio = function(e, data)
{
	if (currentRadio)
		currentRadio.gotoAndStop(0);
	
	e.currentTarget.play();
	currentRadio = e.currentTarget;
	
	targetMC = data.target;
	targetMC.loop = false;
	root.controlMC(targetMC);		
};

root.stageMouseMoveHandler = function()
{
	root.controlMC(targetMC);
};

root.controlMC = function(mc, width)
{
	var point = mc.globalToLocal(stage.mouseX, stage.mouseY);
	var width = mc === exportRoot ? lib.properties.width : mc.nominalBounds.width;
	var mouseXRatio = point.x / width;
	
	mc.gotoAndStop(Math.floor(mc.totalFrames * mouseXRatio));
};

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

     

    I added the an interactivity to control the current timeline that is being controlled but you can ignore it and just pick what you need.

     

    FLA / files / source:

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

     

    I hope it helps.

     

    Regards,

    JC

    2 replies

    JoãoCésar17023019
    Community Expert
    JoãoCésar17023019Community ExpertCorrect answer
    Community Expert
    February 23, 2021

    Got it.

     

    Here is a simple demo.

     

    Preview:

    https://bit.ly/3sn7O0y

     

    JS code:

    var root = this;
var targetMC = root;
var currentRadio = root.radio0;

root.main = function()
{
	stage.mouseMoveOutside = true;
	createjs.Touch.enable(stage);
	root.stop();
	root.controlMC(targetMC);
	root.radio0.gotoAndStop(1);
	root.radio0.on("click", root.chooseRadio, root, false, { target: root });
	root.radio1.on("click", root.chooseRadio, root, false, { target: root.anim });
	stage.on("stagemousemove", root.stageMouseMoveHandler);
};

root.chooseRadio = function(e, data)
{
	if (currentRadio)
		currentRadio.gotoAndStop(0);
	
	e.currentTarget.play();
	currentRadio = e.currentTarget;
	
	targetMC = data.target;
	targetMC.loop = false;
	root.controlMC(targetMC);		
};

root.stageMouseMoveHandler = function()
{
	root.controlMC(targetMC);
};

root.controlMC = function(mc, width)
{
	var point = mc.globalToLocal(stage.mouseX, stage.mouseY);
	var width = mc === exportRoot ? lib.properties.width : mc.nominalBounds.width;
	var mouseXRatio = point.x / width;
	
	mc.gotoAndStop(Math.floor(mc.totalFrames * mouseXRatio));
};

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

     

    I added the an interactivity to control the current timeline that is being controlled but you can ignore it and just pick what you need.

     

    FLA / files / source:

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

     

    I hope it helps.

     

    Regards,

    JC

    keeneys69316891
    keeneys69316891Author
    Participant
    February 23, 2021

    This is perfect! Exactly the jumping off point I was looking for!

     

     

    Thanks so much!

     

    Keeney-

      JoãoCésar17023019
      Community Expert
      JoãoCésar17023019Community Expert
      Community Expert
      February 23, 2021

      Excellent! You're welcome!

      JoãoCésar17023019
      Community Expert
      JoãoCésar17023019Community Expert
      Community Expert
      February 23, 2021

      Hi.

       

      How should this interactivity be? The frames should change according to the displacement of the mouse cursor, should the change take into account the absolute position of the cursor...?

       

      Can you clarify exactly how you want the interactivity to happen?

       

      Regards,

      JC

      keeneys69316891
      keeneys69316891Author
      Participant
      February 23, 2021

      Basically when the mouse is all the way to the left of the screen we would be at the starting frame, when the mouse is all the way on the right it would be the final frame. 

       

      I think it would also work to track general horizontal mouse movement and tie that to frame progression. For example for every 10 points/pixels of mouse movement across a 1920x1080 screen it moves forward one frame. 

       

      Hopefully that makes sense? I dont need exact absolute position just progression as my physical scroll wheel rotates back and forth. I am still early in the development of this so I am looking for the simplest way to acheive this idea and then I can build everything else around that.

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