Для рисования примитивов нам потребуются следующии функции объекта 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, которые представляют из себя матрицу типа

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();

}

Вот и всё! На самом деле, после небольшого количества практики, всё становится понятно и легко.

Как обычно, можно скачать все примеры к уроку: risovanie.zip (6 k)

Удачи!

Автор: Неизвестен.