There are so many pre-made widgets out there as well that can be imported for use right in the prototype, making it truly adaptable to development frameworks, like Google Material Design. The publisher feature of Axure allows you to share prototypes with clients or stakeholders and get feedback from an unique URL. With the use of 'behaviors' and 'widgets', you can ensure that the stakeholders get a interactive demo BEFORE you start development! I also love the fact that you can have 'pages' that when published can mimic a real working website. Take a look at the RP file and let me know if you have any questions.I love that you can make FUNCTIONAL prototypes with this software! Being able to present a 'working prototype' is a huge benefit of this tool. Note: ‘Target’ refers to the widget being targeted by the action, the resizable widget, and ‘This’ refers to the widget whose event is firing, the resize handle. As such, the ‘height’ or ‘width’ increase values must be determined based on how many pixels up or to the left the drag handles is being moved: If the anchor is at ‘bottom’ or ‘right’, the top or left edges of the resizable widget will move with the resize, so its X and Y values are no longer constant. To do this, I simply subtract the widget’s X or Y value from the handle’s ‘.right’ or ‘.bottom’ value: If the anchor is at ‘top’ or left’, that side of the resizable widget won’t move with the resize, making its X and Y values constants that can be used as starting points. This is because the resize values are ultimately determined by the X and Y values of the resize handles’ sides.

The “Set Size” action uses one of two expression patterns in the “Width” and “Height” fields depending on the resize anchor location. It also moves the two adjacent handles either “with drag x” or “with drag y” as appropriate. Resize_EXAMPLE.rp (70.1 KB) | See it live!Įach resize handle has an OnDrag case that moves itself with the drag.

Also, if you don’t want to see any slivers of green, you can go into State1 of the img panel and change the back color under the Panel State Style pane! It isn’t quite perfect–the handle does move a few pixels from the bottom right corner while dragging, but hopefully this will work for your needs. Meanwhile, the x value uses the ratio (200 px x 130 px) to balance out the width. Since the height was the smaller value, the y value is more straightforward. The result ended up being 'move to (]), (]). Then, I ended up using some variables in the “Move to” action for the “smaller” dynamic panel (the drag handle).īy changing the move action from “with drag” to the specific variables, I limited where the drag handle could go, which in turn affects the size of the img panel (since it’s partially based on the x and y values of the drag handle). First, I changed the size of your img dynamic panel to just fit the shape of the background image. rp file and made a few changes, and I think it’s generally working how you want it to now. I’m so sorry I wrote you a private message but I really need to do this for my thesis. I think that if I’ll:bow: use your method maintaining proportions it will work. Green appears to the right side of the image if I drag in this direction or to the bottom size if in drag downward. I put the image as “back image” of the DP (where you used green) (with the option “stretch to contain”), when I drag the “handle” everything works and the image is resized as I want, but the handle (blu rectangle) leaves the image’s corner and shows the green “back color” of the DP. Could you please tell me if you know a way to do it? I need to do basicly the same thing but with images, so I need to mantain aspect ratio. I tried to send you a private message but the following error occured: “Gregor has exceeded their stored private messages quota and cannot accept further messages until they clear some space”.

I hope you will forgive me for having disturb you.

Axure rp 8 inspector panel