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

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. Эта функция, которую мы напишем, когда дойдем до ползунков цветов, будет возвращать шестнадцатеричное значение в соответствии с текущей позицией ползунка цвета.

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.

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

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.

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, созданная в вышеописанном методе.

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, автоматически закрывающая нашу фигуру, рисуя последнюю сторону треугольника. Удобно.

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). Это процентное значение будет использоваться при определении степени этого цвета в градиенте.