АРХИВ СТАТЕЙ ЖУРНАЛА «МОЙ КОМПЬЮТЕР» ЗА 2002 ГОД

Говорим на Flash Action Script

• Все журналы \ Номер 45/216 `2002 от 11.11.2002 \ Говорим на Flash Action Script

Кирилл КОВАЛЕНКО, Андрей КОВАЛЕНКО uant@ukr.net

Хотите сделать ваш сайт интересным и запоминающимся? Хотите попробовать свои силы в программировании web-игр, привлекательных анимационных интерфейсов и «легких» (в смысле объема) интерактивных интернет-приложений? Хотите приобщиться к веселому, креативному и быстро растущему цеху аниматоров, среди которых и «папа» ставшей уже легендарной Масяни Олег Куваев?

Тогда изучайте Macromedia Flash Action Script!

Все, хватит рекламы, давайте перейдем к делу :-).

В статье будет рассмотрен процесс построения во Flash 5 интерактивного ролика («мувика»), представляющего собой игру двух игроков. Предполагается, что читатель «шапочно» знаком с Macromedia Flash 5, умеет создавать в этом пакете простейшие графические фигуры (круг, эллипс, прямоугольник, надпись и т.д.), обращаться с меню и окнами, панелями инструментов и так далее. Полезным будет опыт создания простенькой анимации. Если вы этого всего еще не умеете — ничего страшного, в интернете полно сайтов и материалов, посвященных Flash. В конце статьи будут приведены ссылки.

В ролике, который мы предлагаем вашему вниманию, практически вся анимация будет реализована с помощью Action Script. Начиная с версии 4, во Flash включен достаточно мощный язык сценариев (скриптов), по синтаксису напоминающий C. Если вы знакомы с этим замечательным языком — это здорово поможет вам в освоении Flash Action Script.

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

Что нужно для того, чтобы написать эту игру? Macromedia Flash 5, компьютер (желательно помощнее: векторная графика и анимация — ресурсоемкая работа) и, конечно, терпение.

Мы не будем подробно описывать создание рисунков (символов), а постараемся больше внимания уделить Action Script’ам (языку сценариев).

Итак, Flash 5 загрузилась на вашем компьютере. Создаем новый проект (File > New), сохраняем его с каким-нибудь именем (например, «StarWars») и настраиваем параметры ролика (Modify > Movie). Здесь надо только изменить количество кадров в секунду — сделаем его равным 60. Затем настраиваем параметры публикации (File > Publish Settings) — убираем галочку с HTML и ставим галочку на Windows Projector. Это значит, что наша программа будет публиковаться (отображаться) не в HTML, а в виде исполняемого exe-файла. Это сделано для временного удобства — разумеется, истинная красота и мощь Flash (ну вот, обещал ведь без рекламы :-)) проявляется именно в возможности встраивания роликов в web-странички. В конце статьи мы расскажем, как это сделать.

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

Создаем новый символ (Insert > New Symbol), называем его plate («тарелка»), кликаем OK и рисуем тарелку (летающую, с зелеными кровожадными человечками :-)). Тарелка (как и все остальные символы) должна находиться приблизительно по центру окна (центр символа совпадает с крестиком). Особо не утруждайтесь, простой овал подойдет для начала, а наводить красоту можно и после написания самой программы. Чтобы увидеть все символы, находящиеся в ролике, откройте библиотеку символов (Window > Library).

Таким же образом создаем пушку (вытянутый по горизонтали прямоугольник), называем ее cannon. Дуло для пушки (назовите символ cannon_barrel) и для тарелки (plate_barrel) изобразите в виде вертикальных прямоугольников. Не забывайте: для каждого из этих игровых объектов мы создаем новый символ (Insert > New Symbol). Затем создайте снаряды, которыми будет стрелять тарелка и пушка (это тоже отдельные символы), и назовите их соответственно plate_shell и cannon_shell. Нарисуйте их в виде маленьких прямоугольников или кругов. Для начала этого хватит (Рис. 1).

После этого в основном ролике создайте 7 слоев — по одному для каждого символа и один для сценариев (Insert > Layer) — и переместите по одному символу в каждый слой (простым перетаскиванием символов из окна библиотеки), оставив верхний слой пустым. Сделайте так, чтобы слои с тарелкой и пушкой находились выше слоев со стволами, а те, в свою очередь, поверх снарядов (простым перетаскиванием в окне со слоями). Это нужно для того, чтобы дуло орудия было скрыто корпусом машины, а не наоборот (Рис. 2).

Символы, находящиеся в основном ролике, называются экземплярами (instance). В одном ролике может быть несколько экземпляров одного и того же символа. Этим экземплярам нужно дать имена (поле Name на закладке Instance на вспомогательной панели; по умолчанию эта закладка находится слева на нижней панели). Для удобства имена экземплярам дайте те же, что и самим символам (Рис. 3).

Теперь перейдем собственно к Action Script’ам. Они бывают двух типов —сценарии символа и сценарии кадра. Сценарии символа ориентированы на внешние команды, поступающие от пользователя (нажатие клавиши, перемещение мышки и т.д.), сценарии кадра могут исполняться и сами по себе. В нашей программе будут использоваться и те, и другие. Сама программа будет построена с помощью трехкадрового цикла — одного из самых распространенных приемов написания сценариев во Flash. В первом кадре устанавливаются начальные значения переменных, второй кадр — тело цикла, основная часть ролика. В третьем кадре происходит переход на второй кадр с помощью функции gotoAndPlay() или gotoAndStop().

Итак, начнем. В каждом слое должно быть по три кадра, причем только первый из них —ключевой (keyframe), остальные два обычные. Чтобы создать новый ключевой кадр (или превратить простой кадр в ключевой), надо щелкнуть на нем правой кнопкой и из выпадающего меню выбрать команду Insert Keyframe. Однако в слое со сценариями все три кадра должны быть ключевыми, так как писать сценарии можно только в ключевых кадрах. Кстати, чтобы не путаться, слоям тоже можно дать имена, соответствующие содержащимся в них экземплярам символа (слою со сценариями можно дать имя action). Для начала напишем сценарий, благодаря которому вся наша техника будет устанавливаться в начальное положение — например, по центру экрана (тарелка — вверху, пушка — внизу). Открываем окно сценариев (Window > Actions) и щелкаем на первом кадре. Обратите внимание — сверху появившегося окна написано Frame Actions, то есть сейчас мы пишем сценарий кадра. Для удобства перейдите в режим эксперта (Expert Mode), нажав Ctrl+E или с помощью стрелки в верхнем правом углу (Рис. 4).

Итак, пишем:

Затем щелкаем на третьем кадре и в сценарии третьего кадра пишем:

Давайте разберемся. _x — это свойство экземпляра, указывающее на горизонтальную координату экземпляра символа. По умолчанию ширина ролика равна 550, и поэтому все экземпляры (кроме снарядов) будут находиться как раз посередине. Нам пока не надо, чтобы снаряды были видны. При выполнении функции gotoAndPlay(2) происходит переход на второй кадр без остановки (то есть воспроизведение продолжается). Теперь сохраняем, нажимаем F12 (клавиша публикации), наслаждаемся, закрываем окно и думаем дальше. Придется подобрать вертикальные координаты экземпляров. Можно, конечно, сразу при расстановке экземпляров расставить их вручную, но это не наш метод! Итак, записываем y-координаты:

У вас они могут немного отличаться (в зависимости от размеров символов). Только оставьте вверху и внизу немного места, оно понадобится нам в дальнейшем (там мы будем отображать военные успехи наших механических бойцов). А как, собственно говоря, будет происходить движение? А очень просто! Мы будем всего лишь менять x-координату (а для снарядов еще и y-координату) экземпляров во втором кадре. Но перед этим надо написать сценарий на событие нажатия клавиш и . Это мы будем делать уже в сценарии символа. Итак, нажмем на экземпляр тарелки, а потом снова на окно Action. Обратите внимание, теперь в заголовке окна должно быть написано Object Action, то есть мы пишем сценарий символа. Перейдите в режим эксперта (Ctrl+E или с помощью стрелки в верхнем правом углу окна) и напишите следующий код:

onClipEvent — ключевое слово, означающее событие. isDown — это метод встроенного объекта key, который возвращает значение true (истина), если нажата указанная клавиша. Теперь при нажатии любой клавиши будет выполняться код, написанный во внешних скобках, в котором проверяется, нажата ли клавиша или , а переменной plate_flag присваивается соответствующее значение. Обратите внимание, что переменная plate_flag нигде до этого не определялась. Это одно из отличий Flash Action Script от языка C. Еще один важный момент: если вы объявляете некую переменную (свойство) в сценарии объекта (Object Action), то при обращении к этому свойству из сценария кадра (Frame Action) необходимо перед именем переменной (перед свойством) указать имя объекта с точкой. В нашем случае, объявив свойство plate_flag в сценарии объекта plate, мы будем обращаться к нему из сценария кадра вот так: plate.plate_flag (по аналогии со структурами в C).

Почти такой же код будет и для экземпляра пушки:

Для пушки клавиша A будет означать движение влево, а клавиша D — вправо. Так что при переходе на нашу гениальную игру с Counter-Strike долго переучиваться не придется :-).

Теперь во втором кадре перейдем к сценарию кадра. Напишем следующий текст:

Этот код проверяет переменную plate_flag и в зависимости от ее значения передвигает тарелку на 3 пикселя влево или вправо.

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

Опять смотрим. Все хорошо, вот только тарелка с пушкой плавно уплывают куда-то вбок и исчезают из поля нашего тактического зрения. Надо, чтобы они появлялись с другой стороны. Сказано — сделано. Пишем следующий код (в сценарии второго кадра):

То есть если тарелка «почти зашла» за левый край, то она появляется на правом крае, и наоборот. То же самое происходит и с пушкой. Кстати, советую код для тарелки и для пушки отделять комментарием (любая строка после //, как в C++). И вообще, пишите больше комментариев, потом это поможет не запутаться.

Теперь разберемся с орудийными стволами нашей техники. Пусть для тарелки клавишами поворота ствола орудия будут и , а для пушки —W и S.

Итак, код для экземпляра ствола тарелки:

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

Почти такой же код будет и для дула пушки:

В сценарии второго кадра напишем следующий код:

Теперь угол поворота снарядов будет равен углу поворота стволов.

(Продолжение следует)

Идёт загрузка...

Данную страницу никто не комментировал. Вы можете стать первым.

Ваше имя:
Ваша почта:
Комментарий:
Введите символы или вычислите пример: * Обновить