• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Tying Mouse movement to scrolling through frames

Community Beginner ,
Feb 22, 2021 Feb 22, 2021

Copy link to clipboard

Copied

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

Views

243

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Community Expert , Feb 23, 2021 Feb 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.stage
...

Votes

Translate

Translate
Community Expert ,
Feb 23, 2021 Feb 23, 2021

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Feb 23, 2021 Feb 23, 2021

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 23, 2021 Feb 23, 2021

Copy link to clipboard

Copied

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_...

 

I hope it helps.

 

Regards,

JC

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Feb 23, 2021 Feb 23, 2021

Copy link to clipboard

Copied

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

 

 

Thanks so much!

 

Keeney-

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 23, 2021 Feb 23, 2021

Copy link to clipboard

Copied

LATEST

Excellent! You're welcome!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines