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.
Thanks for the reply. It seems that the icon I was using (camera) was made up of two shapes and grouped. If I select each shape, I can use the states function, but not the grouped selection. All good.
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.
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.
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
absolutely agree it can be monotonous to update the icons (depending on how they are built) with custom colours for states and you're right using the recolour option variations is less than suitable in most cases. All the best with your project.
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?
Kelli - did you save the picture as JPG or PNG? JPGs do not support transparent backgrounds. If your image has a transparent background and you save it as a PNG, that should work. Unless you already tried that.
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:
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.
Right click on each icon and export as picture
Insert the Normal state picture; reduce size to match desired size of icon.
Select the newly added icon/picture and add a new state (ex: hover).
Under Format tab, Replace Picture with exported picture you created in step 2 for that state.
Add the appropriate triggers for your desired interaction.
If it does the trick great, although I am very interested in hearing back from Alyssa .
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.
Kelli - you might try Melanie's approach as well. I tried it out and may like it better as it seems to be a bit quicker and you don't have to make separate pictures of an already created icon. Thanks for the helpful tip Melanie!
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.
24 Replies
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.
Hi Wendy
Thanks for the reply. It seems that the icon I was using (camera) was made up of two shapes and grouped. If I select each shape, I can use the states function, but not the grouped selection. All good.
Ah ok...you could save the group as a picture then add states if you wanted.
That's exactly what I did :) Thanks!
Thank you!
If I do this, depending on the icon, I do not seem to have the ability to choose the color I want
Hi Bill
you need to ungroup the objects format the shape colour and shape outline regroup then save as a picture
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.
Hi there Bill!
Are you able to share the image file with us? If so, we'll insert it into Storyline and try and recolor it on our side.
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.
Hi Bill
here is a quick peek to show how I change colours for icons downloaded from the content library
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
Hi Bill
absolutely agree it can be monotonous to update the icons (depending on how they are built) with custom colours for states and you're right using the recolour option variations is less than suitable in most cases. All the best with your project.
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?
Kelli - did you save the picture as JPG or PNG? JPGs do not support transparent backgrounds. If your image has a transparent background and you save it as a PNG, that should work. Unless you already tried that.
Hi Bill- I am saving them as a PNG file, thank you though!
Hi Kelli,
Would you be willing to share a sample slide of your file so we can take a closer look?
Since this is a public discussion, you can import one slide into a new file, then remove all proprietary content.
We'll be standing by!
Alyssa,
attached is the sample file.
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:
If it does the trick great, although I am very interested in hearing back from Alyssa .
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.
Yay! Thanks Bill, that worked.
@Alyssa, is there a shortcut to this process?
Kelli - you might try Melanie's approach as well. I tried it out and may like it better as it seems to be a bit quicker and you don't have to make separate pictures of an already created icon. Thanks for the helpful tip Melanie!
Hi Alyssa, I'm curious if you have a shortcut to this process?
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.