Програмное управление анимацией из другого клипа


На основе этого примера мы рассмотрим возможность программного управления анимацией клипов. Для лучшего понимания этого урока, скачайте zip.
Для начала создайте клип (в моём примере назван "ctrl") который будет "отлавливать" перемещения мыши и управлять другим клипом (у меня это клип "toy"). Внутри него положите другой клип (у меня это "drag"), поместив его так, чтобы он находился в координате 50 по оси x.
Весь код содержится в клипе "drag", который вложен в клип "ctrl", лежащий в слое "Controller" основного таймлайна. Ниже он приведён полностью:
  onClipEvent (load) {
    direct = 1;
    delay=1.01;
  }
  onClipEvent (mouseDown) {
    if (this.hitTest(xm1, ym1, 1)) {
      hit = 1;
    }
  }
  onClipEvent (mouseUp) {
    hit = 0;
  }
  onClipEvent (enterFrame) {
    xm1 = _root._xmouse;
    ym1 = _root._ymouse;
  if (hit == 1) {
    xpos = xm1-xm2;
  }else{
    xpos =     xpos/delay;
  }
  this._x += xpos*direct;
  if (this._x<0) {
    this._x = 0;
    direct = -direct;
  }
  if (this._x>100) {
    this._x = 100;
    direct = -direct;
  }
  xm2 = xm1;
  _root.toy.gotoAndStop(int(_x));
  }

Перед тем, как "разобрать" этот код создайте в основном Таймлайне второй клип. Он должен содержать половину "зацикленной" анимации и иметь длительность в 100 кадров. В первом кадре клипа прставьте комманду "stop". Не забудьте дать ему имя (Instance), в нашем случае - "toy".
Ну, а теперь будем "грызьть" код.

  onClipEvent (load) {
    direct = 1;
    delay=1.01;
  }

При загрузке клипа мы объявляем внутри него переменную "direct", которая будет принимать то положительное, то отрицательное значение, отвечая тем самым за направление движения клипа "drag". И задаём значение для переменной "delay", отвечающую за "затухание" возвратно-поступательного движения клипа.

  onClipEvent (mouseDown) {
    if (this.hitTest(xm1, ym1, 1)) {
      hit = 1;
    }
  }

Этот блок кода начинает работать при нажатой кнопке мыши. Проверяем условие: если координаты мыши (xm1 и xm2, позднее мы рассмотрим , откуда взялись эти переменные) при нажатии совпадают с клипом "drag", то мы задаём значение для переменной "hit" равной еденице. Эта переменная позволит нам в основном блоке кода проверять, "держим" мы управляющий клип, или уже его "отпустили".

  onClipEvent (mouseUp) {
    hit = 0;
  }

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

  onClipEvent (enterFrame) {
    xm1 = _root._xmouse;
    ym1 = _root._ymouse;


В начале мы производим инициализацию переменных xm1 и ym2 присваивая им значения координат мыши, которые мы берём из основного таймлайна.

  if (hit == 1) {
    xpos = xm1-xm2;
  }else{
    xpos = xpos/delay;
  }


Затем мы проверяем содержимое переменной "hit", отвечающей за нажатие мыши. Если она равна еденице, то мы объявляем переменную "xpos", она будет равна разнице между"старым" значением координат мыши и новым, которое мы объявим в конце этого блока. Эта переменная ("xpos") , будет использоваться у нас для определения новой позиции клипа "drag".Ecли переменная "hit" содержит ноль, то новое значение "xpos" будет вычисляться из старого, делённого на коэффициент затухания (значение переменной "delay").

  this._x += xpos*direct;

Далее мы определяем новые координаты клипа "drag". К старым координатам прибавляем значение "xpos" умноженное на значение переменной "direct". Эта переменная, как вы помните, отвечает у нас за направление движения клипа "drag".

  if (this._x<0) {
    this._x = 0;
    direct = -direct;
  }
  if (this._x>100) {
    this._x = 100;
    direct = -direct;
  }

Теперь мы "ограничим" передвижения клипа "drag". Если он "уедет" у нас левее кординаты "ноль", мы отправим его обратно и поменяем переменную "direct" на противоположную. Если он постарается "уехать" вправо, мы поступим с ним точно также.

  xm2 = xm1;

В этой строке мы присваиваем переменной "xm2" (отвечающей за "новые" координаты мыши) занчение "xm1" ("старые" координаты).

  _root.toy.gotoAndStop(int(_x));

Осталось только управление для второго клипа. Мы вызываем его из основного таймлайна и исполняем команду перехода в кадр. В качестве значения, определяющего номер кадра, мы используем горизонтальную координату клипа "drag", округлив её до ближайшего целого числа оператором "int".
Вот собственно и всё. В основном таймлайне вы можете тепреь где угодно располагать управляющий клип "ctrl", и как угодно его масштабировать. Все горизонтальные перемещения клипа "drag" будут отражены соответсвующим кадром клипа "toy".
Или любого другого, созданного уже вами.

P.S. на кнопке висит команда, заставляющая переменную "delay" принимать значение "1" или "1.01", что соответственно придаёт клипу "toy" затухающее или постоянное движение.

 


Страница сайта http://silicontaiga.ru
Оригинал находится по адресу http://silicontaiga.ru/home.asp?artId=6124