17 Replies Latest reply on Jun 8, 2013 9:38 AM by Zaxist

    Dynamic menu


      Hi everybody!

      how can i tell a symbol to close when i click on another symbol? In other words exactly like this: http://www.pirelli.com/corporate/it/default.html

      Thanx in advance!

        • 1. Re: Dynamic menu
          Zaxist Level 4

          this is very easy


          you should use a function to reset all symbols and then call it at first line in your click button then rest of your codes


          for example i have 5 symbols and my closed symbol have x = 14px and y=20 px and after click change to x = 50px and y = 100px and others should back to default


          in Stage>compositionReady


          symbols = {




          sym.$("symbol_1").animate({"width":"14px", "height":"20px"});

          sym.$("symbol_2").animate({"width":"14px", "height":"20px"});

          sym.$("symbol_3").animate({"width":"14px", "height":"20px"});

          sym.$("symbol_4").animate({"width":"14px", "height":"20px"});

          sym.$("symbol_5").animate({"width":"14px", "height":"20px"});





          then in the click event of my symbol i would write :





          sym.$("symbol_1").animate({"width":"50px", "height":"100px"});




          just this

          and write for other symbols like this one and after you click on another symbol the others will close



          • 2. Re: Dynamic menu
            Ziperno Level 1

            you are very kind and helpful, infinite thanks for the attention that you gave me, I tried to follow step by step your advice but I have certainly done something wrong, this is the result:

            I would also like that the squares were opened and shut like this:

            again thank you very much for your time!

            • 3. Re: Dynamic menu
              Zaxist Level 4

              your Symbols default values are : width : 101px and height 99px

              and you just used my codes so first of all you should change width : 14px and height : 20 px with your defalut value that you want be !!


              second wrong you did is your symbols name will start with Capital S and in my example is small s and you should change that too !!


              and 3rd wrong you did


              you did my codes step by step and they are rights but you didnt change the value with your value that you want

              in click action for each symbols you didnt change the value with the value you wanted to be


              i think the valu you wanted to be is width : 240px and height :240px


              and that line in your click action of your symbols should be :


              sym.$("Symbol_1").animate({"width":"240px", "height":"240px"}, 500); // i added 500 value to your animation that makes your animation animate smooth in 500 milisec and you can change it to whatever value you want


              Note: also if you wanted to use this number to make your animate smooth don forget to add this number to your defalut function and the others symbols


              if you had any problem just let me know



              1 person found this helpful
              • 4. Re: Dynamic menu
                Zaxist Level 4

                And One more Important thing that i forgot to say is:


                if you do what i said carefully aftre first run to test your project you suddenly think that your project dosent work !!


                so you are wrong your project works perfect but here is your design problem, so you should do these below steps to see your project is working great as you expect


                First : go to each symbols in Stage and remove the rectangle that you made inside them


                Second : add this code to coposition ready to make your symbol visible after run :


                sym.$(".Style").css({"background-color":"red"}) // We add Class with name Style that make every Symbols that have this class have background with red color



                3rd : then you should add Style class to your symbols


                to add class click on your symbol then on the left panel front of title you can see a C letter click on it and a box would show, write on that box Style and hit the enter


                Do this for each Symbols



                • 5. Re: Dynamic menu
                  Ziperno Level 1

                  You must forgive me but I have not explained very well because the animation of the square involves the clipping function and not the size, in this example you can understand it better:




                  just missing the function that resizes the clip of the square when you click on another square, excuse me again it was my fault and thanks again for your patience and kindness, in the end I hope to post the finished project in order to help other users

                  • 6. Re: Dynamic menu
                    Zaxist Level 4

                    the project that you uploaded have problem with html file, can you reupload it again ?

                    • 7. Re: Dynamic menu
                      Ziperno Level 1
                      • 9. Re: Dynamic menu
                        Zaxist Level 4

                        well, i decided to create the menu for you


                        here is the Link to the complete project : http://www.mediafire.com/?tlu3k9nix92zdfe


                        i made this project by the steps i told you in the past posts but its little complicated.


                        so if you had any problem let me know to hepl you



                        1 person found this helpful
                        • 10. Re: Dynamic menu
                          Zaxist Level 4

                          i updated the menu to have better look animating and open and close menu at the same time...


                          also added some note from symbol_1 to symbol_4



                          Link to updated Menu : http://www.mediafire.com/?ckn7i2jal332grv



                          1 person found this helpful
                          • 11. Re: Dynamic menu
                            Ziperno Level 1

                            I got no word to thank you enough, you're some kind of saint! THANKS THANKS

                            • 12. Re: Dynamic menu
                              Zaxist Level 4

                              you're welcome


                              if you like the Menu, mark my answer as Correct



                              1 person found this helpful
                              • 13. Re: Dynamic menu
                                Ziperno Level 1

                                Done, more thanks!

                                • 14. Re: Dynamic menu
                                  Ziperno Level 1

                                  So sorry for bother you but maybe i have found a simpler solution but almost miss a step look at that:http://www.framefarm.net/eugenio/menu_updated_2.rar


                                  I searched the forum and tried similar cases solutions but the solutions found did not fit this case, practically i miss the code for that: if I click on Simbol_1 (To play the animation) and Simbol_2 has reached a certain point in his timeline then Simbol_2 reverse but if Simbol_2 was at the beginning of his timeline then it will remains at the beginning of his timeline


                                  Thx in advance!

                                  • 15. Re: Dynamic menu
                                    Zaxist Level 4

                                    there is not a simpler solution for the type of menu you want, the only way to create that menu is to create it with animate() function, and coding, you cant create this by time line, if we think this way is possible, this would have a very long timeline and very very complex coding in side that time line


                                    the menu i designed for you is very simple and have very simple coding, ask me where ever you cant do changing, i will explain you and help you to make it work for your own use..


                                    i know you think may be if you using Clipping tool you can create what you want very easy, but this is not true.. you cant create your menu with that flexibility with clipping...


                                    ask me where ever you have question, i will help you



                                    • 16. Re: Dynamic menu
                                      Ziperno Level 1

                                      I would not take advantage of you, anyway thanks for your kindness! Returning to the menu, only a few things:

                                      1: When you preview it in the browser and click on a square to open it, something like a little resizing appens in the left side of the square called "team" (i tried to mess around with the code in vain)

                                      2 Repeatedly open and close the square called "plus" and you will notice a little movement up and down of it

                                      3 Same thing seems to appens when you click on "clienti", there is a little shift left and right in the big rectangle that comes out


                                      4 I wish that when you click on "clienti" the box does not disappear suddenly but dissolvein or out while the respective rectangle opens or close, like I was did here:http://www.framefarm.net/eugenio/menuomniapart/menuomniapart.html
                                      If it were possible I would also like to set the type of easing of the animations but if it is more complicated never mind


                                      thanx a lot!

                                      • 17. Re: Dynamic menu
                                        Zaxist Level 4

                                        i can fix them for you too, but the fact that in the menu you can see problem like this is that your pictures are not clean and sync in size !!


                                        you know if you check your pictures, squares of all the pictures doesnt have same size, if you can clean your picture then i made it for you with clean pictures it would be great...


                                        if not, i can tell you the code that can fix these movements