How to modal pop-up

Question

Okay, so I have opened a support ticket on this but thought I could also ask here for the sake of success ;)
I'll copy-paste:
 

I’ve been commissioned to make some similar project but I’m struggling to make what I thought it was going to be an easy task.

I’d want to have the functionality I’m describing next:

As you see, I have some characters (it's actually a 2021 online calendar so there's actually 3 per month) and for each one I’d like to have the following:

– User pans mouse pointer onto character
– The usual pointing finger appears indicating some interaction
– The user clicks
– A small pop-up appears (depicted in the example attached image)
– The user can either follow the last-line link (Want to know more?) or close hide the box by clicking in the red circled-x
–Then the user can repeat the same onto whatever character he likes

[maybe also the first three actions may be embedded into just one action on touch screens by just tapping I guess? How?]

Then, when I get this done, should I observe some special proceeding when going to export in in5?

I’ll be infinitely grateful if you can point me to some example/tutorial/lessons/case studies/whatever…

So, here it is. Any input will be greatly appreciated! Thanks in advance!

[UPDATE: Since the answer was totally useful and helped me finishing my task at ease, I myself (OP) deleted the once featured example image just out of discretion and respect for the author of the images.]

Answer 1

To make the area over your character clickable, you can make a button out of a rectangle with no stroke and no fill. Set the action to go to state 2 for the pop-up.

For the pop-up, although you can use the Pop-up Builder, the pop-up would need to be resized and repositioned, so it might be better to make it from scratch. The pop-up is made from a multi-state object (MSO) with the first state containing an empty-looking state that actually contains another rectangle with no stroke and no fill. The second state can contain your content including 2 buttons, one set to go back to the first state and the other to also go back to the first state and to go to where you have the more information (presumably to go to a URL that opens in a new tab or possibly a lightbox).

Once the interactions are set up, then you can export by going to in5 > Easy Export Wizard and selecting the type of output you want. After your content is exported, upload it to your webserver. Here's an article where Justin describes the process of creating a document, exporting it, and uploading it to a web server. It uses a flipbook as an example, but you can select a different type of output when you export. The rest of the process is the same.

Comments

Thanks so much! I'm putting my hands on it now and will let you know how it goes! :)

---

Hi Myra and Happy New Year. Just lo let you know I appreciate your help. Directions given were truly useful. Now I'm a little bit less dreadful to take similar projects!

Thanks a lot for your support!

---

Yay! I'm so glad I could help. Happy New Year! :)