ActionScript 3 c нуля. Урок 1. События мыши.

Привет. Меня зовут Оксана. Я планирую написать серию уроков по ActionScript 3 для самых самых новичков (потому что я сама не так давно этим занимаюсь). У меня стоит Flash CS4, русифицированный (к сожалению). Если нам с вами буду нужны какие-то пункты меню, то буду писать их как на английском, так и на русском. 
Объективную критику обожаю. А также если вдруг перевру в каких-то терминах, то буду рада исправлениям  . Надеюсь, что рисовать прямоугольники и кружки ты уже умеешь, поэтому давай сразу перейдем к обучению.

События мыши

На основе 2-х примеров ты познакомишься с событиями мыши.

Пример1: При щелчке на прямоугольнике, он будет сдвигаться вправо. 

• Создай 2 слоя: 


На рисунке обведена кнопка создания нового слоя. Переименовать слой можно, если щелкнуть по названию слоя 2 раза.

• На сцене создай прямоугольник. 


• Чтобы прямоугольник можно было использовать в ActionScript, давай преобразуем его в символ.
Щелкни по прямоугольнику правой клавишей мыши – Преобразовать в символ илиConvert to symbol (а можно было просто нажать F8). В списке «Тип» выбери MovieClip –Фрагмент ролика.



Отлично.

Теперь можно писать скрипт.
Скрипт будет размещаться на слое AS. 

• В первом кадре слоя AS щелкни правой и в меню выбери Action – Действия. Или можно просто выделить первый кадр слоя AS и нажать F9.

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

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

Есть правило, по которому можно описать событие:

1. Создать слушателя событий. 

CODE

addEventListener (MouseEvent.CLICK, moveObject);

Метод addEventListener() всегда создает слушателя событий. Слушатель событий будет проверять, не произошло ли событие в нашей сцене. 
В скобках задается тип события. В данном случае это событие мыши MouseEvent.CLICK – тоесть прямоугольник будет сдвигаться вправо при щелчке на нем. Есть и другие события, чуть позже вы с ними познакомитесь.
После запятой пишется имя функции, которая нам нужна, чтобы в дальнейшем выполнять сдвиг прямоугольника вправо. Имя функции может быть любым, но лучше имена давать осмысленно. Я решила назвать функцию – moveObject.

Слушатель добавлен, теперь нужно описать саму функцию:

CODE

function moveObject (event:MouseEvent):void {
x = x + 5;
}

Описывается функция moveObject. 
В скобках описывается тип события – MouseEvent. Тип должен совпадать с типом события, указанным в слушателе. 
В дальнейшем вы привыкните к такой записи, меняться будут только названия функций и типы событий. Все остальное будет оставаться таким же. Тоесть если пока не очень понятно, нужно просто запомнить, как это пишется.
В фигурных скобках указывается, что будет делать функция, когда произойдет событие. 
x = x + 5 - Запись означает, что объект сдвинется на 5 пикселей вправо по координате x.

Эту запись можно более коротким способом записать так:
x+=5;
Все. Вот полный код:

CODE

addEventListener (MouseEvent.CLICK, moveObject);

function moveObject (event:MouseEvent):void {
x += 5;
}

• Протестируй ролик – Ctrl+Enter. Если пощелкать по прямоугольнику, то он начнет двигаться вправо.


  primer1.swf ( 929 байт ) Кол-во скачиваний: 78210


Пример2: При щелчке на прямоугольник – он будет двигаться вправо. При шелчке на окружность, она будет двигаться влево.

• На слой «Анимация» добавь еще один объект – окружность.

• Также преобразуй ее в MovieClip – Фрагмент ролика.



• Протестируй ролик. Объекты двигаются вправо на 5 пикселей.


  primer2.swf ( 1.01 KB ) Кол-во скачиваний: 74068


Чтобы можно было создать такую анимацию,как мне хочется, в коде будет необходимо ссылаться на каждый объект отдельно. Поэтому давай дадим имена нашим символам. 

• Выдели прямоугольник и на панели свойств - Properties в поле Instance Name – имя экземпляра – впечатай object1:



• Выдели окружность и дай ей имя экземпляра – object2



• Теперь снова возвращаемся в первый кадр слоя AS и F9, чтобы открыть панель Действий.
Вот так будет выглядеть код:

CODE

addEventListener (MouseEvent.CLICK, moveObject);

function moveObject (event:MouseEvent):void {
object1.x += 5;
object2.x -= 5;
}

Протестируй мувик. Теперь при щелчке на один из объектов прямоугольник сдвигается вправо, а окружность влево.


  primer3.swf ( 1.06 KB ) Кол-во скачиваний: 77586



Задача не выполнена  


Чтобы получилось так, как надо, нам нужно 2 событие. Одно будет для прямоугольника. Другое для окружности. 

CODE

object1.addEventListener (MouseEvent.CLICK, moveObject1);

function moveObject1 (event:MouseEvent):void {
object1.x += 5;
}

object2.addEventListener (MouseEvent.CLICK, moveObject2);

function moveObject2 (event:MouseEvent):void {
object2.x -= 5;
}

Обратите внимание, что слушателя мы теперь регистрируем отдельно для каждого объекта 
object1.addEventListener (MouseEvent.CLICK, moveObject1);
object2.addEventListener (MouseEvent.CLICK, moveObject2);

Протестируйте мувик. 


  prime4.swf ( 1.07 KB ) Кол-во скачиваний: 80292


Все получилось!!!!

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

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

CODE

object1.doubleClickEnabled = true;
object2.doubleClickEnabled = true;
object1.addEventListener (MouseEvent.DOUBLE_CLICK, moveObject1);

function moveObject1 (event:MouseEvent):void {
object1.x += 5;
}

object2.addEventListener (MouseEvent.DOUBLE_CLICK, moveObject2);

function moveObject2 (event:MouseEvent):void {
object2.x -= 5;
}

  primer5.swf ( 1.1 KB ) Кол-во скачиваний: 79290


Пока это все.
В следующем уроке мы продолжим работать с событиями мыши и я расскажу, как сделать кнопку Play – запускающую анимацию, и кнопку Stop – которая будет анимацию останавливать.

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