I’ve started with a simple prototype for a intensity button component which is also a slider. https://gbo2nx.axshare.com
so you can press on + and - or directly drag the filling.
This works really well and I’m happy with the functionality and can test it with users.
What I’m not happy with is the shape of the slider filling.
I want the grey box to be masked by a shape with rounded corners (like the white box in the background).
so the grey filling should have the rounded corners on the left side and right side when full and without rounded corners on the right side while moving it in the middle.
So masking should make it clear.
is there a way to mask a resizable shape with another shape?
One way to fake this with your current setup–in which you use images for the “white background” and “shadow”–is to add a corner radius to your “Slider” widget (the fill) to match the radius of your background images, and turn off corner visibility for the top-right and bottom-right. Then create a “Selected Style” that shows all four corners. When this widget reaches its full width, set it to selected, else set it to unselected–and use its Resized event to do this. This looks fine when dragging relatively quickly, but right at the rounded area on the right, when dragging slowly or using the buttons, you can notice it is still squared, so a little glitchy. But it is relatively quick and easy. See this approach on Page 2 of the updated file below.
Yes, you can create masks of a sort in Axure, but only with shapes, not with images. I show how to create this on Page 3 in the file below. Once you get the basic method down it can be created reasonably quickly and easily–but is still a fair bit of work and tweaking to get it right. In your prototype you have shadows behind your “white background” group area, which don’t work well with this mask approach, because the shadow would need to be masked out as well. The shape transformations in Axure are basic and don’t have the flexibility and options of a graphics app like Illustrator or Photoshop. I was able to figure out a way to get this shadow effect to work using only Axure, but you’ll be able to achieve better visuals (and likely easier and quicker) if you create a mask in a graphics app and save it out as a PNG–or maybe SVG–with transparency.
this was indeed my first approach after realizing masks are really static crap in Axure (I love Axure but this is a little poor).
Oh man that brought me to the most simple way. Creating a mask a you would do it by the good old paper so I created a masking graphic with the shadow outside and a hole in the middle.
Thank you so much. Sometimes it could be such easy.
In addition I added an input field for the number steps.
Attached now the final component to be tested.
so I created a masking graphic with the shadow outside and a hole in the middle.