Axure Tutorial: Rotating Image Verification


Image rotation verification is a common verification method. This tutorial uses a repeater to make a high-fidelity rotation verification prototype.

Image Rotation Verification

Preview the completed prototype for this tutorial

Features to be Realized

1. When clicking the Verify Now Button, the image rotation verification panel will be displayed.

2.When dragging the knob, the image rotates according to the distance the knob moves.

3. When drag dropped, if the verification is correct, the text of verification successfully will be displayed and the current page will be refreshed; If the verification is wrong, the knob returns to the original position and the image returns to the original rotation angle.

4. Click the button to change images.

How to Realize the Features

1. Make image material and default rotation angle with repeater.

2. Click the Change Image button to change the current page of the repeater, so as to realize the image switching.

3. When dragging the handle, the rotation angle of the image changes according to the distance the handle moves.

4. Give an accuracy range to the successfully verified angle.

Widgets Setup 

Widgets Setup

Page Widgets Structure

1. Verify Now Button Panel. Use a button to create a dynamic panel named Verify Now.
2. Create a Bb Bar with a rectangle and the text is Drag Image to Correct Direction.
3. Create a knob dynamic panel with shape combination.
4. Create a text button Change Image.
5. Create avatars with repeater. Name it Image Repeater.

Image Repeater Settings

Image Repeater Settings

Set the Image Repeater to 2 columns, and the Rotation column stores the default value of image rotation.

Interactions Setup

Default image rotation angle setting

1. When repeater item loaded, the angle of the image in it is set as the data of the repeater Rotation column.

Change avatar Image

2. When clicking the Change Image button, first move the knob to the initial position, and then determine whether the current page of the repeater is the last page. If so, change the page to the first page; If not, change to the next page. 

Knob Interaction
3. When dragging knob, set knob to follow the X axis of the mouse and set the left and right boundaries.

Rotate Avatar Settings

Then set the image to rotate according to the distance knob moves. Note that the default angle in the rotation column of the repeater needs to be added here.

4. Finally, when dragging dropped, judge whether the rotation angle is within the accuracy range.

If it is within the accuracy range, the verification is successful. The knob is hidden and the Bg Bar text is set to Verification SuccessfulThen wait 2000ms to reload the current page.

If the verification fails, Knob returns to the default position. The rotation angle of the avatar image also returns to the default position.

Close Panel

5. When the close button is clicked, the verification panel is hidden and the Verify Now button is shown.

In this way, all the settings are completed. If you have any questions and suggestions, please leave a message.

If you like the article, please share it with others with page link, thanks for your supporting! ❤

Note: Click here to download the completed RP file for this tutorial (RP 10 or up).

Well Joe @AxureBoutique, a technical writer and teacher, focuses on Axure prototype design and product design.

Leave a comment

Please note, comments must be approved before they are published

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.