Анимация и интерактивность Drawing API

Градиенты

До сих пор мы анимировали прямые линии, кривые и заливку. Теперь изучим последнюю составляющую рисования API - градиенты. С помощью градиентов можно реализовать достаточно сложные графические объекты, которые невозможно было получить во Flash 5. На рисунке ниже представлен один из таких реализованных с помощью рисования API эффектов:

Для создания градиентов существуют простой и сложный способы. Синтаксис для обоих способов следующий.

mcInstance.beginGradientFill (fillType, colors, alphas, ratios, matrix);

Эта строка может показаться трудной даже для ввода. Создадим двухцветный градиент, чтобы понять сам принцип действия (упражнение linear_gradients.fla на компакт-диске).

Линейные градиенты

1. Создайте новый фильм с именем linear_gradients.fla. В кадре 1 слоя по умолчанию введите следующий код для рисования квадрата.

   this.createEmptyMovieClip("square", 0);
   square._x = 270;
   square._y = 200;
   square.moveTo(-100, -100);
   square.lineStyle(2, 0x333333, 100);
   square.lineTo(100, -100);
   square.lineTo(100, 100);
   square.lineTo(-100, 100);
   square.lineTo(-100, -100);

   Этот код довольно прост. Здесь создается фильм с именем square, который будет содержать рисунок; он располагается по середине нашего фильма по умолчанию (270, 200). После этого с помощью lineTo рисуется закрашенная фигура. Теперь разберемся с цветом!
2. Перед кодом выше введите следующее.

   colors  =  [0x0000FF, 0xF4620B];
   alphas  =  [100, 100];
   ratios  =  [0, 255];
   matrix  =  {matrixType:"box", x:-100, y:0, w:200, h:200, r:0};

   Выглядит не очень просто. Однако, рассмотрев по частям данный код, вы увидите, что он не представляет особой сложности. Сначала определяется массив цветов colors. В данном случае это синий и оранжевый цвета (если вы хотите использовать другие цвета, просто добавьте дополнительные индикаторы в эти массивы). В следующей строке мы определяем массив значений интенсивности для каждого цвета в градиенте. Затем, с использованием массива ratios, указываются точки в градиенте, в которых каждый цвет принимает свое максимальное значение. Эти значения являются шестнадцатеричными процентными величинами от ширины градиента. Мы указали, что синий цвет будет иметь свое максимальное значение в начале градиента (0% ширины градиента) и что оранжевый цвет будет максимально чистым в конце градиента (255, или 100% ширины градиента). Это делается для того, чтобы без особых знаний математики можно было вводить эти значения в виде десятичных процентов, однако мы имеем дело с шестнадцатеричными значениями. Такова жизнь!

   Последняя строка инициализации нашей переменной устанавливает matrix. Это новый объект, содержащий шесть параметров. Первый - matrixType - будет всегда иметь значение box. В дальнейшем будет важно отсутствие matrixType. Если этот параметр существует (в случае с "простым" способом реализации градиента), его значением всегда будет box. Далее мы указываем координаты x и y начала нашего градиента. Я расположил градиент таким образом, что его стартовой позицией оказались координаты (-100, 0) в фильме square, что является левой стороной нашего нарисованного квадрата, а w и h - это, соответственно, ширина и высота градиента. Так как наш квадрат имеет размер 200х200 пикселей, я установил разрешение градиента, равное размеру квадрата.

   Наконец, я установил поворот (r) градиента на значение 0 радиан. Если вы укажете поворот, имейте в виду, что это необходимо делать в радианах. Поэтому, если вам нужно, чтобы градиент имел наклон 45°, вам необходимо провести преобразование градусов в радианы (радианы = градусы*р/180).

   Установив все эти переменные, добавим две последние строки кода, которые будут заполнять наш квадрат линейным градиентом.

   >
3. Введите в код следующие две строки.

   colors = [0x0000FF, 0xF4620B];
   alphas = [100, 100];
   ratios = [0, 255];
   matrix = {matrixType:"box", x:-100, y:0, w:200, h:200, r:0};
   this.createEmptyMovieClip("square", 0);
   square._x = 270;
   square._y = 200;
   square.moveTo(-100, -100);
   square.lineStyle(2, 0x333333, 100);
   square.beginGradientFill("linear", colors, alphas, ratios, matrix);
   square.lineTo(100, -100);
   square.lineTo(100, 100);
   square.lineTo(-100, 100);
   square.lineTo(-100, -100);
   square.endFill();
4. Запустите фильм.
   

   
   
5. Это "простой" вариант градиента. Попробуйте ввести другие значения в переменные, чтобы посмотреть, как изменения повлияют на результат. Ниже приведены несколько примеров различных линейных градиентов, которые вы можете получить. Проделайте это перед тем, как рассматривать более сложные типы градиентов - радиальные градиенты (код этих градиентов содержится в виде комментариев в файле linear_gradients.fla на компакт-диске).