ActionScript 3. Урок 3. Методы gotoAndPlay() и gotoAndStop().

Метод gotoAndStop()

Пример 1:
1. В новом проекте создай анимацию: В первые 20 кадров звезда вылетает на середину сцены, последующие 20 кадров звезда крутится.
Кратко о том, как это сделать:
• Создай звезду(звезда должна быть сгруппирована) и размести ее слева от сцены.
• Напротив слоя в 20 кадре нажми F6 – создание ключевого кадра
• Звезду перемести в середину сцены
• Щелкни правой клавишей между 1-м и 20-м кадрами и выбери Motion tween – Анимацию движения. Для CS4 выберите Classic tween – Классическую анимацию движения
• Напротив слоя в 40 кадре нажми F6.
• Щелкни правой клавишей между 20-м и 40-м кадрами и выбери Motion tween – Анимацию движения. Для CS4 выберите Classic tween – Классическую анимацию движения
• Выдели 20 кадр.
• На панели Properties - свойства в списке Rotate – Поворот выбери CW – вращение по часовой стрелке, или CCW – вращение против часовой стрелки.



2. Протестируй ролик:


  primer_3.1.swf ( 893 байт ) Кол-во скачиваний: 48019


Анимация, если она зацикленная, будет воспроизводиться так: вначале звезда вылетает, потом она крутится; затем снова вылетает, снова крутится и тд.

Задача: Сделать так, чтобы ползунок анимации после 40-го кадра перескакивал не на первый кадр, а на 20-й. Тогда мы получим такую анимацию: Один раз звезда вылетает слева и постоянно крутится.
Вот тут нам и понадобится метод gotoAndPlay();

3. Создай новый слой для скрипта. Назови его «action»

4. В 40-м кадре нажми F6 (Если писать скрипт в кадре, который не является ключевым, то он привяжется к предыдущему ключевому кадру; в нашем случае к 1-му)

5. Окрой панель Action – Действия (F9)

6. Напечатай такую строку:

CODE

gotoAndPlay(20); //ползунок анимации после попадания на 40-й кадр перескакивает на 20-й

7. Протестируй ролик


  primer_3.2.swf ( 1.18 KB ) Кол-во скачиваний: 47925


Немного теории:

Синтаксис: 

CODE

gotoAndPlay(frameNumber) //это мы попробовали
gotoAndPlay(frameLabel)
gotoAndPlay(scene, frameNumber)
gotoAndPlay(scene, frameLabel)

frameNumber - Задает номер кадра, в который должен перескочить ползунок анимации
frameLabel - Этот аргумент задает метку кадра, в который должен перескочить ползунок анимации
scene - Этот необязательный аргумент задает имя сцены, в которую перейдет воспроизводящая головка. Если этот параметр не задан, то по умолчанию предполагается текущая сцена. 
Чтобы применить функцию gotoAndPlay() к клипу, находящемуся вне текущей временной диаграммы, нужно использовать формат метода клипа myClip.gotoAndPlay().

8. Иногда бывает удобно ссылаться не на номер кадра, а на номер метки. Напротив слоя action выдели 20 кадр и сделай его ключевым (F6). На панели Properties – Свойства в поле Frame Lable – Имя метки впечатай – «metka»

9. Теперь вернись в 40-й кадр и измени скрипт:

CODE

gotoAndPlay(“metka”);

10. Протестируй ролик. Все останется таким же, просто ссылаться по имени кадра удобней, чем по числу.

Метод gotoAndStop()
- отличается от метода gotoAndPlay тем, что переводит ползунок анимации и останавливается.
Синтаксис:

CODE

gotoAndStop(frameNumber)
gotoAndStop(frameLabel)
gotoAndStop(scene, frameNumber)
gotoAndStop(scene, frameLabel)

Пример2: После нажатия на кнопку появляется фото города
Кнопки, при нажатии на которые будет показываться город.


  primer_3.3.swf ( 123.65 KB ) Кол-во скачиваний: 50851


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

2. Измени цвет фона на серый

3. В библиотеку импортируй несколько каринок, изображающих различные города. File – Import – Import ro library; (Файл – Импорт – Импорт в библиотеку). У меня будет 4 картинки – Париж, Санкт-Петербург, Рим, Вена.

4. Перетащи одну из картинок на сцену из библиотеки. При необходимости размер картинки можно изменить, впечатав значение длины и ширины на панели Properties – Свойства.

5. На слое второй кадр сделай ключевым. Удали предыдущее изображение и в середину сцены разместить вторую картинку.

6. Выполняй пункт 5 до тех пор, пока все картинки не будут добавлены на сцену.


7. Создай новый слой. Назови его – «button» (кнопки).

8. Мне понадобиться 4 кнопки. 
• Создаю прямоугольник. 
• Размещаю на нем надпись инструментом Text. Кстати надпись должна быть Static – Статичная. 
• Конвертирую все это в кнопку, выделив и нажав F8. 
• И так проделать со всеми кнопками


9. Каждой кнопке дай своё имя экземпляра – Instance name.


Париж – parizh_btn
Санкт-Петербург – saint_btn
Рим – rim_btn
Вена – vena_btn

10. Создай новый слой. Назови его «action». 
Протестируй мувик. Пока все картинки очень быстро перелистываются друг за другом.

11. В первом кадре слоя «action» напечатай:

CODE

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

Далее нам надо заставить работать кнопки.

CODE

stop(); //позволяет остановить анимацию вначале
parizh_btn.addEventListener(MouseEvent.CLICK, parizhF); /*это мы создаем слушателя для события щелчок. Регистрируем функцию, которую назвать можно, как захочется. Но лучше давать интуитивно понятное название.*/

function parizhF(event:MouseEvent):void { //прописываем функцию
gotoAndStop(1); /*а вот и цель нашего урока. При нажатии на кнопку – Париж, пользователь будет попадать в первый кадр, на котором находится первая картинка – Париж.*/
}

//аналогично для других кнопок.
saint_btn.addEventListener(MouseEvent.CLICK, saintF);
function saintF(event:MouseEvent):void {
gotoAndStop(2);
}

rim_btn.addEventListener(MouseEvent.CLICK, rimF);
function rimF(event:MouseEvent):void {
gotoAndStop(3);
}

vena_btn.addEventListener(MouseEvent.CLICK, venaF);
function venaF(event:MouseEvent):void {
gotoAndStop(4);
}

Вот и все  Ты молодец!!


Домашнее задание:
Попробуй сделать такой мультик  


  dz_3.swf ( 6.37 KB ) Кол-во скачиваний: 51640


И задание повышенной сложности (а может и не очень повышенной) 

  dz_ps.swf ( 76.67 KB ) Кол-во скачиваний: 47092