Creating a mask onto an image

Oct 25, 2019

Hi all,


I'm currently working on a course that would require students to click on large areas of the image and having that region of the image highlight after they click it. The problem is, I don't want the students to see the highlighted region before the click the image, only after. Is there any way to do this? I am very new to Articulate, apologies.


Best wishes

1 Reply
Ned Whiteley

Hi Veronica,

The attached example shows a very simple way to mask an image and highlight regions after the user clicks on them. In this case I have just used rectangular masks, which is what makes it easy to set up within Storyline. It would also be possible to use the same principle with more complex shapes, but you would probably have to create those in another program, such as Photoshop or possibly PowerPoint.

The masks have been set up with a 15% transparency and no outline, which is why you can see a dim view of the underlying image. If you don't want to see anything before the user clicks, all you need to do is to make the transparency 0% and perhaps add a coloured outline so that the user can see the different areas that they have to click on.

When you click on one of the masks, it's state is changed from Normal to Hidden and so that portion of the image now becomes visible.

I hope this provides some ideas for you to work on. If you have any further queries, just post them here.

This discussion is closed. You can start a new discussion or contact Articulate Support.