Текстовое поле

К шарику нужно добавить динамическое текстовое поле, в котором будет отображаться номер. Для создания надписи используем функцию createTextField клипа ball

ball.createTextField("txt", 10, -15, -25, 30, 60 );

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

Поле имеет свойства, которые можно изменять. Вот некоторые из них:

• type — тип поля, может принимать значения "dynamic" (динамический текст) и "input" (поле ввода);

• text — символы, которые выводятся;

• selectable — если равно true, текст можно выделять мышкой;

• autoSize — если true, размеры поля автоматически подстраиваются под текст;

• multiline — если true, используется многострочный текст;

• password — если true, вместо символов выводятся звездочки.

Мы запишем в это поле значение переменной nomer и сделаем так, чтобы текст нельзя было выбрать мышкой, а размер поля определялся автоматически:

ball.txt.text = nomer;

ball.txt.selectable = false;

ball.txt.autoSize = true;

21. Добавьте в блок with(...) в функции drawBall строчки

ball.createTextField("txt", 10, -15, -25, 30, 60 );

txt.text = nomer;

txt.selectable = false;

txt.autoSize = true;

и проверьте работу клипа.

Теперь нужно научиться настраивать шрифт. Для этого применим новый объект

fmt = new TextFormat();

для которого можно установить свойства

• font — название шрифта;

• size — размер шрифта в пунктах;

• color — цвет в формате RGB;

• bold — если true, то шрифт жирный;

• italic — если true, то курсив.

В справочной документации можно найти описание остальных свойств текста.

В нашем случае выберем шрифт Arial, размер 40 пунктов, жирный, белого цвета:

with ( fmt ) {

font = "Arial";

size = 40;

color = 0xFFFFFF;

bold = true;

}

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

setTextFormat:

ball.txt.setTextFormat ( fmt );

Другое метод, setNewTextFormat, делает то же самое для нового текста, который будет добавлен или изменен.

22. Добавьте в блок with(...) в функции drawBall строчки

fmt = new TextFormat();

with ( fmt ) {

font = "Arial";

size = 40;

color = 0xFFFFFF;

bold = true;

}

txt.setTextFormat ( fmt );

Остается выровнять текст по центру шарика. Учитывая, что его свойство autoSize установлено в true, размер (свойства _width и _height) будет автоматически изменен при изменении шрифта. Для центровки нужно сместить координаты _x и _y на половину ширины и высоты соответственно.

23. Добавьте в блок with(...) в функции drawBall строчки

txt._x = - txt._width / 2;

txt._y = - txt._height / 2;

и проверьте работу клипа.

Кнопки

Теперь построим кнопку полностью программным способом. Для этого нужно

• определить функции drawUp, drawOver и drawDown, которые будут рисовать кнопку в трех состояниях (нормальное, мышка над кнопкой, нажата);

• установить обработчики событий, которые переключают состояния кнопки и при щелчке запускают процесс «удаления» шарика.

24. Добавьте в конец кода кадра 1 строчки

createEmptyMovieClip("btn", 3);

btn._x = 175;

btn._y = 350;

btn.w = 50;

btn.h = 30;

drawUp();

btn.onRollOver = drawOver;

btn.onRollOut = drawUp;

btn.onPress = drawDown;

btn.onRelease = function() {

drawUp();

ball.vanish();

}

Этим кодом мы создаем клип btn на глубине 3 главного монтажного стола. Объект btn устанавливается в точку (175,350) и к нему добавляются два свойства: w (ширина кнопки) и h (высота). Обработчики onRollOver, onRollOut и onPress устанавливаются на соответствующие (еще не написанные) функции. При отпускании кнопки мыши (событие release) кнопка перерисовывается в нормальном состоянии и запускается процесс удаления шарика. Все остальное делает метод vanish.

Функции, рисующие кнопку, мы поместим в отдельный файл.

25. Создайте новый файл типа ActionScript File и добавьте в него код функций:

function drawUp() { drawBtn("up"); }

function drawOver() { drawBtn("over"); }

function drawDown() { drawBtn("down"); }

function drawBtn ( state ) {

d = 0;

col1 = 0xFFFFFF;

col2 = 0;

if ( state == "up" ) color = 0;

if ( state == "over" ) color = 0xFFFFFF;

if ( state == "down" ) {

color = 0xFF0000;

d = 2;

col1 = 0;

col2 = 0xFFFFFF;

}

with ( btn ) {

clear();

beginFill ( 0xEEEEEE, 80 );

lineStyle(2, col1, 100 );

moveTo(d, d+h);

lineTo(d, d);

lineTo(d+w, d);

lineStyle(2, col2, 100 );

lineTo(d+w, d+h);

lineTo(d, d+h);

endFill();

lineStyle(1, 0, 0 );

beginFill ( color, 80 );

moveTo(d+5, d+h-10);

lineTo(d+w/2, d+5);

lineTo(d+w-5, d+h-10);

lineTo(d+5, d+h-10);

endFill();

}

}

и сохраните его под именем button.as.

Все состояния кнопки рисуются с помощью одной функции drawBtn, которой передается символьная строка, определяющая нужное состояние.

Переменная d обозначает смещение кнопки от нормального положения. Она равна нулю для состояний "up" и "over" и 2 для состояния "down" (кнопка как бы сдвигается вниз и вправо).

Цвет левой и верхней границ кнопки хранится в col1, а цвет правой и нижней — в col2. Это позволяет изменять вид с «выпуклого» на «утопленный».

В блоке with(btn){...} сначала рисуется фон кнопки с рамкой нужных цветов, а затем — треугольный значок, цвет которого определяется переменной color.

26. Добавьте в начало кода, связанного с кадром 1, строчку

#include "button.as"

и проверьте работу кнопки.

27. Сохраните фильм с именем ЛР9_3.fla

88

ActionScript 2.0 Лабораторный практикум