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

    Dynamic menu

    Ziperno

      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 = {

           

          default:function(){

           

          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 :

           

          Symbol>Click

           

          symbols.default();

          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

           

          Zaxist

          • 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:

            https://docs.google.com/file/d/0B56GrUTDt-edN29pNWhsRU55TnM/edit?usp=sharing
            I would also like that the squares were opened and shut like this:

            https://docs.google.com/file/d/0B56GrUTDt-edZFVfRUU4OTdlT0k/edit?usp=sharing
            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

               

              Zaxist

              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

                 

                Zaxist

                • 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:

                   

                  https://docs.google.com/file/d/0B56GrUTDt-edTTZDNTdYc19XcGc/edit?usp=sharing

                   

                  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

                         

                        Zaxist

                        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

                           

                          Zaxist

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

                            • 12. Re: Dynamic menu
                              Zaxist Level 4

                              you're welcome

                               

                              if you like the Menu, mark my answer as Correct

                               

                              Zaxist

                              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

                                     

                                    Zaxist

                                    • 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

                                         

                                        Zaxist