Axure Common Interactive effect production

The purpose of this article is to share some of the more complex but common interaction behaviors in Axure, which includes a text box with hints and drag-and-drop effects.

1. Text boxes with hints

Placing a hint in a text box is a common way to interact. When the text box gets the focus, the prompt text disappears. When the text box loses focus, the prompt text is displayed again. Now let's look at how this control is made.

First step:

Drag the Text field control from the widget library. Double-click the control to enter the hint text. Then in the Widget Properties panel, write a label for the text field: "Find people".

Step Two:

Double-click in the Widget Properties panel

, then click Open Set Value Editor in the Open case Editor, after clicking Set variable/widgets value (s). Set as shown in the following illustration:

Click "OK" to save the settings to exit set Value Editor and Case Editor.

Step Three:

Double-click in the Widget Properties panel

And then, in the Open Case Editor, click Add Condition and set the following in Condition Builder:

(The purpose of this step is to display the value entered by the user when the text field loses focus when the user enters a value in the Text field, and no longer displays the prompt text.) )

Click "OK" to save the settings and exit condition Editor, and then in case Editor, click Open Set Value Editor after clicking Set variable/widgets value (s). Set as shown in the following illustration:

Click "OK" to save the settings to exit set Value Editor and Case Editor.

This is the end of the text box with the hint, press "F5" to see the effect in the browser ~

2. Dragging and dragging

The application of drag and drop in the design, can be visually interesting alternative to mobile, copy, add, delete and other operations. In Axure, the implementation of drag-and-drop effect is relatively complex. Specifically as follows:

First step:

Drag a rectangle from the widget library and double-click to add the text "drag". Right-click on the rectangle and select Convert–convert to Dynamic Panel. Then, in the Widget Properties panel, write a label for the rectangle: "Drag the object."

Step Two:

Select the rectangle, select the Interactive (Interactions) panel in the Component properties (Widgets properties) in the right area of the software, double-click Ondragstart, and set the following in case editor:

Click "OK" to save the settings and exit case Editor. The step is to ensure that when there are multiple drag-and-drop objects, the dragged drag is always at the front and is not obscured by other drag-and-drop objects.

Click "OK" to save the settings and exit case Editor.

Step Three:

Double-click "Ondrag" and set the following in case editor:

Note that the move Drop-down menu in the lower-right corner defaults to "with drag", which means that the drag object will follow the mouse movement completely. If you select with drag x, follow the mouse x-axis (horizontal) movement with the vertical position unchanged. If you select with drag y, you are following the mouse y-axis (disposition) movement, and the horizontal position is unchanged.

Fourth Step:

Double-click "Ondragdrop" and set the following in case editor:

Note that this is the "to X,y beofore drag" in the Move Drop-down menu in the lower right corner, which means that the drag object will return to its starting position when the left mouse button is released. If "with Drag X" is selected here, the drag object stays at the mouse x-axis coordinates. If you select "With Drag y", the drag stays at the y-coordinate of the mouse.

Click "OK" to save the settings and exit case Editor.

The simplest drag-and-drop effect has been achieved. Press ' F5 ' to see the effect in the browser.

Written in the last

Ah, this time to share so much, I hope you can through these two small examples, can be more familiar with the Axure case Editor, Condition Builder and set Value Editor use method. If you have any questions, you are welcome to Exchange corrections ~

Article Source: Shanda Games ued Reprint please indicate the source link.