Представление сайта

Инициализация движения щелчком мыши

Теперь мы значительно изменим код, чтобы фильм перемещался в любое место, где пользователь щелкнет мышью. Аналогично тому, как мы присваивали функцию onEnterFrame фильму, мы можем присвоить ему функцию onMouseDown. Эта функция будет выполняться при каждом нажатии кнопки мыши в любом месте на главном фильме. Итак, когда пользователь щелкает мышью, нужно сначала установить позиции целей фильма на местоположение щелчка, а затем выполнить функцию onEnterFrame для перемещения на эту позицию:

var speed = 4;
// set up target variables
ball_mc.targetX = 0
ball_mc.targetY = 0

ball_mc.moveToMouse = function() {
  this._x += (targetX-this._x)/speed;
  this._y += (targetY-this._y)/speed;
};

triggerMotion = function() {
  // reset target variables on click
  targetX = _xmouse;
  targetY = _ymouse;
  // set the movieclip in motion
  this.onEnterFrame = this.moveToMouse;
}
ball_mc.onMouseDown = triggerMotion;

Добавление следа от движения объекта

Одним из дополнений, которое обеспечит четкость движения объекта, является его след, оставляемый на тех местах, где только что находился фильм. В нашем случае это полезно для понимания того, как работает замедление движения, однако такие следы могут применяться также и в других обстоятельствах: или как движущийся значок во время загрузки чего-либо, или же в виде своего рода размытости объекта, вызванной его движением. Такие следы могут быть легко созданы посредством дубликации фильма в каждом кадре с использованием функции duplicateMovieClip. Для этого нужно лишь добавить строку кода, увеличивающую значение _root и затем создающую дубликат текущего фильма.

Дубликат находится по умолчанию на той же позиции, что и исходный фильм. На самом деле, дубликат имеет все те же параметры, что и исходный фильм, такие как alpha, xscale, yscale и т.д., однако у него нет функций onEnterFrame или переменных, которые может содержать исходный фильм. Это одно из отличий от Flash 5, в котором если создавался дубликат фильма с присвоенным событием clipEvent, также создавался дубликат этого события, которое происходило и на дубликате фильма. Мы располагаем каждый дубликат на один уровень выше предыдущего, посредством добавления переменной глубины для '_root', значение которой увеличивается с каждым кадром.

DuplicateMovieClip можно интерпретировать, как производитель дубликатов, внешне идентичных исходным фильмам, в которых, однако, не повторяются никакие из исходных действий. В нашем случае, дубликаты не следуют за указателем мыши, а просто остаются там, где они были созданы.

var speed = 4;

ball_mc.moveToMouse = function() {
  this._x += (this.targetX-this._x)/this._parent.speed;
  this._y += (this.targetY-this._y)/this._parent.speed;
  this.duplicateMovieClip("dupe"+this._parent.depth,
    this._parent.depth++);
};
ball_mc.onMouseDown = function() {
  this.targetX = this._parent._xmouse;
  this.targetY = this._parent._ymouse;
  this.onEnterFrame = this.moveToMouse;
};

Исчезновение следа

Чтобы не забивать фильм слишком большим количеством дубликатов одного и того же объекта, мы можем присвоить каждому дубликату свою собственную функцию enterFrame, которая будет обеспечивать уменьшение дубликатов с каждым кадром и затем удалять их по достижении определенного размера.

Так как мы собираемся работать с каждым из дубликатов, имеет смысл присвоить объекту ball_mc его собственную функцию duplicate(). Приведем код с выделенными вводимыми новыми частями:

var speed = 4;

ball_mc.moveToMouse = function() {
  this._x += (this.targetX-this._x)/this._parent.speed;
  this._y += (this.targetY-this._y)/this._parent.speed;
  this.duplicate() ;
};
ball_mc.duplicate = function() {
  var dupe = this.duplicateMovieClip("dupe"+this._parent.depth,
  this._parent.depth++);
  dupe.onEnterFrame = this._parent.diminish
};
ball_mc.onMouseDown = function() {
  this.targetX = this._parent._xmouse;
  this.targetY = this._parent._ymouse;
  this.onEnterFrame = this.moveToMouse;
};
  function diminish(){
    // reduce scale gradually
    this._xscale = this._yscale-=2;
    //remove movieclip when scale goes below zero
    if (this._xscale <= 0) {
      this.removeMovieClip();
    }
  }

Итак, мы добавили вызов функции duplicate() и значительно изменили вызов duplicateMovieClip, вынеся вперед var dupe=. Несмотря на то, что в словаре ActionScript указано, что duplicateMovieClip не возвращает никакого значения, на самом деле, возвращается ссылка на созданный фильм.

Здесь мы брали это значение и помещали его в переменную dupe. Мы объявили переменную с помощью выражения var так, что это значение существует только во время выполнения функции, и по окончании ее выполнения оно исчезает за ненадобностью.

Теперь мы можем использовать dupe для ссылки на наш новый дубликат фильма и для присвоения ему функции onEnterFrame, функции diminish, определенной в _root. В функции diminish мы уменьшаем инкременты xscale и yscale с каждым кадром, и когда они достигнут нуля, фильм удаляется.

Если запустить фильм сейчас, будет намного меньше ненужных фильмов, так как каждый из клипов выполняет те действия, которые ему предписаны.

Повышение эффективности

Теперь все работает четко, и количество фильмов лежит в пределах разумного. Однако вы, наверное, заметили, что фильм продолжает идти и создавать дубликаты самого себя даже по достижении конечного пункта. Мы не можем наблюдать движение, так как оно очень незначительно, и нельзя различить дубликаты, так как они находятся на той же позиции, что и исходный объект. Если нужно убедиться в этом, просмотрите переменные или объекты во время просмотра фильма. Нам же нужно выяснить, когда фильм достигнет конца, и затем выключить его. Тот факт, что этот фильм воспроизводится бесконечно, пока не является проблемой, однако если этот объект будет использоваться для отображения, например, пункта меню, и вдобавок окажется не единственным, то число выполняемых действий может оказаться слишком большим. Для их одновременной реализации затрачивалось бы слишком много ресурсов компьютера, поэтому очень важно пресекать любые замедляющие работу действия.

Итак, по мере продолжения фильма, нужно проверять, находится ли он в своей конечной точке, и, если это так, завершать его. Казалось бы, легко определить, является ли позиция фильма x равной позиции фильма y, и т.д. На самом деле, в случае с данным замедлением скорости, фильм никогда не достигает своей конечной цели, а лишь бесконечно приближается к ней до тех пор, пока расстояние не станет пренебрежимо малым.

Если вернуться к исходному примеру объекта, двигающегося от 0 до 200, с разбиением каждого отрезка дистанции на две части, то для каждого кадра будут следующие позиции: 100, 150, 175, 187,5, 193,75, 196,875, 198,4375, 199,21875, 199,609375, 199,8046875. Это называется парадоксом Зено, который заключается в том, что если объект всегда перемещается на половину предыдущей дистанции, то он никогда не достигнет цели, все приближаясь и приближаясь к ней. Так как невозможно разделить на две части один пиксель, картинка будет казаться неподвижной, однако ActionScript этого не учитывает. Вместо того чтобы проверять, находится ли фильм в своем конечном положении, мы будем проверять, находится ли он рядом со своей целью, и меньше ли заданного расстояние между объектом и его целью. При подходе объекта к конечной точке можно остановить его, удалив управляющий элемент onEnterFrame.

Начав с нашего предыдущего кода, мы добавим новую функцию checkDistance для проверки того, является ли расстояние меньшим, нежели определенное число. Фильм затем перейдет в свое конечное положение, и функция, присвоенная onEnterFrame, будет удалена. Добавьте следующий код после уже имеющейся программы:

ball_mc.checkDistance = function() {
  // check movieclip is within 0.2 pixels of target
  if (Math.abs(this.targetX-this._x)<0.2 
     Math.abs(this.targetY-this._y)<0.2) {
    this._x = this.targetX;
    this._y = this.targetY;
    delete this.onEnterFrame;
  }
};

Прежде всего, у нас есть условное выражение, проверяющее, находится ли фильм внутри отрезка длиной 0,2 пикселя от цели. В коде this.targetX-this._x представлено расстояние от фильма до цели по оси X, и мы используем Math.abs для преобразования этого значения в положительное, так как безразлично, справа или слева находится фильм от конечной точки, т.е. между -0,2 и +0,2. Наконец, в функции moveToMouse мы добавляем вызов функции checkDistance:

ball_mc.moveToMouse = function() {
  this._x += (this.targetX-this._x)/this._parent.speed;
  this._y += (this.targetY-this._y)/this._parent.speed;
  this.duplicate();
  this.checkDistance();
};

Выполнение этого кода приведет к тому же результату, что и в случае с предыдущим файлом. Однако если выбрать команду Debug>List Variables в режиме Test Movie после окончания фильма, вы увидите, что дубликаты отсутствуют, и фильм ball_mc не имеет функции onEnterFrame. По большому счету, в нашем фильме ничего не происходит - он просто находится в ожидании щелчка мыши, чтобы запуститься вновь.

Давайте теперь перейдем к рассмотрению того, как можно создать постоянное, основанное на времени, движение.

Покадровое движение

Начнем с получения движения с постоянной скоростью. Укажем в фильме, что необходимо перейти из точки A в точку B через определенное количество кадров, перемещаясь с каждым кадром на одно и то же расстояние. Этот тип движения полезен, когда нужно, чтобы что-то происходило за определенный промежуток времени. В этом движении отсутствует та плавность, которую вы наблюдали в методе уменьшения скорости, однако здесь все гораздо проще: нам известно, что объект достигнет своей цели после определенного количества кадров. Данное движение выглядит более солидно.

Расстояние, на которое перемещается объект, одинаково во всех кадрах. Пройденное расстояние равно всему расстоянию, деленному на число кадров, в данном случае, 200 пикселей делится на 5 кадров и получается 40 пикселей на каждый кадр.

Постоянная скорость

Вы увидите, что в каждом кадре преодолевается одно и то же расстояние. Для начала движения необходимо знать, насколько должен переместиться фильм, и в течение скольких кадров это должно произойти. Вычисление расстояния на кадр включает в себя лишь деление расстояния на общее число кадров.

this.frames = 30;

ball_mc.onMouseDown = function() {
  this.frameNum = 0;
  // calculate how far to move each frame on the x and у axes
  this.xStep = (this._parent._xmouse-this._x) /this._parent.frames ;
  this.yStep = (this._parent._ymouse-this._y) /this._parent.frames;
  this.onEnterFrame = this._moveToMouse;
};

moveToMouse = function () {
  // add the step value each frame
  this._x += this.xStep;
  this._y += this.yStep;
  this.duplicate();
  this.checkTime();
};

ball_mc.checkTime = function() {
  this.frameNum++;
  if (this.frameNum == this._parent.frames) {
    delete this.onEnterFrame;
  }
};

Колебательное движение

Этот тип движения по своему эффекту похож на бегущего человека, привязанного к эластичному тросу. Представьте, что человек бежит по направлению к точке, в которой закреплен резиновый канат, и, пробежав мимо точки закрепления, старается убежать от нее как можно дальше. MovieClip (т.е. человек, привязанный к канату), вычисляет расстояние до цели (точка закрепления каната) и затем добавляет часть этой величины к значению переменной скорости. Фильм будет ускоряться по мере своего приближения к конечной точке (ускорение бегущего человека), и затем, отдалившись от точки, вернется обратно, после чего скорость движения упадет.

В каждом кадре мы умножаем переменную speed на результат деления для уменьшения скорости. На графике ниже показано, как продолжается движение после прохождения конечной точки, и последующее возвращение объекта.

Скорость объекта увеличивается в пропорции с расстоянием, на котором он находится от конечной точки. Из рисунка видно, что сначала он стремительно ускоряется, проходит конечную точку и затем возвращается обратно. Амплитуда его колебаний около цели медленно уменьшается.

Существует множество различных эффектов, которых можно достичь с помощью этого типа движения, так как здесь применяются два следующих параметра.

Окончательный эффект может быть в виде ожидаемого колебания вперед и назад около конечной точки и гораздо более плавного исчезновения, или эффекта резкой остановки.

ball_mc.checkDistance = function() {
  if (Math.abs(this.targetX-this._x)<0.2 
    Math.abs(this.targetY-this._y)<0.2) {
    this._x = this.targetX;
    this._y = this.targetY;
    delete this.onEnterFrame;
  }
};

ball_mc.duplicate = function() {
  var dupe = this.duplicateMovieClip 
    ("dupe"+this._parent.depth,
        this._parent.depth++);
  dupe.onEnterFrame = this._parent.diminish
};

function diminish(){
  // reduce scale gradually
  this._xscale = this._yscale-=2;
  //remove movieclip when scale goes below zero
  if (this._xscale <= 0) {
    this.removeMovieClip();
  }
}

ball_mc.onMouseDown = function() {
  this.targetХ = this._parent._xmouse;
  this.targetY = this._parent._ymouse;
  this.onEnterFrame = this.moveToMouse;
};

var acceleration = 12;
var friction = 0.8;

var xdif=this.targetX-this._x;

this.xspeed+=xdif/this._parent.acceleration;

this.xspeed*=this._parent.friction;

this._x+=this.xspeed

ball_mc.moveToMouse = function() {

  // calculate difference on x and у axes
  var xdif = this.targetX-this._x;
  var ydif = this.targetY-this._y;

  // increment speed values
  this.xspeed += xdif/this._parent.acceleration;
  this.yspeed += ydif/this._parent.acceleration;

  // dampen speed values
  this.xspeed *= this._parent.friction;
  this.yspeed *= this._parent.friction;

  // add speed values to x and у properties
  this._x += this.xspeed;
  this._y += this.yspeed;

  // create duplicate
  this.duplicate();
  // check if the movieclip has reached its target
  this.checkDistance();
};

Изменение значений acceleration и friction сильно повлияют на качество движения. Поэкспериментируйте и попробуйте изменить их, чтобы наглядно понять, как эти параметры могут повлиять на движение.

Вообще говоря, чем ниже значение acceleration, тем быстрее будет сначала двигаться фильм, и чем ближе к единице значение friction, тем больше фильм будет колебаться вперед и назад. Некоторые значения могут сделать этот пример очень похожим на случай с уменьшением скорости, рассмотренный нами в первую очередь. Например, попробуйте ввести значения acceleration = 17 ; и friction = 0.4 ; и сохраните ваш фильм в файле swing02.fla. Разница в том, что у нас есть переменная, сохраняющаяся во время прохождения кадров, и фильм не изменяет моментально направление своего движения, как это было в случае с исходным уменьшением скорости движения, или движением по кадрам, и поэтому эти изменения происходят плавней.

Это все работает должным образом, однако есть еще одна деталь, которую нужно изменить. Принимая во внимание предыдущий пример с замедлением движения, становится понятно, что движение фильма должно было прекратиться сразу по прохождении определенного расстояния от конечной точки, в данном случае фильм, предположительно, прошел бы прямо над конечной точкой перед переходом на противоположную сторону. Это означает, что нам нужно изменить нашу функцию checkDistance, чтобы скорость фильма была также ниже определенного числа, чтобы по ошибке не происходило внезапного прекращения движения фильма.

Это более простой случай: все, что нам нужно, это вставить выражение if в нашу функцию для проверки того, является ли скорость достаточно малой после попадания расстояния в диапазон:

ball_mc.checkDistance = function() {
  // check that distance is within range
  if (Math.abs(this.targetX-this._x)<0.2 
     Math.abs (this. targetY-this ._y) < 0.2) {

    // check that speed is nearly zero
    if(Math.abs(this.xspeed)<0.2  Math.abs(this.yspeed) < 0.2) {
      this._x = this.targetX;
      this._y = this.targetY;
      delete this.onEnterFrame;
    }
  }
};

Приведенный выше сценарий, содержащийся в swing3.fla, теперь защищен от любых непредвиденных обстоятельств.

Вы можете использовать эти основные принципы в различных ситуациях, контролируя скорость объекта разными способами. Сейчас на скорость влияет положение конечной точки (что-то похожее на магнетизм), однако вы, например, могли бы нажать кнопку правого курсора и добавить 5 к значению xspeed. Это переместит объект сильно вправо перед тем, как его скорость будет уменьшаться до полной остановки.

Если вам интересны способы создания других типов движения, рекомендуем вам обратить внимание на уравнения замедления на сайте www.robertpenner.com. Используя эти уравнения, вы можете указывать количество кадров, которое необходимо для определенной продолжительности движения, и фильм будет замедлять свое движение от точки A до точки B. В дополнение к этому, вы можете изучить применение этих уравнений на www.gizma.com/easing. Если вам интересны эти уравнения, Chris Andrade из www.fifthrotation.com опубликовал документ, описывающий их вывод, по адресу http://www.fifthrotation.com/u2/parabolic_ease.zip.

Изменение размеров в движении

До этого момента мы рассматривали различные типы замедления применительно к движению по осям x и y, однако использование этого типа движения не ограничивается лишь только этими параметрами. Можно переходить от одного значения к другому и создавать движение, основанное на изменении размеров объектов.

В данном упражнении мы реализуем упругое движение, которое только что было нами рассмотрено. Мы будем определять координаты щелчка мыши и использовать их для определения размера, который будет принимать наш фильм.

ball_mc.onMouseDown=function(){
  this.targetScale=(this._parent._xmouse+this._parent._ymouse)*2
  this.onEnterFrame=this.scaleMe
}

this.acceleration = 12;
this. friction = 0.8;
ball_mc.scaleMe = function() {
  var scaleDiff = this.targetScale-this._xscale;
  this.scaleSpeed += scaleDiff/this._parent.acceleration;
  this.scaleSpeed *= this._parent.friction;
  this._yscale = this._xscale += this.scaleSpeed;
  this.checkScale();
};

this._xscale += this.scaleSpeed;
this._yscale = this._xscale;

ball_mc.checkScale = function() {
  if (Math.abs(this.targetScale-this._xscale)<0.2) {
    if (Math.abs(this.scaleSpeed)<0.2) {
      this._xscale = this._yscale=this.targetScale;
      delete this.onEnterFrame;
    }
  }
};

Управление движением

Теперь вы уже немного разбираетесь в том, как работают рассматриваемые разнообразные методы создания сценариев движения. Мы переходим к рассмотрению различных способов управления движением. Метод, который использовался до сих пор, подразумевает использование немалого количества различных рабочих мест, а мы настроили его на работу с одним фильмом.

Было бы гораздо лучше брать любой определенный фильм и создавать myMovieClip.slideTo(100,200), чтобы фильм мог перемещаться к этой точке и останавливаться, без надобности присваивать фильму вручную управляющий элемент clipEvent или функцию для проверки достижения конечной точки, и т.д.

Далее мы будем рассматривать различные методы создания сценариев начала движения объекта. Мы не будем указывать на тот или иной определенный способ и говорить, что он является самым лучшим, а вместо этого продемонстрируем вам несколько возможностей, чтобы вы могли выбирать из них нужное для работы с вашими проектами.

Скольжение

_root.onMouseDown = function() {
  ball_mc.slideTo(this._xmouse, this._ymouse, 4);
};

MovieClip.prototype.slideTo = function(x, y, speed) {
  // set up targets and speed variable
  this.targetX = x;
  this.targetY = y;
  this.speed = speed;

  // create onEnterFrame function
    this.onEnterFrame = function() {
    // take care of motion
    this._x += (this.targetX-this._x)/this.speed;
    this._y += (this.targetY-this._y)/this.speed;

    // check if near target
      if (Math.abs(this.targetX-this._x)<0.2 
        Math.abs(this.targetY-this._y)< 0.2) {
      this._x = this.targetX;
      this._y = this.targetY;
      delete this.onEnterFrame;
    }
  };
};

_root.onMouseDown = function() {
  ball_mc.slideTo(this._xmouse, this._ymouse, 4);
  ball_mc2.slideTo(this._xmouse+19, this._ymouse, 1);
};

Итак, наш фильм работает как надо, однако при более детальном рассмотрении будут выявлены некоторые проблемы при использовании данного подхода. Наиболее заметный недочет заключается в том, что любой фильм может иметь только одну функцию, присвоенную его управляющему элементу onEnterFrame: если фильм уже предположительно имел функцию, присвоенную его управляющему элементу onEnterFrame, а мы присвоили ему другую функцию, то вторая функция будет записана поверх первой. Это может случиться, если к фильму было применено плавное исчезновение, увеличение размеров или по каким-либо другим причинам.

Другая проблема состоит в том, что мы помещаем в фильм переменные, такие как targetX, targetY и speed, которые могут уже использоваться в фильме с другими целями. Они будут просто записываться поверх старых, что соответствующим образом повлияет на функциональность фильма. Несмотря на то, что мы обычно помним имена, присваиваемые объектам в нашем ActionScript, полезно использовать информативные и не лишенные смысла названия.

Использование пустых фильмов

Теперь рассмотрим все потенциально возможные проблемы, которые могут возникнуть при создании пустого фильма внутри уже существующего. Мы будем использовать внутренний фильм в качестве объекта, в котором находятся все переменные, и он будет также являться объектом, к которому можно присвоить управляющий элемент onEnterFrame, не опасаясь выхода из строя какой-либо предыдущей функциональности.

Управляющий элемент mouseDown настраиваем так же, как и прежде:

_root.onMouseDown = function() {
  ball_mc.slideTo(this._xmouse, this._ymouse, 4);
};

Теперь наша функция slideTo будет выглядеть почти так же, как раньше, и основным отличием является то, что прежде фильм управлял сам собой, а теперь фильм выполняет внутри себя определенные действия. Это видно из замены 'this' на 'this._parent' при доступе или изменении параметров X и Y. Наш управляющий фильм осуществляет доступ и управление параметрами своего родительского фильма, т.е. того фильма, который необходимо перемещать.

MovieClip.prototype.slideTo = function(x, y, speed) {
  // create controller movieclip
  var control_mc = this.createEmptyMоvieClip ("slideControl",this.depth++);
  control_mc.targetX = x;
  control_mc.targetY = y;
  control_mc.speed = speed;
  control_mc.onEnterFrame = function() {
    // this._parent is the movieclip we're moving
    this._parent._x += (this.targetX-this._parent._x) /this.speed;
    this._parent._y += (this.targetY-this._parent._y)/this.speed;
    if (Math.abs(this.targetX-this._parent._x)<0.2 
       Math.abs(this.targetY-this._parent._y) <0.2) {
      this._parent._x = this.targetX;
      this._parent._y = this.targetY;
      this.removeMovieClip();
    }
  };
};

Как и в отношении функции duplicate, созданной нами ранее, мы использовали ссылку, возвращаемую функцией createEmptyMovieClip для обращения к вновь созданному movieClip. Одной из возможных "ловушек" при использовании этого метода с createEmptyMovieClip является то, что пользователь может записать фильм поверх уже имеющегося внутри. Проще говоря, это то, чего нужно остерегаться при управлении фильмом; необходимо иметь некий механизм определения того, на какой глубине находятся объекты и символы. Посредством ввода переменной глубины для каждой временной линии можно эффективно реализовать данную меру предосторожности, применяя этот способ каждый раз при создании фильма. С другой стороны, можно было бы объявить глобальную переменную глубины для всех временных линий, однако все же лучше иметь одну переменную для каждой временной линии, чтобы не терять контроль над значениями. Оставляем право выбора за вами.

Вы могли бы использовать addProperty для автоматического добавления глубины каждый раз при попытке доступа, однако пришлось бы делать это для каждого фильма по отдельности, поэтому статическая переменная, увеличивающаяся на единицу с каждым разом, будет оптимальным решением. Другим возможным подходом может быть цикловое прохождение фильмов целиком в отдельном месте, и использование getDepth() в каждом из них для выяснения глубин, однако это довольно нерациональный способ, так как здесь придется делать большое количество ненужных запросов на действия.

Сохраните ваш фильм в файле issueCommand2.fla. Если вы запустите фильм на данном этапе, вы заметите, что движение будет прекращено при быстром последовательном щелчке мышью. Если выполнить команду Debug > List Variables, станет видно, что причиной этого является присутствие более чем одного инстанса slideControl в нашем фильме - все они работают с различными направлениями. Таким образом, нам нужно придумать что-то такое, с помощью чего можно будет убеждаться в присутствии в любой момент времени лишь одного инстанса этого управляющего клипа внутри нашего фильма.

Возможным решением этой проблемы является создание дубликатов slideControl каждый раз на одной и той же глубине, чтобы прежний инстанс автоматически перезаписывался новым. Однако лучше не использовать этот подход, так как он нарушает схему глубины, о которой мы только что говорили. В дополнение к этому, если мы использовали метод колебаний для обеспечения движения нашего фильма, нам совершенно не нужно будет перезаписывать любые переменные скорости внутри фильма и прерывать его движение; нам необходимо сохранение этих данных до остановки фильма.

Более разумным решением будет проверка того, имеется ли уже фильм slideControl. Если это не так, то вам нужно будет создавать его, а если он уже присутствует, то нужно будет перезаписывать переменные X и Y конечной точки и событие onEnterFrame.

Оба подхода приводят к одному и тому же результату.

MovieClip.prototype.slideTo = function(x, y, speed) {
  var control_mc
  if (this.slideControl) {
    //if slideControl already exists
    control_mc = this.slideControl;
  }
  else {
    //if slideControl doesn't exist then create it
    control_mc = this.createEmptyMovieClip 
      ("slideControl", this.depth++);
  }
  control_mc.targetX = x;
  control_mc.targetY = y;
  control_mc.speed = speed;
  control_mc.onEnterFrame = function() {
    this._parent._x += (this.targetX-this._parent._x)/this.speed;
    this._parent._y += (this.targetY-this._parent._y)/this.speed;
    if (Math.abs(this.targetX-this.__parent._x)<0.2 
     Math.abs(this.targetY-this._parent._y)<0.2) {
      this._parent._x = this.targetX;
      this._parent._y = this.targetY;
      this.removeMovieClip();
    }
  };
};

Сохраните файл под именем i ssueCommand3.fla и при запуске фильма обратите внимание на то, что теперь он ведет себя нужным образом.

Несмотря на положительный результат, данный подход несостоятелен с практической точки зрения, так как мы не можем определить момент, когда фильм достигает своей конечной позиции. Движение на самом деле прекращается, но нам часто будет требоваться выполнить некоторое другое действие по окончании движения. По крайней мере, было бы неплохо знать, когда фильм находится в движении, а когда нет.

Для решения этой проблемы обратимся к функции с обратной связью. Все будет работать таким же образом, как и некоторые другие компоненты - они будут вызывать функцию при изменении значения или обновлении каких-либо данных. При прекращении движения будет вызываться указанная нами функция. Итак, прежде всего, мы создадим функцию, которая будет вызываться при окончании движения фильма. В момент, когда это потребуется, можно выводить сообщение в окне Output с указанием имени фильма, завершившего свое движение, которое мы будем использовать в качестве параметра.

function slideDone(mс) {
  trace("movieClip "+mc+" has finished moving");
}

Вообще говоря, когда движение фильма будет прекращаться, будет осуществляться вызов функции slideDone в _root. При вызове функции slideTo, нам нужно будет добавить два других параметра - callBackObj и callBackFunc. callBackObj является местоположением вызываемой функции (в данном случае, _root ), а callBackFunc - именем вызываемой функции, т.е., в нашем случае, функции slideDone. Итак, сначала нужно добавить в нашу функцию два дополнительных параметра:

_root.onMouseDown = function() {
  ball_mc.slideTo(this._xmouse, this._ymouse, 4,  _root, "slideDone");
};

Затем нам потребуется настроить функцию slideTo для работы с этими двумя параметрами и для хранения их в фильме slideControl (посредством добавления кода):

MovieClip.prototype.slideTo = 
 function(x, y, speed, callbackObj, callbackFunc) {
  var control_mc
  if (this.slideControl) {
    control_mc = this.slideControl;
  }
  else   {
    control_mc = 
     this.createEmptyMovieClip("slideControl", this.depth++);
  }
  control_mc.targetX = x;
  control_mc.targetY = y;
  control_mc.speed = speed;
  control_mc.callBackObj = callBackObj;
  control_mc.callBackFunc = callBackFunc;
};

Наконец, нам нужно выяснить, как вызывать _root.slideDone с использованием двух переменных callBackObj и callBackFunc. Это на самом деле очень просто и делается практически таким же образом, как осуществляется, например, доступ к значению в массиве, или динамическое создание ссылки на фильм:

this.callBackObj [this.callBackFunk] (this._parent)

Часть кода перед квадратными скобками является местоположением функции ( _root ). Содержимое в квадратных скобках осуществляет поиск значения, отвечающего данной строке (в нашем случае, slideDone ), и затем значение в скобках передается в виде параметра. Передаваемое здесь значение является обращением к фильму, который мы перемещали, т.е. this._parent, our ball_mc. Наша функция целиком выглядит примерно так:

MovieClip.prototype.slideTo = 
 function (x, y, speed, callbackObj, callbackFunc) {
  var control_mc
  if (this.slideControl) {
    control_mc = this.slideControl;
  }
  else   {
    control_mc = this.createEmptyMovieClip 
      ("slideControl", this.depth++);
  }
  control_mc.targetХ = x;
  control_mc.targetY = y;
  control_mc.speed = speed;
  control_mc.callBackObj = callBackObj;
  control_mc.callBackFunc = callBackFunc;

  control_mc.onEnterFrame = function() {
    this._parent._x += (this.targetX-this._parent._x) /this.speed;
    this._parent._y += (this.targetY-this._parent._y) /this.speed;

    if (Math.abs(this.targetX-this._parent._x)<0.2 
     Math. abs(this.targetY-this._parent._y)<0.2) {
      this._parent._x = this.targetX;
      this._parent._y = this.targetY;
      this.callBackObj[this.callBackFunc](this._parent);
      this.removeMovieClip();
    }
  };
};

Сохраните ваш фильм в файле issueCommand004.fla и при запуске фильма вы увидите, что в окне Output отобразится сообщение "movieClip_level0.mc has finished moving", т.е. сообщение о завершении движения фильма. Это будет происходить каждый раз при остановке фильма.

Вы можете изменить содержимое функции slideDone для осуществления любых нужных вам действий. Например, у вас может быть массив, содержащий данные о том, какие фильмы запущены, и вы можете использовать его для обеспечения начала выполнения следующей стадии проекта только по завершении продолжения фильма.

Функция callback позволяет нам использовать очень важную возможность обратной связи. Мы можем инициировать начало движения фильма к определенному месту и оставить этот процесс на самостоятельное завершение, так как по окончании движения от него поступит соответствующее сообщение. Нашим следующим шагом будет настройка функции, которая сможет согласоваться с любыми нужными нам параметрами, измененными в фильме, после чего фильм будет изменять все эти параметры одновременно. Мы вернемся к этой теме в одной из следующих лекций.

Реализация подходов на практике

Сейчас настало время вновь обратиться к некоторым из уже рассмотренных подходов. То, о чем мы говорили ранее, может показаться однообразным, однако сейчас мы приведем несложный пример, использующий некоторые из изученных нами способов. В качестве примера создадим страницу Flash.

Обозреватель изображений

Мы планируем создать набор из нескольких фотографий так, что при щелчке на кнопке фотографии будут перемещаться под маской и двигаться таким образом, что в конечной области появится нужная фотография.

Откройте новый фильм с разрешением (550x400 пикселей) и затем в Property Inspector установите частоту кадров на значение 31.

Импортируйте фотографии, находящиеся в файлах на компакт-диске, прилагаемом к книге (001.jpg - 009.jpg), и преобразуйте каждый из них в фильм с левым верхним углом в качестве точки закрепления, назвав их соответственно по порядку именами 001-009.

Теперь нужно дать имена всем фильмам с изображениями. С помощью Property Inspector присвойте им имена инстансов с c1 по c9.

Расположите рисунки так, чтобы они прилегали друг к другу в порядке 3x3, и, выделив все рисунки, преобразуйте выделенную область в фильм с именем

Итак, теперь у нас на рабочем месте есть инстанс holder в корневой временной диаграмме. Мы добавим движение, переместив фильм holder под маску так, чтобы нужный рисунок оказался на нужной позиции.

Выделив фильм holder, используйте Property Inspector, чтобы задать ему имя инстанса holder и указать его значения X и Y, установив их на 0,0. После этого точка закрепления будет размещена в левом верхнем углу рабочего места. Наконец, назовите текущий слой 'pictures'.

Нам нужно будет создать маску, поэтому добавьте новый слой над слоем pictures и пометьте его как маску.

Нарисуйте прямоугольник 200x240 пикселей любого цвета и с помощью Property Inspector задайте значения X и Y, равные 180,89.

Преобразуйте выделенный прямоугольник в фильм с именем

Теперь нужно добавить некоторый код, чтобы сделать прямоугольник маской. Создайте новый слой с именем scripts и в новом слое откройте панель Actions, чтобы добавить следующий код:

holder.setMask (maska);

Посредством этого выражения фильм внутри скобок (maska) становится маской для фильма, который был вызван методом (holder). Если сейчас запустить фильм, то станет видно, что под маской будут находиться только те части holder (набора из девяти рисунков), которые просвечиваются, а остальные будут затемнены.

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

Далее, на слое background1 нарисуйте светло-серый прямоугольник 202x202 пикселя и с помощью Property Inspector задайте его значения X и Y, равные 179,88. Теперь на слое background2 нарисуйте другой серый прямоугольник более темным цветом и размером 204x244, задав для него значения X и Y, равные 178,87. Это будет границей наших фильмов.

Вы можете добавить любые другие нужные вам изображения на фоновые слои.

Чтобы привести в движение фильм holder, мы будем использовать функцию slide, созданную ранее. Добавьте следующий код в слой scripts над только что вставленной вами строкой кода:

speed = 4;
MovieClip.prototype.slideTo = 
 function(x, y, speed, callbackObj, callbackFunc) {
  Var mc_control
  if (this.slideControl) {
    mc_control = this.slideControl;
  }
  else {
    mc_control = this.createEmptyMovieClip 
     ("slideControl" , this. depth++) ;
  }
  mc_control.targetX = x;
  mc_control.targetY = y;
  mc_control.speed = speed;
  mc_control.callBackObj = callBackObj;
  mc_control.callBackFunc = callBackFunc;

  mc_control. onEnterFrame = function() {
    this._parent._x += (this.targetX-this._parent._x) /this.speed;
    this._parent._y += (this.targetY-this._parent._y) /this.speed;
    if (Math.abs(this.targetX-this._parent._x)<0.2 
       Math.abs(this.targetY-this._parent._y)<0.2) {
      this._parent._x = this.targetX;
      this._parent._y = this.targetY;
      this.callBackObj[this.callBackFunc](this._parent);
      this.removeMovieClip();
    }
  };
};
function slideDone(mc) {
  trace("movieClip "+mc+" has finished moving");
}

Для выполнения этого кода мы создадим несколько кнопок. Вместо того чтобы динамически создавать кнопки с использованием createEmptyMovieClip и createTextField (эти подходы мы рассмотрим позднее), мы создадим символ вручную и затем динамически применим его.

Создайте новый фильм и назовите его butt. Выделите фильм в Library и щелкните на белом значке меню вверху панели заголовка Library. В меню выберите параметр Linkage:, чтобы открыть окно Linkage Properties.

Отметьте поле Export for ActionScript, присвойте символу идентификатор

Теперь вы будете находиться в корневом слое фильма butt. Разместите поле Dynamic Text внутри фильма и дайте ему имя инстанса tf с помощью Property Inspector. Размер текста нашего поля равен 9, шрифт - Arial, без встроенных шрифтов.

Для автоматического добавления кнопок нам нужно добавить следующий код в слой scripts нашей корневой временной диаграммы (под уже имеющимся кодом).

holder.setMask(maska);
for (var i = 1; i<=9; i++) {
  var mc_control = _root.attachMovie("butt", "butt"+i, i);
  mc_control._x = 175+i*9;
  mc_control._y = 375;
  mc_control.mc = this.holder["c"+i] ;
  mc_control.tf.text = i;
}

Этот код циклически выполняется для каждого фильма с фотографией и добавляет кнопку. В нем используется итератор 'i' для установки текстового значения поля 'tf', поэтому в поле появятся числа от 1 до 9. В дополнение к этому, используется значение 'i' для установки конечного фильма для каждой кнопки (несмотря на то, что butt является фильмом, этот объект будет кнопкой, так как мы будем присваивать ему событие onPress ). Число 9 в конце четвертой строки кода контролирует расстояние между всеми фильмами-кнопками.

Перед присвоением события onPress нам нужно решить, какое именно действие будет выполняться при нажатии кнопки, так же как и место, в которое должен переместиться holder для корректного отображения каждой фотографии под маской.

Все это можно сделать, рассмотрев конкретный случай. Например, если бы у нас был фильм, расположенный в точке 300,300 в фильме holder, где должен был бы быть расположен holder, чтобы правильно отображать фотографии под маской? Если бы мы расположили holder на том же месте рабочего стола, что и маску, то отображалось бы все, что было бы на позиции 0,0 в holder. Основываясь на этом, мы можем сделать вывод, что если бы нам нужно было отображать объект на позиции 300,300 в holder, мы могли бы переместить holder на 300 пикселей влево и на столько же вверх. В коде мы бы указали это следующим образом:

(maska._x-300, maska._y-300);

Теперь, если мы обратимся к координатам _x и _y любого из наших фильмов с изображениями, то получим координаты фильма внутри holder. Следовательно, можно сказать, что для того, чтобы каждый фильм был расположен строго под маской, нам необходимо перемещать holder на следующее место:

(maska._x-mc._x, maska._y-mc._y);

Итак, теперь мы можем построить функцию onPress для наших кнопок:

for (var 1 = 1; i<=9; i++) {
  var mc_control = _root.attachMovie("butt" , "butt"+i, i);
  mc_control._x = 175+i*9;
  mc_control._y = 295;
  mc_control.mc = this.holder["c"+i] ;
  mc_control.tf.text = i;
  mc_control.onPress = function() {
    var x = this._parent.maska._x-this.mc._x;
    var у = this._parent.maska._y-this.mc._y;
    this._parent.holder.slideTo(x, y, this._parent.speed, this._parent, "slideDone") ;
  };
}

Вызов функции slideTo происходит таким же образом, как и ранее, с использованием показанного ранее вычисления для указания координат X и Y конечной точки скольжения. Hам необязательно записывать значения X и Y в переменные, поэтому мы можем убрать из кода соответствующую его часть и выполнять вычисления внутри вызова функции.

for (var i = 1; i<=9; i++) {
  var mc_control = _root.attachMovie("butt", "butt"+i, i);
  mc_control._x = 175+i*9;
  mc_control._y = 295;
  mc_control.mc = this.holder["c"+i] ;
  mc_control.tf .text = i;
  mc_control.onPress = function() {
    this._parent.holder.slideTo(this._parent.maska._x-this.mc._x, this._parent.maska._y-this.mc._y,
     this._parent.speed, this._parent, "slideDone");
  };
}

Сохраните фильм в файле pictureMask.fla. При его запуске вы увидите, что при скольжении каждого рисунка на его позицию происходит регистрация происходящего в окне Output. Сейчас для нас это не имеет значения, однако позже мы разберемся, как использовать эту возможность для вызова какого-либо события, например, текстового эффекта. Это лишь однa из возможных применений этого окна. Однако этот вид управления также может быть использован для вывода некоторого пояснительного текста, так, чтобы рисунки являлись фоном интерфейса, или для запуска анимации. Необходимо заметить, что мы управляем движением, которое сами же и инициировали. Мы знаем, когда оно начинается, и можем быть оповещены о его завершении, а это означает, что оно может стать частью цепи событий.