Axure RP 9 Mac the prototype design software allows designers to quickly create applications, or design a web site wireframes, flowcharts, prototypes and specifications, the full range from low to high fidelity visual and interactive build, is the industry's leading interactive product prototyping software! The Xiaobian take you to see how to do Axure RP slider drag effect level
1, case results:
Initial state:
When opening function:
2, case description:
When using the system brightness, location and status slider bar not adjustable in length; luminance canceled check system, the state of the slider bar to blue, may drag the slider bar length position change status.
Component preparation:
Page:
Dynamic Panel "SliderPanel" in:
Name contains:
Dynamic Panel (for dragging the brightness adjustment slide): SliderPanel
Rectangular (adjusting for background lines): BackgroundLine
Rectangle (for brightness adjustment line): BrightnessLine
3, analysis ideas:
Click luminance box using the system, switching the color box; (Procedure 1)
Check box is selected, the text icon is displayed checked; (step 2)
At the same time, the slider and adjust the line grayed; (step 3)
Uncheck the check box, select the icon text disappears; (step 4)
At the same time, the slider and the adjusting line to blue; (Procedure 5)
When drag the slider, if the slider is blue state, you can drag level, but not beyond the ends of the lines of the background; (Procedure 6)
At the same time, adjusting the position of the slider to change the line following dimensions. (Procedure 7)
4, the steps:
1, the check box is made when the element [click] Add Event "as used in Example 1", the set operation to switch selected [] in the "current element" (This);
2, is made when the check box is selected [element] add event "as used in Example 1", the set operation to set the text [] in the "current element" (This) is a value [] "ok2"; "ok2" is FontAwesome4.4.0 icon font symbol library pigeon;
3. Continue the previous step, add action [unchecked] element "SliderPanel" and "BrightnessLine";
4, is a box element made unchecked] [add event "as used in Example 1", the set operation to set the text [] in the "current element" (This) is a [] value of "" (null);
5, continue the previous step, select the add operation [element] "SliderPanel" and "BrightnessLine";
Event interaction setting:
6, dynamic panel "SliderPanel" the [drag] add event "as used in Example 1", the setting condition determined in [] selected "current element" (This) == [true] [] [] value; setting the condition when the operation of the mobile [] "current element" (this) is the horizontal drag [];} {limit settings, click to add border [], left [provided] [>] = "[[b.left]] "[right] [<] =" [[b.right]] "; formula" object instances b "is a local variable, which is a content element" BackgroundLine "; and
7, the step continues, the operation of adding the element [sized] "BrightnessLine", {} width of "[[This.x-Target.x]]", {} height is "1", [] is the default anchor the upper left corner of []; formula "[[this.x-Target.x]]" available length of the distance between the current coordinates of the target element x coordinate x axis member.
Event interaction setting:
These are the small series as we bring Axure RP tutorial examples: Drag the effect level slider. There are more detailed, useful features and software version Axure RP 9Mac acquisition, come Macdown.com explore some of it on their own.