Menu Built From Buttons?

I want to create a scrolling item menu similar to the bottom row shown here:

I need to mask (clip) the extents of the menu from being visible (a gradient is used here, but worst case the clipping could be a hard edge). Looking through forum posts, the only way I've seen this done is by using a Source-In blend mode effect on the item/s to be masked. As a test, I was able to create this by applying the effect to a text object and it works.

However, I want to build the menu using a set of buttons but apparently effects can't be applied to buttons or families. If I apply the Source-In effect to an entire layer, all layers beneath don't get rendered (or at least everything turns black).

How can I build the above menu using buttons and clip the visible width of the menu to the dimension I need?

Thanks in advance.

As of right now, buttons will always be above everything else. What you can do is to use custom sprite buttons, is there a reason you are using the regular buttons? If you really really want to use the regular buttons, you could maybe pin a sprite to them and set the css opacity of the buttons to 0.000000001, so you still use the regular button object for all the logic, but you can get the visual effect you want. But at that point you might aswell drop the buttons entirely and just use sprites. In the current state, what you intend is not possible. iirc. there was a mention in a blogpost about this and that it might change in the future. (but I might be mistaken about that)

WackyToaster

Thanks for responding. That's a very creative idea.

Generally, I'm using buttons instead of sprites because I have a bunch of symbol art I'm implementing using custom fonts. Using the buttons/fonts I can apply any symbol at any size, recolor, etc instead of having to generate a separate sprite for each symbol. (I also like the benefit of CSS styling applied to buttons, but see another recent post I made where text-shadow CSS is failing in Construct's export for some reason. Arg.)

In any event, another route might be to use separate text objects instead of buttons, but the issue still remains: how do I mask (clip) the display of a set of objects? A single object works fine using the Source-In blend mode, but for a group of objects?

[quote:2278jzx7]In any event, another route might be to use separate text objects instead of buttons, but the issue still remains: how do I mask (clip) the display of a set of objects? A single object works fine using the Source-In blend mode, but for a group of objects?

I rarely used these blend modes so I can´t really tell. But food for thought, you could also just use a png with a gradient to transparent for very simple masking. No effects needed.

WackyToaster

I would be fully happy using a PNG to mask the menu items. How is this accomplished? As I mentioned, the only way I've seen it implemented is using a blend mode (along with a gradient PNG).

You just put the png above the buttons (z-order) so the buttons go behind the png, that still won't work with the button object tho. The png just has to look like the background it is on or be created to look like a menu.