Color Swap Images in Sparkle

The image below can have its color changed by hovering a mouse pointer over the various color boxes. If viewing on a touch screen device, the boxes can be tapped.

The effect can be easily set up, but it does need the preparation of the colour variants in an image editing app. In this example six variants of the same image were created, plus one monochrome image (the one that is displayed by default.

In sparkle, place your first image on the canvas and size as required. Go over to the Arrange Inspector and make a note of the image dimensions. Next, create your first popup as a Normal Popup and set its dimensions to be the same as the image on the canvas. Add your first color variant image to the popup. and size it to fit the popup. Now place the popup directly over the top of the canvas image so that it’s perfectly aligned. 

Once the first pop up is in place, hit Cmd+C to copy the popup. Hit Cmd+V to place the copied popup - it should be perfectly aligned on top of the canvas image automatically. Replace the image in the new popup. Now repeat the process for all other image variants, making sure to name each of your popups.

The next stage is to create the buttons - this example uses simple boxes converted to buttons. Set the on-click AND hover actions to open the respective popup. That’s all there is to it.