На рис. 7.5 показана кривая, которая получилась в результате нажатия пользователем кнопки мыши и перемещения курсора. Помните, что скорость рисования соответствует частоте смены кадров ролика, поэтому для того, чтобы процесс рисования проходил плавно, это значение должно быть максимальным и равняться 120 кадр/с. Готовый ролик вы можете увидеть, загрузив с Web-сайта файл Drawing-line.fla.

Рисунок 7.5. Простая программа рисования позволяет нарисовать длинную черную кривую

Создание полной программы рисования

Хотя предыдущая программа демонстрирует продвинутые возможности ActionScript, результат ее работы не очень-то интересен. В программу можно добавить другие фигуры и цвета, а также возможность выводить на печать результаты рисования.

Второй параметр функции lineStyle отвечает за выбор цвета. В предыдущем примере был выбран черный цвет — 0x000000. Префикс 0х сообщает программе, что следующее за ним число надо воспринимать в шестнадцатеричном формате, так же, как это происходит при HTML-верстке. Шесть последних цифр обозначают собственно цвет.

Также можно использовать значение цвета, получаемое вызовом функции getRGB. В ролике Drawing-fill.fla я использовал несколько разноцветных кнопок. Каждая из этих кнопок представляет собой клип с кнопкой внутри.

На рис. 7.6 показан вид исходного файла Drawing-fill.fla. Слева расположены кнопки, с помощью которых пользователь может управлять цветом.

Рисунок 7.6. Кнопки в левой части экрана дают пользователю возможность выбрать цвет и фигуру

Каждая из этих кнопок создана из одного библиотечного эталона. Когда копия помещается на рабочее поле, можно настроить ее цвет с помощью меню color на панели Properties. Внутри клипа находится кнопка, чтобы отслеживать выбор пользователя. Ниже приведен сценарий кнопки. Значение цвета кнопки помещается в переменную brushColor. Ее значение затем передается переменной lineColor в клип «actions».

on (release) {

// Определяем цвет.

myColor = new Color(this);

brushColor = myColor.getRGB;

// Передаем значение переменной lineColor клипа "actions".

_root.actions.lineColor = brushColor;

// Определяем позицию рамки.

_root["Color Selection"]._x = this._x;

_root["Color Selection"]._y = this._y;

Сценарий кнопки устанавливает координаты клипа «Color Selection», то есть рамки, равными координатам клипа, по которому щелкнул пользователь. При этом вокруг кнопки с выбранным цветом появится контур (рис. 7.6). Маленькая кнопка с кружочком посередине служит для выбора режима рисования – с заливкой или без. Клип с этой кнопкой состоит из двух кадров: с пустым и заполненным кружочком. Кнопка содержит сценарий, позволяющий переключаться между кадрами, и определяет переменную fill клипа «actions».

on (release) {

if (_currentFrame == 1) {

gotoAndStop(2);

_root.actions.fill = true;

} else {

gotoAndStop(1);

_root.actions.fill = false;

}

С помощью кнопок, определяющих цвета, и кнопки выбора режима (с заливкой/без заливки) пользователь может рисовать разноцветные фигуры. Как и в предыдущем примере, код, необходимый для рисования, содержится в клипе «actions». Он начинается с определения значения следующих переменных: draw – false, fill – false, lineColor – 0x000000. Также определяются четыре переменные для которые ограничивают область в которой пользователь может рисовать.

onClipEvent (load) {

// Рисовать или не рисовать?

draw = false;

// Определяем значение fill.

fill = false;

// Начальный цвет линии – черный.

lineColor = 0x000000;

// Определяем границы области рисования.

xmax = 550;

xmin = 70;

ymax = 400;

ymin = 0;

При нажатии кнопки мыши курсор начинает оставлять след. Координаты курсора хранятся в переменных x и у. Их значения проверяются, и, если они выходят за границы разрешенной области, рисование не происходит. Переменная lineColor передается функции lineStyle в качестве аргумента, определяющего цвет линии. Если переменная fill имеет значение true, то определяется новый массив. Он содержит координаты всех точек вдоль кривой, которую нарисовал пользователь. Массив состоит из объектов следующего вида: {x: значение, у: значение}. Элементы массива потребуются для создания залитой цветом области.

onClipEvent (mouseDown) {

// Определяем позицию курсора.

x = _root._xmouse;

y = _root._ymouse;

// Рисуем, если не вышли за границы поля.

if ((x>xmin) and (x<xmax) and (y>ymin) and (y<ymax)) {

draw = true;

// Определяем параметры линии.

_root.lineStyle(1,lineColor,100);

_root.moveTo(x,y);

// Если выбран режим заливки, то создаем массив.

if (fill) {

fillArray = new Array;

fillArray.push({x:x, y:y});

}

}