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

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

Все стандартные обработчики событий имеют эквивалентные обработчики-методы. Вот примеры:

on(press) – имяКнопки.onPress или имяФильмаСимвола.onPress
on(release) – имяКнопки.onRelease или имяФильмаСимвола.onRelease
on(enterFrame) – имяФильмаСимвола.onEnterFrame

Кроме того, существуют следующие методы-обработчики, не имеющие эквивалента среди стандартных обработчиков событий:

Кнопки / Фильмы-символы

имяФильмаИлиКнопки.onKillFocus
имяФильмаИлиКнопки.onSetFocus

Звук

имяЗвуковогоОбъекта.onLoad
имяЗвуковогоОбъекта.onSoundComplete

Текстовые поля

имяТекстовогоПоля.onChanged
имяТекстовогоПоля.onKillFocus
имяТекстовогоПоля.onScroller
имяТекстовогоПоля.onSetFocus

Объект LoadVars

имяLoadVarsОбъекта.onLoad

XML

имяXMLОбъекта.onData
имяXMLОбъекта.onLoad

XML Socket

имяXMLSocketОбъекта.onClose
имяXMLSocketОбъекта.onConnect
имяXMLSocketОбъекта.onData
имяXMLSocketОбъекта.onXML

Как видите, для запуска скрипта можно использовать множество разных событий. Поскольку некоторые из этих объектов являются "нематериальными" (например, звук, LoadVars, XML и т.п.), применение методов-обработчиков (в ключевом кадре на монтажном столе) – единственный способ запустить некий скрипт при наступлении события, связанного с таким объектом (в отличие от кнопок и фильмов-символов, которые можно просто выделить на сцене и присоединить скрипт к ним непосредственно).

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

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

on(press){
  gotoAndPlay(5);
}

Если присоединить такой скрипт к кнопке, она будет реагировать только на событие press, и выполнять только это действие при наступлении такого события. Теперь, чтобы дать вам представление о гибкости и мощи обработчиков-методов, давайте предположим, что на сцене имеется экземпляр кнопки с именем myButton. Мы помещаем в кадр 1 основного монтажного стола (предполагается, что кнопка в этом кадре существует) следующий скрипт, описывающий реакцию на события:

myButton.onPress = function() {
  stopAllSounds();
}
myButton.onRelease = function() {
  myMovieClip._xscale = 50;
}

При нажатии кнопки останавливается воспроизведение всех звукозаписей; при отпускании myMovieClip масштабируется до 50 процентов оригинального размера.

Однако же, переместив монтажный стол на кадр 2 (предполагаем, что кнопка существует и в этом кадре), мы можем полностью изменить функционирование кнопки:

myButton.onPress = null
myButton.onRelease = null
myButton.onRollOver = function() {
  stopAllSounds();
}
myButton.onRelease = function() {
  myMovieClip._xscale = 50;
}

Использовав null (пустую функцию), мы запретили кнопке реагировать на события onPress и onRelease, а взамен велели ей реагировать на два новых события.

Как видите, применяя методы-обработчики, можно в любой момент изменить функции кнопки и события, на которые она реагирует – немаловажное преимущество!

Методы-обработчики просто незаменимы для динамически создаваемых объектов. При динамическом создании в фильме (уже в процессе проигрывания) появляется объект, который изначально в нем не присутствовал. Стало быть, вы не сможете описать для такого объекта реакции на события, выделив его на сцене (его ведь попросту еще не существует!). Здесь-то и придут на помощь обработчики-методы. Посмотрите на следующий несложный скрипт, и вы поймете, как это делается:

_root.createEmptyMovieClip("newClip", 1);
_root.newClip.onEnterFrame = function(){
  myVariable++;
}
_root.newClip.onMouseMove = function(){
  myCursorClip._x = _root._xmouse;
  myCursorClip._y = _root._ymouse;
}

Как видите, создав экземпляр фильма-символа с именем newClip, мы сразу же, с помощью методов-обработчиков, описали, как этот экземпляр должен откликаться на некоторые события.

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

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

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

Слой Background содержит основное фоновое изображение. Слой CarClip содержит красный автомобиль, расположенный в левом верхнем углу сцены – это экземпляр фильма-символа, имеющий имя car. Монтажный стол этого фильма-символа, в свою очередь, содержит пару экземпляров другого фильма-символа, под именами wheel1 и wheel2 – они представляют колеса автомобиля. В следующем слое, Text Fields, находятся три текстовых поля: text1, text2 и text3. Как вы увидите, взаимодействие пользователя с этими полями будет определять функционирование проекта. Следующий слой, Arrows, содержит три экземпляра фильма-символа, изображающего маленькую стрелочку: arrow1, arrow2 и arrow3. Эти стрелки располагаются под каждым из текстовых полей и могут перемещаться вдоль поля при вводе и удалении текста. Следующий слой, Wheel, содержит фильм-символ wheelClip, который будет динамически программироваться таким образом, чтобы он реагировал на событие onEnterFrame, но только в том случае, если выделено текстовое поле text1. Слой над этим – Speedometer – содержит экземпляр фильма-символа с именем speedClip; на его монтажном столе имеется несложная анимация, изображающая движение стрелки спидометра и сопровождающаяся звуком двигателя при разгоне. Данный экземпляр будет динамически программироваться так, чтобы он реагировал на событие onPress, но только когда выделено текстовое поле text2. Следующий слой, Fan, содержит экземпляр фильма-символа с именем fanClip, который будет запрограммирован на событие onEnterFrame – только если выделено текстовое поле text3. Ну, и наконец, кадр 1 слоя Actions будет содержать большинство скриптов нашего проекта.

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

2. Открыв панель Действия, выделите кадр 1 и внесите следующий скрипт:

text1.onChanged = function(){
  car._x += 2;
  car.wheel1._rotation += 10;
  car.wheel2._rotation += 10;
  arrow1._x = text1._x + text1.textWidth;
}

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

Первое действие перемещает экземпляр car по горизонтали на 2 пикселя вправо – к его свойству _x прибавляется 2. Следующие два действия поворачивают экземпляры фильма-символа wheel1 и wheel2 (они находятся в экземпляре car), добавляя по 10 градусов к текущему значению поворота. Таким образом колеса провернутся, когда машина двинется вправо.

Примечание Использование в скрипте оператора += расшифровывается так: "Прибавить значение, стоящее справа от оператора, к текущему значению того, что указано слева". В данном случае увеличиваются значения поворота экземпляров фильма-символа wheel1 и wheel2.

Последнее действие перемещает по горизонтали стрелку arrow1, так, чтобы она находилась под последней буквой в поле text1. Делается это путем прибавления горизонтальной координаты text1 (его свойства _x ) к ширине текста в поле. Эта сумма становится координатой arrow1. Все эти действия выполняются при каждом изменении текста ( onChanged ) в поле text1.

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

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

text1.onSetFocus = function(){
  wheelClip.onEnterFrame = function(){
    wheelClip._rotation += 30;
  }
  speedClip.onPress = null;
  fanClip.onEnterFrame = null;
}

Данный скрипт описывает, что должно быть выполнено, когда текстовое поле text1 получает фокус. "Фокусом" в программировании называют активное состояние элемента; то есть, если пользователь щелкнет в текстовом поле, оно получит фокус – станет активным, готовым для немедленного ввода информации.

Этот обработчик делает нечто интересное: он конфигурирует три других обработчика-метода. Вот она, гибкость! Во-первых, назначается реакция фильма-символа wheelClip на событие onEnterFrame – он должен поворачиваться на 30 градусов каждый раз, когда происходит действие (24 раза в секунду). То есть колеса (экземпляры wheelClip ) будут крутиться, пока выделено поле text1. Чуть позже мы запрограммируем реакцию speedClip и fanClip на события onPress и onEnterFrame, соответственно. Поэтому два следующих действия в этом скрипте отменяют эти функции, пока выделено поле text1.

Следующие добавления в скрипт – вариации на тему того, что мы уже написали.

4. После имеющегося в панели Действия скрипта добавьте следующий.

text2.onChanged = function(){
  car._x += 2;
  car.wheel1._rotation += 10;
  car.wheel2._rotation += 10;
  arrow2._x = text2._x + text2.textWidth;
}

Синтаксически и функционально этот скрипт не отличается от того, что мы написали на шаге 2 – изменений всего два. Во-первых, этот скрипт выполняется при изменении текста в поле text2. Во-вторых, перемещается по горизонтали стрелка arrow2, располагаясь под последней буквой в поле text2.

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

text2.onSetFocus = function(){
  wheelClip.onEnterFrame = null;
  speedClip.onPress = function(){
    speedClip.play();
  }
  fanClip.onEnterFrame = null;
}

Этот скрипт – вариация того, что был нами добавлен на шаге 3. Он указывает, что должно происходить при получении фокуса полем text2. Обратите внимание – здесь программируется реакция экземпляра speedClip на событие onPress. При нажатии кнопки мыши на экземпляре speedClip (после того, как получит фокус поле text2 ) начинается воспроизведение этого экземпляра. Прочие действия отключают реакцию экземпляров wheelClip и fanClip на событие onEnterFrame (которая запрограммирована в других частях скрипта). Как вы уже поняли, идея в том, что когда одно из текстовых полей получает фокус, экземпляру фильма-символа, находящемуся слева от этого поля, назначается выполнение неких действий, тогда как для других двух имеющаяся функциональность отключается.

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

text3.onChanged = function(){
  car._x += 2;
  car.wheel1._rotation += 10;
  car.wheel2._rotation += 10;
  arrow3._x = text3._x + text3.textWidth;
}
text3.onSetFocus = function(){
  wheelClip.onEnterFrame = null;
  speedClip.onPress = null;
  fanClip.onEnterFrame = function(){
    fanClip._rotation += 20;
  }
}

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

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

Щелкните в верхнем текстовом поле ( text1 ) – тем самым это поле получит фокус, и экземпляр wheelClip начнет вращаться. Если вы попробуете ввести в это поле текст, то заметите, что, во-первых, автомобиль (экземпляр фильма-символа car ) движется вправо, при этом его колеса поворачиваются; а во-вторых, перемещается стрелка под текстовым полем, оставаясь все время под последней буквой. Попробуйте нажать speedClip – увидите, что ничего не происходит. Теперь щелкните в поле text2: все изменилось. Вращение wheelClip прекратилось, а при нажатии на speedClip воспроизводится анимация со звуковым сопровождением. Щелчок в поле text3 приведет к тому, что экземпляр speedClip вновь станет неактивным, зато начнет вращаться fanClip.

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

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

Применение "слушателей" (listeners)

Как происходит радиовещание? Один передатчик посылает радиоволны тысячам приемников. Точно также события могут "вести передачу" для любого числа объектов, чтобы они вели себя соответствующим образом. Реализуется это при помощи так называемого слушателя – процесса, при котором о событии сообщается объектам, "зарегистрированным" для прослушивания.

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

myTextField.onMouseDown = function(){
  myTextField.text="";
}

Здесь мы указали, что текстовое поле с именем myTextField должно реагировать на нажатие кнопки мыши. Однако событие onMouseDown не является стандартным для текстовых полей, и наше поле реагировать на него не будет. Чтобы текстовое поле могло реагировать на это событие, мы должны зарегистрировать данное текстовое поле для слушания этого события. Для этого следует добавить такую строку кода:

Mouse.addListener("myTextField");

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

Mouse.removeListener("myTextField");

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

Примечание Не все события можно трактовать как слушатели. Помните об этом, и проверяйте, указано ли событие в списке слушателей ( listeners ) инструментального окна панели Действия. Если событие в этом списке отсутствует, объект не сможет его слушать.