Тема 7. Знакомство с ActionScript

Вся анимация, о которой мы говорили до этого, работала независимо от зрителя, которые не мог вмешиваться в ход процесса. Говорят, что при этом отсутствует интерактивность — взаимодействие между человеком и программой.

Чтобы человек мог управлять ходом развития событий, нужно научиться принимать информацию от пользователя и изменять состояние объектов на экране. Для этого надо написать программу — набор команд на языке ActionScript.

Язык ActionScript относится к группе скриптовых языков и очень похож на JavaScript. Он использует многие правила грамматики, заимствованные из языка Си. В Приложении можно найти основные сведения, необходимые для понимания приведенных здесь программ.

С помощью языка ActionScript можно

• управлять ходом проигрывания фильма;
• создавать анимацию программным способом, без использования временной шкалы;
• принимать данные от пользователя;
• загружать данные из файлов;
• управлять звуками;
• ... и многое другое.

В версии Adobe Flash 9.0 (CS3) основным языком программирования является ActionScript 3.0, однако он достаточно сложен для изучения на начальном этапе и мы не будем его рассматривать.

Вместе с тем поддерживается и старый «простой» вариант — язык ActionScript 2.0, который и будет использоваться далее в этом учебнике.

Программа на ActionScript называется сценарием. Она состоит из отдельных блоков кода, которые могут связаны с некоторыми элементами фильма:

• ключевыми кадрами, код выполняется каждый раз, когда этот кадр проигрывается;
• кнопками или клипами, код выполняется при возникновении какого-нибудь события (щелчок по кнопке, загрузка клипа, перетаскивание мышью, нажатие клавиши).

Чаще всего используются следующие команды управления:

• stop(); — остановить проигрывание;
• play(); — продолжить проигрывание с текущего места;
• gotoAndStop(...); — перейти на заданный кадр и остановиться, в скобках указывают номер кадра или его метку (имя);
• gotoAndPlay(...); — перейти на заданный кадр и продолжить проигрывание.

С помощью этих команд и кнопок мы построим ролик, показанный ниже.

Кнопки в нижней части поля имеют следующий смысл

	перейти в начальное положение
	начать (продолжить) движение
	остановить движение

Для того, чтобы продолжить проигрывание фильма, мы добавим на сцену кнопку — символ специального типа.

При создании символа можно выбрать тип Button (кнопка). Так называется клип, имеющий 4 кадра:

• Up — обычное состояние кнопки;
• Over — вид кнопки, когда на нее наведен курсор мыши;
• Down — нажатая кнопка;
• Hit — область реагирования.

В каждом из них могут быть любые рисунки. Более того, можно создавать многослойные изображения и добавлять звук для каждого из состояний.

Мы не задали никакого изображения в кадре Hit, это значит, что областью реагирования является вся непрозрачная область последнего кадра Down.

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

На панели Properties можно увидеть свойства этого звука:

Характеристики звука видны в нижней строчке: частота дискретизации 22 кГц, монофонический (левый и правый каналы звучат одинаково), 8-битное кодирование, время звучания 0,1 сек, размер файла 2,7 Кб.

Список Effect (эффект) позволяет выбрать один из стандартных эффектов (затухание, переход с левого канала на правый и т.п.). Значение None означает, что никакой эффект не применяется. Кнопка Edit служит для ручной настройки эффектов.

Параметр Sync для кнопок должен принимать значение Event (событие). Правее Repeat 1 означает повторение 1 раз. Кроме Repeat возможен еще вариант Loop (зацикливание, бесконечное повторение).

Чтобы кнопка «заработала», нужно определить ее реакцию на нажатие. Если выделить кнопку и нажать клавишу F9, на экране появляется панель Actions (действия), где можно написать программный код, связанный с кнопкой. Вот пример такого кода:

on ( release ) {
  play();
}

Слово on начинает обработчик события, release (освобождение) в скобках указывает само событие — отпускание мыши над кнопкой. Далее внутри фигурных скобок записывают команды, которые нужно выполнить: в данном случае — продолжить проигрывание фильма.

Язык ActionScript использует правила записи команд, очень похожие на язык Си. Каждая команда заканчивается точкой с запятой.

Нажав на кнопку (или клавиши Ctrl+T), можно проверить правильность записи кода (соответствие правилам языка ActionScript). Если вы увидели сообщение "The script contains no errors.", ошибок нет. Сообщения об ошибках выводятся в специальном окне Compiler Errors (оно появляется автоматически или может быть вызвано нажатием клавиш Alt+F2).

Кнопка позволяет закрепить активное окно с кодом. Дело в том, что код может быть разбросан по нескольким местам (кадрам, кнопкам, клипам). В активном окне мы видим тот блок, который выделен в левой части панели Actions. Если прикрепить какой-то блок, он будет всегда показываться как вкладка в основном окне:

На рисунке активное окно — это код, связанный с кнопкой Стоп, а код кнопки Стоп был прикреплен и показывается в виде вкладки.

В левой части панели Actions находится справочная информация (Toolbox). Сверху — списки функций и операторов языка (их можно вставлять в код щелчком мыши), ниже — список всех объектов, с которыми связан код ActionScript. Сейчас видно, что какой-то код есть в кадре 15 слоя Судно (Судно: Frame 15) и у кнопки (элементы блока Scene 1). В данный момент мы редактируем код кнопки (Current Selection). Это окно удобно использовать для быстрого перехода от одного блока кода к другому.

С помощью кнопки можно убрать панели Toolbox, оставив только редактор кода.

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

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

Теперь надо сделать, чтобы кнопки на сцене были одинакового размера, и выровнять их. Для этого используется панель Align (выравнивание, клавиши Ctrl+K). Проверьте, чтобы режим To Stage был отключен (он используется для выравнивания относительно всей сцены).

Для кнопок, так же, как и для клипов, можно применять фильтры (панель Filters).

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

Обратите внимание, что на временной шкале в кадре 1 слоя Метки появилась метка start:

В следующем проекте при нажатии кнопки стартует машина:

Обратите внимание, что Кнопка — это символ типа Button, а Машина, так же как и два ее колеса — символы типа Movie Clip (клипы).

Если теперь просмотреть ролик, выяснится, что машина стоит на месте, но ее колеса вращаются. Это происходит потому, что команда stop() остановила только проигрывание главной временной шкалы, а внутренние клипы (колеса) продолжают работать.

Чтобы ответить на вопрос «Как остановить колеса?» нужно разобраться с адресами внутри флэш-ролика. Но прежде всего, дадим имена объектам на сцене, к которым мы будем обращаться: машине и двум колесам внутри нее.

Итак, в этом фильме 4 монтажных стола со своими временными шкалами:

• главный (корневой) монтажный стол, он называется _root;
• монтажный стол клипа Машина;
• два монтажных стола для каждого колеса.

Связи этих монтажных столов показаны на схеме:

Клип car находится внутри главного монтажного стола _root, а клипы wheel1 и wheel2 — внутри клипа car.

Главный монтажный стол _root является «родителем» (parent) для клипа car.

Клип car является «сыном» (child) для _root и родителем для клипов wheel1 и wheel2.

Клипы wheel1 и wheel2 — сыновья для car, у них самих нет потомков.

Каждый объект имеет свой абсолютный адрес, по которому его можно найти из любого места. Например, квартира Васи Пупкина может иметь такой абсолютный адрес:

Россия, Санкт-Петербург, 3-я ул. Строителей, д. 25, кв. 12

Здесь на первом месте стоит страна, затем — город и т.д.

Для объектов Flash-фильма абсолютный адрес начинается с _root, так что абсолютные адреса всех клипов, показанных на схеме, выглядят так:

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

Абсолютные адреса не зависят от того, внутри какого монтажного стола они используются.

Чтобы остановить проигрывание для какого-то монтажного стола, надо перед командой stop() поставить его адрес и точку:

_root.stop();
_root.car.stop();
_root.car.wheel1.stop();
_root.car.wheel2.stop();

Если мы применяем абсолютные адреса, нужно помнить, что они станут неверными, если машина будет находиться уже не на главном монтажном столе, а станет частью другого клипа (Вася Пупкин переехал).

Относительные адреса зависят от того, где находится объект, использующий этот адрес. Вася Пупкин может сказать, что Сеня Васечкин живет через 2 дома от него.

Для обращения к родителю используют слово _parent. Например, чтобы из клипа wheel1 остановить проигрывание для монтажного стола клипа car, надо применить команду

_parent.stop();

Эта команда сработает из из клипа wheel2, поскольку его родителем также является car.

Если два раза использоать _parent, мы обращаемся к «деду». Например, команда

_parent._parent.stop();

останавливает проигрывание на главном монтажном столе из клипа wheel1 или wheel2.

К сыновьям можно обращаться просто по имени. Например, команда

car.stop();

допустима внутри _root. Кроме того, здесь можно было использовать и слово this (текущий монтажный стол):

this.car.stop();

Для остановки wheel1 из _root можно применить одну из команд

car.wheel1.stop();
this.car.wheel1.stop();

Наконец, самый сложный случай. Обратиться к «брату» можно только через родителя. Чтобы остановить второе колесо из wheel1, надо написать

_parent.wheel2.stop();

Получилось, что машина стоит на месте, а звук уже слышен. Чтобы этого не случилось можно начать проигрывать звук со второго кадра.

Теперь звук слышен даже тогда, когда ролик начал проигрываться с начала и машина появилась на стартовой позиции. Чтобы остановить звук, надо вставить в слое Звук последний ключевой кадр и выбрать в параметрах звука Sync=Stop (остановить звук).

Параметр Sync имеет еще и другие возможные значения:

• Event — звук начинается, когда анимация доходит до этого кадра; если звук уже играет, при повторном вхождении в кадр запускается вторая копия и смешивается с «хвостом» первой;
• Start — то же самое, что и Event, но вторая копия не запускается, если одна уже играет;
• Stream — звук «режется» на кусочки и каждый из них «привязывается» к кадру (это бывает необходимо, когда требуется перейти в середину анимации и проигрывать звук с нужного места, а не с начала).

Теперь звук резко обрывается, когда машина уходит из кадра. В жизни такого не бывает — затухание должно быть постепенным. Чтобы добиться этого, нужно вручную настроить громкость каналов. Если щелкнуть по кнопке Edit на панели Properties, мы увидим окно настройки Edit Envelope (изменить огибающую):

Верхняя диаграмма показывает звук в левом канале, нижняя — в правом. Линии с белыми квадратиками регулируют громкость. В самом начале стоит только один квадратик в начале линии, щелчками мыши можно установить еще 7 узловых точек и, перемещая их, изменить громкость (сверху — наибольшая, снизу — наименьшая).

Кнопки и позволяют изменять масштаб временной оси, на которой откладываются номера кадров (если нажата кнопка ) или время в секундах (кнопка ).

Кнопки и служат для проигрывания звука (с учетом примененного эффекта) и его остановки.

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

Здесь ракету можно перетаскивать мышкой и перемещать клавишами-стрелками на клавиатуре. Кнопки со стрелками на поле изменяют масштаб и угол поворота ракеты (попробуйте!).

Если водить мышью над ракетой, она постепенно становится прозрачной. Чтобы опять сделать ее полностью непрозрачной, надо щелкнуть по центральной кнопке с кружком.

В правой части поля выводятся текущие свойства клипа Ракета:

• _x, _y — координаты точки регистрации (отсчитываются от левого верхнего угла экрана);
• _width, _height — ширина и высота клипа в пикселях;
• _xscale, _yscale — масштабы по осям X и Y (равны 100 в исходном состоянии);
• _rotation — угол поворота в градусах вокруг точки регистрации (равен 0 для клипа в библиотеке);
• _alpha — степень непрозрачности (от 0 до 100).

Центральная кнопка с кружком будет восстанавливать полную непрозрачность ракеты, кнопки «влево» и «вправо» вращают ее (изменяют свойство _rotation), а кнопки «вверх» и «вниз» — изменяют размеры (свойства _xscale и _yscale).

В языке ActionScript (так же, как в Си и Java) для операций увеличения или уменьшения значений переменных на некоторую величину часто используется сокращенная запись:

a = a - 5;
b = b + 10;

выполняется точно так же, как

a -= 5;
b += 10;

Клипы (символы типа Movie Clip) могут реагировать на те же события, что и кнопки, с помощью обработчиков on (...). Кроме того, есть еще несколько особых событий, которых у кнопок нет. Наиболее важные из них:

• load — клип полностью загружен;
• enterFrame — произошел переход к следующему кадру клипа;
• mouseDown — нажата кнопка мыши;
• mouseMove — мышь переместилась;
• mouseUp — кнопка мыши отпущена;
• keyDown — нажата клавиша на клавиатуре;
• keyUp — клавиша отпущена.

Для обработки этих событий используются обработчики onClipEvent (...), которые можно добавить на панели Actions, предварительно выделив клип.

При частоте кадров 12, событие enterFrame возникает 12 раз в секунду, даже если клип содержит единственный кадр. Мы используем это событие для того, чтобы постоянно обновлять x-координату ракеты на экране.

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

x.text = rocket._x;

Вы увидели, что x-координата на экране по-прежнему равна нулю, хотя клип находится не на левой границе экрана, и значит его действительная x-координата больше нуля.

Чтобы обнаружить ошибку, мы применим трассировку — вывод (в дополнительное окно) отладочных сообщений, которые позволят понять, что в самом деле происходит внутри программы.

При запуске появится окно Output (включается также через меню Window—Output или клавишей F2), в котором появляются строчки undefined.

Происходит следующее: мы попросили программу сказать, что же такое x в этой точке, и в ответ получили, что x — это непонятно что (undefined, не определено). Значит, текстовое поле x не найдено — неверно задан его адрес. Сообщение появляется 12 раз в секунду, каждый раз, когда происходит событие enterFrame. Заметим, что точно такой же результат даст строчка

trace ( rocket );

Значит, обращение к клипу тоже неверно.

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

В правой части оператора надо обратиться к свойству _x текущего объекта, то есть написать this._x (относительный адрес) или _root.rocket._x (абсолютный адрес). Но можно то же самое написать проще, ведь _x обозначает то же самое, что this._x.

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

Теперь займемся событиями от мыши. Кнопки и клипы могут обрабатывать несколько «мышиных» событий:

• press — над объектом нажата кнопка мыши;
• release — над объектом отпущена кнопка мыши;
• releaseOutside — кнопка мыши отпущена вне объекта;
• rollOver — указатель мыши наведен на объект (без нажатия);
• rollOut — указатель мыши ушел с объекта (без нажатия);
• dragOut — указатель мыши ушел с объекта при нажатой кнопке;
• dragOver — при нажатой кнопке мышь уходит с объекта, а затем наводится на него снова (аналогия — «чистим ботинки»).

Мы сделаем так, чтобы при событии rollOut ракета становилась немного более прозрачной (на 5 процентов). Для этого надо уменьшить значение _alpha. Заметьте, что параметр _alpha по смыслу не должен быть меньше нуля. Будет неплохо, если вы сможете обеспечить это условие, добавив в обработчик условный оператор if.

Перетаскивание мышкой тоже делается очень просто: при нажатии кнопки на объекте (событие press) надо «захватить» объект и начать перетаскивание:

startDrag ( this );

В скобках указывается адрес объекта (this означает «текущий объект», то есть клип).

При отпускании кнопки (событие release) надо закончить перетаскивание:

stopDrag();

В скобках после слова on можно перечислять через запятую несколько событий, на которые надо реагировать одинаково. Для этого часто удобно использовать средство Script Assist (помощник скриптов).

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

Клип, как уже говорилось, также может реагировать на события mouseDown, mouseUp и mouseMove. Важно, что эти обработчики вызываются не только тогда, когда мышь над клипом, а при любом изменении состояния мыши. При этом координаты курсора хранятся в свойствах _xmouse и _ymouse главного монтажного стола _root.

Например, мы сделаем, чтобы ракета вращалась против часовой стрелке, если мышь двигается в левой половине поля, и по часовой стрелке, если в правой. Для этого надо написать обработчик события mouseMove, в котором менять свойство _rotation клипа Ракета. Чтобы определить направление вращения, будем сравнивать x-координату клипа с половиной ширины окна, то есть с _root._width/2.

При просмотре обнаруживается неточность: во время перетаскивания ракета продолжает вращаться, ведь событие mouseMove происходит и вызывается обработчик. Чтобы прекратить вращение во время перетаскивания, надо где-то запоминать, что мы тащим ракету. Легче всего сделать это при помощи специальной логической переменной dragging, которая может принимать значения true («да», истина) и false («нет», ложь). В начале перетаскивания мы запишем в эту переменную true, а когда перетаскивание закончено, запишем в нее false.

Теперь можно использовать значение этой переменной в обработчике mouseMove — вращать ракету только тогда, когда dragging=false.

Восклицательный знак означает операцию НЕ, так что условный оператор if(!dragging) имеет смысл «если не тащим ракету». Только при этом условии изменяется свойство _rotation.

Как мы видели, кнопки и клипы могут обрабатывать события мыши с помощью обработчиков on (...). Однако код кнопки не может содержать обработчиков onClipEvent (...), которые предназначены только для клипов. Это означает, что у кнопок нет методов play() и stop().

Когда мы используем команду stop(); или this.stop(); в обработчике события кнопки, мы останавливаем проигрывание на ее монтажном столе (в данном случае — на _root).

Если же эта команда используется внутри обработчика клипа, она останавливает проигрывание этого клипа (внутреннюю анимацию).

Если команда

_rotation += 45;

стоит в обработчике кнопки, на 45 градусов повернется ее монтажный стол, то есть _root. Та же самая команда в обработчике клипа повернет на 45 градусов этот клип.

А если нужно повернуть кнопку? Это тоже можно сделать, но иначе, используя ее относительный или абсолютный адрес. На панели Properties введем имя кнопки. Пусть, например, кнопка с именем btn находится на главном монтажном столе _root. Тогда ее адрес может быть записан как _root.btn или (при обращении с _root) просто btn. Повернуть кнопку в ее же обработчике можно с помощью команды

btn._rotation += 45;

или (из любого места программы!)

_root.btn._rotation += 45;

Проще всего «ловить» нажатие клавиш с помощью события keyPress. В заголовке обработчика после слова keypress в кавычках ставится нужный символ, например:

on (keyPress "A") { ... }

Для специальных клавиш указывают название в угловых скобках, например, "<Left>" (влево), "<Right>" (вправо), "<Up>" (вверх), "<Down>" (вниз).

К сожалению, в одном обработчике можно задать только реакцию на одну клавишу. Несколько большую свободу дает использование событий клипа keyDown и keyUp, но их обсуждение мы отложим до следующих уроков.

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

Для перехода к основной сцене нужно щелкнуть мышкой в углублении скульптуры справа от слова пароль и ввести пароль «123».

Теперь мы смотрим на побережье Ладожского озера через иллюминатор. Кнопки позволяют перемещать фотографию на большие расстояния (50 пикселей по оси X и 20 пикселей по оси Y), а клавиши стрелки обеспечивают точную настройку (перемещение с шагом 5 пикселей). Здесь работает также и колесико мыши, с помощью которого можно смещать панораму влево и вправо.

Несложно сообразить, что часть большого рисунка, которая не попадает в область видимости, закрыта с помощью слоя-маски.

Изображение имеет размер 2000 на 400 пикселей, а сцена — 550 на 400 пикселей. Таким образом, центр рисунка совпадает с центром окна. Таким образом, мы нарисовали кольцо диаметром 300 пикселей, внутренний диаметр составляет 80% от внешнего, то есть 240 пикселей. Следующий этап — создание маски, через которую видна панорама. Вспомните, что мы уже применяли слои-маски для создания сложных переходов между слайдами в теме 5. Теперь напишем код, с помощью которого будем смещать видимую часть рисунка. Фактически для этого нужно только изменять координаты _x и _y клипа panoram. Добавим код к кнопкам, которые будут выполнять большие перемещения видимой области. Теперь добавим обработчики клавиш-стрелок, которые будут смещать рисунок на 5 пикселей (точная настройка). Эти обработчики можно присоединить к любой кнопке, поскольку все они получают событие keyPress. Обратите внимание, что при постоянном нажатии на клавиши рисунок непрерывно прокручивается.

Остался еще один недостаток — программа позволяет перемещать рисунок больше, чем нужно, открывая фон за рисунком. Чтобы исправить положение, мы напишем функцию check, которая будет проверять допустимость координат _x и _y и возвращать рисунок в разрешенное состояние. Эту функцию можно связать с первым кадром слоя Кнопки.

Вспомним, что размер рисунка — 2000 на 400 пикселей, размер сцены — 550 на 400 пикселей, а диаметр круга-маски — 240 пикселей. Несложные расчеты показывают, что x-координата левого верхнего угла рисунка должна находиться в интервале от -1605 до 155, а его y-координата — в интервале от -80 до 80.

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

ear = new Object();

в памяти строится новый объект с именем ear. Что это за объект — пока неясно, мы не определили ни его свойства, ни методы.

Далее определяется метод onMouseWheel (mouse — мышь, wheel — колесо). Это значит, что объект может реагировать на событие mouseWheel (прокрутка колеса мыши), если об этом ему кто-нибудь сообщит. Обработчик события — это функция, принимающая один параметр — число шагов прокрутки. Как и насколько переместить панораму — определяем мы в теле функции (можно было, например, сделать вертикальную прокрутку). После изменения координат идет проверка с помощью функции check.

Самая важная строчка:

Mouse.addListener ( ear );

Здесь сказано, что объект ear становится «слушателем» (listener) глобального объекта Mouse (мышь), то есть, будет получать информацию о всех событиях, происходящих с мышью. В частности, при прокрутке колесика происходит событие mouseWheel и будет вызвана написанная нами функция.

В результате появился пустой кадр 1, в котором мы сделаем ввод пароля.

Стиль текста Password говорит о том, что вместо вводимых символов на экране видны только звездочки, чтобы посторонние не смогли увидеть верный пароль.

Теперь мы сделаем, чтобы при вводе пароля «123» ролик переходил на следующий слайд с просмотром панорамы.

В первой строчке мы остановили проигрывание, чтобы не было автоматического перехода на второй кадр. Дальше идет новый прием — текстовому полю pass назначается обработчик события changed — оно возникает каждый раз, когда текст в поле изменяется. При этом будет вызываться написанная нами функция-обработчик.

В условном операторе содержимое текстового поля, которое имеет адрес pass.text, сравнивается с правильным паролем «123». Если получено совпадение, происходит переход к следующему кадру по команде nextFrame.