Axure Interactive Effects instance: Prompt text box and drag effect

Axure is now an interactive designer Essential interactive prototype design tool, in fact, as with any tool, as long as the common effect of practice, the basic will know the use of each control. Today, share some of the interactive instances that are often used in Axure: text boxes with hints and drag-and-drop effects.

Instance download: axure Common interaction effects instance. rar

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 the Onfocuse in the Widget Properties panel and click Open Set Value Editor after the open case Editor, click 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 the OnLostFocus 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, press "F5" can be viewed in the browser effect, I hope to help you.

Author: Leo

Article source: 365ucd.com