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?
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.
In fact you can use Javascript and GSAP directly in Storyline to change the color of a icon or shape as they are SVG. Only difficulty is getting it properly selected. Mocking up a sample showing how...
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.
9 Replies
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.
In fact you can use Javascript and GSAP directly in Storyline to change the color of a icon or shape as they are SVG. Only difficulty is getting it properly selected. Mocking up a sample showing how...
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.
Here you find a completely working sample on how to color SVG-icons in Storyline with Javascript.
https://community.articulate.com/discussions/building-better-courses/storyline-svg-icons
Hi Ned - The issue isn't really changing the color. The issue is adding a state to an icon.
Hi Math - I don't know how to code.
The hack I use when you find an ICON in Storyline (with many parts) is copy and paste it in Photoshop then save it as an image.
Thanks Richard.
Then its no SVG anymore and you loose the benefits of SVG