Урок 2. Изучаем слушатели событий

Итак, теперь, когда вы уже познакомились с историей флеша, пора переходить к изучению этого самого ActionScript3!

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

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

Раздел 1. Слушатели в общем.

Любой слушатель событий создается по одному принципу:

• Название объекта, для которого создан этот слушатель.
• addEventListener(
• Тип слушателя.
• Слушатель,
• Название функции, которая должна сработать при выполнение слушателя.

Обычно функции создаются по такому принципу:

• function  название_фунции(e:тип_слушателя):void{тело_функции}

Скорее всего, пока что ничего не понятно, но это не страшно :)

Раздел 2. События мыши.

События мыши мы будем изучать на примере создания flash ролика, в котором при нажатии на объект он будет смещаться вправо.

Вот как это будет выглядеть:

                        Приступим! Для начала создайте на сцене мувиклип (например квадрат) и дайте ему имя (например box).

Теперь давайте наконец созданим этот слушатель! Вспомните принцип из раздела 1. Как я уже говорил, все слушатели создаются по этому принципу, этот не исключение. Для того что-бы начать писать код, выделите первый кадр первого слоя, и нажмите F9. Так выглядит панель Action

Теперь напечатайте такой код:

И нажмите Ctrl+Enter. А тут вдруг:

"В чем же дело?!" спросите вы, ведь вы всё делали по инструкции! А дело в том, что мы указали название функции "boxMovie", a саму функцию не создали! Создадим функцию "boxMovie" и заставим квадрат двигатся:

И снова нажмите Ctrl+Enter.

Урра!! Заработало!!)

Теперь для закрепления давайте создадим несколько объектов.

Выглядеть это будет так:

Нарисуйте на сцене круг, сделайте его мувиклипом, и дайте ему имя "shar".

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

Ctrl+Enter. P.S.: Спасибо внимательному человеку заметившему опечатку. В строке 11 должно быть не box.x+=5 а shar.x+=5. Ну и на последок  я расскажу, какие бывают события мыши:

• MouseEvent.CLICK – сделано нажатие и отпускание ЛКМ над рабочей областью;
  
• MouseEvent.MOUSE_DOWN – сделано нажатие ЛКМ;
  
• MouseEvent.MOUSE_UP – сделано отпускание ЛКМ;
  
• MouseEvent.DOUBLE_CLICK – событие происходит после 2-го щелчка
  
• MouseEvent.MOUSE_MOVE – событие происходит, если курсор перемещается над областью отображения;
  
• MouseEvent.MOUSE_OVER – событие происходит, если указатель перемещается на объект. Чтобы событие произошло еще раз, курсор нужно поместить за пределы объекта, а потом снова навести его на объект.
  
• MouseEvent.MOUSE_OUT – событие происходит, если указатель перемещается за пределы области объекта;
  
• MouseEvent.MOUSE_WHEEL – событие происходит, если указатель расположен над рабочим объектом и пользователь крутит колесо;
  

А теперь для закрепления домашнее задание:

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

Вот и всё, теперь вы знакомы с событиями мыши. Раздел 3. Событие ENTER_FRAME. Этот раздел будет значительно короче чем первый, но не менее важный. Сейчас попробуем написать простейшую программку, например, осуществление простого движения объекта, и кнопку, пи нажатии на которую объект вернется на место. Выглядеть это будет так: Создаём новый AS3 документ, и рисуем любой объект (например прямоугольник). Обращаем его в мувик, и даём имя "box". Открываем панель Action и пишем такой код:

//Создаем слушатель, и даем ему тип Event.ENTER_FRAME
stage.addEventListener(Event.ENTER_FRAME, moveF);
function moveF(e:Event):void
{
//Сдвигаем ящик на 2 пикселя вправо.
 box.x +=  2;
}

Теперь протестируем ролик (Ctrl+Enter). Ура, все работает. А теперь разберемся, что мы написали, по порядку. stage.addEventListener(Event.ENTER_FRAME, moveF) - в этой строчке мы объявляем слушатель событий, который будет «привязан» к данной сцене, stage. Далее смотрим свойства (то, что в скобках) - функции могут быть заданы разными видами событий – события мыши, клавиатуры, а в данном случае это событие EnterFrame, то есть действия функции будут совершаться при каждом обновлении сцены. Причем частоту перехода можно регулировать вот здесь, в нижней части Timeline:

Теперь приступим к созданию кнопки. Сначала нарисуйте её и обратите в мувиклип. Дайте ей имя "btn1". Потом создайте слушатель события и функцию, при выполнении которой наш квадрат перейдёт в координату x=0; Я специально не писал код, так как это домашнее задание :)