Tuesday, October 5, 2010

Using the Slider component: Part 1

In today's tutorial we will learn what's the Slider component for and how to use it.

A Slider is used to let the user choose a number between 2 specified numbers using a draggable arrow on a line. The programmer can set the maximum and minimum values as well as other properties, such as direction, liveDragging, snapInterval, tickInterval and value.

Direction property determines whether the slider should be displayed as a horizontal or a vertical line.

Value is the current value of the slider.

SnapInterval - the interval we slide to. For example, if our value is 10 and snapInterval is set to 10 - the next time we move our thumb left (assuming we have a horizontal slider) - it will increase by 10 and equal 20.

TickInterval - visual lines above the Slider. You can set it to 5 and see little lines above your Slider on each value with an interval of 5.

LiveDragging is the property that needs to be kept in mind while working with Sliders using AS3. There are 4 possible event listeners for Sliders: change, thumbDrag, thumbPress and thumbRelease. The change listener is what matters when we're changing the liveDragging property. If liveDragging is false - the event is called only after you press and then release the thumb. If it is set to true - the event is called every time the value changes.


The code I used (I added the Sliders to the stage using the component window and edited it using component inspector):

import fl.events.SliderEvent;

mySlider1.addEventListener(SliderEvent.CHANGE, updateText1);
mySlider2.addEventListener(SliderEvent.CHANGE, updateText2);

function updateText1(SliderEvent):void{
t_val1.text="value: " + mySlider1.value.toString();
}

function updateText2(SliderEvent):void{
t_val2.text="value: " + mySlider2.value.toString();
}

In the next tutorial we will learn how to operate this component using only AS3.

Thanks for reading!

No comments:

Post a Comment