9 Replies Latest reply on Nov 27, 2012 8:26 AM by joel_pau

    Scale Button on Mouse Event

    Bobby Bol Level 1

      Hi Everybody,

       

      So I've been playing around with Edge a lot lately but there's just this one thing I haven't been able to figure out.

       

      I want a button to shrink in size when somebody clicks it.

       

      I have animated this in the timeline in the following example: http://www.innua.ca/buttontest

       

      You see that on mouseover the opacity of the border changes from 20% to 80%, this is done with the following code:

       

      //mouseover

      sym.getSymbol("butt1").$("butt1_outline").css ("opacity", .8);

       

      //mouseout

      sym.getSymbol("butt1").$("butt1_outline").css ("opacity", .2);

       

      Now when you click it you see the button shrink in size. Works perfectly; only I've done this manually in the timeline, while what I'm looking for is the code to do so.

       

      Preferably I'd like to use transform: scaleX and scaleY, and always shrink the button towards the center.

       

      Anyone can help me out with this? Thanks a bunch!

        • 1. Re: Scale Button on Mouse Event
          resdesign Adobe Community Professional & MVP

          Try this:

           

          sym.$("Rectangle").css("width", 300);

          sym.$("Rectangle").css("height", 100);

          sym.$("Rectangle").mouseover(function(){

          sym.$("Rectangle").css("-moz-transition", "width 2s");

          sym.$("Rectangle").css("width",10);

          });

          sym.$("Rectangle").mouseout(function(){

          sym.$("Rectangle").css("-moz-transition", "width 2s");

          sym.$("Rectangle").css("width",300);

          });

          • 2. Re: Scale Button on Mouse Event
            joel_pau Level 5

            Here is another solution.

             

            Action click:

            $(sym.lookupSelector("Rectangle")).css({

                        "transform":"scaleX(0.8) scaleY(0.8)",

                        "-ms-transform":"scaleX(0.8) scaleY(0.8)", /* IE 9 & 10 */

                        "-moz-transform":"scaleX(0.8) scaleY(0.8)", /* Firefox */

                        "-webkit-transform":"scaleX(0.8) scaleY(0.8)", /* Safari and Chrome */

                        "-o-transform":"scaleX(0.8) scaleY(0.8)" /* Opera */

            });

             

            Well, you can replace $(sym.lookupSelector("Rectangle")) by $(e.target). It works.

            • 3. Re: Scale Button on Mouse Event
              resdesign Adobe Community Professional & MVP

              Here is a link to the sample file:

              https://www.box.com/s/a5swakbxbq49q3qtcjse

              • 4. Re: Scale Button on Mouse Event
                resdesign Adobe Community Professional & MVP

                Probably your example is better, Joel - of course in my example i just shrin the width but height can also be shrunk. Just an example.

                • 5. Re: Scale Button on Mouse Event
                  Bobby Bol Level 1

                  Owwww I was soooo close!

                   

                  Thanks so much for this joel_pau, I just had to glance at it to see that this was what I was looking for.

                  Just added this to the test file and it works beautifully.

                   

                  Thanks again!

                  • 6. Re: Scale Button on Mouse Event
                    Bobby Bol Level 1

                    Thanks anyway for your answer!

                    Joel's solution works better in my case because I was really looking for the scaleX and scaleY functionality, but your help is much appreciated.

                    • 7. Re: Scale Button on Mouse Event
                      resdesign Adobe Community Professional & MVP

                      Makes sense!

                      Good luck on your project!

                      • 8. Re: Scale Button on Mouse Event
                        Bobby Bol Level 1

                        Hi joel_pau, now that I've tried this I have two more questions:

                         

                        • You say you can replace $(sym.lookupSelector("Rectangle")) by $(e.target).

                        But when I do that the whole scaling action goes pearshaped. How does e.target work? It would be great to have a code that refers directly to the symbol it's working on since I plan to have many of these buttons, and then I wouldn't have to change the symbol name anymore but just copy-paste the code into the mousedown action for every individual element.

                         

                        • Is it really necessary to add the transform actions for all of the different browsers in Edge? Doesn't Edge translate the code from transform into -ms-transform, -moz-transform, etc. when it publishes?

                         

                        Cheers!

                        • 9. Re: Scale Button on Mouse Event
                          joel_pau Level 5

                          1) About id and selector.

                           

                          jQuery code: $(#oneId").css();

                           

                          sym.lookupSelector("Rectangle") returns: "#Stage_Rectangle". jQuery requires that.

                          Therefore: .css() function works fine.

                           

                          e.target returns rectangle div. You can write: console.log("e.target = ", e.target);

                          e.target.id returns: "Stage_Rectangle". Note that "#" is missing.

                          So: $("#"+e.target.id).css(); works fine.

                          Edge Animate UI and e.target:

                          eTarget.jpg

                           

                          2) css property: transform.

                          Edge Animate doesn't "translate" code as modernizr.

                           

                          File attached.

                          1 person found this helpful