Чудовий урок для практики в програмуванні на ActionScript, сьогодні ми спробуємо малювати деякі примітивні линиии і фігури за допомогою ActionScript. Даний урок побудований таким чином, що передбачається, що ви вже знайомі з основами цієї мови, тому варто залишити дану сторінку в закладках, якщо це поки не так.

Для того, що б намалювати хоча б примітивні фігури нам потрібні следующии функції об’єкта «Відеокліп»:

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)

малюємо в actionscript

Почнемо з функцій «moveTo()» і «lineTo()», які будуть використовуватися для написання самих ліній: «moveTo()» встановлює позицію «олівця» (курсора) в позицію x, y. «lineTo()» проводить цю лінію від позиції, встановленої функцією «moveTo()», до позиції, позначеної параметрами x, y самої функції «lineTo()».

Але, перш ніж малювати лінії цими функціями, потрібно встановити властивості лінії функцією «lineStyle()». У неї три необов’язкові параметри: «thickness» — вказує товщину лінії; «rgb» — колір (а-ля 0x56FFCC); «alpha» — значення прозорості. Якщо ж останній параметр не вказаний явно, це буде означати, що він дорівнює нулю!

Наведу приклад, який намалює синій квадрат в поточному об’єкті «Відеокліп»:

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(). Цієї функції передаються два параметри: ім’я екземпляра кліпу, і ціле значення, що вказує глибину кліпу на екрані, щодо інших кліпів.

Ось приклад з використанням функцій beginFill() і endFill():
_root.createEmptyMovieClip(«myClip», 1);

myClip.lineStyle(2,0×234567);
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» вказують точку, до якої спрямовані початок і кінець лінії. Для наочності на малюнку нижче позначені всі точки.
action script уроки малювання

І ось що вийшло в результаті його відтворення:

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, які являють собою матрицю типаа 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, вт: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();
}

Ну от і все, а здавалося так складно. Насправді з невеликою кількістю практики даний приклад стає простим і є не більше ніж розминкою. Удачі та успіхів!