Skip to main content
S
Samantha22276227zqgf
Participating Frequently
March 21, 2023
Question

Toggle or Hide/Show button for multiple popups

  • March 21, 2023
  • 2 replies
  • 199 views

Hello,

Can anyone help resolve this issue either using toggle or hide/show actions for buttons? Here's what I have currently, https://conceptcommusa.com/stage/Mainstreet/Scene2/HP_MS_Infographic_Scene02_03152023.html

https://www.dropbox.com/s/cpnod6nm0dppmaw/HP_MS_Infographic_Scene02_03152023.fla?dl=0 

 

The issues:

  • Able to click and toggle multiple buttons rather than just one at a time.
  • Ideally would use an "x" button in the popup to close rather than toggle
  • Images in box are not showing correctly on all

 

Each popup has a gradient change with stop actions for 0% and 100% for the timeline:

var _this = this;
_this.stop();

 

The toggle actions include:

var _this = this;
_this.btn1.on('click', function(){
_this.btn1box.play();
});


_this.btn1.on('click', function(){
_this.btn1box.play();
});

 

Here's an example how I would like the buttons to function:

https://covid19.ergonomics.org.uk/media/CIEHF%20WFH%20Infographic.html

 

What am I missing? What is a better way to code this?

 

Thanks!

    This topic has been closed for replies.

    2 replies

    kglad
    Community Expert
    kgladCommunity Expert
    Community Expert
    March 21, 2023

    why do have duplicate click code for btn1?

    S
    Samantha22276227zqgfAuthor
    Participating Frequently
    March 23, 2023

    Oh, must have copy and pasted too many times here. Thanks for catching that!

    kglad
    Community Expert
    kgladCommunity Expert
    Community Expert
    March 23, 2023

    you're welcome.

    JoãoCésar17023019
    Community Expert
    JoãoCésar17023019Community Expert
    Community Expert
    March 21, 2023

    Hi.

     

    This example may help you get an idea of how to approach this kind of interactivity.

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

     

    Please let us know if you have further questions.

     

    Regards,

    JC

    S
    Samantha22276227zqgfAuthor
    Participating Frequently
    March 23, 2023

    Hey JC,

     

    Thanks so much!

     

    I do have a couple of questions:

    1. How did you setup the popup layer? I see they are all in the same one, so just wondering if you had a second to explain the process of setup.

    2. How do you get the "x" button to work? I do not see code in the Actions panel for that. Is there JS involved for the button?

     

    Thanks,

    Sam

    JoãoCésar17023019
    Community Expert
    JoãoCésar17023019Community Expert
    Community Expert
    March 23, 2023

    You're welcome!

     

    1. The popUps layer has a Movie Clip instance that is also called popUps. If you double-click this instance (on the top left corner of the stage), you'll see that it has six frames. The first one is empty for when there's no pop-up. The other frames have the following label names: person0, person1, person2, person3, and person4. These label names are the same names given to the buttons in the main timeline. So when the user clicks on person0, the popUps instance go to the label person0.

     

     

    2. The main code is in the first frame of the main timeline, in the js layer. 

    So for the close button to work, the code check if the current clicked instance is called "closeButton", as you can see on line 10. I like to follow this approach of checking for names sometimes instead of adding an individual click listener to not have to worry about adding and removing event listeners in different frames. But you can add an individual listener for the close button if you wish.

     

    Please let us know if the explanations clarified your doubts.

     

    Regards,

    JC

     

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices