Defining a "hit area" inside of buttons?
Jul 31, 2013
I have a feeling this is going to be a feature request but figured I'd ask first.
I have some non-rectangular graphics that I would like to use as buttons. They are PNG format with transparency. It would be great if Storyline would ignore the transparency and only consider the button active when the mouse is over the non-transparent part of the graphic. I currently have it faked with a custom hot area sitting on top of a picture. When the end-user hovers over the hot area, a trigger fires off to change the state of the picture to it's "hover" state.
This method works fine, but it requires creating extra triggers to simulate built-in button behaviors.
Is there any way to define a custom hit area within a button? I know you can use shapes to define the hot area, but not if there is a graphic in the button itself.
5 Replies
Hey mark,
Im pretty sure you can use hotspots. You freeform trace the hotspots over the png's and set the triggers to behave accordingly.
Good luck !
Nick
It's interesting I never noticed this before. It works if you create a custom button using a shape in Storyline but not if you use a transparent png.
I just tried creating a custom button using a transparent .wmf format instead of .png and it works so maybe try creating your graphic with a different format.
Hi Nick -
Yep, that's exactly how I'm handling it, but it would be nice if the Storyline buttons natively allowed you to define the hit area independently of the image contained in the button. If you could free-hand draw the hit-area inside the button up state, that would do the trick.
Hmmm. well, these particular buttons are bitmap images so I think I'm stuck with either PNG format with a nice 8-bit alpha channel, or GIF. WIth GIF I'm sure I'd get some horrible jaggies on the graphic edges.
Maybe someone from Articulate can provide more information on what formats of image can be used with transparency supported for the hit-state in a button?
I know this is an old thread but just wanted to say it's funny how we all have different requirements, I just found today that in the HTML5 output that Storyline does seem to ignore the transparent areas in PNG buttons, and I don't want it to!
I'm having to add invisible shapes in to my button states to increase the hit area as I'm noticing that when viewing on a tablet it is quite easy to miss the hit area of a button when the transparent areas are ignored.
This discussion is closed. You can start a new discussion or contact Articulate Support.