my goal is to have the movieclip, "lilBall," 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. 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.
someone suggested that i use easeljs' localToGlobal to fix the problem, but i have no idea how to apply it to my code.
any help would be awesome.
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
};
}
1
Reply
AdChoices