Create interactive image with hotspots

[TRANSCRIPT]

First let’s add the background image. Here we are using an image but it can also be a video, a GIF... Make the image full screen using the Stretch and Alignment options.

Now let’s add a button. You can import an existing image or design your own button in PandaSuite Studio. I’m choosing the second option and designing my button using a black circle and white rectangles to make the PLUS icon.

Once it’s done and aligned, group all the elements together. Rename it and choose a clear name: Button 1.

Let’s design the popover. First it will be static.

There are several ways to display additional content: open a fullscreen pop up window, add links or use a popover. I chose the popover because the content is short and I want it to be displayed above the image.

Once it’s ready, place it where you want it to be displayed. After positioning all the elements, let’s add the content by copy-pasting from an external source.

Let’s create the other buttons and popovers by making copies of these objects. Add the content inside. Now we’ve got a good overview of what it will look like when all the popovers are opened at the same time.

Now let’s see how to hide or display popover. For each popover, let’s use the Multi-state component and create 2 states: in the first state, the popover is hidden and in the second state, it is displayed. There is one multi-state per popover so that each popover can be opened independently.

To add a Multi-state component, you can either go to the Components list, add a Multi-state component, copy-paste the popover inside, re-align... Or you can automatically convert the selection into Multi-state using the Layout menu.

Rename this component and click on the Object list to go inside and edit its content

In this first state, let’s hide the popover. Select all the objects and change Opacity to zero. There are still here but they are hidden. Create a new linked state and in this state, re-change opacity to display everything.

Go back to the Screen level. Select the button and add an action > Single tap / Click > Interact with a component. Select the Multi-state and choose Next state.

By enabling the Loop mode, the button will go to one state to the other and hide and display the popover indefinitely.

Now do the same with the other messages.

In this example, the buttons can be opened at the same time. If you want to automatically close the popover when opening the new one, you need to add a condition.

To grab user’s attention, you can also make the button animated. In this case, you’ll simply need to convert the button into a Multi-state component. Change its size in the state and automatically go from state to another to create this bouncing effect.

Now it’s your turn to create an interactive image.