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

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

  1. Создаем методы, которые будут непосредственно заполнять поля градиента цветами. this.w и this.h являются параметрами каждого из фильмов sample, swatch и well (мы будем присваивать эти значения в конце при непосредственном создании фильмов), которые содержат высоту и ширину фильмов.
    drawGrad = function () { 
      this.clear();
      this.lineStyle(2, 0, 100); 
      if (this == well) {
        type = "linear";
      } else {
        type = gradTypes[gradNum];
      }
      this.beginGradientFill(type, colors, alphas, ratios, this .matrix);
      this.moveTo(0, 0);
      this.lineTo(this.w, 0);
      this.lineTo(this.w, this.h);
      this.lineTo(0, this.h);
      this.endFill(); 
    };
      
    drawSolid = function () {
      this.clear();
      this.lineStyle(2, 0, 100);
      this.beginFill(getSliderValues(), 100);
      this.moveTo(0, 0);
      this.lineTo(this.w, 0);
      this.lineTo(this.w, this.h);
      this.lineTo(0, this.h);
      this.endFill(); 
    };

    drawGrad и drawSolid создают закрашенные квадраты, отличаясь друг от друга типом заливки. drawGrad обрабатывает два поля градиента ( well и sample ), а drawSolid предназначен для поддержки swatch. Здесь необходимо обратить внимание на выражение if в drawGrad, которое обеспечивает установку gradientType для sample ( well всегда является линейным), а также на функцию getSliderValues в drawSolid. Эта функция, которую мы напишем, когда дойдем до ползунков цветов, будет возвращать шестнадцатеричное значение в соответствии с текущей позицией ползунка цвета.

  2. Добавьте эти строки для завершения секции цветовых образцов.
    colorSample = function () {
      var w = sample.w*wSlider.getValue() +1;
      var h = sample.h*hSlider.getValue()+1;
      var x = (sample.w-w)/2;
      var у = (sample.h-h)/2;
      sample.matrix = {matrixType: "box", x:x, y:y, w:w, h:h,
      Кr:rotSlider.getValue()*Math. PI};
      sample.drawGrad();
    };
    
    colorSwatch = function () { 
      swatch.drawSolid();
      well.selected.stopColor = getSliderValues(); 
      setGrad();
    };
    
    changeGrad = function () {
      gradNum = gradNum+1>1 ? 0 : gradNum+1;
      sample.drawGrad(); 
    };

    Первая функция в этом фрагменте присваивает цвет образцу градиента sample. Ширина и высота градиента определяются в зависимости от позиций wSlider и hSlider соответственно. Метод ползунка getValue возвращает процентное значение, которое затем умножается на полную ширину и высоту swatch (мы прибавляем единицу к этим значениям, чтобы избежать несоответствия результатов с градиентом, если его ширина или высота меньше единицы). Начальные точки x и y градиента настраиваются в зависимости от этих значений (таким образом, градиент остается отцентрированным в образце и не смещается). Затем мы можем заполнить нашу матрицу этими значениями, вместе со значением поворота, которым будет являться величина между 0 и р, и вызвать метод drawGrad объекта sample.

    colorSwatch заполняет цветом нашу цветовую область, вызываемую каждый раз при перемещении ползунка цвета. Сначала мы рисуем сам текущий образец с помощью drawSolid. После этого устанавливаем выбранный в данный момент цвет colorStop на значения наших ползунков цветов. Настраиваем градиент соответствующим образом с помощью setGrad, и после этого заново раскрашиваем образцы градиента.

    changeGrad является самым простым методом. Он просто переключает текущий тип градиента между индексами 0 и 1, затем для соответствия перерисовывает sam. Этот метод вызывается каждый раз при щелчке на поле ComboBox.

    Мы выполнили одну треть упражнения!

  3. Настало время написать код colorStop, который будет реализовывать маленькие треугольные фильмы под цветовой областью (мы будем использовать ColorStop с заглавной буквой, когда речь будет идти о Class, и colorStop при описании инстансов Class ). Для такого простого рисунка это достаточно большое количество кода, однако с его помощью реализуется не одна функциональность. Мы создадим новый класс фильмов, который будет поддерживать все исходные параметры и методы фильма, а также параметры и методы ColorStop. Введите следующее под имеющимся кодом.
    ColorStop = function () { 
      this.init();
    };
    Colorstop.prototype = new MovieClip(); 
    ColorStop.prototype.init = function() {
      this._parent.stopDepth++;
      this._parent.colorStops.push(this);
      this.onPress = this.dragMe;
      this.onRelease = this.onReleaseOutside = this.releaseMe;
      this.selectMe();
      setGrad ();
    };

    Это начало определения нашего класса, оно похоже на определение любой другой функции. При вызове этой функции, мы будем вызывать другую функцию с именем init. init является функцией (или методом), принадлежащей только самому классу ColorStop. Если вы посмотрите на метод init, вы увидите, что мы увеличиваем переменную глубины, чтобы отвести место для следующего colorStop и вставляем текущий colorStop (только что созданный) в наш массив. После этого мы присваиваем функции управляющим элементам событий onPress, onRelease и onReleaseOutside объекта colorStop. Эти функции ( dragMe и releaseMe ) являются методами, которые мы сейчас создадим.

    Мы добавили этот метод init для параметра prototype нашего объекта ColorStop. prototype является параметром объекта, содержащим все остальные методы и параметры этого объекта. Применяя метод init к параметру prototype объекта ColorStop, мы обеспечиваем использование этого метода всеми инстансами colorStop без необходимости создания его дубликата. Представьте себе, что нужно создавать дубликат функции для каждого инстанса! С использованием prototype этого делать не нужно, так как каждый инстанс будет иметь ссылку на него в этом параметре.

    Ниже приведена последняя строка в вышеуказанном коде, которую необходимо адресовать.

    ColorStop.prototype = new MovieClip ();

    Она устанавливает наследование объекта ColorStop. Посредством установки параметра prototype на новый инстанс MovieClip Class (именно с заглавной буквы), ColorStop Class унаследует все параметры и методы MovieClip Class.

  4. Сразу под предыдущим кодом введите следующее.
    ColorStop.prototype.dragMe = function() {
      this.startDrag(0, 0, this._y, this._parent._width-well._x, this._y); 
      this.selectMe();
      this.onMouseMove = function() { 
        setGrad();
        if (this._ymouse>25) {
          this._parent.selected = null;
          for (var i = 0; i<this._parent.colorStops.length; i++){ 
            if (this._parent.colorStops[i] == this) {
              this._parent.colorStops.splice(i, 1);
              this.removeMovieClip(); 
              setGrad(); 
              break;
            }
          }
        }
      };
    };
    
    ColorStop.prototype.releaseMe = function() { 
      stopDrag(); 
      delete this.onMouseMove;
    };

    dragMe содержит много вложенных уровней, однако эта функция довольно проста. Она обеспечивает горизонтальное перетаскивание colorStop и вызывает его метод selectMe (который еще будет создан). После этого устанавливается новая функция с именем onMouseMove, которая заново настраивает градиент в зависимости от движения colorStop. Наконец, она проверяет, перетащил ли пользователь colorStop вниз от области цвета. Если это так, colorStop удаляется из массива colorStops и с рабочего места.

    С помощью функции releaseMe, которая вызывается при возникновении событий colorStop onRelease и onReleaseOutside, перетаскивание фильма прекращается, а также удаляется функция onMouseMove, созданная в вышеописанном методе.

  5. Ниже приведена довольно простая функция. Введите ее код под уже имеющимся кодом.
    ColorStop.prototype.drawMe = function(col) { 
      this.clear();
      this.beginFill(col, 100); 
      this.lineTo(7, 15); 
      this.lineTo(-7, 15); 
      this.endFill();
    };

    Метод drawMe рисует треугольник и заполняет его цветом, указанным в вызове функции. Имейте в виду, что для рисования треугольника нам необходимы только начальная позиция ((0,0), так как это начальная позиция по умолчанию), две стороны и endFill, автоматически закрывающая нашу фигуру, рисуя последнюю сторону треугольника. Удобно.

  6. Введите эти три метода для завершения класса ColorStop Class.
    ColorStop.prototype.selectMe = function() {
      for (var i = 0; i<this._parent.colorStops.length; i++) { 
        this._parent.colorStops[i].deselectMe();
      }
      this.drawMe(0);
      well.selected = this;
      setSliderValues();
    };
    
    ColorStop.prototype.deselectMe = function() { 
      this.drawMe(0xCCCCCC);
     );
    
    ColorStop.prototype.getValue = function() {
      return this._x/this._parent._width; 
    };

    Итак, selectMe сначала выполняется для всех colorStops и снимает с них выделение (присваивает им серый цвет, согласно следующему методу). После этого функция перерисовывает вновь выделенный colorStop с черной заливкой, в выделенной переменной записывает ссылку на саму себя и устанавливает ползунки цвета для соответствия текущему цвету. deselectMe просто присваивает colorStop светло-серый цвет. Наконец, getValue будет возвращать позицию текущего colorStop в виде процентного значения от ширины области цвета. Например, если ширина области цвета равна 100, и текущий colorStop имеет значение _x, равное 50, тогда getValue возвратит значение .5 (50/100). Это процентное значение будет использоваться при определении степени этого цвета в градиенте.

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

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

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

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

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

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