InVision-like fluid Axure demo

Axure RP 8
,
4

Oh good! (I didn’t try it first. :slight_smile: )

If you want EXACT positioning, there is another tack you can take:

Create global variables for authored-width and authored-height of your prototype. So if you create your prototype where everything is laid out for a screen size of 375 x 667, v_authoredWidth would be 375 and v_authored height would be 667.

Then, it’s super easy. Just use those variables in conjunction with Window.width and Window.height, using hardcoded numbers for x and y of your highlights in their authored position. By that, I mean where you placed them when you created your prototype in Axure.

OnWindowResize --assuming highlight was authored at (200, 300)
   Move (highlight) to x: [[Window.width/v_authoredWidth * 200]], y: [[Window.height/v_authoredHeight * 300]]
.

[Edit] Note: In InVision you can “anchor” the highlight to various edges of the window. The above assumes that the layout “property” is anchored to the upper-left corner.

If it were anchored to upper-right corner:

OnWindowResize --assuming highlight was authored with its right edge 15 pixels from the right edge of the window and at y = 15
   Move (highlight) to x: [[Window.width - Window.width/v_authoredWidth * 15 - Target.width]], y: [[Window.height/v_authoredHeight * 15]]
.

Anchored to lower-left corner:

OnWindowResize --assuming highlight was authored at x=15 and its bottom edge 15 pixels from the bottom edge of the window
   Move (highlight) to x: [[Window.width/v_authoredWidth * 15]], y: [[Window.height - Window.height/v_authoredHeight * 15 - Target.height]]
.

Anchored to lower-right corner:

OnWindowResize --assuming highlight was authored 15 pixels from the right edge and 15 pixels from the bottom edge of the window
   Move (highlight) to x: [[Window.width - Window.width/v_authoredWith * 15 - Target.width]], y: [[Window.height - Window.height/v_authoredHeight * 15 - Target.height]]
.

If you also want to make the highlight sizes to resize based upon the window size, you can take a similar tack.

OnWindowResize --assuming highlight was authored at a size of (50, 30)
   Set size of  (highlight) to width: [[Window.width/v_authoredWidth * 50]], height: [[Window.height/v_authoredHeight * 30]]
.
2 Likes