Can I make functioning buttons out of a collection of odd shapes?

Question

I have a map where the state label on each state is a button which opens a page with info on that state. I'd like to make each state SHAPE be the button so that the shape could change color on hover, etc.. I'm able to make each shape into a button but even when I select the actual shape of the state the button is a square shape outlining the state shape so the button actions aren't confined strictly to the shape of the state. I feel like this should be possible and I'm just going about it wrong?

Comments

You can create an irregular shape for a button in InDesign and assign it different colors for the appearance for Normal, Rollover, and Click. However, as soon as you convert the button to a shape, notice that InDesign encloses the button object in a rectangle. That rectangle defines the button's hit area where the user can hover or click to interact with the button. That rectangular hit area is the same whether you export with in5, use Publish Online, or test using the EPUB Previewer (Window > Interactive > EPUB Interactivity Preview).

If you would like to have an irregular shape for a button where that irregular shape is used as the hit area, then I would recommend creating the interactive content in Adobe Animate (make sure to create the new document with the Platform Type set to HTML5 Canvas), publishing an OAM file, placing (File > Place...) the OAM file in your InDesign layout, and exporting with in5:

• Sophisticated Animation & Interactivity into InDesign & Out to HTML5

---

thank you. I was so hopeful when I saw that the rollover and clicks were working with the right shape but I see when I export that the "hit area" as you call it is still the rectangle. I'm not familiar with Animate but will discuss with one of my coworkers. Once that OAM file is created and placed will I still do all the rest of the actions in InDesign before exporting with in5?

Answer 1

The OAM file that you would publish is packaged HTML5 content. When you place the OAM file and export with in5, that content appears in a iframe.

You'll need to add custom code to make your embedded OAM content reference the objects in your main document.

If you're not comfortable coding, it might be easier to make the shapes, the buttons, and the content that appears when rolling over or when clicking the buttons all in Animate, publish that content as an OAM file, place it in your InDesign layout, and export with in5.