3 Replies Latest reply on Nov 16, 2012 5:21 PM by TimJaramillo

    animated buttons

    codewoe

      I am looking at Edge as a means to create multiple buttons with individual animated roleovers that loop and sit over the top of a complex graphic. The sort of thing I did all the time in flash. I would have thought this was a very basic function but there doesn't seem to be a simple way to allocate multiple functions to a graphic (role over, out and click). I assumed that I could use the over function to move the play head to a different label for each role over image and allocate that the click with the rolout sending it back to a its original position. Basic stuff.

      Is this a feature that is coming or do I have to work out how to hard code the script?

        • 1. Re: animated buttons
          TimJaramillo Level 4

          Hi codewoe,

           

          It is actually pretty straightforward to assign mouseover and mouseover animations to a button in Edge Animate. There are several ways to do this.

           

          If you're more comfortable with the built it events, and not so comfortable with JS, try this: convert your image to a symbol called "myButton".  Add "in" and "out" timeline labels inside that symbol (with animations at each label, and stop actions at the end of each anim). Then click the little curly braces next to your symbol. Add events for "mouseenter" and "mouseleave".

           

          Assumeing your button is on the root stage, on "mouseenter", put this code: sym.getSymbol("myButton").play("in");

           

          Assumeing your button is on the root stage, on "mouseleave", put this code: sym.getSymbol("myButton").play("out");

           

           

          You can accomplish the same thing through code (on Stage.compositionReady event). The following assumes you have converted your graphic to a symbol called "myButton", and there are "in" and "out" timeline labels inside that symbol (with stop actions at the end of each animation).

           

          sym.$("myButton").mouseenter(function(){

               sym.$("myButton").play("in");

          });

           

          sym.$("myButton").mouseleave(function(){

               sym.$("myButton").play("out");

          });

           

          sym.$("myButton").click(function(){

               alert("clicked");

          });

           

           

          Here are several examples on the forum, of mouseover and mouseout functionality:

           

          http://forums.adobe.com/message/4651399

          http://forums.adobe.com/message/4671381

          • 2. Re: animated buttons
            codewoe Level 1

            Hummm!

             

            Works but breaks the fluid grid layout I am using and it doesn't scale vertically.

            • 3. Re: animated buttons
              TimJaramillo Level 4

              Hi codewoe, the button rollover state shouldn't be related to the layout of your project. We can give you more constructive assistance if you post your files so we can see how your file is setup, etc.