Работа с графикой

Работа с графикой

Хоть Flash и предоставляет мощные средства рисования графики и создания анимации, иногда бывает нужно кое-что дорисовать уже во время воспроизведения фильма. Например, если мы собираемся создать фильм, который в процессе воспроизведения будет выводить на рабочий лист график какой-либо функции, нам потребуются средства для рисования этого самого графика. Что в этом случае может предложить нам Flash?

А предлагает он целый набор методов и свойств объекта MovieClip, служащих для рисования различных линий и заливок. Графика, нарисованная с их помощью, называется созданной программно или просто программной графикой.

В главе 14 мы узнали о маскирующих слоях. Но Flash не останавливается на этом — он позволяет преобразовать в маску любой клип, за исключением, разумеется, внешней анимации.

Программное рисование графики

В этом разделе мы поговорим о том, как выполняется рисование графики из сценариев и какие методы объекта movieClip для этого используются.

Но сначала нужно уяснить два момента.

Во-первых, вся программно нарисованная графика выводится "ниже" нарисованной вручную, т. е. с помощью инструментов рисования Flash. Говорят, что программная графика имеет меньший номер в порядке перекрытия, чем нарисованная вручную. Поэтому перед написанием сценариев, рисующих графику, нужно позаботиться о том, чтобы созданная различными способами графика взаимно не перекрывалась. Рекомендуется выделить для программно рисуемой графики специальные "пустые" клипы, находящиеся на самых верхних слоях.

Во-вторых, как уже говорилось, рисование графики выполняется с помощью специальных методов объекта 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) = х². Это, скорее, курьез, чем реально необходимый пример, но он поможет нам глубже изучить методы рисования объекта 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);

lineTo(dx + x — 1, dy — у + 1);

endFill ();

}

После этих изменений наш график будет нарисован нормально.

Программное управление масками

А теперь выясним, что можно сделать с масками, используя методы объекта movieClip.

Чтобы маскировать вложенный клип другим клипом (который будет превращен в маскирующий), используется метод setMask:

<Маскируемый клип>.setMask(<Клип-маска>);

Самое интересное заключается в том, что оба клипа совсем не обязательно должны находиться в разных слоях (о слоях см. главу 5, о маскирующих слоях — главу 14). Кроме того, и маскирующий, и маскируемый клипы могут содержать сложную анимацию и даже двигаться. Ух, каких чудес можно натворить!

Давайте создадим новый документ Flash, поместим на рабочий лист клип, содержащий любое растровое изображение, а на него наложим клип с какой-либо простой геометрической фигурой. Назовем нижний клип masked, а верхний — mask. После этого привяжем к единственному кадру анимации такой вот сценарий:

masked.setMask(mask);

mask.startDrag(true);

Первое выражение этого сценария маскирует клип-растровое изображение masked клипом mask. Второе выражение заставляет клип mask (т. е. маску) перемещаться вслед за курсором мыши.

Теперь запустим на воспроизведение созданный фильм в отдельном окне и начнем перемещать курсор мыши с места на место. Забавно получилось, не правда ли?

Кстати, маски, созданные путем вызова метода setMask, имеют приоритет над масками, созданными вручную. Иными словами, если мы создадим маскирующий слой с клипом-маской mask и замаскируем им другой клип masked, то выражение:

mask.setMask(masked);

сделает клип masked маской, а клип mask — маскируемым.

Маскируемый клип в данный момент времени может иметь только одну маску. Так, если для клипа masked вызвать метод setMask еще раз, но передать ему в качестве параметра клип mask2, то он станет новой маской для masked, а предыдущая маска mask "уйдет в отставку".

Чтобы убрать маску совсем, достаточно вызвать метод setMask с параметром null:

masked.setMask(null);

Данный текст является ознакомительным фрагментом.