Does anyone know how to create this in axure 10? its the part far down that has a draggable icon that goes between line drawing and actual image.
Does anyone know how to create this effect on this webpage?
mbc66
#2
I don’t have RP10, but made a demo in RP9 which should work the same way in RP10.
drag to reveal.rp (1.6 MB)
Page 1 is a method to show/hide the shoe photo as it is dragged. I’m assuming this is the effect you are referring to. I used screenshots from that website, but will of course look better if you can get a “front image” with transparency. I pasted two screenshots (shoe sketch then shoe photo) on the Axure canvas. Then I created a dynamic panel (dp) from the shoe photo image and resized the dp so it fit between the two dashed lines–the width of the shoe area. I positioned the image within the dp by moving it to the left so the shoe areas line up (difference between the x-position of the shoe sketch image and the shoe area.) So the layout setup has the shoe sketch image in the back, with the shoe photo image in a dp that is in front.
Axure doesn’t let you style dp’s with dashed-line borders, so I just drew a line, set it to 2px dashed border and put it in front, at the right edge of the “Shoe Photo” dp. I started out with a Dragged event on this dp, but it didn’t work so well at the edges, so to speak. So, I created another blank dp the same dimensions and placement as the shoe sketch, and placed this in front of the Shoe Photo dp. I named it, “Drag-Control Panel” and assigned a Dragged event to move the dashed line with dragX (so it follows the cursor left-right.) Then I assigned a Moved event for the dashed line that resizes the Shoe Photo dp so that the dp width matches with the line’s x-position. I assigned boundaries for good measure. You can inspect the .rp file for details.
On Page 2 I tried to mimic the effect of the hand icon moving with and resizing as it got closer to the dashed line. This worked marginally well–but I couldn’t hide the cursor. However, when combined with the drag event, it didn’t work. Apparently, the Mouse Move event overrides the Dragged event. So, the best I could do was kind of show/hide the hand icon and kind of pin it to the dashed line.