7 Replies Latest reply on Jan 2, 2017 1:10 AM by Günter Heißenbüttel

    Rollover extending effect

    Landeros255 Level 1

      Hello,

       

      I am trying to make a button that looks like an arrow and extends on rollover. Of course you can fade a transition with an image to another on rollover but it looks like it is fading into that other image. So far I have the pngs inserted as a fill for a state button but I would like for it to look like one shape that is extending to the right but not scaling up when the mouse rolls over it. Kind of like if you had this object in Illustrator and took the three anchor points on the right and moved them further to the right so it looks like the shape is simply extending to the right. I am wondering if there is a widget I could get that does this or if I should make this in Animate and then put it into Muse and make it a button, but since I want it to happen with a state change I don't think making it in Animate would work.

       

      Arrows-01.png

      Arrows-02.png

        • 1. Re: Rollover extending effect
          Ussnorway Adobe Community Professional

          Landeros255 wrote:

           

          Hello,

           

          So far I have the pngs inserted as a fill for a state button but I would like for it to look like one shape that is extending to the right but not scaling up when the mouse rolls over it.

          I would use Illustrator to make the two blue arrows then full your state buttion with them as normal and rollover... vetors will give a much better result then png images

           

          p.s, after taking another look at your question perhaps you do want pngs... any way here is an example of both link

          1 person found this helpful
          • 2. Re: Rollover extending effect
            Pavel Homeriki Adobe Community Professional

            Here you are.

            Home

            1 person found this helpful
            • 3. Re: Rollover extending effect
              Günter Heißenbüttel Adobe Community Professional

              Pavel Homeriki at his best! Your first new year banger!

              I think, the states button ist the most underestimated element in Muse!

              • 4. Re: Rollover extending effect
                Pavel Homeriki Adobe Community Professional

                mac_heibu написал(а):

                I think, the states button ist the most underestimated element in Muse!

                That's for sure

                • 5. Re: Rollover extending effect
                  Landeros255 Level 1

                  Oh Wow! This is perfect!

                   

                  I am still a little confused as to how exactly you did this with the state button. I poked around the file a little bit and saw that you used text frames but am not sure how you did it. Or if you could explain how to edit what you did do so I could change the shape and color but keep the transition.

                   

                  Again, thank you so much!

                  • 6. Re: Rollover extending effect
                    Pavel Homeriki Adobe Community Professional

                    Landeros255 написал(а):

                     

                    Oh Wow! This is perfect!

                     

                    I am still a little confused as to how exactly you did this with the state button. I poked around the file a little bit and saw that you used text frames but am not sure how you did it.

                    It's too much to explain. I'm afraid I can not do it because of the language barrier. Nevertheless, I specifically did this file. Examine it carefully.

                    Landeros255 написал(а):

                     

                     

                    Or if you could explain how to edit what you did do so I could change the shape and color but keep the transition.

                     

                    Again, thank you so much!

                    You need to create your own images using colors and shapes you need. And to fill these images as a backgrounds for text frames.

                    • 7. Re: Rollover extending effect
                      Günter Heißenbüttel Adobe Community Professional

                      Some small hints:

                      • All objects within a states button inherit the state of the button. If you roll over the button for example, the objects change to rollover state too, even if not touched by the cursor.

                      • The specific states button here contains several objects, one placed over the other. (Make the button bigger and you can separate the elements more easy.)

                      • The text element has opacity: 0% in normal state and 100 % in rollover state.

                      The image containers are filled(!) with different arrow images (PNGs). These fills change there position from state to state:

                      normal state: Scale to fill; position: right/middle

                      rollover state: Scale to fill: position: left/middle

                      In addition there is a fade transition applied

                      Now you should be able to reproduce the mechanism.

                      1 person found this helpful