When you convert artwork to a button in Catalyst, by default your button responds to mouse input inside the artwork’s rectangular bounds. This area that responds to mouse input events from the user (mouse click, hover, enter, exit, etc.) is called the hit area. If you have multiple buttons whose hit areas overlap, the topmost rectangle will always get the click event. Sometimes your button hit areas may overlap, or sometimes you may have oddly shaped buttons and the default hit area isn’t quite right.
Here’s how to make your button hit areas match your artwork exactly.
- Select your artwork and convert it to a button (Right click -> Convert Artwork to Component -> Button)
- Double click the button to enter Edit In Place Mode
- Select all of the artwork in your button skin (Edit -> Select All)
- Convert the selection to a group (Modify -> Group)
- In the properties panel in the lower right, choose the Graphics header and deselect “Transparency accepts mouse”