Axure Tutorial: Rotating Image Verification
Introduction
Image rotation verification is a common verification method. This tutorial uses a repeater to make a high-fidelity rotation verification prototype.
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
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
Set the Image Repeater to 2 columns, and the Rotation column stores the default value of image rotation.
Interactions Setup
1. When repeater item loaded, the angle of the image in it is set as the data of the repeater Rotation column.
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.
3. When dragging knob, set knob to follow the X axis of the mouse and set the left and right boundaries.
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 Successful! Then 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.
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.
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.