Урок 2. События мыши. Кнопка Play и Stop.

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

Пример 1: Кнопка Play и Stop

1. Первый слой назови – «анимация»


2. На сцене создай анимацию движения объекта из одной точки в другую. Я взяла растровую картинку в качестве объекта. Ты можешь создать простой объект – прямоугольник, окружность(объект должен быть сгруппирован – меню Modify – Group; Модификация - Группировать); 
или импортируй в сцену картинку – меню File – Import – Import to stage; Файл – Импорт – В рабочую область .


Кратко о том, как создать анимацию движения:
• Выдели 30 кадр(например) слоя «Анимация».
• Нажми F6 – создание ключевого кадра
• Передвинь объект на сцене в другое место
• Правой клавишей щелкни по серой полоске между 1-м и 30-м кадрами и выбери Motion tween – Анимацию движения. Для CS4 выберите Classic tween – Классическую анимацию движения



• Протестируй мувик Ctrl+Enter


  Primer1.swf ( 4.25 KB ) Кол-во скачиваний: 50980


3. Создай второй слой – назови его «Button» (можно по-русски – «Кнопки») 


4. На сцене, где-нибудь в углу создай два объекта – прямоугольник и треугольник – это будущие кнопки Play и Stop.


5. По каждому из созданных объектов щелкни правой клавишей и выбери Convert to Symbol – Преобразовать в символ (F8)

6. Оба символа сделай кнопками - Button.


7. На сцене выдели треугольник и в панели Properties – Свойства в поле Instance name – Имя экземпляра впечатай имя кнопки – «play_btn». Это делается для того, чтобы в дальнейшем была возможность в скрипте ссылаться на эту кнопку. В предыдущем уроке я об этом рассказывала.


8. На сцене выдели прямоугольник и в панели Properties – Свойства в поле Instance name – Имя экземпляра впечатай имя кнопки – «stop_btn». 


9. Создай третий слой – назови его «action»


10. В первом кадре слоя «action» щелкни правой и в меню выбери Action – Действия (F9)

11. Напиши такую строчку:

CODE

stop(); //останавливает анимацию в самом начале

12. Протестируй мувик. Все правильно. Ничего не движется

13. Теперь нужно сделать так, чтобы кнопка Play смогла запустить анимацию. И тут придется вспомнить, что такое событие. Ведь нажатие на кнопку – это и есть событие.

CODE

/*создаем слушателя событий для кнопки play_btn. Событие MouseEvent.CLICK – тоесть пользователь делает щелчок на кнопке Play_btn*/
play_btn.addEventListener(MouseEvent.CLICK, playF);

/*Создаем функцию, которая и будет выполняться запуск анимации при щелчке мышью на кнопке*/
function playF(Event:MouseEvent):void {
play();
}

14. Весь код:

CODE

stop();
play_btn.addEventListener(MouseEvent.CLICK, playF);

function playF(Event:MouseEvent):void {
play();
}

Если ты сейчас протестируешь ролик, то работать будет пока только кнопка Play.

15. Теперь нужно сделать так, чтобы кнопка Stop смогла останавливать анимацию. И снова нам нужно событие. Здесь представлен полный код для 1-го примера: 

CODE

stop();

play_btn.addEventListener(MouseEvent.CLICK, playF);
stop_btn.addEventListener(MouseEvent.CLICK, stopF);

function playF(Event:MouseEvent):void {
play();
}
function stopF(Event:MouseEvent):void {
stop();
}

  Primer3.swf ( 4.8 KB ) Кол-во скачиваний: 52879


Отлично. Все работает!!!


Пример 2: Вся анимация находится внутри Movie Clip.

1. Создай новый проект

2. Первый слой назови – «анимация»

3. Создай новый символ – меню Insert – New Symbol; Вставка – Новый символ

4. В качестве символа выбери MovieClip

5. Внутри символа создай анимацию движения объекта как в предыдущем примере.

6. Чтобы вернуться на сцену, нажми на кнопку  и выбери название сцены.

7. Из библиотеки символов вытащи на сцену свой симвов (Чтобы открыть библиотеку – меню Window – Libreries; Окно – Библиотека)

8. Создай второй слой – назови его «Button» (можно по-русски – «Кнопки») 

9. Создай две кнопки - Play и Stop.


10. Каждой кнопке дай имя экземпляра, как в примере 1.

11. Создай третий слой – «action»

12. В первом кадре слоя напиши скрипт из примера 1:

CODE

stop();

play_btn.addEventListener(MouseEvent.CLICK, playF);
stop_btn.addEventListener(MouseEvent.CLICK, stopF);

function playF(Event:MouseEvent):void {
play();
}
function stopF(Event:MouseEvent):void {
stop();
}

13. Протестируйте мувик. Хм. Кнопки не работают. А ролик изначально двигается сам по себе.


  Primer4.swf ( 5.41 KB ) Кол-во скачиваний: 51862


14. Когда анимация находится внутри символа, чтобы ее остановить, необходимо ссылаться на этот символ. Поэтому давай сейчас назовем наш символ – «object»
• Вернись на сцену
• Выдели символ
• В панели свойства впечатай имя экземпляра – «object»


15. Давай немного изменим наш скрипт, чтобы он стал работать.
Во-первых правильно остановим мувик:

CODE

object.stop();//ссылаемся на тот символ, анимацию которого хотим остановить

Во-вторых внутри функции playF правильно запустим анимацию:

CODE

object.play();

И в-третьих внутри функции stopF правильно остановим анимацию:

CODE

object.stop();

Весь код:

CODE

object.stop();

play_btn.addEventListener(MouseEvent.CLICK, playF);
stop_btn.addEventListener(MouseEvent.CLICK, stopF);

function playF(Event:MouseEvent):void {
object.play();
}
function stopF(Event:MouseEvent):void {
object.stop();
}

  Primer5.swf ( 5.43 KB ) Кол-во скачиваний: 68411


Вот наконец урок 2 закончился. Если у тебя все получилось, ты молодец!)

В следующем уроке мы продолжим работать с событиями мыши и посмотрим метод gotoAndStop() и gotoAndPlay().

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