Применение обработчиков событий

Сочетание различных событий

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

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

увеличить изображение

1. Откройте файл OrchestrateEvents1.fla из папки lesson02/Assets.

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

Белый бильярдный шар есть экземпляр фильма-символа с именем ball. Для него мы вскоре напишем несколько скриптов. Справа от него находится полупрозрачный голубой прямоугольник – это невидимая кнопка; она тоже будет содержать скрипты, которые, действуя в связке со скриптами фильма-символа ball, помогут нам реализовать нужное интерактивное взаимодействие. Правее кнопки вы видите изображение бильярдного кия. Это – экземпляр фильма-символа с именем stick. На монтажном столе этого фильма-символа имеется два кадра с метками – Starting и PullBack. На метке Starting кий расположен так, как сейчас – вплотную к шару. На метке PullBack начинается анимация, показывающая, как кий оттягивается назад (вправо), чтобы ударить по шару. Наконец, прямо над кием расположен экземпляр текстового поля с именем powerAmount, в котором будет отображаться сила удара по шару – в зависимости от того, насколько далеко оттянут кий.

Наш проект будет работать так: когда невидимая кнопка нажата, оттянута в сторону и затем отпущена, будет вычислена дистанция между точкой, где кнопка была нажата, и точкой, где она отпущена. На основании этого результата шар будет перемещен влево. Чем больше дистанция, тем дальше влево "откатится" шар.

Давайте приступим к написанию скриптов.

2. Откройте панель Действия (Actions), выделите невидимую кнопку и добавьте следующий скрипт:

on (press) {
  ball._x = 360;
  ball._y = 180;
  power = 0;
  powerAmount.text = power;
  hitAmount = 0;
  trackMouse = true;
  mouseStart = _root._xmouse;
}

Первое, что следует учесть – это положение самой кнопки. Она находится на кончике кия, как раз между ним и шаром – в точке соприкосновения; по логике вещей это самое лучшее место для нее.

Большинство действий в этом скрипте предназначены для инициализации, выполняются они при нажатии кнопки мыши. Мы знаем, что пользователь может пожелать ударить по шару не один раз, поэтому нам необходимы два первых действия, перемещающие шар в первоначальную позицию по горизонтали ( x ) и вертикали ( y ) для подготовки к новому удару. Следующее действие присваивает переменной power значение 0. Значение этой переменной (оно будет использоваться для определения силы удара по шару) будет меняться при оттягивании кия от шара. Значит, перед каждым ударом мы должны сбрасывать его на 0. Следующее действие попросту отображает текущее значение переменной power в текстовом поле powerAmount.

Скрипт, помещенный в экземпляр фильма-символа ball, будет использовать значение переменной hitAmount для определения расстояния, на которое следует переместить шар. Тот скрипт мы напишем чуть позже, а пока, следующим действием в этом скрипте, мы устанавливаем hitAmount в 0. Значение этой переменной будет меняться после каждого удара по шару, поэтому этим действием мы сбрасываем значение при нажатии кнопки.

Следующим действием переменной trackMouse присваивается значение true (истина). Об этой переменной сейчас достаточно знать, что она будет использоваться как переключатель для запуска скрипта, который будет присоединен к экземпляру фильма-символа ball.

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

3. В панели Действия добавьте после предыдущего скрипта следующий:

on (dragOut) {
  stick.gotoAndPlay ("PullBack");
}

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

4. Добавьте после предыдущего скрипта следующий:

on (releaseOutside) {
  stick.gotoAndStop ("Starting");
  mouseEnd = _root._xmouse;
  hitAmount = mouseEnd - mouseStart;
  trackMouse = false;
}

Эти действия будут выполнены, если невидимая кнопка была нажата, потянута в сторону (при нажатой кнопке мыши), затем отпущена (событие releaseOutside ). Вся эта процедура – схватить, оттянуть и отпустить – напоминает процесс стрельбы из рогатки; мы же используем ее для имитации удара кием по шару.

Первое действие перемещает экземпляр фильма-символа stick к кадру с меткой Starting. Кий оказывается в начальной позиции, рядом с шаром. После этого шар начнет двигаться (это мы запрограммируем вскоре), и мы получим имитацию удара кием по шару.

Следующее действие записывает горизонтальную координату мыши в момент, когда ее кнопка отпущена. Теперь у нас имеется начальная координата, записанная в момент нажатия кнопки мыши на нашей невидимой кнопке ( mouseStart ) и конечная – в момент отпускания кнопки мыши ( mouseEnd ). Эти два значения используются в следующем действии.

Значение hitAmount определяется путем вычитания mouseEnd из mouseStart. Если, например, mouseStart равно 200, а mouseEnd – 300, переменной hitAmount будет присвоено значение 100. Тем самым, мы определяем дистанцию между местом нажатия кнопки мыши и местом отпускания – а значит, "силу", с которой будет нанесен удар по шару; от силы же зависит, сколь далеко откатится шар.

Последним действием переменной trackMouse присваивается значение false. Эта переменная понадобится позже, как уже упоминалось, она служит переключателем для запуска скрипта, который будет присоединен к экземпляру фильма-символа ball. Вы, верно, помните, что при нажатии кнопки этой переменной было присвоено значение true – это "включает" скрипт. Таким образом, скрипт будет включаться при нажатии кнопки, и отключаться при отпускании за пределами (сам скрипт, который мы собираемся включать-отключать, будет написан через пару шагов).

Нам осталось только присоединить парочку скриптов к фильму-символу ball. Один скрипт будет перемещать шар, во втором будет использоваться та самая переменная trackMouse.

5. Выделите экземпляр фильма-символа ball и введите в панели Действия следующий скрипт:

onClipEvent (enterFrame) {
  if (_root.hitAmount > 5) {
    this._x = this._x - 10;
    _root.hitAmount = _root.hitAmount - 2;
  }
}

Для выполнения этого скрипта использован обработчик события enterFrame. Скрипт содержит оператор if, который, прежде чем предпринять какие-либо действия, проверяет значение переменной основного монтажного стола hitAmount (вы помните – эта переменная определяет силу удара по шару, ее значение устанавливается в процессе функционирования нашей невидимой кнопки).

Итак, если значение hitAmount больше 5, скрипт перемещает экземпляр фильма-символа ball(this) в позицию с горизонтальной координатой, равной текущей x-координате минус 10, а затем уменьшает на 2 значение hitAmount. Поскольку мы воспользовались событием enterFrame, эти действия будут выполняться 24 раза в секунду – но только пока выполняется условие "hitAmount больше 5". В результате экземпляр фильма-символа ball будет перемещаться на 10 пикселей влево 24 раза в секунду. Поскольку при каждом выполнении скрипта из hitAmount вычитается 2, значение этой переменной рано или поздно станет меньше 5, и выполнение скрипта прекратится. Он может быть выполнен вновь не ранее, чем hitAmount будет присвоено значение, большее 5, а это может произойти лишь в процессе функционирования нашей кнопки. Вот вам прекрасный пример сочетания нескольких событий для достижения одной цели интерактивного взаимодействия.

увеличить изображение

6. Добавьте после предыдущего скрипта следующий:

onClipEvent (mouseMove) {
  if (_root.trackMouse == true) {
    _root.power = _root._xmouse - _root.mouseStart;
    _root.powerAmount.text = _root.power;
  }
}

Для выполнения этого скрипта используется обработчик события mouseMove. Этот скрипт тоже содержит оператор if, который, прежде чем выполнить действия, проверяет значение переменной trackMouse, принадлежащей основному монтажному столу. Как вы помните, этой переменной при нажатии невидимой кнопки было присвоено значение true, а при отпускании – false. Данный скрипт выполняется только в том случае, если это значение равно true; стало быть, при изменении значения этой переменной (а это связано с событиями мыши) имеет место эффект "включения" и "отключения" этого скрипта.

Итак, если переменная trackMouse равна true, скрипт присваивает переменной power значение, равное разности двух чисел – текущей горизонтальной координаты мыши и значения mouseStart. В переменной mouseStart, как мы помним, записана горизонтальная координата мыши в момент нажатия невидимой кнопки. Следующее действие отображает значение переменной power в текстовом поле powerAmount. Поскольку эти действия выполняются при каждом перемещении мыши (если trackMouse равно true ), мы получим отображение на экране в реальном времени предполагаемой силы удара по шару.

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

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

7. Выполните команду Управление > Проверить фильм (Control > Test Movie).

Наведите указатель на вершину кия, нажмите кнопку мыши и потащите вправо. Отпустите кнопку – кий ударит по шару, и тот покатится влево, как далеко – зависит от силы "удара". Повторите все сначала, с другой "силой удара". Как видите, проект работает так, как мы задумали.

8. Закрыв окно тестирования, вернитесь в среду разработки и сохраните работу в файл OrchestratingEvents2.fla.

Упражнение завершено.