States on icon imports in SL360

Oct 23, 2017

I'm wondering why I can't add an initial state to an icon I've imported from the content library in SL 360. Is it not possible to add states to icons?

Thanks :)

24 Replies
Wendy Farmer

Hi Jenny

I've just tried and it seems to be working for me.  I downloaded and inserted the question mark, added a visited state and then I can select Normal, Visited or Hidden from the Initial state dropdown.  Is this what you meant or are you trying to trigger a state on timeline start?

Happy to take a look if you want to share the slide.


Bill McKee

Wendy, thanks for you response. I have had a modicum of success doing it this way. If I create the shapes then color, group and save as a separate picture for each "state" this will work. What I was doing is creating and grouping the shapes in PowerPoint with color of the "normal" state then copy and paste into Storyline which brings it in as a picture. I then wanted to "recolor" with a different variation but this doesn't work in all cases.

Bill McKee

Alyssa - Sure. I have attached a file (primaryShapes.png) that I used in this peek video. You will see that this group of shapes take on the color from the "Light Variation" colors but does not take on the colors from the "More Variations" color palette. Selecting yellow turns them a burnt orange while selecting green turns them black.

The "target", which came from the content library does take on the green most likely because it is seen as a drawing and not a picture although I cannot figure out how that symbol is recognized as a single freeform shape in the timeline as it certainly could not have been created that way. As separate issue but what got me started down this path.

Bill McKee

Wendy -

This method does and can work well. The obstacle I was trying to overcome was that I was using the "Serenity" Template which uses numerous icons in its "tabs", "buttons" and other "hot spots". Example: the "Media Interaction" page has four icons, each with two or three states (Normal/Hover/Selected), Unless the existing icon fits the idea of the title of the tab one must create separate pictures for each state. That is at least eight images for that one slide. Again, I can do that, but not as productive. 

I just wish I knew how "they" created or converted some of icons into a single freeform shape - take a peek at these two different examples

Kelli Bray

Hi Wendy, I have two icons that I have downloaded from the content library 360. I am trying to change the color of the icon for visited and hover states - I have ungrouped and saved as a picture but now when I change the color of the icon for the two states the background is no longer transparent. Could you help? 

Bill McKee

Kelli - I had similar issues in dealing with certain icons from the library as well but was eventually able to work around it. Take a look at (i.e. Preview) slide 1.2 of the attached Storyline_-_icon_Example.story and see if does what you're looking to do?  I used the following technique to solve my similar issue:

  1. Enlarge icon and color icons, one for each state (as shown on slide 1.3 & 1.4) - if you don't enlarge them when you import them they don't look good.
  2. Right click on each icon and export as picture
  3. Insert the Normal state picture; reduce size to match desired size of icon. 
  4. Select the newly added icon/picture and add a new state (ex: hover).
  5. Under Format tab, Replace Picture with exported picture you created in step 2 for that state.
  6. Add the appropriate triggers for your desired interaction.

If it does the trick great, although I am very interested in hearing back from Alyssa .     

Melanie Sobie

Another method is to insert a shape on your slide. Edit to make the fill color 100% transparent, and no outline. Then edit the state of this shape. There, insert the icon into the normal state of this shape and adjust it to the size you need. Tip: For icons made up of multiple pieces, lock the aspect ratio within the size and position options before resizing. Make it the icon color you want the normal state to be. Create additional states for this shape and copy and paste the icon into those states and change their color. 

Leslie McKerchie

Hey Kelli,

It looks like we've missed your question a couple of times. I apologize for that, but each response moves a conversation down in the queue.

Some icons are actually grouped images/shapes to create the icon and that can create an issue when needing states for the icons.

As Bill shared, it's an easy fix if you save the icon as a picture and my process may be a couple of steps less, but I'll let you decide what works best for you.

Here is my process.

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