Skip to main content
Participating Frequently
August 13, 2023
Question

Set mouseout area?

  • August 13, 2023
  • 2 replies
  • 720 views

Hello, I am new to Animate and have a problem with a banner of an HTML5 canvas file.

In my banner is a button of 1 x 2 cm. On this button is the following action: on moueseover the animation jumps to a certain frame and continues playing the animation from there. On mouseout the animation jumps back to another frame and continues playing the animation there. This works almost wonderfully, even mobile. But the problem is still this: If I have triggered the mouseover and only shake or move the mouse very slightly, mouseout is triggered directly. But it should only be triggered when the mouse leaves the button of 1 x 2 cm.
The Script is on the button:

 

var _this = this;
var frameNumber;
/*
Durch Bewegen der Maus über die angegebene Symbolinstanz wird eine Funktion ausgeführt.
'3' gibt an, wie oft das Ereignis ausgelöst werden soll.
*/
/*stage.enableMouseOver(3);
_this.info_1.on('mouseover', function(){
/*
Verschiebt den Abspielkopf in der Zeitleiste zur angegebenen Bildnummer und setzt die Wiedergabe ab diesem Bild fort.
Kann in der Hauptzeitleiste oder in Movieclip-Zeitleisten verwendet werden.

_this.gotoAndPlay(411);
});*/

/* Mouse Over Event
Mousing over the symbol instance executes a function in which you can add your own custom code.

Instructions:
1. Add your custom code on a new line after the line that says "// Start your custom code" below.
The code will execute when the symbol instance is moused over.
frequency is the number of the times event should be triggered.
*/
var frequency = 1;
stage.enableMouseOver(frequency);
this.info_1.addEventListener("mouseover", fl_MouseOverHandler);

function fl_MouseOverHandler()
{
	frameNumber = this.currentFrame;
	// Start your custom code
	// This example code displays the words "Moused over" in the Output panel.
	_this.gotoAndPlay(467);
	// End your custom code
}


/* Mouse Out Event
Mousing out of the symbol instance executes a function in which you can add your own custom code.

Instructions:
1. Add your custom code on a new line after the line that says "// Start your custom code" below.
The code will execute when the symbol instance is moused out of.
*/
//var frequency = 2;
stage.enableMouseOver(2);
this.info_1.addEventListener("mouseout", fl_MouseOutHandler);

function fl_MouseOutHandler()
{
	if (frameNumber > 330)
	{
		_this.gotoAndPlay(330);
	}
	else{
		_this.gotoAndPlay(330);
	}
	// Start your custom code
	// This example code displays the words "Moused out" in the Output panel.
	//_this.gotoAndPlay(frameNumber);
	// End your custom code
}

 

 

 

    This topic has been closed for replies.

    2 replies

    JoãoCésar17023019
    Community Expert
    Community Expert
    August 14, 2023

    Hi.

     

    I have to apologize because I totally forgot about an easier alternative.

     

    Have you tried setting the mouseChildren property to false? In this way, button's children won't affect the mouse interaction. So you won't need to worry about the hitArea.

     

    Please let us know if it works for you.

     

    Regards,

    JC

    JoãoCésar17023019
    Community Expert
    Community Expert
    August 13, 2023

    Hi.

     

    Set an instance inside of your button (e.g.: a rectangle shape) as the hitArea for your button.

    https://createjs.com/docs/easeljs/classes/DisplayObject.html#property_hitArea

     

    Regards,

    JC

    Lenani13Author
    Participating Frequently
    August 13, 2023

    Thanks already. I managed to create this hit area and it works on its own. But now I can't manage to combine the area with the function of the button. Where do I add the script to the Hit Area? To the script of the mouseover/mouseout action in the main timeline, or at the icon of the HitArea? I have tried many things, but if the HitAre works, then the function to jump to a specific frame unfortunately does not work anymore.

    kglad
    Community Expert
    Community Expert
    August 13, 2023

    add script to the timeline that contains your button (after assigning it an instance name in the properties panel).