A simple mouse over / mouse out button

Question

Hello everybody,i am trying to create a simple button that on mouseover has this code on the main timeline:var frequency = 3;
stage.enableMouseOver(frequency);
this.btn_test.addEventListener("mouseover", fl_MouseOverHandler_2);

function fl_MouseOverHandler_2()
{
	this.btn_test.play(2);
}while at mouseout it has this code:var frequency = 3;
stage.enableMouseOver(frequency);
this.btn_test.addEventListener("mouseout", fl_MouseOutHandler_2);

function fl_MouseOutHandler_2()
{
	alert("fuori")
}The problem is that the mouseout alert works fine but the mouseover does not.If I could get the mouseover to work correctly I could replace the alert with the correct code. The "btn_test" clip looks like this:with a stop on the first frame and another stop on frame 10. How can I fix the code for play on mouseover from frame 1 to frame 10 and play on mouseout from frame 11 to frame 20? Thanks to anyone who can help me!

JoãoCésar17023019 · Accepted Answer

Thanks for the file.

I would like to suggest another approach using TweenJS.

This method has at least two advantages:

- You don't need to create two animations (in and out);

- The animation will change direction from the current frame.

Preview:

Try it:

https://bit.ly/3eXIkBN

JavaScript / JS code:

var root = this;

root.main = function()
{
	document.body.style.backgroundColor = lib.properties.color;
	stage.enableMouseOver();
	root.button.mouseChildren = false;
	root.button.on("mouseover", function(e){ root.hoverTween(e.currentTarget, e.currentTarget.totalFrames -1) });
	root.button.on("mouseout", function(e){ root.hoverTween(e.currentTarget, 0) });
};

root.hoverTween = function(target, destination, ease)
{
	var duration = (Math.abs(destination - target.currentFrame) / lib.properties.fps) * 1000;
	
	target.frame = target.currentFrame;
		
	createjs.Tween.get(target, { override: true }).to({ frame: destination }, duration, ease).on("change", function(e)
	{
		var target = e.currentTarget.target;		
		target.gotoAndStop(Math.round(target.frame));
	});
};

root.main();

Download / FLA / source / files:

https://github.com/joao-cesar/adobe/tree/master/animate%20cc/html5_canvas/hover_tween

I hope this helps.

Regards,

JC

JoãoCésar17023019 · Answer

Hi. It's a problem of context. The this keyword inside of the event handler function doesn't refer to the main timeline as you probably expect. Use the bind method to fix the issue. Like this: this.btn_test.addEventListener("mouseover", fl_MouseOverHandler_2.bind(this));  I hope this helps. Regards,JC

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