removeEventListener

[Numinus67]

i can't figure out why the removeEventListener doesn't work here? what i'm trying to accomplish is having a movie clip follow the mouse when hovering over a button, and then on mousing out of the button, have the setMousePosition function stop and the movie clip go away.

var canVas = document.querySelector("canvas");
var context = canVas.getContext("2d");
var canvasPos = getPosition(canVas);
var mouseX = 0;
var mouseY = 0;
var frequency = 3;
stage.enableMouseOver(frequency);
this.bigButton.addEventListener("mouseover", mouseOverFunction);
this.bigButton.addEventListener("mouseout", mouseOutFunction); 
function mouseOverFunction() {
  canVas.addEventListener("mousemove", setMousePosition, true);
  function setMousePosition(e) {
   mouseX = e.clientX - canvasPos.x;
   mouseY = e.clientY - canvasPos.y;
   context.beginPath();
   context.arc(mouseX, mouseY, 50, 0, 2 * Math.PI, true);
   context.fillStyle = "#FF6A6A";
   context.fill();
  }
}
function mouseOutFunction(){
  canVas.removeEventListener("mousemove", setMousePosition, true);
  alert("Trace");
}
function getPosition(el) {
  var xPosition = 0;
  var yPosition = 0;
  while (el) {
    xPosition += (el.offsetLeft - el.scrollLeft + el.clientLeft);
    yPosition += (el.offsetTop - el.scrollTop + el.clientTop);
    el = el.offsetParent;
  }
  return {
    x: xPosition,
    y: yPosition
  };
}

[Colin Holgate · Accepted solution]

Your set mouse position function is declared inside another function. I'm not sure that the out function would be able to see it. Can you put all functions at the outer level?

[Numinus67]

thanks colin
that fixed the problem. i actually originally wrote the function outside, and it didn't work. but i think i just had some other syntax or reference error happening.

[ClayUUID]

By defining setMousePosition() inside mouseOverFunction(), you've made it a private member of that function. It's inaccessible to any external scope unless you explicitly return a reference to it.

There appears to be no reason to nest your function definitions this way, so as Colin suggests you should un-nest it.

[ClayUUID]

Also, if you're targeting the default canvas and not creating your own, there should be no need for that "CanVas" variable. The global variable "canvas" already points to the default canvas.

Either way, having multiple variables that differ only by the case of one or more letters is really, really bad practice.

[Numinus67]

you're correct: the canVas variable isn't needed. i copied and pasted much of this code from a tutorial that was not using adobe animate to create this. i think maybe for whatever their purposes were, it was smart to create the new variable (they named it my_canvas i think).

why is naming new variables by changing the case of letters such, such bad practice?

[Colin Holgate]

A log of people do it, but some have a system of adding a lowercase letter. For example, if you wanted the current timeline to be readable from everywhere, that is, global, many people use a 'g'. Like:

window.gScene1 = this;

would make a variable that from its name you can remember it's global, and the rest of the name reminds you about what it contains. For properites 'p' is often used:

var pMyLeft = this.x;

I'm not at all that organized myself! But getting back to just changing a letter, the danger is that you mistype and now you're using a reserved word as a variable, and that could be a hard problem to track down.

One thing to watch out for with CreateJS sample code; the CreateJS team themselves don't use Adobe Animate, they do everything in text editors. This means that examples you'll find have to do extra things that Animate will do for you. As Clay said, 'canvas' is readible everywhere because the HTML that Animate publishes does that for you. You don't have to set frequency, or enableMouseOver. There is likely to be no harm is setting them when they are already set, but just publish any HTML5 Canvas and look at the HTML, to see what things have already been taken care of.

[Numinus67]

thanks colin. i'll keep all these things in mind.

[Numinus67]

does anyone use gsap tweenmax?

below is the code i'm working with now. it's all working fine except the the initial mouseover position tween (x: mouseX and y: mouseY) aren't happening. the alpha tween from the mouseover is working though, which is confusing me. i'm guessing it has something to do with tweens getting cancelled out or something. maybe working with the overwrite property will fix it, but i haven't figured that out yet. i'll post in gsap forums also, but anyone have any ideas?

this.stop();
var root = this, tl;
var context = canvas.getContext("2d");
var canvasPos = getPosition(canvas);
var mouseX = 0;
var mouseY = 0;
var frequency = 3;
stage.enableMouseOver(frequency);
this.lilBall.alpha = 0;
this.myButton.addEventListener("mouseover", mouseOverFunction);
this.myButton.addEventListener("mouseout", mouseOutFunction);
function mouseOverFunction() {
  TweenMax.to(root.lilBall, 2, {
  ease: Expo.easeOut,
  alpha: 1
  });
  TweenMax.to(root.lilBall, .6, {
  ease: Expo.easeOut,
  x: mouseX,
  y: mouseY,
  });
  canvas.addEventListener("mousemove", setMousePosition, true);
}
function setMousePosition(e) {
  mouseX = e.clientX - canvasPos.x;
  mouseY = e.clientY - canvasPos.y;
  TweenMax.to(root.lilBall, .6, {
  ease: Expo.easeOut,
  x: mouseX,
  y: mouseY,
  });
}
function mouseOutFunction(){
  canvas.removeEventListener("mousemove", setMousePosition, true);
  TweenMax.to(root.lilBall, 1, {
  ease: Circ.easeOut,
  alpha: 0,
  });
}
function getPosition(el) {
  var xPosition = 0;
  var yPosition = 0;
  while (el) {
    xPosition += (el.offsetLeft - el.scrollLeft + el.clientLeft);
    yPosition += (el.offsetTop - el.scrollTop + el.clientTop);
    el = el.offsetParent;
  }
  return {
    x: xPosition,
    y: yPosition
  };
}

[Numinus67]

ok nevermind my last reply about tweenmax: i fixed that problem by getting rid of the frequency line (thanks colin).

new problem. below is the code i have now. again my goal is to have the "lilBall" movieclip follow the mouse when hovering over a button. everything works fine with this code as long as my publish settings have "make responsive" UNCHECKED. when i publish the project with make responsive checked (it is necessary for me to have this project be responsive), the code creates the following behavior. the movieclip follows the mouse but is seemingly offset exponentially, i.e. when the mouse is in the top left corner (x:0, y:0), the movieclip is right on, but the further the mouse is from the the top left, the more the movieclip is offset to. i think the math needs to be changed, but i've tried several different changes and can't figure it out. my math skills are far from stellar.

this.stop();
var root = this, tl;
var context = canvas.getContext("2d");
var canvasPos = getPosition(canvas);
var mouseX = 0;
var mouseY = 0;
this.lilBall.alpha = 1;
this.myButton.addEventListener("mouseover", mouseOverFunction);
this.myButton.addEventListener("mouseout", mouseOutFunction);
function mouseOverFunction() {
  TweenMax.to(root.lilBall, 2, {
  ease: Expo.easeOut,
  alpha: 1
  });
  TweenMax.to(root.lilBall, .6, {
  ease: Expo.easeOut,
  x: mouseX,
  y: mouseY,
  });
  canvas.addEventListener("mousemove", setMousePosition, true);
}
function setMousePosition(e) {
  mouseX = e.clientX - canvasPos.x;
  mouseY = e.clientY - canvasPos.y;
  TweenMax.to(root.lilBall, .6, {
  ease: Expo.easeOut,
  x: mouseX,
  y: mouseY,
  });
}
function mouseOutFunction(){
  canvas.removeEventListener("mousemove", setMousePosition, true);
  TweenMax.to(root.lilBall, 1, {
  ease: Circ.easeOut,
  alpha: 0,
  });
}
function getPosition(el) {
  var xPosition = 0;
  var yPosition = 0;
  while (el) {
    xPosition += (el.offsetLeft - el.scrollLeft + el.clientLeft);
    yPosition += (el.offsetTop - el.scrollTop + el.clientTop);
    el = el.offsetParent;
  }
  return {
    x: xPosition,
    y: yPosition
  };
}

[Colin Holgate]

Read about localToGlobal:

EaselJS v0.8.2 API Documentation : DisplayObject

That alone may help, but if it still has problems you can look at how the stage is scaled in responsive mode. Sometimes I've had to multiple or divide the apparent x and y by the stage scale, to make it cope with responsive scaling.

[Numinus67]

ok i read it. localToGlobal looks like it could help, but i really have no idea how to apply it to my code. sorry to ask you to hold my hand, but could you give me some specific code suggestions.

same for your latter suggestion. just not sure what you mean by 'apparent x and y.'

also i think i'll start another topic since this a different problem. but any help would be much appreciated.

[Colin Holgate]

At the moment you're working out the x value with e.clientX - canvasPos.x, but that doesn't take into account that the stage may have been scaled. If you find that x comes out too far to the left, try multiplying the value by stage.scaleX

[Numinus67]

thanks. i hadn't tried anything with stage.scaleXY yet. this is getting there.

dividing mouseXY by stage.scaleXY fixes the problem, but only if i haven't scrolled the page. when the page is scrolled all the way to the top, the movieclip is centered on the mouse. if i scroll the page, the movieclip becomes offset.