В. Дронов - Macromedia Flash Professional 8. Графика и анимация
Во-вторых, как уже говорилось, рисование графики выполняется с помощью специальных методов объекта movieClip. Это значит, что программная графика будет нарисована в том клипе, методы которого мы будем вызывать.
Перейдем к делу.
Для рисования графики из сценариев используется так называемое программное перо (не путать с инструментом рисования "перо"!). С помощью особых методов объекта movieClip это перо можно устанавливать в определенные точки на рабочем листе и проводить им линии, прямые и кривые. Также с помощью программного пера задаются точки, где должны быть помещены заливки.
Для перемещения программного пера в нужную точку рабочего листа используется метод moveTo. Нужно, правда, иметь в виду, что этот метод только перемещает перо, но реально ничего не рисует. Вот формат вызова этого метода:
<Клип>.moveTo(<Х>, <Y>);
Понятно, что в качестве параметров методу передаются горизонтальная и вертикальная координаты точки, в которую нужно переместить программное перо. Эти координаты отсчитываются относительно точки отсчета клипа.
Проще всего программно нарисовать прямую линию, использовав метод lineTo. Он проводит прямую от точки, в которой в данный момент находится программное перо, до точки, чьи координаты переданы в качестве параметров. Вот формат вызова этого метода:
<Клип>.lineTo(<Х>, <Y>);
Как уже говорилось, параметры этого метода есть координаты конечной точки рисуемой прямой. Они отсчитываются от точки отсчета клипа либо от левого верхнего угла, если метод вызван для самого фильма. После рисования прямой линии программное перо останется в ее конечной точке; это позволяет без лишних перемещений нарисовать ломаную или какую-либо геометрическую фигуру.
Вот пример сценария, рисующего в клипе paintBox треугольник:
with (_root.paintBox) {
moveTo(100, 200);
lineTo(300, 200);
lineTo(200, 100);
lineTo (100, 200);
}
Рисование кривых выполняется чуть сложнее. Для этого используется метод curveTo, принимающий четыре параметра:
<Клип>.curveTo(<АХ>, <AY>, <Х>, <Y>);
Параметры Х и Y определяют соответственно горизонтальную и вертикальную координаты конечной точки кривой (начальной же точкой является, опять же, точка, в которой в данный момент находится программное перо). А параметры АХ и AY указывают горизонтальную и вертикальную координаты точки искривления. Все эти координаты отсчитываются, опять же, относительно точки отсчета клипа.
Вот пример сценария, рисующего нечто похожее на окружность:
with (_root.paintBox) {
moveTo(300, 300);
curveTo(400, 300, 400, 200);
curveTo(400, 100, 300, 100);
curveTo(200, 100, 200, 200);
curveTo(200, 300, 300, 300);
}
Увы — более удобных способов программно нарисовать окружность Flash не предлагает. Приходится или создавать образец, рисовать в нем окружность и программно порождать от него экземпляры, или выходить из положения вышеописанным способом. Хотя, можно еще описать окружность в виде функции и нарисовать ее график.
Для рисования линии, неважно — прямой или кривой, будут использованы текущие параметры ее стиля: толщина, цвет и прозрачность. Задание текущего стиля выполняется с помощью метода linestyle. Он вызывается вот так:
<Клип>.lineStyle([<Толщина линии>, [<Цвет линии>,
[<Прозра чность линии>]]]);
Толщина линии задается в пикселах, от 0 до 255. Если она не задана, то линия нарисована не будет. Цвет линии задается в формате 0×RRGGBB, где RR — доля красного цвета, GG — зеленого и ВВ — синего соответственно. Пример задания цвета: 0×22FF44. Прозрачность линии может принимать значения от 0 (полная прозрачность) до 100 (полная непрозрачность).
Важный момент: перед рисованием любой линии лучше с помощью метода linestyle задать ее стиль. Flash сохранит его и сделает текущим; все последующие линии будут нарисованы с использованием текущего стиля.
Поэтому сценарий, рисующий треугольник, нам придется переписать:
with (_root.paintBox) {
lineStyle(2, 0x000000);
moveTo(100, 200);
lineTo (300, 200);
lineTo(200, 100);
lineTo (100, 200);
}
Здесь мы с помощью метода linestyle задали стиль линии: толщина в 2 пиксела и черный цвет. После этого треугольник уж точно будет нарисован.
А теперь давайте посмотрим на только что нарисованный треугольник и подумаем: чего же в нем не хватает? В главе 3 мы выяснили, что, если нарисовать замкнутую фигуру, Flash автоматически создаст заливку; при этом не имеет значения, какой инструмент рисования использовался. Здесь же заливки нет. Почему?
Вероятно, разработчики Flash решили, что, раз уж мы пользуемся сценариями ActionScript, значит, мы достаточно квалифицированные программисты, и нам не нужна помощь. Поэтому нам придется самостоятельно создавать заливку для нарисованных программно фигур.
Для создания заливки служат два метода. Первый из них — beginFill — указывает Flash, что с этого момента нужно отслеживать все операции программного рисования и после создания замкнутой фигуры учесть на будущее, что ей нужна заливка. Второй — endFill — прекращает отслеживание операций рисования и рисует собственно заливку (если, конечно, ее можно нарисовать, т. е. если нарисованный нами контур полностью или частично замкнут).
Формат вызова метода beginFill такой:
<Клип>.beginFill([<Цвет заливки>, [<Прозрачность заливки>]]);
Цвет заливки задается в том же формате 0×RRGGBB, а прозрачность — значением от 0 до 100. Если эти параметры не заданы, будут использованы текущие значения цвета и прозрачности заливки — те, что были указаны при предыдущем вызове метода beginFill. Поэтому при самом первом вызове этого метода нужно указать оба его параметра.
Метод endFill не принимает ни одного параметра:
<Клип>.endFill();
Теперь еще раз перепишем сценарий, чтобы он рисовал треугольник с заливкой:
with (_root.paintBox) {
lineStyle(2, 0×000000);
beginFill(0×222233, 100);
moveTo(100, 200);
lineTo(300, 200);
lineTo (200, 100);
lineTo(100, 200);
endFill ();
}
С помощью метода beginFill создается обычная, сплошная заливка. Если же нужно создать градиентную заливку, то придется воспользоваться методом beginGradientFill в паре с методом endFill. Полное описание этого метода приведено в интерактивной справке Flash.
Чтобы удалить все, что было нарисовано программно, нужно вызвать метод clear:
_root.paintBox.clear();
При этом будет также сброшен заданный с помощью метода linestyie стиль линий. Графика же, нарисованная вручную, удалена не будет.
Пример сценария, рисующего график функцииА теперь давайте попрактикуемся и напишем сценарий, рисующий график функции f(x) = х2. Это, скорее, курьез, чем реально необходимый пример, но он поможет нам глубже изучить методы рисования объекта movieClip.
Сначала создадим новый документ Flash. И привяжем к единственному кадру анимации следующий сценарий:
var dx = 200;
// Величина отступа от левого края рабочего листа
var х = 0;
var у = 0;
// Временные переменные
// Каждая точка графика будет представлять собой небольшой квадрат с
// черной заливкой
lineStyle(1, 0×000000);
// Стиль линий контура этого квадрата
for(х = -20; х < 21; х++) {
// Используем цикл со счетчиком, чтобы вычислить значения функции
// для аргументов в пределах от -20 до 20
у = х * х;
// Вычисляем значение функции
beginFill(0×000000);
// Начинаем рисование заливки квадрата
// Рисуем квадрат
endFill ();
// Заканчиваем рисование заливки
}
Теперь запустим на воспроизведение готовый фильм в отдельном окне. Работает!
Правда, график наш рисуется вверх ногами. Чтобы исправить этот огрех, перепишем наш сценарий. Теперь он будет выглядеть вот так (добавленный и измененный код выделен полужирным шрифтом):
var dx = 200;
dy = 400;
// Величина отступа от верхнего края рабочего листа
var х = 0;
var у = 0;
lineStyle(1, 0×000000);
for(х = -20; х < 21; х++) {
у = х * х;
beginFill(0×000000);
moveTo(dx + х — 1, dy — у + 1);
lineTo(dx + x + 1, dy — у + 1);
lineTo(dx + x + 1, dy — у — 1);
lineTo(dx + х — 1, dy — у — 1);
