Masking shapes and images in Axure 9

#1

I’m attempting to mask/clip an image behind a shape so only the image contents within the shape is visible, but then when the user drags the image it’ll move within the shape (ideally only on the x-axis)

Link to a preview below showing 1st the dragging action needed but no masking, and 2nd the image within the shape but no dragging. Need to combine the two. It’s essentially a clipping mask in Photoshop.
https://3ill1d.axshare.com

Any help is greatly appreciated!
Thanks in advance.

#2

image.rp (50.8 KB)

#3

@MrsB,

Here is an example with your graphics. Below is a detailed step-by-step description of what @melibrion shows, with some optional tweaks.

https://rtye3u.axshare.com
panning in mask.rp (393.9 KB)

To create a "see through mask", first realize that its "full area" must be a rectangle. Even if you need a non-rectangular "see though" or "cookie cutter" mask (circle, star, etc) it must be contained in a rectangle. You can create this in any graphics application like Illustrator or Photoshop, save as PNG and import into Axure. To create this from scratch in Axure,

  1. Make or drag in a shape to define your mask area. You can start with a "Box" widget from the default library, right-click it and choose Select Shape…" for a start. In Axure 9 you can use the Pen tool and/or edit points of any shape to customize your mask.
  2. Drag in a new "Box" widget from library, or create a rectangular shape at least as large as the width and height of your mask shape.
  3. Place this box behind your first shape (send to back).
  4. Center-align and middle-align these two shapes.
  5. Select both shapes, right-click and choose Transform Shape > Exclude. This will "punch out" the widget in front and create a "cookie cutter" mask shape.
  6. (Optional) Style this mask widget with same color and/or properties as your background. Add or remove border, corner radius, etc.
  7. Create a dynamic panel from this new mask shape (right-click, choose Create Dynamic Panel) and in the STYLE panel, uncheck "Fit to Contents" checkbox. This dynamic panel will now automatically mask to its dimensions and the mask widget in it will mask to your custom shape area.
  8. Double-click into the dynamic panel and place your widget(s) behind the mask widget, move them to their initial locations, etc.

To create the "panning" effect of moving things beneath the mask,

  1. (Optional) If you have multiple widgets it is best to either group them or create a dynamic panel from them–this will be the widget you move.
  2. Click out of the dynamic panel, select it and add a New Interaction of Dragged.
  3. Select Move as the action.
  4. Select the widget in the dynamic panel as the target to move.
  5. (Optional) For x-axis only, click "With Drag" (the MOVE droplist) and change to "With Drag x".
  6. (Optional) Create some boundaries of how far to move your widget by spinning open MORE OPTIONS and clicking Add boundary. To limit the movement at the edges of your widget/group, use "top", "is less than or equals", "0" ; "left", "is less than or equals", "0" ; "bottom", "is greater than or equals", "[[This.height]]" ; "right", "is greater than or equals", "[[This.width]]"
  7. Preview and adjust as needed.
#4

Thank you so much, the step by step guide has been incredibly helpful and it does exactly what I needed plus taught me a little more about shapes! Do you know how to make it still draggable if there’s a semi-transparent graphic on top of the dynamic panel in the layers? Like pinning the interaction to the top?

#5

Not sure exactly what you mean… Are you saying you have a draggable dynamic panel and in front of that there is an image widget–which is blocking the dynamic panel? If so, does that image have any interactions, or is it just for looks? Or does it maybe get moved in front sometimes? Dealing with this really depends on how your prototype is set up, what the widgets are, what they all do, etc. If you could upload your .rp file it would help immensely, not only for users (like me) to understand what you are doing, but also to test and demonstrate solutions rather than general guidelines or vague guesses.

That said, here are the generalities and guesses… A few different approaches you could take, depending on your structure, if this prototype will be used on mobile or touch-only devices, etc. Try only one at a time until one works…

  • Place the overlaying image inside the draggable dynamic panel and send it to front (within that dynamic panel) so that it is still overlaid but does not block the dynamic panel. If this image is smaller than the dynamic panel that should work well. If larger, then you may need to create a nested dynamic panel and use some Cases in the Drag event to test if the cursor is over the area of your original draggable panel.
  • Create a Mouse Over event on the image with an action to bring your dynamic panel to front, thus making it accessible. Alternatively, send “This” to back, meaning the image sends itself to back when the mouse cursor is over it. Then, in the dynamic panel’s Drag Stopped event, make an action to bring the image to front again.
  • Create a dynamic panel from your semi-transparent image. In its Dragged event, use the Fire Event action to call the original dynamic panel’s Dragged event. In other words, dragging on the image would trigger the drag for the dynamic panel. (I’m guessing at this one…have not tried it yet.)
  • Use a hack to inject CSS and make your image widget non-interactive. See this thread for details. You can either inject it as @Gregor did (not supported by Axure) or create a CSS plugin on Axure Cloud (if you publish your prototype to Axure Cloud.) Actually, I’ve not tested this in RP9 yet, but it should still work.

I don’t understand… do you need to pin the image to the top of the page or the draggable panel? Again, if you can reply and upload your .rp file it really helps users help you much better. Thanks!

closed #6

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.