Рисование с помощью ActionScript во Flash MX
В этом уроке мы научимся рисовать различные
графические примитивы - линии, кривые и заливки - средствами
ActionScript. Предполагается, что вы уже немого знакомы с этим
языком и вам не нужно объяснять его основы.
Для рисования примитивов нам потребуются
следующии функции объекта MovieClip:
- beginFill ([rgb[, alpha]])
- beginGradientFill (fillType, colors, alphas, ratios,
matrix)
- clear()
- curveTo (controlX, controlY, anchorX, anchorY)
- endFill()
- lineStyle ([thickness[, rgb[, alpha]]])
- lineTo (x, y)
- moveTo (x, y)
Начнем с функций moveTo() и
lineTo(). Они используются для рисования линий.
moveTo() устанавливает позицию "карандаша" (курсора) в позицию
x, y. lineTo() проводит линию от позиции, установленной
moveTo(), до позиции указанной параметрами x, y в самой
функции lineTo().
Но, прежде чем рисовать линии этими
функциями, нужно установить свойства линии функцией
lineStyle(). У неё три необязательных
параметра: thickness - указывает толщину
линии; rgb - цвет (а-ля 0x56FFCC);
alpha - значение прозрачности. Если параметр
не указан, его значение считается равным нулю.
Вот пример кода, который рисует синий квадрат
в текущем объекте MovieClip:
lineStyle(1, 0x0000FF);
moveTo(100,
100);
lineTo(200, 100);
lineTo(200, 200);
lineTo(100,
200);
lineTo(100, 100);
Координатная решетка любого объекта типа
MovieClip начинается с верхнего левого угла и растет вправо
вниз, как видно на рисунке выше.
Для закраски нарисованных фигур используются
функции beginFill() и
endFill(). Функцию
beginGradientFill() для создания градиентной
закраски мы рассмотрим позже.
beginFill() включает режим
закраски. После её вызова, все нарисованные контуры будут
закрашиваться, образую замкнутые фигуры. beginFill() имеет два
необязательных параметра: rgb указывает цвет
закраски, alpha - прозрачность.
endFill() отключает режим
закраски.
Рекомендуется для рисовательной деятельности
создавать пустой объект при помощи функции
createEmptyMovieClip(). Этой функции
передаются два параметра: имя экземпляра клипа, и целое
значение, указывающее глубину клипа на экране, относительно
других клипов.
Вот пример c использованием функций
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();
myClip.lineStyle(4,
0x0078DD);
myClip.moveTo(140,20);
myClip.lineTo(190,20);
myClip.lineTo(190,70);
myClip.lineTo(140,70);
myClip.lineTo(140,20);
myClip.beginFill(0x00FF00,
30);
myClip.lineStyle(1, 0xDC2323);
myClip.moveTo(230,
20);
myClip.lineTo(350, 100);
myClip.lineTo(350,
20);
myClip.lineTo(230, 100);
myClip.lineTo(230, 20);
Вот как выглядит результат работы этого
скрипта:
Рассмотрим функцию, которая рисует кривые:
curveTo(controlX, controlY, anchorX,
anchorY). Функция имеет четыре обязательных
параметра. При отсутствии хотя бы одного из них она не
срабатывает. Началом кривой считается текущая позиция курсора
("карандаша"), которая устанавливается при помощи moveTo(), или же позицией, в которой
закончили черчение функции lineTo() или
curveTo(). Конец кривой указывается
параметрами anchorX и
anchorY. Параметры controlX
и controlY указывают точку, к которой
направлены начало и конец линии. Для наглядности на рисунке
ниже обозначены все точки.
Вот пример кода, и рисунка, который
получается в результате его исполнения:
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 (fillType, colors, alphas, ratios,
matrix), которая служит для градиентной закраски.
Параметр fillType указывает
тип закраски может быть равен одной из следующих строк:
"linear" - линейная,
"radial" - радиальная. Не забудьте, что это
строки, поэтому параметры нужно указывать в кавычках.
Следующие четыре параметра представляют из
себя массивы, каждый из которых мы сейчас рассмотри подробнее.
colors - массив, содержащий
цвета градиента. alphas содержит alphа-канал
(прозрачность) каждого цвета.
ratios содержит значения
распределения цветов. Возможные значения: 0-255. Это значение
указывает место в процентном соотношении, где значение цвета
достигает максимума.
matrix является матрицей
преобразования, которая может описываться двумя наборами
значений:
a, b, c, d, e, f, g, h, i,
которые представляют из себя матрицу типа
или
matrixType, x, y, w, h,
r, где
matrixType - строка "box";
x и
y - смещение центра
градиента, относительно точки регистрации объекта;
w и
h - ширина и высота
градиента соответственно;
r - угол поворота
градиента в радианах.
Для обращения к свойствам объекта можно
использовать инструкцию with(). Вот пример, в котором мы
создаём классическую "хромовую" закраску, повёрнутую на 45
градусов.
_root.createEmptyMovieClip( "myClip", 1
);
with ( _root.myClip )
{
colors = [ 0x0066FD, 0xFFFFFF, 0xFFFFFF,
0x996600, 0xFFCC00, 0xFFFFFF];
alphas = [ 100, 100, 100,
100, 100, 100 ];
ratios = [ 0, 100, 120, 125, 165,
255];
matrix = { matrixType:"box", x:20, y:20, w:130,
h:100, r:(45/180)*Math.PI };
beginGradientFill(
"linear", colors, alphas, ratios, matrix
);
moveto(20,20);
lineto(150,20);
lineto(150,120);
lineto(20,120);
lineto(20,20);
endFill();
}
Вот и всё! На самом деле, после небольшого
количества практики, всё становится понятно и легко.
Как обычно, можно скачать все примеры к
уроку:
draw.zip
(6 k)
Удачи!
Автор:
Жебраков Андрей
