Программное создание градиента

• Главная
• Информация
• Уроки
• Уроки ActionScript3

? к списку уроков

Создание градиентной заливки — одна из интересных возможностей, которую предлагает ActionScript 3 при рисовании различных векторных объектов.

graphics.beginGradientFill — метода класса Graphics, который позволяет создавать градиенты и устанавливать им все необходимые свойства.

graphics.beginGradientFill(type:String, colors:Array, alphas:Array, 
ratios:Array, matrix:Matrix = null, spreadMethod:String = "pad", 
interpolationMethod:String = "rgb", focalPointRatio:Number = 0)

type — тип градиентной заливки. Может принимать значения GradientType.LINEAR — линейный градиент или GradientType.RADIAL — радиальный градиент.

сolors — массив, который содержит в себе цвета градиента, каждый из которых должен быть представлен uint-значением вида 0хff0000.

alphas — массив, определяющий значение alpha (прозрачность) для каждого цвета в градиенте. Порядок следования его элементов должен соответствовать массиву сolors. Т.е. первому цвету в массиве сolors будет соответствовать первое значение в массиве alphas и т.д.

matrix — матрица преобразования, должна быть представлена объектом класса Matrix. С помощью метода createGradientBox() можно легко управлять градиентом, например, развернуть его на нужный нам угол.

spreadMethod — значение типа String, определяющее метод нанесения. Сможет принимать значения SpreadMethod.PAD, SpreadMethod.REFLECT (“reflect”), SpreadMethod.REPEAT (“repeat”). По умолчанию SpreadMethod.PAD (“pad”).

interpolationMethod — метод интерполяции. Строковое значение InterpolationMethod.LINEAR_RGB или InterpolationMethod.RGB

focalPointRatio — значение Number, определяющие местоположение фокуса градиентной заливки.

Пример создания градиента:

import flash.display.Shape;
import flash.display.GradientType;
import flash.geom.Matrix;

var shape:Shape = new Shape ;
		
//Устанавливаем тип градиентной заливки
var type:String = GradientType.LINEAR;
		
//Разворачиваем градиент под нужным нам углом (в радианах)
//В данном случае он будет развернут на 90 градусов 
//и градиентная заливка будет наложена сверху вниз
var matrix:Matrix = new Matrix ;
matrix.createGradientBox(200,200,1.5708);
		
//Определяем цвета градиента
var colors:Array = [0xffd200,0xff0000];
		
//Определяем прозрачность для каждого цвета градиента
var alphas:Array = [1,1];
		
//Устанавливаем соотношение цветов в градиенте
var ratios:Array = [0,255];
		
//Начинаем градиентную заливку
shape.graphics.beginGradientFill(type, colors, alphas, ratios, matrix);
		
//Определяем линию
shape.graphics.lineStyle(1,0xff0000,1);
		
//Рисуем квадрат, который будет залит градиентом;
shape.graphics.drawRect(0,0,200,200);
		
//Заканчиваем заливку;
shape.graphics.endFill();
		
return shape;

Результат — квадрат с градиентной заливкой

В этом примере специально представлены не все значения, передаваемые методу graphics.beginGradientFill(). Оставляю вам возможность поэкспериментировать.

ДРУГИЕ УРОКИ ПО ActionScript3

• Передача данных в архиве zip
• Получение класса из внешнего swf файла
• Создание расширенного загрузчика (Loader)