States and Icons

Is there a way to add different states to an icon without ungrouping it? I have several icons on a slide. When the learner clicks each icon it takes them to a different layer. I want the icons to change color (states) when selected, without having to ungroup icons because sometimes there are as many as 8 or 9 pieces to the icon. Is there a better way?

9 Replies
Ned Whiteley

Hi Marti,

One option that may work for you is to create each of your new states as a copy of the original icon, right click on the icon in the new state, select Format Shape from the drop down menu and then select the new colour that you require for that state.

In the image below, I started with the top icon in black and then changed the colour of the two copies to red and blue using this method.

Math Notermans

Here you find a sample of how it works. Will add the Storyline too.
https://360.articulate.com/review/content/9b0a7923-81c7-4766-a28a-d6aeb0bfb0a0/review

The top icon is the class icon 1. If you click 'color icon' it will randomly change the color of the top icon.

Alas there are 2 different ways icons are used in Storyline. The 'class icon 1' on top is a single SVG element..and works thus fine. The 2 icons below are grouped SVG elements creating an icon. Inside the group each SVG is named 'Freeform 1' counting up to 'Freeform 5'.

Offcourse it can be tackled. You just need to be aware of the naming and take care of that in your coding. I didnot fix that here. Might make a reusable function for that.

Changing the input field where it says 'class icon 1' to 'Freeform 1' etc. etc. and you see that the individual parts of the second icon will colorize too.

Adding the Storyline for those interested.