Faded Edges


#1

I’m trying to create a group of images where the images that are farthest from the center are more faded so I can make a row of images that the user can swipe left and right while they fade into view.

I’ve got an image the fades from opaque to transparent to opaque but I can’t figure out how to implement it the way I want.

Has anyone accomplished this?


#3

Hi @brathgeber,

As this is a request we have had a few times now (left and right slider), I have created an example project to help explain how this can be done.

Firstly, you can download the project here - Sliding Button Selector.zip (2.4 MB).

The project contains 5 buttons (planes) named from -2 to 2 in the Hierarchy (0 being the button starting in the middle). These planes have no functionality added to them, but material and color can be changed by simply editing the individual properties.

In my example, I want the planes to be interactive buttons (can be touched). This means that the ‘Touch Plane’ holding all the sliding inputs is positioned below the buttons so it does not interfere with the pointer down events. If for your project you would only like them to be images, you can position the ‘Touch Plane’ over the planes and change the opacity value to 0 so the instructions are not visible.

I have commented most of the work in the ‘Script’ node so should be understandable, but to summarise, the ‘Touch Plane’ works out the pointer move event which alters the positioning of the ‘Buttons’ group. There are then 2 trigger regions on either side. When a plane enters either trigger region, it is then positioned back at the start of the opposite side.

Hope this helps and please do feel free to use and edit this, to incorporate it in any projects you may have.

George


#4

Thanks for the reply George.

This is very close to what I’m looking to make. However I want my edges to fade into transparency whereas the example you provided has them fading into white.


#5

Hi @brathgeber,

I have just added a PNG image overlay on top. It could be done programmatically, but this was a quick way of doing it.

In theory, you can work out the position of each plane and change the transparency material based on this position value (that would take some work).

You could have a play around with the changing the material of the overlay and see if you can get it closer to what you are expecting?

George


#6

Hi George,

I am keen to try this project as it is something I have been struggling with, however the download is not working for me but is coming through as an Exec file. I am a Mac user; is this an issue?

cheers,

Paddy


#7

Hi @paddywardnz,

This was just a quick example to show how it could be done.

The file attached was created on a Windows machine but should work seamlessly on a Mac. It will be classed as a ZPP file which is the Studio file type, because of this, it should just drag into the symbol definitions panel within Studio. Once in the symbols definitions panel, it can then be dragged into the Hierarchy. You can also double click on the subsymbol and take a look at how it is set up.

Let me know if you have any questions regarding how it is created.

George