Inspiring

Question

Please help- How to use Mousewheel EventListener only over certain movieclips?

Forum|Forum|9 years ago
May 26, 2017
1 reply
1505 views

I'm using a code klad posted for html5 canvas with animate cc using the scroll wheel, to detect scroll up and scroll down to do different things for each one,

but the problem is its detecting the entire canvas.

Is there a way to make it so you can only scroll when the mouse is over certain movie clips with specific ID in html5 canvas?

So I can for example have more control on WHEN you can scroll and WHERE.

Then I can hide and show movieclips on the timeline and only when certain ones with certain ID is visible, and your mouse is over them, then do something different (like playing from certain frames, depending if you scroll up or down)

It would be so amazing if someone could let me know if this is possible and how to go about it. Here is the current code he posted:

document.getElementById('canvas').addEventListener('mousewheel',f.bind(this));

document.getElementById('canvas').addEventListener('DOMMouseScroll',f.bind(this));

function f(e){

if (e.wheelDelta > 0||e.detail>0){

this.gotoAndPlay(2);

} else if(e.wheelDelta < 0||e.detail<0){

this.gotoAndPlay(10);

}

This topic has been closed for replies.

C

ClayUUID

Legend

Have you tried just adding the scroll event listeners to the movieclips instead of the entire canvas?

N

NeoInTheMatrixAuthor

Inspiring

I tried changing this:

document.getElementById('canvas').addEventListener('mousewheel',f.bind(this));

document.getElementById('canvas').addEventListener('DOMMouseScroll',f.bind(this));

to this:

this.MovieClip1.addEventListener('mousewheel',f.bind(this));

this.MovieClip1.addEventListener('DOMMouseScroll',f.bind(this));

but scrolling no longer works and becomes broken.

What is the proper way to add the scroll event listeners to the movieclips?
I'd really like to be able to have the mousewheel listen only on certain frames too, but I'm not sure how to do that either.

C

ClayUUID

Legend

Ah, my bad, looks like Canvas doesn't yet natively support mousewheel events. You'll have to use a hybrid approach. Listen for mousewheel events globally, but only act on them when the mouse is over a desired clip.

Something like this might work (not tested):

document.getElementById("canvas").addEventListener("mousewheel", scrollHandler);

document.getElementById("canvas").addEventListener("DOMMouseScroll", scrollHandler);

this.MovieClip1.addEventListener("mouseover", overClipHandler);

this.MovieClip1.addEventListener("mouseout", outClipHandler);

function scrollHandler(evt) {

if (!currentClipOver) {

return;

}

if (evt.wheelDelta > 0 || evt.detail > 0) {

currentClipOver.gotoAndPlay(2);

}

else if (evt.wheelDelta < 0 || evt.detail < 0) {

currentClipOver.gotoAndPlay(10);

}

function overClipHandler(evt) {

window.currentClipOver = evt.target;

}

function outClipHandler(evt) {

window.currentClipOver = null;

}

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded