Storyline 360 icons not easily clicked upon

Feb 01, 2019

The icons I can insert using Storyline's icons are grouped objects and we're having trouble clicking on them to trigger layers. In an attempt to circumvent this behavior, I grouped each icon with a shape, which is on top of them in the timeline, and I still have the problem. It seems like each shape within the grouped parts of the icon is clickable and where there is negative space I cannot click. And the shape overlay (maybe because there is no fill?) did nothing to make the grouping more easily clicked.

When I export the grouped icon, and Storyline saves it as a png, it comes back in blurry.

How can I use these icons as drag and drop objects when we cannot reliably click on them?

Also, if we can work this out, is there some way I can avoid having a Continue button on my layers? I'd rather have the layer disappear when the learner drags and drops another icon in the waste can. I wondered if I had to build a trigger for each of the 8 icons that hides all layers but the one associated with the icon being dragged...? If so, I didn't find a easy way to do that.

Thanks for whatever help you can offer!

the_trouble_with_icons_-_sent_to_Articulate.story

8 Replies

Ned Whiteley

5 years ago02/02/19 at 1:12 am (UTC)

Hi Michele,

The solution is a simple one and you almost had it. When you create your shape to go on top of your icon (and before you group it with the icon), give it a solid fill in any colour and then set the transparency to 100%. This will treat the shape as if it were a solid block, but you will still be able to see your icon through it. If you only want to see your icon and don't want a box around the outside, for example, just select no outline before grouping your objects.

When you set up your trigger you can either have it operate when the user clicks on the shape or clicks on the group. The end result will be the same.

Phil Mayor
Hero

5 years ago02/02/19 at 4:10 pm (UTC)

I normally add icons into the states of a shape to negate this.

Ned Whiteley

5 years ago02/02/19 at 9:58 pm (UTC)

Better still, use Phil's solution above! Simple, neat and straightforward and gives you easy options if you decide you want to change the state of the object after it has been dragged and dropped, for example.

5 years ago02/04/19 at 5:01 pm (UTC)

Thank you! That was such an easy fix, yet I'm pretty sure I wouldn't have come up with it myself. All my icons are now easily clickable.

Michele Brooks
Author

5 years ago02/04/19 at 9:28 pm (UTC)

Phil, I enacted Ned's solution first, but yours took care of both problems, the difficulty in clicking on the icons and the need for continue buttons on each layer, revealed by dragging the icon into the can. I realized as soon as I read your idea it came to me I could put both a Selected and a Drop Correct state on each icon. With Drop Correct I could reveal the corresponding layer, and with Selected I could toggle the layers by having the user click on a new icon. In this way, I can keep the learner focused on dragging and dropping icons, instead of requiring a continue button on each layer to close them so that the next drag and drop would reveal another layer. Pretty cool! Thanks so much, you two!

almost 4 years ago04/21/20 at 7:58 am (UTC)

Hello, I'm sorry, this must be obvious to all but I'm a bit new at this. What do you mean by "add icons into the states of a shape to negate this." How does one actually add an icon to the state of a shape? I've downloaded an icon that has no states and I want it to act like a button. And then I made a rect shape and added hover and selected states. But I can't for the life of me work out how to add the icon into this states of the shape - when I am in editing states for the rect, the icon is greyed out so i can't move it anywhere. When I am in Rect States but not editing, as soon as I drag the icon onto the rect on the slide, the states go away. What am I doing wrong? i did the whole transparent shape/grouping thisng but that was a lot of work just to make a button. I feel there must be a super easy way to make an icon into a button.

Or else a list of the icons that do have states would be great - I noticed some do.

Thanks

Tanudja