Adobe Flash. Создание аркад, головоломок и других игр с помощью ActionScript
Шрифт:
Задача проекта
Задача данного раздела – создать программу, в которой пользователь может рисовать, как в простом графическом приложении. Пользователь должен иметь возможность рисовать простые линии и фигуры, а также применять различные цвета.
Создание простой программы рисования
Конечный ролик позволит пользователю рисовать, используя различные фигуры и цвета, однако для начала дадим ему возможность нарисовать непрерывную линию.
Мы воспользуемся новыми командами для рисования, появившимися в версии 8. Описание этих команд вы можете найти на панели ActionScript (Objects → Movie → Movie Clip → Drawing Methods)
Эти команды как бы имитируют движения пользователя, передвигающего мышь. Сначала используем команду lineStyle для определения толщины и цвета будущей линии. Команда moveTo передвигает указатель точки для рисования по экрану; линия при этом не прорисовывается. И наконец, мы используем команду lineTo для рисования линии из текущей позиции в заданную.
Единственным элементом нашего ролика является клип "actions", который содержит весь необходимый код.
Сценарий начинается с присваивания переменной draw значения false. Эта переменная используется, чтобы определить, рисует пользователь или нет. Затем с помощью lineStyle мы задаем толщину и цвет.
Примечание
Третий параметр команды lineStyle определяет прозрачность линии, то есть свойство alpha. Значение 100 соответствует абсолютно непрозрачному объекту, значение 50 делает объект полупрозрачным.
onClipEvent (load) {
// Рисовать или не рисовать?
draw = false;
// Линия шириной в 1 пиксел, черная, непрозрачная.
_root.lineStyle(1,0x000000,100);
}Когда пользователь нажимает кнопку мыши, переменной draw присваивается значение true. Затем команда moveTo перемещает указатель в текущую позицию курсора. Мы используем конструкцию _root для обращения к свойствам _xmouse и _ymouse, т. к. хотим чтобы центр координат был независим от положения клипа «actions».
onClipEvent (mouseDown) {
// Будем рисовать.
draw = true;
// Переходим к координатам курсора.
_root.moveTo(_root._xmouse, _root._ymouse);
}Когда пользователь отпускает кнопку мыши, переменной draw присваивается значение false, и процесс рисования завершается.
onClipEvent (mouseUp) {
// Завершаем рисование.
draw = false;
}Значение переменной draw проверяется при каждом обращении к кадру. Если оно истинно, то рисуется линия от предыдущей к текущей позиции курсора.
Примечание
Константы true и false могут использоваться конструкциями if и for в качестве проверки условия выполнения кода. Вы также можете использовать их для отслеживания объектов, которые могут находиться только в двух состояниях (вкл/выкл).
onClipEvent (enterFrame) {
if (draw) {
_root.lineTo(_root._xmouse,_root._ymouse);
}
}Примечание
Обратите внимание, что все обращения к командам рисования
На рис. 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;
}