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
Got it.
Here is a simple demo.
Preview:
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
...
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
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.
Copy link to clipboard
Copied
Got it.
Here is a simple demo.
Preview:
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:
I hope it helps.
Regards,
JC
Copy link to clipboard
Copied
This is perfect! Exactly the jumping off point I was looking for!
Thanks so much!
Keeney-
Copy link to clipboard
Copied
Excellent! You're welcome!