[ предыдущая страница ] [ следующая страница ] [ содержание ]

5. Язык сценариев ActionScript (AS)

5.1. Сценарии кадра и флэш-символа

Средств программы Flash, рассмотренных в предыдущих главах этой книги, уже вполне достаточно для создания простых роликов, содержащих только линейную анимацию. Но для того чтобы создавать интерактивные ролики и гибко управлять анимацией, необходимо освоить простой и понятный язык, на котором можно создавать сценарии внутри ролика Flash. Этот язык носит название ActionScript (AS). Он специально разработан с таким расчетом, чтобы быть понятным даже человеку, весьма далекому от программирования.

Правда, в предыдущих версиях этого языка в жертву такой "интуитивной понятности" принесена функциональность, и старые сценарии AS лишены гибкости. Кроме того, в языке отсутствовали многие важные операторы. К счастью, при выпуске пятой версии программы Flash разработчики в корне переработали язык AS, и теперь интуитивная понятность в нем нормально совмещается с функциональностью. Кроме того, конструкции языка стали больше похожи на конструкции Java, JavaScript, С и других языков программирования, так что те, у кого уже есть некоторый опыт в этой области, особенно легко осваивают AS.

Программа Flash предлагает два режима написания сценариев. В профессиональном режиме (Expert Mode) сценарий можно писать так, как в обычном текстовом редакторе; В обычном режиме (Normal Mode) все операторы выбираются из списка. Чуть ниже мы рассмотрим, как это делается.

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

Рассмотрим два простейших примера. В первом из них мы используем сценарий в кадре, а во втором - в кнопке.

5.1.1. Сценарий кадра

Предположим, мы хотим, чтобы заголовок веб-странички не появлялся сразу, а проявлялся постепенно, и решили использовать для этого ролик Flash. Естественно, при этом нужно сделать так, чтобы ролик не "зацикливался", а останавливался после однократного воспроизведения. Сначала создадим саму анимацию. Предположим, что у веб-странички белый фон. Открыв новый ролик, не будем пока что в нем менять установки по умолчанию (в которых тоже определен белый фон). Создадим текстовое поле и напишем в нем нужный заголовок. Выделим его и выберем нужные параметры шрифта. Теперь нажмем клавиши CTRL+M и подгоним размер рабочей области под нашу надпись. Например, для условной надписи "HEADER" полужирным шрифтом с размером 64 пункта вполне подходит размер рабочей области 350x100 точек.

Отцентрируем наше текстовое поле с помощью панели Align (Выравнивание). Выделим его и, нажав клавишу F8, преобразуем в мувик. Отметим на шкале времени позицию 36 и нажмем клавишу F6, чтобы вставить ключевой кадр.

Вернемся в первый кадр и, выделив наш мувик, выберем на панели Effect (Эффект) пункт Alpha (Альфа-канал) и установим значение 0. Теперь в первом кадре наша надпись не видна. Ее можно также, например, уменьшить и сдвинуть за пределы рабочей области, чтобы буквы не только "проявлялись", но еще и вырастали и "выезжали" из-за пределов экрана.

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

Для этого надо в последний кадр вставить сценарий, состоящий из одной-единственной команды остановки воспроизведения. Сценарии можно вставлять только в ключевые кадры. Выделите последний кадр на шкале времени (он как раз является ключевым), щелкните на нем правой кнопкой мыши и выберите из контекстного меню пункт Actions (Действия). Можно, вместо этого, выделив кадр, нажать кнопку Show Actions (Показать действия), расположенную в правой нижней части окна разработки ролика, или же просто дважды щелкнуть на кадре на шкале времени.

Откроется диалоговое окно Frame Actions (Действия кадра) (рис. 5.1). В его левой части расположен список возможных операторов, функций, свойств, объектов, а в правой части отводится место для написания собственно кода сценария. Окно Frame Actions (Действия кадра) по умолчанию открывается в "обычном" режиме, в котором код сценария недоступен для прямого текстового редактирования.


Рис. 5.1. Окно для ввода сценария ActionScript

Откройте папку Actions (Действия) в левой части окна, найдите в ней оператор stop и дважды щелкните на нем. В правой части окна появится код:

stop ();

Сценарий создан. Закройте окно Frame Actions (Действия кадра). Отдельно сохранять текст сценария не требуется, он сохраняется в файле ролика так же, как любой другой элемент. Нажмите клавиши CTRL+ENTER, чтобы просмотреть ролик. Вы увидите, что теперь ролик останавливается на последнем кадре, что и требовалось.

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

5.1.2. Сценарий флэш-символа

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

В качестве анимации используем что-нибудь простое, например, вращающуюся линию. Откроем новый ролик, нарисуем вертикальную линию, преобразуем ее в мувик, отметим на шкале времени позицию 48, создадим в ней ключевой кадр. Вернемся в первый кадр и создадим анимацию движения. На панели Frame (Кадр) выберем из раскрывающегося списка Rotate (Вращение) пункт CW (По часовой стрелке) и в соседнем поле установим значение 1 (один оборот). Все эти действия уже знакомы нам из главы 3. Получится вращающаяся линия.

Кстати, здесь нелишне обратить внимание на следующее. Чтобы наша линия не приостанавливалась каждый раз на стыке 48 и 1 кадров, в которых находится одинаковые изображения (об этом мы уже говорили в главе 3), нужно вставить в этот кадр сценарий, состоящий из одной команды перехода на первый кадр. Когда в кадре имеется сценарий, программа сначала исполняет сценарий, а потом уже прорисовывает кадр. Таким образом, если в сценарий 48 кадра поставить команду перехода в 1 кадр, то 48 кадр вообще не прорисовывается.

Дважды щелкнем на шкале времени в 48 кадре, чтобы открыть окно Frame Actions (Действия кадра). В левой части окна откроем папку Actions (Действия) и найдем в ней оператор goto. Дважды щелкнем на нем, В правой части окна появится следующий код.

gotoAndPlay (1);

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

Теперь приступим к главной части этого примера - созданию кнопок для остановки и продолжения воспроизведения. Вначале создадим новый слой и назовем его Buttons. В его первом кадре нарисуем в нижней части рабочей области квадрат и направленный вправо треугольник (традиционные символы функций остановки и запуска воспроизведения). Для рисования треугольника удобно воспользоваться инструментом Перо.

Преобразуем квадрат и треугольник в кнопки, назвав первую Stop, а вторую - Play. Убедитесь, что в слое Buttons, как и в первом слое, 48 кадров. Если почему-либо там только один кадр, добавьте обычный кадр в позицию 48 слоя Buttons с помощью клавиши F5.

Выделите кнопку с изображением квадрата, щелкните на ней правой кнопкой мыши и из контекстного меню выберите пункт Actions (Действия). Откроется окно Object Actions (Действия объекта), по виду точно такое же, как уже знакомое нам окно Frame Actions (Действия кадра). Откройте в левой части этого окна папку Actions (Действия) и найдите там оператор stop (поскольку эта кнопка должна останавливать ролик). Дважды щелкните на нем. В правой части окна появится следующий код:

on (release) {
   stop ();
}

Как видите, оператор остановки ролика stop заключен здесь в блок, ограниченный фигурными скобками. Оператор on определяет, в ответ на какое событие совершаются указанные действия. Все сценарии, расположенные не в кадрах, а в объектах (например, кнопках), должны указывать, в ответ на какие события совершаются действия. Оператор

on (release)

означает, что указанные действия совершаются при щелчке на объекте, а точнее - при отпускании нажатой над объектом кнопки мыши (именно так традиционно срабатывают различные системные кнопки в программах, графических оболочках и пр.). Таким образом, приведенный выше сценарий остановит ролик, если пользователь щелкнет на квадратной кнопке. Таким же образом откройте окно Object Actions (Действия объекта) для треугольной кнопки. Она должна запускать воспроизведение. Откройте в левой части окна папку Actions (Действия) и найдите оператор play, который запускает воспроизведение. Дважды щелкните на нем. В правой части окна появится следующий код.

on (release) {
   play ();
}

Этот сценарий запустит воспроизведение в ответ на щелчок пользователя на треугольной кнопке. Закройте окно Object Actions (Действия объекта). Просмотрите ролик. Должно получиться что-то, похожее на рис. 5.2. Линия должна вращаться. При нажатии на квадрат в нижней части окна вращение остановится, а при нажатии на треугольную кнопку движение возобновится.


Рис. 52. Кадр тестового ролика

Разумеется, этот пример демонстрирует только сам принцип, а графику можно улучшать бесконечно: вместо вращающейся линии создать какой-нибудь интересный ролик, а кнопки воспроизведения и остановки тоже как-нибудь разукрасить, сделать объемными и т. п. Кстати, если дать команду Window Common Libraries Buttons (Окно Общие библиотеки Кнопки), откроется окно библиотеки, в которой имеются неплохие образцы подобных кнопок.

5.1.3. Создание сценариев

Теперь, рассмотрев эти примеры, давайте разберемся, как чисто технически выполняется процесс ввода кода сценария AS в окнах Frame Actions (Действия кадра) и Object Actions (Действия объекта).

Обычный режим

Итак, новое окно Frame Actions (Действия кадра) или Object Actions (Действия объекта) по умолчанию открывается в "обычном" режиме. Чтобы ввести какой-либо оператор в этом режиме, следует отыскать его в списке операторов в левой части окна и дважды щелкнуть на нем. При этом соответствующий код автоматически появляется в правой части окна.

Если оператор требует ввода каких-либо операндов (параметров), то в нижней части окна появляются раскрывающиеся списки и поля ввода. Например, если выбрать оператор getURL, загружающий документ, расположенный по указанному сетевому адресу, в нижней части окна появляется поле для ввода этого адреса, а также два раскрывающихся списка для указания необязательных параметров. Все изменения производятся именно в нижней части окна. При этом одновременно изменяется и код, за чем можно тут же наблюдать. Например, если выбрать этот оператор и ввести в поле ввода адреса строку http://www.au.ru, то код сразу же примет следующий вид.

getURL ("http://www.au.ru");

Если в раскрывающихся списках Window (Окно) и Variables (Переменные) выбрать соответственно пункты _blank и Send using GET (Посылать с помощью GET), код сразу же приобретет такой вид.

getURL ("http://www.au.ru","_blank","GET");

В следующем разделе мы подробно расскажем о значении этих выражений. Если введенный оператор требует указать обязательный параметр, который по умолчанию не имеет какого-либо значения, его место в строке кода подсвечивается красным цветом и туда помещается надпись <not set yet> (<еще не задан>).

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

Профессиональный режим

А сейчас рассмотрим другой способ ввода текста сценариев. Нажав в окне Frame Actions (Действии кадра) или Object Actions (Действия объекта) сочетание клавиш CTRL+E, можно перейти в так называемый профессиональный режим. В этом режиме текст вводится, как в любом текстовом редакторе. В отличие от "обычного" режима в этом случае отсутствует защита от синтаксических ошибок. Однако, нажав клавиши CTRL+T, можно заставить программу проверить синтаксис сценария. При этом выдается сообщение о наличии или отсутствии ошибок, а при их наличии в специальное окно Output (Вывод) выдается подробная информация о том, где найдена ошибка (номер сцены, слоя, кадра и строки - практический интерес представляет только номер строки), описание ошибки и сама ошибочная строка.

Эти же сообщения об ошибках выполнения сценариев выводятся в окно Output (Вывод) и в том случае, если просмотр ролика был запущен без предварительной проверки синтаксиса. В этом случае номер сцены, слоя и кадра, в котором был ошибочный сценарий, также очень важны.

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

Чтобы вернуться из профессионального режима ввода текста в обычный, нажмите клавиши CTRL+N. Предварительно убедитесь, что фокус ввода находится в окне Frame Actions (Действия кадра) или Object Actions (Действия объекта), иначе это сочетание клавиш просто откроет новый ролик. Если сценарий содержит синтаксические ошибки, программа не позволит вернуться в обычный режим, пока они не исправлены.

Дополнительные возможности

Кстати, текст сценария можно сохранить как отдельный файл, нажав в окне ввода сценария клавиши CTRL+O. Файл с текстом сценария по умолчанию получает расширение .AS, однако это обычный текстовый файл. Можно, наоборот, импортировать текст в окно ввода сценария, нажав клавиши CTRL+I. При работе в обычном режиме импортируемый файл не должен содержать синтаксических ошибок, иначе программа не сможет его загрузить.

В обоих режимах для ввода операторов можно пользоваться сокращенными клавиатурными комбинациями. Все они заключаются в последовательном нажатии трех клавиш. Первая из этих клавиш - всегда ESC, а остальные две алфавитные. Например, нажав последовательно клавиши ESC, S, Т, можно увидеть, что в области кода появился оператор stop, а если, например, нажать клавиши ESC, P, L - появится оператор play. Если запомнить комбинации ввода операторов, процесс ввода кода сценария можно существенно ускорить.

[ предыдущая страница ] [ следующая страница ] [ содержание ]
Hosted by uCoz