Опубликован: 07.11.2006 | Уровень: специалист | Доступ: платный
Лекция 10:

Анимация и интерактивность 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 на компакт-диске).

Игорь Хан
Игорь Хан

у меня аналогичная ситуация. Однако, если взять пример из приложения (ball_motion_04_click for trial.fla) то след остается. при этом заметил, что в моем проекте в поле "One item in library" виден кружок, в то время как в приложенном примере такого кружка нет.

Вопрос знатокам, что не так?

Александр Коргапольцев
Александр Коргапольцев

объект созданый мной упорно не желает оставлять след(единственное что добился, так это то что шарик резво гоняется за курсором) функция duplicateMovieClip остаётся не активной, т.е. следа от объекта не остаётся, но если я тоже самый код вбиваю в учебный файл всё работает, не могу понять где я ошибаюсь и почему в документе созданном заново, не работает код начиная от функции duplicateMovieClip? 

Тамара Ионова
Тамара Ионова
Россия, Нижний Новгород, НГПУ, 2009
Магомед Алисултанов
Магомед Алисултанов
Россия, Волгоград, лицей 2