[Tutorial] Axure Axure production turntable lottery Tutorial - Starter Edition

Today, to share, to make use axure turntable sweepstakes interactive prototype. Without the login process.

Draw process:

A main content:
1, major components: a dynamic panel

2, focus: interactive rotation, random function, trigger action.

3, the difficulties: the stop position is determined by the lottery result

4, involving functions and explain:

target: the target element

text: text element

Math.random (): returns a number between 0-1

rotation: rotation angle element

Second, the prototype ready: The main page contains two
1, page frame:

Including mobile phones borders + inline frames, mainly for the contents transferred to the current page to show the overall effect.

Double-click the inline frame, select the index (contents) page, the contents page references to an inline frame.

2, the content of the page:

Comprising all the elements work content. (Tip contents hidden by default).

Third, the prototype dismantling Description:
1, dial:

It consists of two parts, a separate backplane + button, the rotating portion with the button pointer, easy to add interactivity. Backplane named: zhuanpan

2, the remaining number of times:

Number of separate text labels, numbers facilitate such operation. Number 3 named: cishu

3, the dynamic panel lottery result split Description:

Lottery result of the dynamic state panel contains four panels, and respectively correspond to four awards on the turntable. Dynamic panel named: jiangpin, the default setting to hide.

Fourth, the interaction
1, [Start lottery] button interaction:
click when: determining if the number of added (cishu) component value is greater than 0, the rotation, and other interactive decremented by 1; when the number of times (cishu) value less than 0, the display prompts information, after 2 seconds to hide.

Interactive settings:

A, a rotation angle of the expression: [[Math.random () * 360 + 3600]], a randomly generated numbers from 0-1 (multiplied by 360), so to give a 360 to any angle; 3600 plus, is let the turntable at least be able to turn 10 laps and then stop to an arbitrary degree.

B, the number of interactions provided: target.text-1, 1 represents a number of text Save (cishu)

C, disable the current element [Start draw]: Avoid click the button repeatedly, to diminishing the number of text, and repeated rotation of the turntable.

D, 10010 ms wait: order after the end of the rotation, and then a lottery result. So this time may be equal to or slightly larger rotation time.

E, show prizes (jiangpin) dynamic panel: hidden prizes (jiangpin) dynamic panel displays.

F, triggering events: after the end of the rotation because of the need to determine the angle of rotation, give specific lottery results. But in cross-interaction event, there is no end of the rotation when the event; it needs to interact written prizes (jiangpin) dynamic panel to trigger the corresponding jiangpin dynamic panel events by triggering events, produce results lottery. (The current process of interaction with the judge, the panel wrote in the dynamic loading, for example, it is triggered when loading event prize (jiangpin) elements). Interactive lottery result of the judgment below

G, to enable the current element [start lottery]: so that it can continue to click on the draw.

2, prizes dynamic interactive panel
to write interactive lottery results in any event prize (jiangpin) dynamic panel can, to write in the current loading, for example;

Because there are four prizes intervals, each interval 90 degrees on the turntable; After stopping, the final degree of rotation divided by 360, taking the remainder, the turntable can be determined in the appropriate location, and then outputs the corresponding prize (state setting panel ).

Wherein, the required else if, converted to if.

Add the specific conditions set below:

Described expression ([[LVAR1.rotation% 360]]): Gets turntable (zhuanpan) rotation angle, modulo 360. To get the final stop of the angle.

3. [Confirm accept] button interactive
mouse clicks: hidden prizes (jiangpin) dynamic panel.

Fifth, organize

The dynamic jiangpin panel that prompts (tishi) element into the play content area vertically aligned; Select so the content, to change the coordinates (0,0) origin.

Finally, back to the framework page, preview the overall effect.

Prototype Download: Link: https://pan.baidu.com/s/1jqNv5xZgkuUNF9nJkeR9Tw Password: 66l4