• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Set mouseout area?

New Here ,
Aug 12, 2023 Aug 12, 2023

Copy link to clipboard

Copied

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
}

 

 

 

Views

288

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Aug 13, 2023 Aug 13, 2023

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Aug 13, 2023 Aug 13, 2023

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Aug 13, 2023 Aug 13, 2023

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Aug 13, 2023 Aug 13, 2023

Copy link to clipboard

Copied

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;
}

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Aug 13, 2023 Aug 13, 2023

Copy link to clipboard

Copied

you're very confused.

 

create a new canvas project.

create a button on the main timeline 

add an instance name

add button code

test

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Aug 13, 2023 Aug 13, 2023

Copy link to clipboard

Copied

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?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Aug 13, 2023 Aug 13, 2023

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Aug 13, 2023 Aug 13, 2023

Copy link to clipboard

Copied

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!!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Aug 13, 2023 Aug 13, 2023

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Aug 13, 2023 Aug 13, 2023

Copy link to clipboard

Copied

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).

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Aug 13, 2023 Aug 13, 2023

Copy link to clipboard

Copied

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?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Aug 14, 2023 Aug 14, 2023

Copy link to clipboard

Copied

LATEST

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

 

kglad_0-1692020589233.png

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Aug 14, 2023 Aug 14, 2023

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines