Можно создавать игру на коммерческом движке. Это дорого — нужно лицензировать чужой "инджайн" (engine). Можно написать свой движок. Это сложно. Нужно нанимать программиста, платить ему зарплату — тогда движок будет хороший. Можно попросить соседа Петю, который на коленке за бутылку пива напишет вам плохой движок. Можно создавать игру на бесплатном движке типа Genesis3D. Это — дешево, сердито, но долго, и игру в итоге придется распространять бесплатно.

    В первый раз, прочитав статью про Genesis3D в "Игромании", я сел за компьютер и решил создать игру "Институт МЭСИ". Я построил первый этаж своего института, и в нем уже можно было ходить. Но... на большее меня не хватило. Так что бесплатные движки — путь для педантов. Сколько времени уходит только на построение уровня, не говоря уже про все остальное... Я так и не закончил работу. Бросил, создав пару кабинетов.
    В этой и последующих статьях мы рассмотрим технологию, с которой просто и приятно работать. Главное — результат получается очень быстро. Полчаса — и вот перед вами уже почти готовая игра. Я говорю о технологии Flash. Flash — это дешево, сердито и быстро. Flash — это практично.

   

Во тьме веков
   Первоначально технология Flash была разработана исключительно для Интернета. Созданные в ней части html-страниц (или даже целые страницы) поражают своими спецэффектами, но в то же время могут занимать всего 5 кб. Но позже начали появляться игры на Flash. Большинство из них не уступают по качеству играм, созданным при помощи специализированных движков. Quake на Flash-e сделать не получится (хотя шутер типа Doom — реально), зато игрушки наподобие "Диггера", "Пакмена", "Арканоида" — запросто. И благодаря простоте редактора Macromedia Flash на создание может уйти всего пара часов.    В Сети можно найти довольно много хорошо написанных мануалов по MF на английском языке и ни одного на русском. В нескольких статьях мы научим вас работе c пакетом Macromedia Flash. Вы сможете создать простейшую 2D-игру, написать интерактивный мультфильм или просто украсить свой сайт. Все наше творчество будет происходить в последней версии редактора Macromedia Flash MX. Триал-версию, работающую 30 дней, можно взять с нашего компакта или, если вы по каким-то причинам до сих пор покупаете "Манию" без CD, скачать с сайта www.macromedia.com. Пятьдесят мегабайт download — и она ваша.

   

Теоретическая база
   Изучим основы программирования во Flash. Первое, чему нам следует научиться — это рисование. Оно имеет ряд особенностей. В редакторе любое компьютерное изображение может быть представлено в двух видах: в векторном и растровом.
   Векторная графика
   Картинка состоит из отдельных линий-векторов, которые образуют рисунок. В файле хранится информация не о каждой точке, а об элементах, из которых состоит изображение.
   Плюсы: Изображения обычно занимают достаточно мало места и более легки в редактировании. Картинка может менять свои размеры, не теряя при этом четкости и общего расположения элементов.
   Минусы: Изображения достаточно "простые". Заметна их, как бы сказать, "нарисованность".
   Растровая графика
   Изображение в растровой графике состоит из отдельных точек различных цветов.
   Плюсы: Изображение фотографического качества.
   Минусы: Большой размер файлов и трудоемкость редактирования, плохая масштабируемость. При уменьшении — исчезают мелкие детали, при увеличении изображение может превратиться всего лишь в кучу разноцветных квадратов.
   В Macromedia Flash работа в основном происходит с векторными изображениями.

  

 Первые шаги
   В первый раз загрузив редактор, вы ужаснетесь — так много там всяких менюшек, кнопочек, непонятных символов. Но все станет просто, как только мы разберемся, что за что отвечает. Из чего же состоит Flash-редактор?
   Меню
   Здесь мы только вкратце разберем самые важные команды. Остальные — будем разбирать по мере необходимости (в следующих материалах).
   Меню File:
   Import — добавление в проект готовых графических и звуковых объектов.
   Publish Settings — опция позволяет настроить все необходимые параметры для сохранения проекта в готовом для публикации виде.
   Меню Edit:
   Edit Symbols — редактирование символов.
   Cимволом во Flash называется любой самостоятельный графический объект, преобразованный в символ. Символ может быть неподвижной картинкой, кнопкой или клипом.
   Меню Insert:
   Convert to Symbol — преобразовать выделенный объект в символ.
   New Symbol — создать новый символ.
   Layer — добавляет новый, пустой слой.
   Motion Guide — добавляет слой, который предназначен для задания произвольной траектории движения объекта.
   Frame (кадр) — создать новый, пустой кадр.
   Remove Frame — удалить кадр.
   Keyframe — создает новый ключевой кадр с тем же содержимым, что и предыдущий ключевой кадр в этом слое. Ключевой кадр — кадр, в котором задаются параметры изменения анимации.
   Blank Keyframe — создает пустой ключевой кадр.
   Clear Keyframe — превращает выделенный Keyframe в обычный.
   Create Motion Tween — задает режим передвижения объекта от предыдущего Keyframe до последующего.
   Scene — вставить новую сцену в фильм.
   Remove Scene — удалить сцену.
   Меню Modify:
   Instance — запускает окно Instance Properties для задания свойств выделенному объекту.
   Frame — свойства кадра.
   Layer — свойства рабочего слоя.
   Movie — параметры фильма (размер, кадры).
   Smooth — сгладить.
   Straighten — выпрямить.
   Optimize — оптимизировать изображение.
   Trace Bitmap — трассировка растровой графики. Перевод обычной графики в векторную.
   Transform — трансформация объектов (повороты, изменение размеров).
   Arrange — позволяет изменять уровень "наложенности" объектов.
   Frames — синхронизация кадров, или их реверс.
   Group — группировка различных объектов в одну фигуру.
   Ungroup — разгруппировка.
   Break Apart — разбивает изображение на отдельные символы.
   Меню Window:
   Library — хранилище объектов текущего проекта.
   Common Libraries — стандартная библиотека. Содержит набор объектов "по умолчанию".
   

Панели инструментов
   Инструменты овал (Oval), прямоугольник (Rectangle) и прочие. Здесь все почти как в Photoshop. Заметьте, что заливка и линии, ее ограничивающие, являются разными фигурами. Причем заливка состоит из множества точек.
   Заливка. Использование заливки имеет свои маленькие хитрости. Наверняка вам знакома ситуация, когда, рисуя что-либо в другом графическом редакторе, вы решили закрасить, как вам казалось, замкнутую область и вдруг закраска залила все вокруг? Если в других редакторах помогала только отмена предыдущего действия, то во Flash этого можно избежать, задав величину зазора Gap Size. А если хочется в качестве заливки применить не цвет или градиент, а фотографию или рисунок? Достаточно импортировать изображение во Flash — FileImport, затем его разбить ModifyBreak Apart (Ctrl+B), далее "собрать" изображение пипеткой (Dropper), и оно станет текущей заливкой, которой можно закрасить необходимую нам фигуру. Для знающих Photoshop данные действия знакомы.
   Для выполнения действия с фигурой, например такого как движение, потребуется объединить (Group — Ctrl+G) все объекты текущего слоя в один объект. А для выполнения действия трансформации (см. следующий номер "Мании"), наоборот, потребуется разбить объект (-ы) на множество точек (Break — Ctrl+B). Сгруппированные объекты вы не можете непосредственно редактировать (изменять цвета, толщину линий, изменять отдельные части). Для этого надо объект разбить.
   Инструменты Ink Bottle и Paint Bucket. Ink Bottle служит для изменения параметров границ объекта, в то время как инструмент Paint Bucket — для изменения заливки.
   Инструмент Arrow Tool. Он позволяет изменять контуры уже нарисованных объектов. В Options инструмента можно включать/выключать режим Snap to Objects (притягивать к сетке и другим объектам).
   Инструмент Line (линия). Толщину/цвет/стиль линии можно задать, выделив оную, нажав на самую первую кнопочку (Info) в правом нижнем углу и выбрав там закладку Stroke.
   Немного поэкспериментировав с закладками, вы научитесь изменять параметры заливки (закладка Fill), поворачивать/сжимать объекты (Transform) и увеличивать/уменьшать/двигать объект на точное количество пикселей (Info). Оперировать с цветами поможет кнопочка Mixer (параметр Alpha означает прозрачность). Для работы же с текстом подойдет кнопка Text. Закладку Text Options там можете пока не трогать — это тема следующей статьи. Другие кнопки, скорее всего, вам также пока не понадобятся.
   Рабочая зона (Stage)
   В рабочей зоне происходит основная работа над игрой или мультфильмом.
   Слои (Layers). Расположены в самом верху экрана. Они позволяют создавать сложное многоуровневое изображение, различные части которого наложены друг на друга сверху или снизу. Добавить новый слой можно, выбрав в меню InsertLayer. Менять чередование слоев можно, перетаскивая их мышкой.
   Линейка времени (Timeline). Состоит из кадров (frames), а из кадров, в свою очередь, состоит наш фильм. Добавлять кадры можно, используя меню Insert.

   Специфика рисования
   У рисования во Flash есть свои особенности. Связано это с тем, что рисовать приходится в векторной графике, а не растровой, как многие привыкли.
   Объединение. Любая фигура с однотонной заливкой и не имеющая границ, наложенная на другую фигуру с теми же характеристиками, после снятия выделения образует единое целое. Используя данный прием, можно составить сложные фигуры из готовых объектов.
   Сегментирование. Если на фигуру будет наложена другая фигура, но с отличными характеристиками, например другого цвета, то склеивания не произойдет.
   Деление на части. Как работает деление, поясним на наглядном примере. Нарисуем любую замкнутую фигуру с однотонной заливкой. Теперь пересечем ее карандашом или прямой линией. Части заливки, разделенные чертой, стали самостоятельными фигурами, с которыми можно работать отдельно. После изменения самостоятельных заливок черту можно убрать и получить фигуру с новыми характеристиками закраски.
   Разберемся с особенностями рисования во Flash на примере. Изобразим флаг России. Нарисуем прямоугольник, удалим границы, начертим 2 разделяющие линии, раскрасим нужные части и удалим уже ставшие ненужными линии. Занесем наш флаг в библиотеку (Library). Библиотека представляет собой своеобразное хранилище часто используемых объектов. Например, вы в течение всего фильма используете определенный объект. Но вдруг в конце работы над фильмом вам понадобилось добавить к нему какую-либо деталь. Что делать? Придется изменять каждый кадр на протяжении всего фильма? Если вы занесли объект в библиотеку, то не придется. Изменяем объект в библиотеке — и теперь все изображения объекта в каждом кадре фильма изменятся.
   Чтобы добавить объект в библиотеку, его нужно выделить. Далее можно выбрать меню InsertConvert to Symbol, либо просто нажать клавишу F8. Появится меню со свойствами библиотечных объектов.
   Movie Clip — большинство объектов библиотеки являются "клипами". Это могут быть как статические картинки, так и клипы с анимацией.
   Button — кнопка (как работать с кнопками, мы поговорим в следующей статье).
   Graphic — графическое изображение.
    Для нашего флага мы выберем тип Movie Clip.
   Жмем Ok. Флаг — в библиотеке. Чтобы в любой момент посмотреть содержимое библиотеки, достаточно нажать Ctrl+L.

   И все-таки оно движется!
   Пришло время вдохнуть жизнь в наш статический рисунок. Проделаем следующие действия.
   1. Щелкнем на первом кадре Timeline. Прямоугольник, символизирующий кадр, станет черного цвета с белым кружочком, а нарисованная фигура будет выделена.
    2. Зададим начало анимации InsertCreate Motion Tween. Штриховка, символизирующая выделение нарисованных фигур, будет снята, а вокруг объекта появится общая рамка выделения. Флаг автоматически будет преобразован в символ и помещен в библиотеку.
   3. Щелкнем на любом кадре Timeline (например, на 30-ом), кадр станет синего цвета.
   4. Создадим ключевой кадр InsertKeyframe (F6), выбранный кадр станет черного цвета с белым кружочком, то есть он станет ключевым, а между предыдущим и созданным кадром будет нарисована стрелочка на голубом фоне, символизирующая анимацию.
   5. Оставаясь в последнем кадре, перенесем нарисованный объект в другое место экрана.
    Первый фильм (а может, и заставка игры) готов. Жмем ControlTest Movie или Ctrl+Enter и смотрим, что же у нас получилось.
    Подведем итог. Мы научились основам рисования во Flash, изучили особенности использования векторной графики. И создали простенькую анимацию, хотя толком и не поняли, по каким принципам она работает.