I tried to find something similar but had no success.
I want to have an overlay over my content which is half transparent like a lightbox. To highlight specific areas i want to “cut out” a certain area which the user should be able to “click-through” elements which are inside this “cut out”.
The only workaround that I could think of is making images (see attachment) and create hotspots for the elements beneath. But since there are like 20 steps of this tutorial marking different areas this would be a lot of work (especially to fake the mouse interactions beneath) and i can´t imagine there is no smarter way to do this.
Hey @Chrisfits, what if you try setting the fill color for your page and reducing its opacity? You can do that by selecting your page, going on the Style Pane, clicking on the color field, and setting the opacity to the desired value. This way, every widget you add to the canvas will keep its original colors, and you can also use the “Disabled” widget style effect to highlight only the widgets you need as a user clicks on different parts of your prototype.
Your requirement can be easily achieved with a repeater. I have created a repeater with 10 columns and 10 rows, the datasheet is also 10 rows and 10 columns, the datasheet represents the position of the Lightbox, by entering 1 in the datasheet (e.g. Column5, Row6), you can display the Lightbox in the corresponding place. there are two types of Lightbox, one is Rectangle and the other one is Ellipse. You can resize them in repeater elidter.
If you have a control behind the Lightbox, you still need a hotspot to trigger the interaction of the control. For example, I added an interaction to the hotspot that triggers the click event of the button.
Your requirement can be easily achieved with a repeater. I have created a repeater with 10 columns and 10 rows, the datasheet is also 10 rows and 10 columns, the datasheet represents the position of the Lightbox, by entering 1 in the datasheet (e.g. Column5, Row6), you can display the Lightbox in the corresponding place. there are two types of Lightbox, one is Rectangle and the other one is Ellipse. You can resize them in repeater elidter.
If you have a control behind the Lightbox, you still need a hotspot to trigger the interaction of the control. For example, I added an interaction to the hotspot that triggers the click event of the button.
Update:
In fact, the simplest way is to group multiplue rectangles or ellipses and make them as a component. As you can see in the prototype above, you can drag the component onto the canvas and delete unnecessary content as a Lightbox.You can also click on the controls below.
I get what you’re going for, but it won’t be straightforward or necessarily easy. The lightbox, like all widgets, will occupy a rectangular area–regardless of visible shape–and will block all interactions behind its entire area–regardless of visible “hole” or transparent area inside its dimensions. There isn’t a way to specify something like, “make this widget block interactions behind it except for (sub)area with 0% opacity” if that makes sense.
It is possible to use a javascript injection hack to make your lightbox widget “pass-through” and not block any interactions for widgets behind it. This might be a quick fix if you can live with the rest of your widgets being accessible/interactable outside of your “hole” --anything behind the half-transparent gray area. See this old thread:
There is also another potential solution in this thread: don’t use the hack, just move your lightbox so the hole is in front of your desired widget(s), bring it to front, then bring the desired widgets to front, so only it/they are in front of the lightbox and therefore interactable. If you have multiple widgets per “tutorial step” I recommend grouping them or creating dynamic panel from them so you only have to bring one thing to front per step. The result should look and feel like there is a real “interaction hole” in your lightbox.
Other than that, if you can’t or don’t want to break up your existing layout–which could be daunting if you need to call out only part of a menu, table, or other UI component–I could imagine a lightbox made of four rectangle widgets–a top, bottom, left, and right–that you could resize and move to create an actual “interaction hole”. This hole would need to be rectangular. You should be able to use hotspots–one per tutorial step–to define the size and placement of the hole. The hotspots would be behind your UI elements, or be hidden, and would not need any Click or Tap events, they’d only be needed to define the hole size and position. A hotspot should be able to create the hole itself, using its own properties, resizing and moving the lightbox mask widgets to its edges.
OK, here is a demo of a “4 box” tutorial mask like I described above. cut_out_highlight_2.rp (106.1 KB)
I duplicated your Page 1 to Page 2 and moved your image to back.
I made four rectangle widgets with black 33% opacity fill (and placed them at the edges of your content area.) They also have a Loaded event that hides them by default.
Mask Top
Mask Bottom
Mask Left
Mask Right
I resized your hotspot widget to same size as your initial hole and named it, “Step Area 1”
I added a Loaded event with “Bring to Front/Back This to Back” action so it is easier to place, size, and see these tutorial hotspots in the editor, but they won’t get in the way in the browser.
I added a Rotated event to the hotspot to use as a kind of subroutine to move and size the mask widgets and create a hole with this hotspot’s dimensions and location automatically. (I would have used Selected but hotspots don’t have that interaction; you could use a rectangle widget instead of a hotspot and use its selection state to trigger the following mask changes.)
When the hotspot’s Rotated event is fired, it resizes each mask widget and moves it if needed, using the hotspot’s own properties, then shows each mask.
Some details to note …inspect the code in Axure to see them
The mask widgets are already positioned at the edges of the content area, so need to move them is minimal. You could place them anywhere in the editor, with any default dimensions, hidden, etc. and add some Move commands as needed.
Mask Top is at top-left and full width so it doesn’t need to be moved, and only its height needs to be resized. So, in the Set Size action, I leave the width dimension blank–it won’t be changed–and use a simple expression to calculate its height so that it comes right to the top of the hotspot. This.top refers to the top of the widget making this action–the hotspot. Target.top refers to the top of the widget being acted upon–resized–which is the Mask Top widget.
Mask Bottom is at the bottom edge of the content area, and it could be moved to the bottom of the hotspot and resized to the bottom of the content area, but it is simpler to leave it where it is and resize it just like Mask Top, except resize it from the bottom up. So, I specified a bottom anchor point for its Set Size action. (In the RP editor, click into this action and look at the 9-point anchor button–click one of the anchor points to set this:)
Mask Left is at the left edge, so resizing is similar to Mask Top and Mask Bottom. Its x-position doesn’t need to move, but its top needs to move to the top of the hotspot so it won’t overlap with Mask Top.
Mask Right is resized and moved similar to Mask Left. Pay attention to the anchor point again.
Those are the basics. Look at the “Step 1” button to see how easy it is to set your tutorial mask with a hole, once your “interactive hole hotspot” is set up. It’s just Fire Event Step Area 1 fire Rotated
(…if you use a rectangle widget with the resize and move actions assigned to its Selected event, then you’d just need to Set Selected Step Area 1 to "true" …and I’d recommend assigning a selection group for all of your “Step Area” widgets so only one can be selected at a time.)
You can duplicate a hotspot, move it around and size it as needed for additional tutorial holes.
The square hole isn’t as attractive as the ellipsis, but this approach is pretty efficient for your 20-step tutorial. You could probably make some “inverted radius” corners so the hole would at least have rounded edges. What I’m thinking of here is like four little corners with square outer edge and concave rounded inner edge, and each moved to the corners of the hotspot. You could make these in Axure with a 20x20 (or whatever size) square with the same fill as the masks, then place a 40x40-ish circle in front, lined up with top-left of square, select both, right-click and choose Transform > Subtract (or Exclude, whichever works…)
my prototype is very complex and if I understood you right this only works if I add the elements after so that elements are highlighted and the “lightbox” is the background of the prototype.
This unfortunately won´t work for me here but thanks for your idea
Hey there! Thanks for the idea. It works quite fine but unfortunately I have different sized content which I want to display in the “holes” and they are not always aligned in a grid. So to achieve all sorts of positions i need i had to do like 12 different repeaters. So more work at the end.
I think the “hack” should work but I wont try it because I want to block the users interactions around the “hole” to force attention and interaction on the “hole”.
Hey mbc66 your last solution is what i was looking for. I haven´t gotten this idea but it´s brilliant!!! I think i can live with the rectangular version with rounded edges. After all it´s just a prototype and I can tell my techies to make an ellipse there.
Just wanted to thank you for this effort to help me I really appreciate that! You helped me out now several times Axure should pay you for that
Axure should pay you for that