Set mouseout area?

[Lenani13]

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
}

[JoãoCésar]

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

[Lenani13]

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]

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

[Lenani13]

Tank you very much, but I did that, but the HitArea doesn't work like that anymore. The whole script is in the main bar on the key screen of the button. The instance mc1 for the hitaArea is as second layer in the button, under "Infos here".

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
}


var mc1 = stage.getChildByName("mc1"); 

// Mouseover-Ereignis hinzufügen
mc1.addEventListener("mouseover", function(event) {
    mc1.gotoAndPlay(467); // Gehe zu Frame 467, wenn Maus über der HitArea ist
});

// Mouseout-Ereignis hinzufügen
mc1.addEventListener("mouseout", function(event) {
    // Hier könntest du weitere Aktionen ausführen, wenn die Maus die HitArea verlässt.
    // Zum Beispiel: mc1.gotoAndStop(1); // Zurück zum ersten Frame
});

stage.enableMouseOver(10);

var hit = new createjs.Shape();
hit.graphics.beginFill("red").drawCircle(0, 0, 50);

this.mc1.hitArea = hit;

this.mc1.addEventListener("mouseover", handleInteraction);
this.mc1.addEventListener("mouseout", handleInteraction);
function handleInteraction(evt) {
	evt.target.alpha = (evt.type == "mouseover") ? 0.5 : 1;
}

[kglad]

you're very confused.

create a new canvas project.

create a button on the main timeline 

add an instance name

add button code

test

[Lenani13]

I'm sorry, I'm still very much at the beginning unfortunately.
I did it this way with a new document, it works fine on its own.
I just do not understand how to combine the code HitArea with the function to jump to a frame and at mouseout again to another frame?

[kglad]

the hitarea is irrelevant for coding.  it makes no more difference than choosing to color your button red vs blue.

ie, follow the same process for your real project as i outlined previously. ie, add an instance name on the timeline that contains your button and then add your code.

[Lenani13]

ok, i will make it. so I am in the main timeline.
Then I create a new icon, of the type movieclib with the name "hit".
I then add an instance of the symbol "hit" to the timeline layer of my normal button. I give this instance the name "hit_int".
I add to the action of the normal button the action of the hit area. So this script:

stage.enableMouseOver(10);

var hit = new createjs.Shape();
hit.graphics.beginFill("red").drawCircle(0, 0, 50);

this.mc1.hitArea = hit;

this.mc1.addEventListener("mouseover", handleInteraction);
this.mc1.addEventListener("mouseout", handleInteraction);
function handleInteraction(evt) {
evt.target.alpha = (evt.type == "mouseover") ? 0.5 : 1;
}

I just add at the bottom, under my first script. Is this basically correct? if that is correct, then I can search here what I am doing wrong. Thank you a lot!!

[Lenani13]

... this.hit_int ... it should of course read

[kglad]

the first problem is adding a movieclip to the button timeline. that's an unnecessary complication (unless you're creating an animation in the out, over and/or down frames of the button).

[Lenani13]

ok, then I put the instance of the hitArea directly into the main timeline of the button. But when I do that, the function of the button does not work anymore. I always have the hitArea function or the button function. I can't get it to work both ways. Is there an example somewhere of how the hitArea is a button?

[kglad]

just add whatever shape you want to your button's hit frame

[JoãoCésar]

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