We are having problems with our icon sets, which are drawings on top of alpha channel in png files. We are finding that the only clickable parts of the icons are the actual drawings (which are quite tricky to click on exactly). We would prefer if the rectangle of the png area was the clickable area. It seems that when we preview in SL it looks like all is ok, but depending upon browser it will either load the flash or html 5 version, and it's the html5 version which is causing issues. Please see attached for an example zip.
If the colors are right, and you are lucky, you may be able to put a color on the icons, and use SL's Set transparent color. Just a wild guess, as I haven't tested it yet.
What I do know that will work is a rectangle over the icon. Fill it, and set its transparency to 100%, and it will catch the click. If it is set to No Fill, it will not.
Hi, Will -- I think Walt's idea could work nicely for what you have described, but if you still need additional assistance, please say the word and we'll see what more may do the trick!
One trick I've used numerous times is to add a fill layer to the image with any color and set the layer to 1% opacity. It's transparent to the human eye, but the 1% opacity makes the image work as if it were completely filled (which technically it is...).
I think the approach that Walt suggests is the one we were going to adopt, but it does add a bit of extra complexity. These will be used primarily for an icon set that will become part of our reusable template, but also for icons which wil be used in specific activities, and the approach does add an extra layer. I don't yet know of a way to simplify or lock-off standardised layers of an interaction as in a template.
So with this in mind Bob's suggestion sounds very promising and we'll give it a test. Along with Walt's suggestion it means that we don't need to create a whole new varients of our icons with different bg colours, and we can reposition them freely, and it cuts down on the number of layers.
Thanks for the update on solutions for this. I'm a new user and found old and new posts alike very useful as I'm making my way through SL3. Just ran across this and it cured a headache!
Glad you found a cure here, Neal – and welcome to the Articulate family! 😊
Since you mentioned you just started using Storyline 3, I wanted to share its User Guide. It'll help give you a solid foundation for using all the nifty features it has to offer!
9 Replies
If the colors are right, and you are lucky, you may be able to put a color on the icons, and use SL's Set transparent color. Just a wild guess, as I haven't tested it yet.
What I do know that will work is a rectangle over the icon. Fill it, and set its transparency to 100%, and it will catch the click. If it is set to No Fill, it will not.
Hi, Will -- I think Walt's idea could work nicely for what you have described, but if you still need additional assistance, please say the word and we'll see what more may do the trick!
One trick I've used numerous times is to add a fill layer to the image with any color and set the layer to 1% opacity. It's transparent to the human eye, but the 1% opacity makes the image work as if it were completely filled (which technically it is...).
Thanks All,
I think the approach that Walt suggests is the one we were going to adopt, but it does add a bit of extra complexity. These will be used primarily for an icon set that will become part of our reusable template, but also for icons which wil be used in specific activities, and the approach does add an extra layer. I don't yet know of a way to simplify or lock-off standardised layers of an interaction as in a template.
So with this in mind Bob's suggestion sounds very promising and we'll give it a test. Along with Walt's suggestion it means that we don't need to create a whole new varients of our icons with different bg colours, and we can reposition them freely, and it cuts down on the number of layers.
It's definately a bit of a gotcha though!
Thanks again, Will
Glad to hear you are all set, Will, and that the suggestions offered will do the trick for you! :)
I know this thread is old, but I thought I'd add in that I've just had this issue and Walt's suggestion has worked perfectly.
I've created a button in Photoshop with a fair few transparent areas - I've created a Normal, Hover, Down and Disabled version.
In SL2, I've put a rectangle behind the image in the Normal state, set it to no border and the transparency to 100%.
Now, when I use the HTML5 version my mouse doesn't see the transparency and it behaves as it was designed :)
Thanks Glenn for that update - old or not, it may still help someone else!
Thanks for the update on solutions for this. I'm a new user and found old and new posts alike very useful as I'm making my way through SL3. Just ran across this and it cured a headache!
Glad you found a cure here, Neal – and welcome to the Articulate family! 😊
Since you mentioned you just started using Storyline 3, I wanted to share its User Guide. It'll help give you a solid foundation for using all the nifty features it has to offer!
This discussion is closed. You can start a new discussion or contact Articulate Support.