Overlapping Buttons

Forum|Forum|3 years ago
July 25, 2022
2 replies
1024 views

Hello, I am working on an interaction where I need to have two independent buttons in the same location.

What I am trying to achieve: The buttons each perfrom a different Advanced Action that is made active by a previous selection. The user will be clicking an image that I would like to have both buttons overlay. I know that it is not possible to have buttons overlap and that only the top one will be the active button.

What I have tried: The work around I tried was to instead of two buttons, I create four buttons in a four square pattern so if the user essentially cliked in the middle of the image they could click one of the four boxes. This however poses an issue because they have to click in a sweet spot for this to work.

Does anyone have any possible ideas for a work around for this situation?

This topic has been closed for replies.

Stagprime2687219

Legend

I would take an approach using variables.

Use one button and have it perform a conditional check.

Depending on the value set by your previous selections, the button would perform a different set of actions.

adobe5505Author

Known Participant

Thank you for this! I tried to explore the conditional actions with variable before but it got messy since I already had the advanced actions built out (just explained above) I am going to start with a blank slate and see if I can fiddle with them again to make it function like I need too

Lilybiri

Legend

Have a look at this blog post:

http://blog.lilybiri.com/sequence-check-slides-updated-version

Lilybiri

Legend

Not sure to understand what you really want. Adding screenshots could help.

Anyway I hope that this is not a responsive project, because stacking in a fluid box is not allowed.

Two interactive objects in the same location, if they are active at the same time is never a good idea. If I understand your requirements well, maybe another workflow could be proposed. Why not one button with multiple states, and have the appropriate advanced action triggered by using a condition? Seeing a preview of those advanced actions could help as well.

adobe5505Author

Known Participant

Thank you for your reply, I went ahead and created an example so you can get a visual of what I am trying to achieve. Any help is much appreciated!

Lilybiri

Legend

Sorry, still not clear. Moreover I don't see overlapping buttons: see only the red square button, the rectangular green and red buttons which do not overlap. I would prefer SVGs over shapes because you can limit the clickable area to the image insteadof the bouncing box.

Where are the advanced actions?

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded