Forum Discussion

JudyNollet's avatar
JudyNollet
Super Hero
2 years ago

TIP: Making icons easier to program and easier to click

The Content Library has lots of great icons. But many icons are actually Groups of freeform shapes.

That can be frustrating for developers, because you can't add States to a Group. Instead, you have to add States to each item in the Group.

Also, you can't put a Group into a button set, so you lose the built-in functionality that comes with that.

Another issue with icons is that the open parts aren't clickable. If you use an icon as a button, anyone using a mouse must click a filled part of the icon.

So what's a solution?

It's what I call "introverted Storyline." In other words, avoid Groups when working with icons.

The "how to" is explained here: https://360.articulate.com/review/content/ce92f4bb-99ad-452f-a6e8-3ebd28061611/review 

 

UPDATE 2025-08-05

Super Hero Montsea​ posted an easy way to change a multiple-freeform-shapes icon into a single-shape icon: Ungroup the icon into its separate shapes. With those shapes selected, use the Merge Shapes > Union function. (See SOLVED: Merge Shapes Just Fixed Grouped Icons | Articulate - Community)

However, a single-shape icon can still only be clicked on its visible parts, instead of anywhere within its overall boundaries. So I still recommend copying-and-pasting the icon into the state of a transparent shape if the icon needs to be clickable. 

advice
storyline 360

4 Replies

  • JH24's avatar
    JH24
    Community Member
    9 months ago

    JudyNollet- Great workaround and expertly delivered. Thanks for sharing!

    I've also learned about button sets which I wasn't aware of.

  • Nedim's avatar
    Nedim
    Community Member
    2 months ago

    Hi Judy,

    I hope you don’t mind me adding my observation about transparent parts of icons here. It’s closely related and might help clarify things further.

    Allowing an SVG icon downloaded from the content library, whether it consists of a single shape or multiple freeform shapes, to respond only to clicks on its visible parts (and not transparent areas) can be addressed globally with a small JavaScript snippet. This snippet can be injected once per slide or at the Slide Master level, no matter how many icons are present.

    var objects = document.querySelectorAll('.slide-object g.eventable');
objects.forEach(object => {
	object.style.pointerEvents = 'bounding-box';
})

    By default, SVG groups with the class "eventable" are set to pointer-events: visiblePainted, which means only the visible painted parts of the SVG respond to mouse events. So, when users accidentally click on transparent parts inside the SVG bounding box, it is causing unexpected behavior.

    Switching to pointer-events: bounding-box changes the behavior so the entire bounding box of the SVG element becomes clickable, including transparent areas inside that box. 

    However, there is a known bug reported in Firefox where pointer-events: bounding-box is simply rejected, so this solution may not work consistently in Firefox.

    Edit:
    Simple file attached for reference.

    • JudyNollet's avatar
      JudyNollet
      Super Hero
      2 months ago

      Nedim​: I never mind you sharing additional info. In fact, I welcome it! The generous sharing of your time and expertise is a huge benefit for the community. That JS snippet is a wonderful addition to everyone's the SL toolkit. 👏