8 Replies Latest reply on Apr 24, 2014 12:04 PM by ksv000

    Simple: how to rotate a symbol onclick?

    pixelwrangler Level 1

      Well, my old Flash and AS skills seem to be pretty useless with Animate. Every resource online I have looked at goes on and on about making things jump around as the Timeline runs. That's not what I need to do.

       

      All I really need to know is how to use an onclick event to make something else on the stage move in a precise way.

       

      I have a symbol I'll call "wheel".  I have another symbol I'll call "button"

       

      When the user clicks on "button," I want "wheel" to rotate 45° around its axis. I can't find a listing of Edge code syntax anywhere.

       

      I opened the Action panel for "button". Not much help in that right hand menu.

       

       

      sym.$("wheel")  addresses the symbol I need - but then what? I could address this with CSS/JS, but surely there's a SIMPLE way to do this with Edge??? Or should I go back to Flash and use the HTML stage feature?

       

      If it wasn't for the ubiquity of iOS devices, I wouldn't have had to abandon Flash development. But both Flash CC/HTML and Edge are looking pretty clunky as real tools for cross-platform animation as compared with just doing all the scripting by hand...

       

      Am I missing something really obvious?

        • 1. Re: Simple: how to rotate a symbol onclick?
          resdesign Adobe Community Professional & MVP

          you can put the code in compositionReady and it could look like this:

           

          var i=0

          sym.$('button').click(function(){

                    i+=30;

                    sym.$('wheel').css('transform', 'rotate('+i+'deg)');

                    sym.$('wheel').css('-ms-transform','rotate('+i+'deg)'); /* IE 9 */

                    sym.$('wheel').css('-webkit-transform','rotate('+i+'deg)'); /* Safari and Chrome */

           

           

          });

           

          sample here:

          https://app.box.com/s/48bmkcj045s6q6rfz77y

          1 person found this helpful
          • 2. Re: Simple: how to rotate a symbol onclick?
            pixelwrangler Level 1

            Thanks, that was what I had in mind ... but ... if I'm going to have to hand code all of that stuff (all of my Symbols are imported graphics, so I don't care at all about drawing things with HTML5/CSS), what's the sense of bothering with Edge at all? To serve as a compositionReady "container" for hand-coded animation?

             

            Edge seems pretty limited as a production tool if it won't give me access to simple animation snippets (such as there are in the Flash CC HTML tools...) AND won't even address the cross-browser problems with any kind of "automation." I just don't see the point...

             

            I think the transition away from Flash (which is entirely NOT Adobe's fault) is still awaiting something that could be really useful in creating cross-browser animation. Actionscript has no professional successor, at least that I can see.

            • 3. Re: Simple: how to rotate a symbol onclick?
              ksv000 Level 1

              hello,

              thank you redesign for the tips for a similar question i had. i modified the code to click every 90 degrees when i click on text i have set at those points (right, left, upright). however, i'm finding that i need the clicking of the text to correspond with the exact position of the dial. for example if i keeping click left, it keeps going every 90 degrees. i need to be able to jump from north to west, etc and have the dial land there.

              thanks for your help.

               

              var i=0

              sym.$('Left').click(function(){

                        i+=90;

                        sym.$('spin_dial').css('transform', 'rotate('+i+'deg)');

                        sym.$('spin_dial').css('-ms-transform','rotate('+i+'deg)'); /* IE 9 */

                        sym.$('spin_dial').css('-webkit-transform','rotate('+i+'deg)'); /* Safari and Chrome */

               

               

              });

               

               

              var i=0

              sym.$('Right').click(function(){

                        i+=180;

                        sym.$('spin_dial').css('transform', 'rotate('+i+'deg)');

                        sym.$('spin_dial').css('-ms-transform','rotate('+i+'deg)'); /* IE 9 */

                        sym.$('spin_dial').css('-webkit-transform','rotate('+i+'deg)'); /* Safari and Chrome */

               

               

              });

               

              var i=0

              sym.$('Upright').click(function(){

                        i+=90;

                        sym.$('spin_dial').css('transform', 'rotate('+i+'deg)');

                        sym.$('spin_dial').css('-ms-transform','rotate('+i+'deg)'); /* IE 9 */

                        sym.$('spin_dial').css('-webkit-transform','rotate('+i+'deg)'); /* Safari and Chrome */

               

               

              });

              • 4. Re: Simple: how to rotate a symbol onclick?
                resdesign Adobe Community Professional & MVP

                On top of my head, seems like you should use minus instead of plus to go in the other direction.

                can you send me a link to your files?

                1 person found this helpful
                • 5. Re: Simple: how to rotate a symbol onclick?
                  ksv000 Level 1

                  hi redesign,

                  thanks for your rapid reply.

                  instead of relying on just a turn on # of degrees command,  i want the clicking of the text around the dial to move it to those specific points.

                  kim

                   

                  https://www.dropbox.com/s/hr5uptvhphpxru8/sts.an

                  • 7. Re: Simple: how to rotate a symbol onclick?
                    resdesign Adobe Community Professional & MVP

                    You made the mistake of having i=0; several time in your code. Please change you code in composition ready to:

                     

                    var i=0

                    sym.$('Left').click(function(){

                              i+=90;

                              sym.$('spin_dial').css('transform', 'rotate('+i+'deg)');

                              sym.$('spin_dial').css('-ms-transform','rotate('+i+'deg)'); /* IE 9 */

                              sym.$('spin_dial').css('-webkit-transform','rotate('+i+'deg)'); /* Safari and Chrome */

                     

                     

                    });

                     

                     

                     

                     

                    sym.$('Right').click(function(){

                              i+=180;

                              sym.$('spin_dial').css('transform', 'rotate('+i+'deg)');

                              sym.$('spin_dial').css('-ms-transform','rotate('+i+'deg)'); /* IE 9 */

                              sym.$('spin_dial').css('-webkit-transform','rotate('+i+'deg)'); /* Safari and Chrome */

                     

                     

                    });

                     

                     

                     

                     

                    sym.$('Upright').click(function(){

                              i-=90;

                              sym.$('spin_dial').css('transform', 'rotate('+i+'deg)');

                              sym.$('spin_dial').css('-ms-transform','rotate('+i+'deg)'); /* IE 9 */

                              sym.$('spin_dial').css('-webkit-transform','rotate('+i+'deg)'); /* Safari and Chrome */

                     

                     

                    });

                     

                     

                    sym.$('downright').click(function(){

                              i-=180;

                              sym.$('spin_dial').css('transform', 'rotate('+i+'deg)');

                              sym.$('spin_dial').css('-ms-transform','rotate('+i+'deg)'); /* IE 9 */

                              sym.$('spin_dial').css('-webkit-transform','rotate('+i+'deg)'); /* Safari and Chrome */

                     

                     

                    });

                    • 8. Re: Simple: how to rotate a symbol onclick?
                      ksv000 Level 1

                      i think i'm approaching it in a different way for now. thanks for your extra eyes!

                      kim