Forum Discussion

JeroenVerhoeckx's avatar
JeroenVerhoeckx
Community Member
4 months ago

Issues with a slide: how to deal with overlapping areas?

Hello Storyline community,

I created a very nice slide (see attachment), but it has some issues:

When you click on the left tip of the orange circle, the layer that belongs to the blue circle is shown. This has probably has to do with the fact that the box around the blue circle overlaps that of the orange circle. How to prevent this? One of the circles has to be on top.

Sometimes when you click two or more times on the same area (for example the top tip of the green circle), only the grey background of the layer is shown. Don't know why this happens. Anybody an idea?

Thanks!!

 

  • That probably is the case. I have seen this issue before myself with overlapping shapes. It might be easiest to just draw a hotspot over each circle's clickable area, and use those instead of the circles as click-triggers.

  • Hello Nathanial,

    Thanks for thinking along!

    I tried what you describe and it works in preventing overlapping areas, but I can't use it, because I can't group the hotspots with the other objects, and I need that because all objects need to move to the left.

    Storyline has so many quirks and limitations that it almost become impossible to work with. So for the negativity, but it gets me down at moments.

    Do you see/have another solution that might work?

  • Nedim's avatar
    Nedim
    Community Member

    Yes, this issue can be quite annoying. I normally create these kind of shapes in tools such as PowerPoint and paste them directly into the Storyline interface. In your case, you can recreate them by subtracting shapes using the Merge Shapes option. Watch the attached video to confirm that not the whole shape area is clickable and that it does not overlap or interfere with other shapes.

  • Hi Nedim,

    I can't find the feature Merge Shapes in Storyline, so I guess the screenshot is from Powerpoint?

    On my computer I don't have Powerpoint, but I do have LibreOffice Impress. Impress also has this feature, but when I copy the shape to Storyline, it's seen as a picture and not a shape.  And if it's a picture, I will probably end up in the same situation as I was. The shape is also not sharp any more, so I can't use it.

    Thanks for thinking along!

  • Using vectors rather than shapes as Nedim suggests would be best. Try exporting an SVG from an Impress shape (search for "libre impress export svg"). Inkscape, which is also free, can also merge shapes and export them as an SVG. Once you have the SVG file, drag it onto your Storyline slide, or import it as a picture. Either way, you should get Vector object on the timeline.

    If none of that works for you, you can still use the hotspots. Just draw three hotspots over your circle shapes, add animations to them matching your Group 1 animations (left and right), and then change all of your triggers to act on clicking each of the hotspots instead of clicking on the circles. Anyplace you trigger a move of Group 1, add 3 triggers to also move each of the hotspots (base slide and layers).

  • My suggestion is to add a freeform shape on top of each shape. Make that shape 100% transparent and no have no border on it. People will be able to click on it and there shouldn't be any issues with overlap then. 

    I prefer shapes over hotspots as hotspots can't have states so they are much more versatile. I haven't used a hotspot in a course in over 6 years. 

  • Hello Nathanial and Cary,

    After some work, it finally works!

    I discovered that replacing the png images with svg images wasn't enough (using the replace image function). I also had to remove the objects in the timeline and only after doing that it started to work as expected. The bad news is, that by completely removing the objects, I also lost all triggers and had to recreate them manually. That took some time.

    Maybe I have to change to colours of the three shapes and if so, I have to replace the three svg images with the new svg images. Hopefully everything will stay working, but if not, I will have to repeat all the above steps again :-/.

    It would be great it Storyline would fully support svg images!

    I used Inkscape to create the shapes, so exporting the three parts as svg images was easy.

    Thank you guys!