Fitting hotspots to images

Aug 19, 2014

Greg Faust
By Greg Faust

Or making transparent regions invisible to the cursor.

I'd like to set a trigger to activate when the user clicks the visible part of an image, NOT when the user clicks the transparent part of the image.

In the Storyline screenshot below, there are four objects:

  • 1 blue rectangle (storyline object)
  • 1 green frame (storyline object)
  • 1 set of black frames (imported .png image)
  • 1 text box for testing purposes

The green frame has a genuine hole in it: If I click the blue box inside the green frame, Storyline registers that I've clicked the blue box, NOT the green frame.

I want to duplicate this behavior with an image file. At present, clicking the holes in the black boxes is treated as clicking the black boxes, NOT clicking whatever is behind the black boxes. The transparent regions of the image *appear* transparent, but they're quite solid to a mouse click.

I have two thoughts:

  • Does there exist an image format with true holes? I.e. where transparent regions are genuine, unclickable breaks in the image? Does Storyline support such a format?
  • The obvious workaround is to use freeform hotspots, but the only way I know to do this is to draw the hotspot freehand by tracing over the image. This is tiresome and inaccurate (the attached image is just an example; my actual image involves complicated curves). Is there some way to auto-create a hotspot to be the shape of the non-transparent portion of an image? Maybe there's some kind of "Create from Mask" tool?

Thanks in advance for any insights.

6 Replies
Ashley Terwilliger-Pollard
over 9 years ago08/19/14 at 1:11 pm (UTC)

Hi Greg,

I don't know enough about different image formats or modifications that you could make to help you create something as you described, but did want to at least point out these are the image types that Storyline support:

  • BMP
  • EMF
  • GIF
  • GFA
  • JFIF
  • JPE
  • JPG
  • JPEG
  • PNG
  • TIF
  • TIFF
  • WMF

I like the idea you have in regards to the creation of hotspots though - as I struggle with creating unusual shapes too. Would you send that along as a feature request to our product development team?

Greg Faust
over 9 years ago08/20/14 at 1:41 pm (UTC)

Thanks for the list and the suggestion, Ashley. I'll submit a feature request as soon as I know what to ask for.

I THINK what is needed is improved vector graphic editing in Storyline. Apparently this is something people were asking for two years ago. For what I want to do right now, I think I would need one of two features:

1) The ability to create the vector shape I want in another program and import it into Storyline as a vector object, then turn that vector object into a hotspot. I just tried this by saving a Powerpoint object as a .EMF. It imports into Storyline and retains its scalability, but Storyline treats the object border as being the (rectangular) image border. I'm not sure whether this is Storyline's doing or just a property of the .EMF file type (from what I've read, .EMF is a shell for vector AND raster content). Either way, I think Storyline would have to support additional vector file types for this to work.

or

2) The ability (within Storyline) to take a raster image and generate a vector object (either a freeform shape or a freeform hotspot) by identifying and tracing a boundary between colors in the image. I think that would take some doing, but it would be a really cool feature with lots of applications besides making hotspots match images.

Ashley Terwilliger-Pollard
over 9 years ago08/21/14 at 7:20 am (UTC)

Hi Greg,

Yes, it's definitely a question I've seen in the forums before - and although that thread is two years old, we're still on Storyline version 1 and the updates have dealt mostly with bugs and fixes.

I think your first description sounds like a more likely possibility - but I don't know much about coding or development, and since there isn't anything limiting the number of feature requests - go ahead and send both. Can't hurt to provide our product development team with more than one option or example of how you envision this working.

Kevin Thorn
over 9 years ago10/08/14 at 9:07 pm (UTC)

Late to this thread, but interesting subject. One of which I continue to experiment with.

First, the reason your PNG image of the two black frames will not let you click the blue box behind it is due to the Alpha channel present in the PNG file. Even though you can't see it, there's an invisible layer (alpha channel) that creates the overall bounding box for the image.

The transpareny is just that, transparent in a PNG image, but it's still a raster image, not a vector like shapes in PPT or Storyline.

Next, there are several vector shapes that are supported in Storyline. Ashley listed two of them in the EMF (Enhanced Meta File) and WMF (Windows Meta File) formats. The latter giving way who created the format way back when for MS ClipArt to be vectors in PPT. This is why you can ungroup clip art in PPT and all the smaller shapes are completely editable. The third vector format is SVG and while it works on occasion, it will produce some wonky behaviors. Pretty much Adobe Illustrator is best to export and then just fiddle with settings.

With EMF and WMF you can get just about any custom artwork into Storyline as a vector - even hand-drawn artwork. While the EMF format is "newer", the WMF format still produces better results and a crisper image.

If you have Illustrator, create your two black frames and then export as a WMF. Bring that image into Storyline like you would inserting any other image and you should get the results you want.  

Finally, the hackery way is to create transparent shapes directly in storyline. Insert a rectangle > no border > format shape > set the transparency to 100%. Note: Do not select "no fill" as you the fill will act as the clickable region. Then size the shape over the blue areas inside the black frame. Create as many as these little 'hidden' shapes as needed all with the same trigger for the action tied to the blue shape in the background. I know, not a vector solution, but it will work as a solution in the short run.

This discussion is closed. You can start a new discussion or contact Articulate Support.