WebClub - Всероссийский Клуб Веб-разработчиков
WebClub.RU » Советы » Рисование с помощью ActionScript во Flash MX

Рисование с помощью ActionScript во Flash MX


Дата публикации: 22-05-2008

www.citforum.ru

 

В этом уроке мы научимся рисовать различные графические примитивы - линии, кривые и заливки - средствами ActionScript. Предполагается, что вы уже немого знакомы с этим языком и вам не нужно объяснять его основы. Если вы новичок в ActionScript, посмотрите другие статьи, в частности Введение в 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, которые представляют из себя матрицу типа

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)

Домен продается

Популярное

Не так давно в сети появился новый сервис, под названием Dead Man Zero. Этот сервис сделал...
Рынок социальных площадок уже давно стал стабильным. Несмотря на то, что время от времени...
Artisteer 4 – единственный в своем роде продукт, позволяющий автоматизировать работу над созданием...
Август 2024 (1)
Май 2024 (1)
Апрель 2024 (1)
Октябрь 2018 (14)
Февраль 2017 (3)
Январь 2017 (1)

Карта сайта: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41

Друзья сайта



Случайная цитата

Неизвестный автор:

"Как видно, совершенство достигается не тогда, когда уже нечего прибавить, но когда уже ничего нельзя отнять."

Опрос

Какой антивирус Вы используете?

Kaspersky Antivirus
NOD32
Norton Antivirus
Dr.Web
Panda
Аvast!
ClamWin
Другой...