7 Replies Latest reply on Nov 9, 2009 1:37 PM by gabrielaVzla

    Collapsible menu


      I want to make a collapsible menu. I saw this under the Flex components. Is there anyway to insert these into Catalyst?

      Also, are there any good library downloads for Catalyst which might help with the collapsible menu?


      Otherwise a from scratch explanation would be great.


      Thanks in advance!

        • 1. Re: Collapsible menu
          Peter Flynn (Adobe) Adobe Employee

          I'm attaching a very simple example of how to do this in Catalyst.  Basically the way it works is:


          1. Top-level menu item is a Button component
          2. Popup menu is just a Data List component (this makes it easy to type in the list of items, control their spacing, etc.)
          3. Popup menu is initially hidden (eyeball turned off in the Layers panel)
          4. When the Button is clicked, it plays an Action Sequence that makes the popup menu appear (you could do this On Rollover instead to mimic the way some website menus work)
          5. When a menu item is selected ("On Change"), the menu popup plays an Action Sequence that hides itself
          6. When the mouse moves outside the menu popup, the popup also hides itself


          Hope that helps.  Let me know if you have any trouble opening the attachment.


          - Peter

          • 2. Re: Collapsible menu
            Peter Flynn (Adobe) Adobe Employee

            Trying attachment again...

            1 person found this helpful
            • 3. Re: Collapsible menu
              gabrielaVzla Level 1



              I'll check it out.

              • 4. Re: Collapsible menu

                Hi Peter Flynn,


                Sorry, I'm new to Adobe Catalyst.


                I've been trying to do the same thing with this collapsible menu.


                Can you elaborate on your steps 4, 5, and 6?


                Steps 4: How do you create an action sequence? and which action sequence is this for? (Sorry, I'm still really new to this).

                Steps 5: How do you create an action sequance that hides itself? Is it the "Fade"? In what "state"?


                I tried to download your popup menu, but it seems to be corrupted.

                Thanks for your help!




                • 5. Re: Collapsible menu
                  Peter Flynn (Adobe) Adobe Employee

                  Hi Barry,


                  Let me try that attachment one more time -- let me know if you can open this one.  It should help make this explanation clearer...


                  An Action Squence is just a series of actions that are executed in response to something your application's user does; for example, clicking a button can "play" or execute an Action Sequence.  Because you can choreograph the timing and animation of the series of actions, an Action Sequence is edited via the Timelines panel in Flash Catalyst.


                  To create the Action Sequence I discuss in step 4:

                  1. Select the Button
                  2. In the Interactions panel, click Add Interaction
                  3. Leave the first dropdown saying "On Click"
                  4. Change the second dropdown to "Play Action Sequence"
                  5. Click Ok
                  6. In the Timelines panel, you'll see that the Action Sequence you just created is selected (called "Button On Click").
                  7. Right now, the Action Sequence is blank -- it contains no actions yet.  To add an action, you first select the item you want the action to apply to, then click Add Action in Timelines to choose what type of action to apply.  So....
                  8. Select the invisible item representing your menu (since it's invisible, you'll have to select it via the Layers panel).
                  9. In Timelines, click Add Action > Fade ("Fade" is the action that changes an item's opacity or visibility)
                  10. Leave the "From" setting untouched ("---" essentially means "Auto": start the fade from whatever the item's current opacity is)
                  11. Set the "To" setting to 100 -- this will cause your menu to become fully visible.


                  Steps 5 and 6 are just variations on that same process, with a different Interaction triggering a different Action Sequence.  Hiding the popup just involves a Fade action that goes from "---" to 0 instead of to 100 (hiding instead of showing, in other words).


                  Hope that makes sense!


                  - Peter

                  • 6. Re: Collapsible menu
                    Salsa_Baller Level 1

                    Hi Peter,


                    Thanks for your help. But unfortunately your attachment still doesn't work. =( It's a zip file correct?


                    I'm really interested to see how you implemented this pop-menu.


                    I still have some additional questions (if that's ok! =) )


                    I think I have the popup almost done, but how do you make it so that when I click on my button, the menu will popup and NOT fade out after x seconds?


                    The only time I want it to fade back out is when I select something from my pop-up menu (data list).


                    So far I've been able to make it appear, but not without the fading-out.


                    Thanks for your help Peter! I'm almost there! =)




                    • 7. Re: Collapsible menu
                      gabrielaVzla Level 1

                      have you tried opening it on a mac?


                      just curious, because i got the same error on the pc, but not on my mac.


                      here´s a link to the unzipped file. maybe it will work for you.




                      good for 7 days..