Главная » ActionScript » Настройка компонента Button

0

Компонент Button можно изменять по горизонтали и по вертикали как во время разработки, так и при исполнении. При разработке выделите компонент в рабочей области и используйте инструмент "Свободное преобразование" или одну из команд "Модификация" > "Преобразовать". При исполнении используйте метод setSize() или любые применимые свойства класса Button, например height и width, scaleX и scaleY.

Изменение размера кнопки не влияет на размер значка или метки. Ограничивающий прямоугольник кнопки совпадает с ее рамкой и определяет область попадания экземпляра. При увеличении размера экземпляра увеличивается и размер области попадания. Если метка не помещается в ограничивающий прямоугольник, она обрезается.

Если кнопка имеет значок, который больше самой кнопки, этот значок выходит за границы рамки кнопки.

Использование стилей для компонента Button

Как правило, стили компонента Button задают значения для его обложек, значков, форматирования текста и внутренних полей при рисовании компонента в его различных состояниях.

Следующая процедура помещает два компонента Button в рабочую область и устанавливает свойство emphasized обоих компонентов на значение true в случае нажатия на один из них пользователем. При этом также стиль emphasizedSkin второго компонента Button устанавливается на значение selectedOverSkin в случае нажатия на него пользователем. Таким образом, два компонента Button демонстрируют различные обложки для одного и того же состояния.

1   Создайте файл Flash (ActionScript 3.0).

2   Перетащите две кнопки, одну за другой, в рабочую область и присвойте им имена экземпляров aBtn и bBtn.

На вкладке "Параметры" Инспектора свойств присвойте им метки "Кнопка А" и "Кнопка Б".

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

bBtn.emphasized = true; aBtn.emphasized = true; bBtn.addEventListener(MouseEvent.CLICK, Btn_handler); function Btn_handler(evt:MouseEvent):void {

bBtn.setStyle("emphasizedSkin", "Button_selectedOverSkin");

}

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

5   Щелкните одну из кнопок, чтобы увидеть эффект применения стиля emphasizedSkin к каждой кнопке.

Использование обложек для компонента Button

Компонент Button имеет следующие обложки, соответствующие его различным состояниям. Для редактирования обложек в целях изменения внешнего вида кнопки дважды щелкните экземпляр кнопки в рабочей области, чтобы открыть палитру его обложек, как показано на рисунке ниже:

Обложки компонента Button

Если кнопка активна, она отображает состояние over при наведении на нее указателя мыши. Кнопка получает фокус ввода и отображает состояние down при ее нажатии. Кнопка возвращается в состояние over при отпускании кнопки мыши. Если отвести указатель с кнопки при нажатой кнопке мыши, кнопка вернется в исходное состояние. Если параметр toggle установлен на значение true, для отображения нажатого состояния используется обложка selectedDownSkin, для отжатого состояния — selectedUpSkin, а для состояния "наведение указателя" — selectedOverSkin.

Если кнопка неактивна, она отображает неактивное состояние disabled вне зависимости от действий пользователя.

Для редактирования одной из обложек дважды щелкните ее, чтобы открыть в режиме редактирования символов, как показано на рисунке ниже:

Компонент Button в режиме редактирования символов

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

Следующая процедура изменяет цвет обложки selected_over компонента Button.

1   Создайте новый файл Flash (ActionScript 3.0).

2   Перетащите кнопку с панели "Компоненты" в рабочую область. На вкладке "Параметры" установите значение параметра toggle на значение true.

3   Дважды щелкните кнопку, чтобы открыть палитру ее обложек.

4   Дважды щелкните обложку selected_over, чтобы открыть ее в режиме редактирования символов.

5   Установите масштаб на 400 %, чтобы увеличить значок для редактирования.

6   Дважды щелкните фон, чтобы его цвет появился в палитре "Заливка" в Инспекторе свойств.

7   В палитре "Заливка" выберите цвет #CC0099 для фона обложки selected_over.

8   Нажмите кнопку "Назад" в левой части панели правки над рабочей областью, чтобы вернуться в режим редактирования документа.

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

10 Нажмите кнопку, чтобы она приняла выбранное состояние.

При наведении указателя мыши на кнопку состояние selected_over должно отображаться так, как показано на рисунке ниже.

Компонент Button, демонстрирующий обложку selected_over с измененным цветом

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

По теме:

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