Градиентная заливка
Для создания градиентной заливки надо описать в виде массивов все используемые цвета (массив colors), их непрозрачность (массив alpha) и положение движков на панели Colors (массив pos), соответствующее этой заливке:
Таким образом, массивы можно задать так:
color = [0xFF,0xCC00];
alpha = [100, 100];
pos = [0, 255];
Оба цвета полностью непрозрачны, движки находятся на концах линейки, имеющей деления от 0 до 255.
Кроме того, для построения градиента нужна матрица специального типа, которая задает размер и положение прямоугольника, ограничивающего область градиента, а также его поворот. Пусть границы нашей градиентной заливки совпадают с границами квадрата, а угол поворота равен 45°. В этом случае матрица задается так:
matrix = { matrixType:"box", x:0, y:0, w:150, h:150,
r:45*Math.PI/180 };
Объект matrix имеет 6 полей (свойств):
matrixType — всегда равно "box";
x и y — координаты левого верхнего угла прямоугольника, ограничивающего область градиента;
w и h — ширина этого прямоугольника;
r — угол поворота градиента в радианах.
Когда все эти данных готовы, можно вызывать функцию beginGradientFill:
beginGradientFill("linear", color, alpha, pos, matrix);
Первый параметр определяет тип градиента:
"linear" — линейный;
"radial" — радиальный.
color = [0xFF,0xCC00]; alpha = [100, 100]; pos = [0, 255]; matrix = { matrixType:"box", x:0, y:0, w:150, h:150, r:45*Math.PI/180 }; beginGradientFill ("linear", color, alpha, pos, matrix); а после него: endFill(); |
Теперь создадим второй квадрат и используем для него радиальную заливку из трех цветов:
красный, код 0xFF0000, непрозрачный (alpha=100);
желтый, код 0xFFFF00, параметр alpha=75;
синий, код 0xFF, полупрозрачный (alpha=50).
Желтый движок расположим в середине линейки, поэтому его позиция равна 127.
Добавьте в конец программы код
createEmptyMovieClip ("sq2", 2);
with ( sq2 ) {
_x = 190;
_y = 200;
color = [0xFF0000, 0xFFFF00, 0xFF];
alpha = [100, 75, 50];
pos = [0, 127, 255];
matrix = { matrixType:"box", x:0, y:0, w:150, h:150, r:0 };
}
Мы задали все характеристики градиента, но не нарисовали сам квадрат. Поскольку нужно сделать так, чтобы квадрат вращался, и градиент перемещается при вращении, мы будем рисовать в обработчике enterFrame. Перед рисованием нужно очистить поле, вызвав метод clear.
При переходе к следующему кадру угол поворота квадрата относительно точки (0,0) будет увеличивается на 1°. Кроме того, координаты левого верхнего угла градиента также будут смещаться по закону
matrix.x = _rotation / 2;
matrix.y = _rotation / 2;
Добавьте в конец программы код обработчика
sq2.onEnterFrame = function() {
with ( this ) {
clear();
_rotation += 1;
matrix.x = _rotation / 2;
matrix.y = _rotation / 2;
beginGradientFill("radial", color, alpha, pos, matrix);
rectangle(0, 0, 150, 150);
endFill();
}
}
Проверьте работу фильма ЛР9_1.fla.
Кривые
Для рисования кривых из текущей активной точки вместо lineTo используется метод curveTo ( x2, y2, x3, y3);
Здесь (x2,y2) — координаты второй точки, в которую уходит касательная из активной точки, а (x3,y3) — координаты третьей точки, в которую фактически приходит линия. Эту ситуацию иллюстрирует рисунок ниже (все точки можно перетаскивать мышью).
С помощью таких команд можно строить овалы и окружности. Если нарисовать овал с помощью инструмента и выделить ее инструментом (Subselection), вы увидите, что фигура строится с помощью 8 узловых точек. Не вдаваясь в утомительные вычисления, запишем добавим к прототипу MovieClp ее два метода: oval (овал) и circle (окружность).
Добавьте в конец файла figures.as код двух методов:
MovieClip.prototype.circle = function (x, y, r) {
this.oval ( x, y, r, r );
}
MovieClip.prototype.oval = function (x, y, w, h) {
with ( this ) {
moveTo ( x+w, y );
curveTo ( x+w, y+0.4142*h, x+0.7071*w, y+0.7071*h );
curveTo ( x+0.4142*w, y+h, x, y+h);
curveTo ( x-0.4142*w, y+h, x-0.7071*w, y+0.7071*h );
curveTo ( x-w, y+0.4142*h, x-w, y );
curveTo ( x-w, y-0.4142*h, x-0.7071*w, y-0.7071*h );
curveTo ( x-0.4142*w, y-h, x, y-h );
curveTo ( x+0.4142*w, y-h, x+0.7071*w, y-0.7071*h );
curveTo ( x+w, y-0.4142*h, x+w, y );
}
}
В функции oval параметры x и y обозначают координаты центра, а w и h — длины полуосей (половина ширины и половина высоты).
В функции circle три параметра: координаты центра окружности и ее радиус.
Результат следующего упражнения показан на рисунке ниже. Щелкнув по кнопке, вы можете отправить шарик в «зеленую дыру», такой же эффект дает двойной щелчок по шарику. После этого на его месте появляется следующий шарик, его номер увеличивается. Шарик можно перетаскивать мышкой.
