Axure Promotion · Axure RP · Axure Tutorial · Intermediate · Learn axure · Verification · Jan 22, 2022

Axure Tutorial: Rotating Image Verification

by WELLJOE

Introduction

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

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

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 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.