Mouse Hover Skin Transparency Change

[splyntr]

How would I make a skin that changes from a partially transparent gradient to completely opaque on a mouse hover?

Attached is an image of how I would like the text to change (text on left is before hover, text on right is after hover). I'd also like it to revert back after the mouse leaves (but I figure that should be fairly simple.

[balala]

How would I make a skin that changes from a partially transparent gradient to completely opaque on a mouse hover?

Here is a quite simple solution. It uses a container (the [MeterContainer] Shape meter), which has set a gradient. If this meter is used as a container for the String meter ([MeterExampleText] in this case), the String meter is seen decoloring (maybe not the best term, but I hope you got it). When hovering the mouse over the String meter, it sets a completely opaque color for the container meter, setting both sides of the meter to the same color. Since the container is modified, you'll see the String meter with no gradient. When leaving the meter, the original gradient is re-established for the container meter and accordingly the String meter is shown again with the gradient.
Please let me know if this code does what you need.

Code: Select all

[MeterContainer]
Meter=Shape
X=0
Y=0
Shape=Rectangle 0,0,[MeterExampleText:W],[MeterExampleText:H] | Extend MyModifiers1
MyModifiers1=Fill LinearGradient MyFillGradient
MyFillGradient=180 | 0,0,0,255 ; 0.0 | 0,0,0,0 ; 1.0
DynamicVariables=1

[MeterExampleText]
Meter=STRING
X=0
Y=0
Padding=15,5,15,5
FontColor=220,220,220
FontEffectColor=0,0,0
StringEffect=Shadow
SolidColor=0,0,0,1
FontSize=48
FontFace=Segoe UI
StringStyle=BOLD
StringAlign=LEFT
AntiAlias=1
Text=Example text
Container=MeterContainer
MouseOverAction=[!SetOption MeterContainer MyFillGradient "180 | 0,0,0,255 ; 0.0 | 0,0,0,255 ; 1.0"][!UpdateMeter "MeterContainer"][!Redraw]
MouseLEaveAction=[!SetOption MeterContainer MyFillGradient "180 | 0,0,0,255 ; 0.0 | 0,0,0,0 ; 1.0"][!UpdateMeter "MeterContainer"][!Redraw]

[splyntr]

Oh, I see. Thank you so much, it worked like a charm! I had one more question if you don't mind. How would I adjust the "hitbox" of the skin? I spent some time fiddling with the padding (which seems to affect some of it) and whatnot, but I'm not completely certain on how you would define the hitbox accurately.

[balala]

I had one more question if you don't mind. How would I adjust the "hitbox" of the skin?

I don't mind at all. But am definitly not sure what you mean by "hitbox". What do you mean?

[splyntr]

Sorry, I should've been a bit clearer: I meant the area where the mouse commands apply—the region where hovering my mouse changes the opacity of the skin. Does that make sense?

[balala]

Sorry, I should've been a bit clearer: I meant the area where the mouse commands apply—the region where hovering my mouse changes the opacity of the skin. Does that make sense?

Definitely does. So far, you had to hover the mouse over the String meter itself ([MeterExampleText]), to get setting the opacity. There is no easy way to make it to react to a smaller surface on hovering the mouse over, however you can easily add a new meter, which is invisible and smaller and the mouse hovering action is set only on this one. See this:

Code: Select all

[MeterContainer]
Meter=Shape
X=0
Y=0
Shape=Rectangle 0,0,[MeterExampleText:W],[MeterExampleText:H] | Extend MyModifiers1
MyModifiers1=Fill LinearGradient MyFillGradient
MyFillGradient=180 | 0,0,0,255 ; 0.0 | 0,0,0,0 ; 1.0
DynamicVariables=1

[MeterHover]
Meter=Image
SolidColor=0,0,0,1
X=200
Y=0
W=250
H=120
MouseOverAction=[!SetOption MeterContainer MyFillGradient "180 | 0,0,0,255 ; 0.0 | 0,0,0,255 ; 1.0"][!UpdateMeter "MeterContainer"][!Redraw]
MouseLEaveAction=[!SetOption MeterContainer MyFillGradient "180 | 0,0,0,255 ; 0.0 | 0,0,0,0 ; 1.0"][!UpdateMeter "MeterContainer"][!Redraw]

[MeterExampleText]
Meter=STRING
X=0
Y=0
Padding=15,5,15,5
FontColor=220,220,220
FontEffectColor=0,0,0
StringEffect=Shadow
SolidColor=0,0,0,1
FontSize=48
FontFace=Segoe UI
StringStyle=BOLD
StringAlign=LEFT
AntiAlias=1
Text=Example text
Container=MeterContainer

Note the newly added [MeterHover] meter. I moved the MouseOverAction and MouseLeave action options here. This way the opacity setting will go on only when you1re hovering the mouse over this meter. See that since its color is set to SolidColor=0,0,0,1, it's practically invisible (having an opacity of 1 from 255 - last parameter), however it executes the appropriate mouse actions.
What is important here is the position (its X and Y options) and the size (the W and H options) of the new meter. You have to adjust them in order to get it right-sized and right-positioned. To check, I suggest you to temporary set its color for instance to SolidColor=255,0,0,150 (which is red, but obviously you can use any color you want). With this setting you can see the meter and can easily adjust its position and size. Just make sure to set its color back to SolidColor=0,0,0,1 when got it in position.

[splyntr]

I see, thank you so much, it works!

[balala]

I see, thank you so much, it works!