Рисование с помощью ActionScript во Flash MX
Источник: http://www.flash-gorod.net
Для рисования примитивов нам потребуются следующии функции объекта 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(); }
Вот и всё! На самом деле, после небольшого количества практики, всё становится понятно и легко.