Евсеев А.С. , Прибыткова Н.И.
Компьютерная анимация – раздаточный материал. КС и Т / ХНЭУ
Лекция № 12. Программное рисование в Macromedia Flash
Цель лекции:
Ключевые слова:
§ 12.1. Обзор методов программного рисования
Из этого параграфа вы узнаете об:
Основные функции программного рисования. Для рисования примитивов используются такие функции объекта MovieClip:
• beginFill ([rgb[, alpha]]);
• beginGradientFill (fillType, colors, alphas, ratios, matrix);
• clear();
• curveTo (control, control, anchor, anchor);
• endFill();
• lineStyle ([thickness[, rgb[, alpha]]]);
• lineTo (x, y);
• moveTo (x, y).
Функции moveTo() и lineTo() используются для рисования линий. moveTo() устанавливает позицию "карандаша" (курсора) в позиции x, y. lineTo() проводит линию от позиции, установленной moveTo(), к позиции указанной параметрами x, y в самой функции lineTo() (рис. 12.1).
Рис. 12.1. Пример программного рисования
Но, прежде чем рисовать линии этими функциями, нужно установить свойства линии функцией lineStyle(). У нее три необязательных параметра: thickness – указывает толщину линии; rgb – цвет (напр. 0x56FFCC); alpha – значение прозрачности. Если параметр не указан, его значение считается равным нулю.
Пример кода, который рисует синий квадрат в текущем объекте MovieClip:
lineStyle(1, 0x0000FF);
moveTo(100, 100);
lineTo(200, 100);
lineTo(200, 200);
lineTo(100, 200);
lineTo(100, 100);
Для закрашивания нарисованных фигур используются функции beginFill() и endFill().
beginFill() включает режим закрашивания. После ее вызова, все нарисованные контуры будут закрашиваться, образуя замкнутые фигуры. beginFill() имеет два необязательных параметра: rgb – указывает цвет закрашивания, alpha – прозрачность.
endFill() отключает режим закрашивания.
Рекомендуется создавать пустой объект с помощью функции createEmptyMovieClip(). Этой функции передаются два параметра: имя экземпляра клипа, и целое значение, которое указывает глубину клипа на экране, относительно других клипов [41].
Пример с использованием функций beginFill() и endFill():
_root.createEmptyMovieClip("myClip", 1);
myClip.lineStyle(2,0x234567);
myClip.beginFill(0x7878FF);
myClip.moveTo(70,20);
myClip.lineTo(20,100);
myClip.lineTo(120,100);
myClip.lineTo(70,20);
myClip.endFill();
12.2. Функции программного рисования кривых Безье и градиентных заливок
Пример:
lineStyle(1);
beginFill(0xFF9921, 20);
moveTo(70,20);
curveTo(120,20,120,70);
curveTo(120,120,70,120);
curveTo(20,120,20,70);
curveTo(20,20,70,20);
endFill();
moveTo(140,120);
curveTo(140,20,160,20);
curveTo(180,20,180,120);
Сплошные и градиентные заливки. Для реализации градиентной заливки используются методы beginGradientFill() и endFill() класса MovieClip (рис. 12.2).
Рис. 12.2. Пример создания градиента
Использование beginGradientFill():
myClip.beginGradientFill() – если есть разомкнутая траектория, замыкает ее с помощью линии и применяет заливку замкнутой области. Заливка таких замкнутых траекторий не выполняется.
myClip.beginGradientFill (undefined, colorArray, alphaArray, ratioArray, transformationMatrix) – если есть разомкнутая траектория, замыкает ее с помощью линии и применяет заливку замкнутой области. Заливка таких замкнутых траекторий не выполняется.
myClip.beginGradientFill ("linear"|"radial", colorArray, alphaArray, ratioArray, transformationMatrix) – если есть разомкнутая линия, замыкает ее с помощью линии и применяет заливку к замкнутой области. Выполняет линейную или градиентную (в зависимости от параметра) заливку таких замкнутых траекторий, переходя от цвета к цвету, указанному в массиве (colorArray), с уровнями прозрачности, приведенными в массиве (alphaArray), коэффициентами, указанными в массиве (ratioArray), и преобразованными согласно матрице преобразования transformationMatrix.
Использование endFill():
myClip.endFill() – завершает и защищает от изменений заливки, созданных с момента предыдущего выполнения выражения beginFill() или beginGradientFill(). Не выполняет заливку замкнутых областей до тех пор, пока не встретится другое выражение beginFill() или beginGradientFill(). Метод beginGradientFill() будет действовать относительно всех элементов, которые вы рисуете в определенном видеоклипе, до тех пор, пока не будет выполнен метод endFill(), clear() или метод beginFill() или beginGradientFill().
Градиентная заливка может быть линейной (параллельные полосы) или радиальной (концентрические круги) [41].
Работа с тремя градиентными массивами. Три свойства градиентной заливки сохраняются в трех разных массивах. Этими свойствами являются цвета, показатели прозрачности и коэффициенты. Первым указывается массив цветов (colorArray), которые будут использоваться в заливании. Каждое значение этого массива представляет собой число от 0 до 0xFFFFFF. Вторым обозначается массив показателей прозрачности (alphaArray). Каждое значение этого массива представляет собой число от 0 до 100 и применяется к соответствующему элементу массива. Таким образом, элемент alphaArray[0] задает прозрачность цвета у элемента colorArray[0]. Третьим обозначается массив коэффициентов. Каждое число этого массива задает точку, в которой Flash начинает заливку определенным несмешанным цветом. При движении в сторону от этой точки, Flash выполняет заливку цветом с все большим и большим процентом добавления соседнего цвета. Значение этих чисел является программным эквивалентом перемещения маркеров полосы определения градиентной заливки на панели Color Mixer (Цветовой микшер) с целью определения ширины каждой цветовой полосы (для линейной заливки) или кольца (для радиальной заливки). Каждое значение этого массива является числом от 0 до 255. Чтобы понять, как функционируют эти числа, вообразите себе линейку с 255 метками, которая простирается вдоль полосы определения градиентной заливки. Каждое число в массиве коэффициентов отвечает одной из этих меток, сообщая Flash о необходимости становления маркера соответствующего цвета в этом месте. Если задать число больше 255, то функция перестанет работать. Flash считает значение слева направо, в результате чего цвета, указанные в массиве раньше, будут предшествовать цветам, указанным позднее. Например, если поместить на одной виртуальной "метке" несколько виртуальных "маркеров", то Flash отобразит только цвет, который отвечает первому маркеру (может немного оказаться смесь скрытых цветов).
Flash всегда применяет заливку ко всей области, для которого она была предназначена. Эта операция выполняется путем задавания последнего цвета массива для любой неопределенной области. Таким образом, при задании нулевого коэффициента для всех цветов вся область будет залита сплошным цветом, который является последним в массиве. Количество элементов во всех массивах должно быть одинаковой, иначе функция работать не будет. На практике количество элементов в массивах должно быть не меньше 2 и не больше 8. Фактически количество элементов в массивах может быть любым, лишь бы только оно было одинаковым во всех массивах, но для создания градиента нужны минимум 2 цвета. Если бы в каждом массиве было по одному элементу, вышла бы сплошная, а не градиентная заливка. Кроме того, цвета после восьмого не отображаются. Таким образом, Flash отобразит цвета, которые отвечают элементам массива, начиная с colorArray[0] и до colorArray[7], а цвет, который отвечает элементу colorArray[8], отображен не будет.
Матрица преобразования позволяет выполнять некоторые стандартные преобразования градиентной заливки. Например, поворот на 90 градусов изменяет заданные по умолчанию вертикальные полосы линейной заливки на горизонтальные. Матрица представляет собой объект, который можно создать с помощью пользовательского класса и оператора new. Матрицу определяют путем создания объекта, свойства которого становятся элементами матрицы. Этот объект используется как последний параметр, переданного метода beginGradientFill().
Объект матрицы может содержать такие свойства:
9 свойств, которые определяют матрицу 3x3, как в обычной математике. Для реализации методов трансляции, обращения и масштабирования обычного объекта матрицы предназначен файл с расширением *.as (файл "включение"), разработанный вместе с программой. Это делает традиционные операции с матрицей интуитивно понятными, но для каждого преобразования (трансляции, обращения, масштабирования) нужно отдельное обращение к функции.
6 свойств, которые представляют параметры трансляции, обращения и масштабирования. При каждом обращении можно выполнять только одну, две или три операции (т.е. одновременно выполнять трансляцию, обращение и масштабирование). Этот формат более короткий и интуитивно понятный. Матрица 3x3 более эффективна при управлении порядком операций масштабирования, трансляции и обращения, поскольку ее можно преобразовывать несколько раз, а вызвать метод beginGradientFill() – только один раз. Те же самые операции, выполненные в разном порядке, дадут разные результаты. Выполнение их в порядке масштабирования-трансляция-обращение не является аналогичным последовательности трансляции-обращения-масштабирования. При одновременном выполнении нескольких операций в коротком формате порядок всегда будет таким: масштабирование-обращение-трансляция. Операции можно выполнять и по одной, меняя таким образом их порядок, но при этом каждый раз нужно вызвать метод beginGradientFill().
Короткий формат матрицы преобразования. Приведенный ниже пример создает объект матрицы с именем m (имя является обязательным), используя короткий формат.
m={matrixType:"box", x:100, y:100, w:200, h:200, r:(45/180)*Math.PI};
Первым свойством всегда является строка "box". Свойства x и y используются для выполнения трансляции, w и h – для масштабирования, а r – для реализации обращения. Трансляция означает перемещение градиента. По умолчанию Flash размещает центр градиента в верхнем левом углу клипа, в котором расположена заливка. При трансляции каждая точка градиента перемещается по горизонтали на величину x и по вертикали на величину y [41].