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

How to have a pop-up close when you click on a different button

Community Beginner ,
Feb 02, 2022 Feb 02, 2022

Copy link to clipboard

Copied

Each of these "people" are buttons (pictured). When you click the button, a pop up opens. When you click the button again it closes. I would also like the pop up to close if you click a different button on the page. Is that possible?

 

I have it hosted here if you'd like to try it as is right now:

https://itch.io/embed-upload/4912301?color=333333

TOPICS
ActionScript , How to

Views

401

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

correct answers 1 Correct answer

Community Expert , Feb 03, 2022 Feb 03, 2022

Hi.

 

There are several ways to do this. Two of them would be:

 

1 - A single Movie Clip with each pop-up in different frames. As soon as the user taps/clicks a button, you send the Movie Clip to the corresponding frame. This strategy would function better if your pop-ups appear or disappear without animation.

 

2 - You can have the pop-ups as different Movie Clips and use a variable to save the current opened pop-up. In this way, when the user taps/clicks on the next, you close the previous sto

...

Votes

Translate

Translate
Community Beginner ,
Feb 02, 2022 Feb 02, 2022

Copy link to clipboard

Copied

Or if this is easier, close pop-up when click outside it.

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 ,
Feb 03, 2022 Feb 03, 2022

Copy link to clipboard

Copied

Hi.

 

There are several ways to do this. Two of them would be:

 

1 - A single Movie Clip with each pop-up in different frames. As soon as the user taps/clicks a button, you send the Movie Clip to the corresponding frame. This strategy would function better if your pop-ups appear or disappear without animation.

 

2 - You can have the pop-ups as different Movie Clips and use a variable to save the current opened pop-up. In this way, when the user taps/clicks on the next, you close the previous stored in the variable, open the current and save the current in the same variable.

 

Please let us know if those make sense and if you need further assistance.

 

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
Community Beginner ,
Feb 03, 2022 Feb 03, 2022

Copy link to clipboard

Copied

Hi JC,

 

Thank you so much for your reply. I am very new to animate and have created this by watching tutorials that walk you through the process step by step. I've uploaded a video that shows my process of making a button and pop-up here:

https://drive.google.com/file/d/1gvZkgvdTDinrYbUKW7IvNM2mvj-CmPvf/view?usp=sharing

 

Are there any tutorials you can point me to that show how to go about either of the 2 options you've outlined above?

 

Thanks so much for your help.

Cassidy

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 ,
Feb 04, 2022 Feb 04, 2022

Copy link to clipboard

Copied

Thanks a lot, Cassidy, for the video.

 

Here is a sample that hopefully will help you to get started:

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

 

The main code is this:

var root = this;

root.callPopUp = function(e)
{
	root.popUps.gotoAndStop(e.target.name);
};

root.dismissPopUp = function(e)
{
	if (e.target.name === "closeButton" || e.target.name === "hit")
		root.popUps.gotoAndStop(0);
};

root.person0.on("click", root.callPopUp);
root.person1.on("click", root.callPopUp);
root.person2.on("click", root.callPopUp);
root.person3.on("click", root.callPopUp);
root.person4.on("click", root.callPopUp);
root.popUps.on("click", root.dismissPopUp);
root.hit.on("click", root.dismissPopUp);

 

I hope this helps.

 

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
Community Beginner ,
Feb 10, 2022 Feb 10, 2022

Copy link to clipboard

Copied

Hi JC,

 

Thank you so so much for the information above. I have been working with your file and trying to copy what you did. I can't get the pop ups to come up yet, but I did notice something in your file that I can't figure out how to do and I'm wondering if that is the problem. I've attached a video here:

https://drive.google.com/file/d/1hGF2Y05rlWuAP9x3ihVFWiJfS6BGPljA/view?usp=sharing

 

Basically, I noticed you can click on individual buttons on the main stage in your file and you've given them instance names but they are all still under the button "PersonButton". In my file, they are all grouped together. I've tried to "break apart" but then they're not all under the same "PersonButton" name. 

 

Hope this makes sense and the video helps.

 

Thanks,

Cassidy

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 ,
Feb 12, 2022 Feb 12, 2022

Copy link to clipboard

Copied

Hi.

 

Sorry for the delay.

 

It's not very common to have several click areas inside of one single button.

 

Is it possible for you to turn each person into a separate button?

 

Please let us know.

 

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
Community Beginner ,
Feb 15, 2022 Feb 15, 2022

Copy link to clipboard

Copied

Hey JC,

 

I was able to turn each person into a separate button. Unfortunately the code isn't working still. When I click the button it does not trigger the pop up. I've uploaded my animate file here:

https://drive.google.com/file/d/1ySgqlm6UwcwXFLcFMkCoJtMwMcdkHSCZ/view?usp=sharing

 

Wondering if you can possibly take a look?

 

Thanks,
Cassidy

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 ,
Feb 15, 2022 Feb 15, 2022

Copy link to clipboard

Copied

Hi, Cassidy.

 

Here it is:

https://drive.google.com/file/d/1QQayIfJ79rV2FlH94e_7jZ3Jhckj6Fxj/view?usp=sharing

 

Please let us know if you still need further assistance.

 

I hope it helps.

 

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
Community Beginner ,
Feb 16, 2022 Feb 16, 2022

Copy link to clipboard

Copied

Ahh amazing! Thank you so much for all your help JC. I appreciate it SO much.

 

Thanks,
Cassidy

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 ,
Feb 16, 2022 Feb 16, 2022

Copy link to clipboard

Copied

LATEST

Amazing! You're welcome!

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