Главная » ActionScript » Использование компонента Slider

0

Компонент Slider дает пользователю возможность выбрать значение путем перемещения графического ползунка между конечными точками линии, соответствующей диапазону значений. Ползунок можно использовать, когда пользователю нужно выбрать определенное значение, например число или процент. Также можно использовать ActionScript, чтобы значение ползунка оказывало влияние на поведение второго объекта. Например, можно связать ползунок с картинкой, чтобы увеличивать или уменьшать ее в зависимости от относительного положения, или значения, ползунка.

Текущее значение экземпляра Slider определяется относительным положением ползунка между конечными точками линии или минимальным и максимальным значениями экземпляра Slider.

Компонент Slider позволяет выбрать значение из непрерывного диапазона между минимальным и максимальным значениями. Однако можно задать параметр snapInterval, чтобы указать интервалы между минимальным и максимальным значениями. Экземпляр Slider может показывать на линии деления, независимые от заданных значений ползунка, через указанные интервалы.

По умолчанию ползунок имеет горизонтальную ориентацию, но его можно разместить по вертикали, задав значение vertical для параметра direction. Линия ползунка находится между конечными точками, а деления шкалы располагаются слева направо прямо над линией.

Взаимодействие пользователей с компонентом Slider

Когда экземпляр Slider получает фокус, им можно управлять с помощью следующих клавиш.

Клавиша                                                             Описание

"Стрелка вправо"                                          Увеличивает соответствующее значение для горизонтального ползунка. "Стрелка вверх"                                             Увеличивает соответствующее значение для вертикального ползунка. "Стрелка влево"                                             Уменьшает соответствующее значение для горизонтального ползунка. "Стрелка вниз"                                               Уменьшает соответствующее значение для вертикального ползунка. Shift+Tab                                                           Переводит фокус на предыдущий объект.

Tab                                                                      Переводит фокус на следующий объект.

Дополнительные сведения об управлении фокусом см. в описании класса IFocusManager и классу FocusManager в руководствах Справочник по языку ActionScript 3.0 и компонентам и «Работа с FocusManager» на странице 29.

Интерактивный просмотр каждого элемента Slider отражает изменения, которые были внесены в параметры в Инспекторе свойств или Инспекторе компонентов во время разработки.

Параметры компонента Slider

В Инспекторе свойств или Инспекторе компонентов можно задать следующие параметры разработки для каждого экземпляра компонента Slider : direction, liveDragging, maximum, minimum, snapInterval, tickInterval и value. Каждый из этих параметров имеет соответствующее свойство ActionScript с тем же именем. Сведения о возможных значениях для этих параметров см. в описании класса Slider в Справочнике по языку ActionScript 3.0 и компонентам.

Создание приложения с компонентом Slider

В следующем примере создается экземпляр Slider, чтобы пользователь мог сообщить, насколько ему понравилось предполагаемое событие. Пользователь перемещает экземпляр Slider вправо или влево, чтобы выразить большую или меньшую степень удовлетворения.

1   Создайте новый документ Flash (ActionScript 3.0).

2   Перетащите компонент Label с панели "Компоненты" в центр рабочей области.

•   Присвойте ему имя экземпляра valueLabel.

•   Задайте значение 0% для параметра text.

3   Перетащите компонент Slider с панели "Компоненты" и поместите его под экземпляром value_lbl.

•   Присвойте ему имя экземпляра aSlider.

•   Введите 200 для значения ширины (W).

•   Введите 10 для значения высоты (H).

•   Задайте значение 100 параметру maximum.

•   Задайте значение 10 параметрам snapInterval и tickInterval.

4   Перетащите еще один экземпляр Label с панели "Библиотека" прямо под aSlider.

•   Присвойте ему имя экземпляра promptLabel.

•   Введите 250 для значения ширины (W).

•   Введите 22 для значения высоты (H).

•   Введите значение Насколько вам понравилось для параметра text.

5   Откройте панель "Действия", выберите "Кадр 1" на главной временной шкале и введите следующий код

ActionScript.

import fl.controls.Slider; import fl.events.SliderEvent; import fl.controls.Label;

aSlider.addEventListener(SliderEvent.CHANGE, changeHandler);

function changeHandler(event:SliderEvent):void {

valueLabel.text = event.value + "percent";

}

6   Выберите "Управление" > "Тестировать ролик".

В этом примере при перемещении ползунка от одного интервала к другому прослушиватель события SliderEvent.CHANGE обновляет свойство text экземпляраvalueLabel, отображая процент, соответствующий позиции ползунка.

Создание приложения с компонентом Slider помощью ActionScript

В следующем примере компонент Slider создается с помощью ActionScript. Загружается изображение цветка, и с помощью экземпляра Slider пользователю предоставляется возможность сделать его более насыщенным или более прозрачным путем изменения свойства alpha в соответствии с позицией ползунка.

1   Создайте новый документ Flash (ActionScript 3.0).

2   Перетащите компоненты Label и Slider с панели "Компоненты" на панель "Библиотека" текущего документа.

В результате этого компоненты добавляются в библиотеку, но остаются невидимым в приложении.

3   Откройте панель "Действия", выберите Кадр 1 на основной временной шкале и введите следующий код, чтобы создать и разместить экземпляры компонентов:

import fl.controls.Slider; import fl.events.SliderEvent; import fl.controls.Label; import fl.containers.UILoader;

var sliderLabel:Label = new Label();

sliderLabel.width = 120;

sliderLabel.text = "< Fade – Brighten >";

sliderLabel.move(170, 350);

var aSlider:Slider = new Slider(); aSlider.width = 200; aSlider.snapInterval = 10; aSlider.tickInterval = 10; aSlider.maximum = 100; aSlider.value = 100; aSlider.move(120, 330);

var aLoader:UILoader = new UILoader();

aLoader.source = "http://www.flash-mx.com/images/image1.jpg";

aLoader.scaleContent = false;

addChild(sliderLabel); addChild(aSlider); addChild(aLoader);

aLoader.addEventListener(Event.COMPLETE, completeHandler);

function completeHandler(event:Event) {

trace("Number of bytes loaded: " + aLoader.bytesLoaded);

}

aSlider.addEventListener(SliderEvent.CHANGE, changeHandler);

function changeHandler(event:SliderEvent):void {

aLoader.alpha = event.value * .01;

}

4   Выберите "Управление" > "Тестировать ролик", чтобы запустить приложение.

5   Переместите ползунок экземпляра Slider влево, чтобы сделать изображение прозрачнее, или вправо, чтобы оно стало более насыщенным.

Источник: Использование компонентов ActionScript 3.0 – 2008

По теме:

  • Комментарии