Rollover extending effect

[Landeros255]

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.

[Ussnorway]

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

[Pavel_Homeriki · Accepted solution]

Here you are.

Home

[Günter Heißenbüttel]

mshom at his best! Your first new year banger!

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

[Pavel_Homeriki]

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

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

That's for sure

[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. 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!

[Pavel_Homeriki]

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.

[Günter Heißenbüttel]

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.