biathlonmordovia.ru → Электромонтаж

Создание флеш игр. Как создать новый файл (документ) во Flash CS6 Как создать флеш анимацию

Создание flash-сайта ndash; дело достаточно сложное. Для этого нужны знания во многих областях: программировании, компьютерной графике, основах оптимизации и продвижения сайтов, нужно хорошо знать сам flash в конце концов, причем как на уровне знания среды разработки, так и языка программирования action script 2.0. или action script 3.0, что в настоящее время является более приоритетным.
Разрабатываются флеш-приложения в Adobe Flash Professional ndash; это мультимедийная программа, которая используется для создания такого контента как веб-приложения, фильмы, игры, приложения для мобильных и других встроенных устройств.
Flash ndash; уникальное явление. Ранее этот продукт назывался «Macromedia Flash», после приобретения компанией Adobe эта программа стала называться «Adobe Flash» с 2005 года. Flash-анимация используется для потоковых веб-страниц. Иногда флеш ndash; это часть страницы html, а бывает, что вся страницу целиком выполнена на Flash или же весь сайт создан с его помощью. Flash-файлы, которые получаются в результате — это специальные в swf («ShockWave Flash») формате файлы, которые требуют для просмотра содержимого специальные бесплатные плагины для браузера, их можно легко и быстро скачать и установить с официального сайта Adobe. Преимуществом флеш-роликов стала очень быстрая загрузка и работа с векторной анимацией с интерактивностью. Флеш может быть загружен до показа на экране всего ролика, то есть можно реализовать вариант, когда вы начинаете смотреть анимацию, а остальные «потоки» на экран загружаются в фоновом режиме.
Используемая флеш-графика в векторе плюс программный код позволяют сделать полнофункциональное приложения, способное заменить некоторые растровые, видео фрагменты, программные коды, но сделать это намного оптимальнее, для потоков используется меньшая пропускная способность, потребляется меньше мощности процессора. В дополнение к вектор-рендерингу Flash Player (плеер, необходимый для просмотра флеш-роликов) включает в себя виртуальную машину (ActionScript Virtual (AVM)) для поддержки сценариев взаимодействия во время выполнения, а также поддерживает видео, mp3.
Рассмотрим существующие типы графики и выделим преимущества векторной, с которой непосредственно работает Flash.
Всю графику можно поделить на три типа: растровая, векторная, 3Д. В растровой графике, как и на мониторе телевизора, каждое изображение состоит из набора мелких элементов ndash; пикселов ndash; это аббревиатура от picture element.
Принцип точечной графики очень прост: как рисует ребенок в школе по клеточкам, только здесь эти клетки намного меньшего размера. Такой вид графики прост как в реализации, так и обработке и представлении, технически удобно реализовать, автоматизировать ввод или оцифровку изобразительной информации.
Но растровой графике присущи недостатки: она объемна, вес файла в результате получает большой, при уменьшении или увеличении изображения теряется качество рисунка.
Кодирование графической информации в векторной графике другой: все изображения задаются в виде контуров ndash; математических объектов. Эти контуры представляет собой независимый объект, который можно перемещать, изменять размеры, масштаб, причем сколько угодно раз. Линии задаются начальными точками, формулами, указывающими сами линии. Благодаря этому при изменении рисунка пропорции всегда точно выдерживаются. Векторную графику также объектно-ориентированная графика, потому что рисунок состоит из отдельных объектов — прямых и кривых линий, эллипсов, прямоугольников, замкнутых и разомкнутых фигур, и т.д., которые имеют свои характеристики толщины контура, цвета, стиля линии и т.д.
Векторная графика экономна в плане ресурсов, о ней сохраняется информация в виде формул, а не информации по каждой точке, описания цвета не увеличивает значительно размера файла. Рисунки векторной графики легко изменяются, практически при этом не теряется качество изображения. Есть области графики, где сохранение четких контуров принципиальное, например, в создании логотипов, в шрифтах и др.
Вектор использует все достоинства разрешающей способности всех выводных устройств, к примеру, принтера. Изображение всегда выглядит качественно, четко, все будет зависеть уже только от самого принтера.
Также плюсом векторной графики можно назвать то, что она легко трансформируется в растровую, но не наоборот! И включать в себя объекты растровой графики может, хотя обрабатывать такими же средствами ее не получится.
Серьезным преимуществом векторной графики считается средство интеграции текста и изображений, один подход к ним, соответственно, возможность создать конечный продукт. Самые популярные редакторы векторной графики: CorelDRAW, Adobe Illustrator и конечно же, Adobe Flash.
Вектор ограничен при создании реалистичных изображений: четкие и мультяшные ndash; да, а вот как задать формулой сосну или облако. Также возникает проблема при вводе графической информации: к примеру, сканер передает информацию об изображении по пиксельно: расположение и цвет каждой точки в зависимости от реакции светового луча. Охватывать пообъектно он не может, да и не все изображения, как я уже писала выше, можно формализировать.

Флеш стал повсеместно популярен ndash; почти на каждой Web-странице появляются мультипликационные картинки — баннеры. Они интерактивны, проигрывают анимацию и немного занимают места на диске, что важно при работе в сети.
Анимация создается за счет отображения каждого флеш-кадра в течение определенного промежутка времени. Когда кадров много, создается иллюзия движения. Ранее флеш-технологии появились GIF-анимации, но возможности Flash намного шире. Так с ее помощью можно создавать элементы навигации, озвученные мультфильмы, анимированные логотипы, калькуляторы, целые сайты с набором разнообразных интерактивных элементов, а уж какие чудеса анимации можно сотворить на флеше: выглядят они очень эффектно и другие технологии для веб не могут похвастаться такими возможностями.
Анимационные ролики, создаваемые флеш, называются фильмами. Анимационные возможности не ограничены мультипликацией, анимируются разнообразные объекты: меню, рисунки, ссылки, тексты.
При запуске программы открывается окно с рабочей областью и панелью инструментов, а также дополнительными окнами, которые можно подключить в процессе работы. Также отображены вкладки работы с временной шкалой, настройками проверкой на ошибки и т.д. В программе фильмы создаются рисуя или импортируя готовые рисунки, размещаются они в специальной области рабочего окна ndash; сцене (Stage), а кадры создаются с помощью Timeline (шкала времени).
Сцен в фильме может быть несколько сцен, при запуске ролика они воспроизводятся в том порядке, как были созданы, если этот порядок не изменили специально. Это позволяет удобно и быстро изменять отдельные эпизоды, менять их порядок.
Сама анимация делается путем изменения следующих один за другим кадров, изменения их содержания, то есть в кадре добавляются объекты с нужными параметрами. Объекты на сцене можно вращать, изменять положение, цвет, устанавливать прозрачность, их форму, размер, тоже самое можно делать с любыми другими объектами.
Анимацию можно создавать путями:
покадрово (Frame-by-frame Animation) ndash; рисунок в каждом кадре делается руками и кадры идут подряд;
расчетно (Tweened Animation) ndash; делаются только начальный, а также конечный кадры (называются ключевыми), а между ними программа сама строит кадры; два вида такой анимации: движения (Motion Tweening, когда меняются параметры движения поворот, размер, положение), формы (Shape Tweening);
программно ndash; когда параметры изменения объекта задаются с помощью команд языка программирования Action Script.
В процессе работы над фильмом исходные данные сохраняются в специальном файле с расширением.fla. Сюда входят сцена со всеми объектами, также, дополнительные параметры об объектах, которые не были включены в фильм, но создавались в нем, также вариантах звуков, комментариях, кодах-скриптах, настройках программы и т.д. После создания такого исходника, необходимо перевести его в формат, пригодный для интернет ndash; а именно SWF, таким образом мы производим публикацию фильма или компиляцию кода. При этом из файла будет удалена информация, которая не нужна для воспроизведения в нужном виде фильма. Таким образом размер файла становится минимальным и быстро загружается у пользователя. Такой файл можно открывать отдельно ndash; плеер его проиграет, а можно подключать на любую html-страницу как объект.

Фильм создается из готовых элементов ndash; эталонов (Symbols) или символов. Эталон — это изображение, кнопка, анимация, мувиклип, которые многократно используются в ролике. Их можно создать, можно импортировать. После создания символы хранятся в специальном хранилище ndash; библиотеке (Library). В процессе сборки фильма в тех местах, где необходимо, вставляются именно экземпляры (Instance) эталонов (которые хранятся в библиотеке), а не они полностью каждый раз. И их вставлять можно сколько угодно раз и где угодно. Параметры экземпляра при этом вы можете изменять как угодно: местоположение, размер, масштаб, поворот, изгиб, прозрачность, тон и т.д., а сами символы-эталоны при этом не меняются. Это очень удобно ndash; вам не нужно создавать каждый раз заново элемент или копировать его, элемент один, а его модификаций сколько угодно много. А при процессе публикации файл окончательного ролика, который создается в формате swf, собирается так, что в одном месте будет непосредственно эталон объекта, а во всех остальных ndash; только указатели на него. Представьте, на сколько таким образом уменьшается вес ролика по сравнению с копированием почти одинаковых элементов.
Эталоны бывают:
bull; Movie Clip (мувиклип) ndash; включает звук, графику, анимацию, может быть управляемым скриптом программно;
bull; Graphic (Графический) ndash; рисунки в статике, анимация, звук, но не управляемый программно;
bull; Button (кнопка) — включает рисунки, звук; по сравнению с эталонами-символами других типов включает только четыре кадра, в которых отображаются изменения состояния кнопки, когда происходят различных события мыши.
Перед непосредственным созданием символа-эталона нужно задать его тип, позже его можно будет сменить.
Кроме символов-эталонов, их экземпляров, ролик может вмещать изображения из внешних файлов, шрифты.
Весь ролик в Adobe Flash ndash; это последовательность кадров (Frames), они показываются по очереди с указанной скоростью. Работа с ними происходит с помощью шкалы времени (Timeline). Слева на шкале расположены слои, имена которых нужно задавать, справа ndash; набор пустых кадров, которые заполняются по мере создания объектов и размещении их на сцене. Как только кадр стал заполненным объектами, он изменяет цвет на серый. Ключевые кадры обозначаются черной точкой. На шкале времени текущий кадр отмечается красным маркером ndash; проигрывающая головка, через которую проходит тоненькая красная линия по вертикали, которая пересекает все слои и laquo;видитraquo; текущий кадр в каждом из них. Вот эти-то кадры, то есть их содержимое в виде мувиклипов и отображается на экране.

Для реализации интерактивности и возможности создавать полноценные сайты, в Adobe Flash используется язык программирования Action Script.
Чтобы сделать фильм интерактивным, во Flash используются программы- сценарии-скрипты (script -сценарий), они вмещают набор инструкций (actions) на ActionScript, а выполняются, когда наступают определенные события: нажатие пользователем кнопки, достижение какого-то кадра фильма, реакции на движение мыши, ее колесика, установка указателя над определенной областью и многие другие. Команды скрипта определяют реакцию Flash на возникновение события.

Команды скрипта, которые делается при реализации того или иного события, указываются для клипа, кадра, кнопки, а длелается это на специальной вкладке внизу экрана Actions (Команды) (Actions Frame, Actions Movie Clip), Actions Button.
Возможные события:
Нажатие клавиши (Key Press) ndash; когда пользователь нажимает клавиши клавиатуры, параметром функции выступает имя клавиши.
Наведение (Roll Over) ndash; когда над объектом находится указатель мыши, но мышь не нажата;
Отпускание (Release) ndash; если происходит отпускание кнопки мыши, когда указатель над кнопкой, которую запрограммировали, то есть если пользователь щелкает манипулятором laquo;мышьraquo;;
Нажатие (Press) ndash; если происходит нажатие кнопки мыши (левой), во то время, когда указатель находится над кнопкой, которую запрограммировали. При этом учитывается область срабатывания, а не ее видимое изображение, определяется это в кадре Область (Hit);
Удаление (Roll Out) ndash; над кнопкой был указатель мыши, его не нажимали и уводят мышь с программируемой кнопки;
Сдвигание (Drag Out) — клавиша мыши устанавливается над объектом, нажимается и уводится;
Отпускание за пределами (Release Outside) ndash; если была нажата кнопка мыши на объекте, а потом ее отпустил пользователь вне объекта;
Возврат (Drag Over) ndash; на объекте установлен указатель, левая кнопка мыши нажимается и не отпускается, но указатель ведут за объект, потом снова возвращают.

Язык ActionScript 3.0, если его сравнивать с ActionScript 2.0, более современный в том плане, что базируется на основах объектно-ориентированного программирования. Где основными понятиями выступают класс, объект, его атрибуты или свойства, а также методы, присущие данному объекту.
ActionScript выполняется при помощи виртуальной машины (Virtual Machine ActionScript), она является частью Flash Player.
Основой любого программного кода есть переменная, которая в ActionScript задается так: var ndash; специальная команда Flash, означающая, что в данном разделе происходит обозначение переменной и определение ее типа; name ndash; имя переменной, задается в текстово-цифровом формате, но не начинается с цифры; type ndash; указание типа переменной (числовой — Number, логический ndash; Boolean, текстовый — String и т.д.). то есть вы будете указывать: Var x: String;
После имени переменной не забудьте указать двоеточие, а в конце строки точку с запятой. В ходе выполнения кода, значение, а соответственно тип переменной можно изменять.
Переменная, которая вмещает в себе большое количество данных, называется массив. В АС 3.0. он задается с типом Array: Var Mas: Array.
Все элементы массива нумеруются, начиная с 0, поэтому для обращения, например, к первому элементу, вам нужно указать Mas. То есть в квадратных скобках вы указываете позицию нужного элемента в массиве.
Сам код будет состоять из функций, которые описывают последовательность команд, которые происходят при том или ином событии ndash; клик мышкой, нажатие клавиши, достижении какого-то значения и т.д.
Задается функция с помощью зарезервированного слова function, далее вы указываете ее имя — name — любое текстово-числовое название, но не начинается с цифры, далее в круглых скобках () можно указать параметры функции ndash; что подается ей на вход, они могут отсутствовать, далее двоеточие и тип данных, которые функция возвращает или void ndash; когда функция ничего не возвращает. После этого весь код функции заключаете в фигурные скобки { }. А обращаетесь к функции, указав ее имя и параметры при необходимости: name().»Условия в АС 3.0. задаются через оператор if: if(х==у), то есть в скобках круглых нужно указать само условие сравнения. Циклы задаются через for(), где в круглых скобках задаются его параметры: переменная-счетчик, шаг ее изменения.
Каждый объект характеризуется своими параметрами или свойствами, к объектам во флеш можно прикреплять слушателей событий функцией addEventListener. Этот слушатель будет обрабатывать события, происходящие с объектом и если реакции на них описаны в функции программистом, программа будет соответствующе реагировать.

Это лишь малая часть того, что нужно знать, приступая к созданию флеш-сайта. Сайт можно не создавать с 0. Есть специальные шаблоны-заготовки, которые можно купить и модифицировать под ваши нужды (например, сайт templatemonsters). Там уже полностью разработан дизайн, вам нужно изменить контент и в программной реализации все что будет необходимо можно перепрограммировать. Затем вам нужно купить домен и хостинг, разместить html-файл, в котором подключается swf.
Читайте книги (мне, например, для работы и статьи в том числе помогла книга laquo;100% самоучитель M.Flash MXraquo;), учитесь у коллег на форумах (демиарт, флешер.ру), а еще, что должно стать вашим самым первым помощником — это помощь на официальном сайте Adobe. очень детализированно и подробно опсиан язык ActionScript, показаны примеры, причем материал подан и на русском языке в том числе.
После создания ролика, его нужно опубликовать. Параметры публикации программы можно установить в пункте меню Файл Параметры публикации. Там указывается в какие форматы делать выгрузку ролика, каковы настройки качества графики и звука и многие другие. Получив swf-файл, можно использовать его как полноценное готовое приложение. Для изменения, обновления созданного ролика нужно отредактировать исходник ndash; fla- файл и снова опубликовать.

И снова, здравствуйте! В связи с массой вопросов и мнений по поводу флеш-книг и электронных книг вообще, давайте посмотрим, как создать флеш-книгу без привлечения сторонних программ.

С неделю назад, столкнулся с интересной проблемой: как вставить флеш-книгу, созданную с способом описанным вот в , в блог созданный на бесплатной платформе? Не знаете!

Казалось бы, все элементарно, закидываете, полученные в программе Flip PDF файлы на хостинг и выводите уже на нужной странице блога. Но… все это возможно, если у вас блог расположен на платном хостинге и у вас есть доступ к файлам сайта через файловый менеджер хостинга или ту же Filezilla.

А если доступа нет? Что делать в таком случае?

Вот мне и задали сей вопрос: как запихнуть флеш-книгу на блог, созданный на бесплатной платформе Weebly (интересная платформа, кстати, можно создавать шаблон блога не заморачиваясь кодами, версткой и тому подобным).

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

Решение есть. Как говорится, из любой безвыходной ситуации всегда есть два выхода, даже если вас съели, у вас все равно будет два выхода.

Решение довольно элементарное, но при этом удобное до безобразия, получаем что-то типа Ютуб, но только для книг.

Регистрация

Итак. Сервис называется issuu .

Повторюсь, сей сервис работает по принципу Ютуба, вы загружаете на него свои книги в формате PDF (можно и не только в PDF, но об этом дальше), а потом размещаете на страницах блога или ссылку или код.

Давайте посмотрим, как это все выглядит. Заходим по вышеуказанной ссылочке

И регистрируемся. Можно с помощью Фейсбука, а можно просто электронной почтой воспользоваться.

Мне проще с социалок, потому у меня это вот так выглядит

Так, книжечку в PDF-формате подготовили? Нет?! Тогда вам вот или , создавайте PDF-файл и двигаемся дальше.

Можно и не PDF, данный сервис поддерживает довольно много форматов, но существуют и некоторые ограничения (смотрите в конце статьи технические требования).

Загрузка

Если у вас вдруг нет книги под рукой, то возьмите любой текст, я вот, например, взял свою . Сверстал в Word и сохранил в формате PDF.

Что-то я отвлекся, итак, загрузка книги. После регистрации, нажимаем кнопку Upload

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

Можете, кстати, разрешить скачивание книги, и тогда, при вставке в блог появиться ссылка на скачивание. Нажимаем Publish now и…

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

Так что, нажимайте кнопку My Publucation и ждите, когда ваша книга загрузиться на сервер Issuu.

Что-то у них там косяки какие-то были, и мне два дня пришлось ждать и смотреть вот на такое.

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

Вставка в блог

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

Заходим в My Publucation и видим список загруженных книг, ну или то количество книги, которое вы загрузили.

Настройка внешнего вида

Нажимаем левой кнопкой мыши на нужную книгу и выбираем

Видим окно настроек будущей флеш-книги

Настраиваете так, как вам интереснее:


После всех изменений нажимайте на кнопку Save style . Это обязательно, иначе у вас не откроется окно с кодом.

Кстати, можете поставить галочку Use on Tumblr, WordPress or similar, а можете и не ставить. Разницы в отображении книги я не заметил, там только сам код меняется, но у меня было, что после вставки кода “с галочкой” сама книга не отображалась на странице. Решайте сами.

Примеры

А теперь давайте посмотрим, как выглядит книга в разных ориентациях.

Альбомная ориентация (двухстраничный разворот)
Книжная ориентация
Разница, конечно существенная. В плане чтения удобнее книжная ориентация, а вот для рассматривания картинок – альбомная.

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

Заключение

Вот и все не хитрые действия необходимые для получения флеш-книги.

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

  • Максимальный размер загружаемых файлов: 500 страницы или 100 МБ.
  • Поддерживаемые форматы: PDF, Word (DOC, DOCX), PowerPoint (PPT), Open Office (ODS, ODP), WordPerfect (WPD), Rich Text Format (RTF), Star Office (SXI, SXW).
  • Документ должен корректно открывается в соответствующих приложениях(например, Acrobat Reader или Microsoft Word).
  • Файл не должен быть защищен паролем, не должен иметь ограничений доступа, печати и копирования
  • Разрешение изображения должно быть до 150 точек на дюйм. Более высокое разрешение будет уменьшено.

Вот как-то так.

Понятно, что флеш-книги довольно специфический контент, предназначение которых в основном – журналы, каталоги, комиксы и тому подобное. Но все же, все же…

Как вам сервис и статья? Жду в комментариях! Всем удачи! Пока!

Программа для создания флеш-игр без знания языков программирования. Позволяет создавать игры из логических блоков и заранее подготовленных изображений.

Когда-то, наверное, уже пару лет назад, на нашем сайте появилась программа Game Maker , которая позволяла делать игры практически без знания какого-либо языка программирования!

До сих пор данная страница у нас является одной из самых обсуждаемых, и часто в комментариях звучат сетования на то, что с ее помощью нельзя создавать игры, в которые можно было бы играть онлайн. Сегодня мы снова возвратимся к теме игростроения и рассмотрим аналогичную программу, которая-таки умеет делать флеш-игры - Stencyl !

Особенности программы

При помощи Stencyl можно создавать 2D-игры любых жанров, но больше всего движок программы «заточен» под различные стрелялки-бродилки. Структурно программа представляет собой целый комплекс инструментов, в котором можно, при желании, создать игру «с нуля» без использования сторонних приложений.

Закрываем всплывающее окошко с информацией о новой версии программы кнопкой «Close» или «Don’t show this again» (если не хотим видеть данное окошко при каждом запуске программы) и взамен него получаем следующее окно:

Здесь нам предлагают создать собственную учетную запись в сообществе разработчиков Stencyl. В принципе, аккаунт можно и не создавать (для этого жмем кнопку «Remind Me Later» внизу), но регистрация дает Вам возможность скачивать дополнительные шаблоны и действия с онлайн хранилища под названием StencylForge, поэтому не помешает:). Для заведения учетной записи нажимаем кнопку «Create an Account» и переходим к форме регистрации:

Здесь заполняем стандартные поля с вашим логином, паролем (два раза) и адресом электронной почты, после чего нажимаем кнопку «Sign Up». Если все пройдет удачно, то перед Вами наконец откроется интерфейс стартового окна программы.

Интерфейс стартового окна

Внешне рабочее пространство стартового окна Stencyl разделено на несколько зон:

В верхней части традиционно находится строка меню и панель инструментов. Здесь собраны все основные настройки и кнопки управления. Под панелью инструментов у нас есть небольшая узенькая серая полоска. На ней располагаются вкладки (да - интерфейс Stencyl многовкладочный, что очень удобно) и кнопки быстрого переключения между ними (справа).

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

  1. Открыть папку, в которой Stencyl хранит все ресурсы созданных игр и сами игры (кнопка «View Games Folder» в левом нижнем углу).
  2. Запустить обучающий курс по работе с программой («Start Crash Course» на зеленой панельке в правом нижнем углу). Кстати, там же рядом есть кнопка для скрытия предложения пройти обучение («Don’t show this again»).
  3. Открыть выделенную в данный момент игру из списка, что аналогично двойному клику по картинке игры («Open Game» в правом нижнем углу).

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

С чего начать создание игры в Stencyl

Если Вы, перед тем как собрались создавать свою игру, посмотрели стандартные примеры игр на Stencyl, то могли заметить, что в основном все они довольно простые, одноэкранные и имеют вид сбоку. Мы же будем делать динамический шутер с видом сверху и стрельбой при помощи мышки! Все как в «больших» играх:).

Для своего проекта Вы можете изменить логику одного из готовых шаблонов, но мы не ищем простых путей и потому - только «с нуля», только «хардкор»:). Для этого нажмем на панели инструментов рабочей области (или в меню «File» - «Create New») кнопку «Create a New Game» и попадем в следующее окошко:

Здесь мы можем выбрать шаблон игры по жанру с уже подобранным заранее набором функций и действий для Вашего проекта. Однако мы будем создавать игру с чистого листа, поэтому выбираем пункт «Blank Game» и жмем кнопку «Next».

На следующем этапе нам потребуется произвести кое-какие базовые настройки:

В поле «Name» нам нужно указать название нашей игры, а в разделе «Screen Size» задать размеры игрового поля, указав его ширину (Width) и высоту (Height) в пикселях. После этого жмем кнопку «Create» и переходим непосредственно к интерфейсу редактора игр:

По умолчанию перед нами открывается вкладка «Dashboard», на которой слева собрано все дерево ресурсов игры, а справа находится непосредственно рабочая область. Здесь, думаю, уместно будет внести кое-какие пояснения по структуре «дерева».

Оно состоит из четырех веток, первые две из которых, содержат стандартные наборы ресурсов (RESOURCES) и логики (LOGIC), а две последние опционально могут хранить загруженные вручную ресурс-паки (RESOURCE PACKS) и расширения (EXTENSIONS).

Главной веткой здесь является ветка RESOURCES. Она содержит следующие разделы:

  1. Actor Types - здесь хранятся спрайты всех игровых персонажей и настраиваются действия их анимации и взаимодействия между собой.
  2. Backgrounds - в этом разделе у нас могут храниться все необходимые фоны для игры. Причем фон может быть, как для заднего плана (background), так и для переднего (foreground), что позволяет накладывать фоны друг на друга, достигая, например, тем самым эффекта параллакса .
  3. Fonts - раздел, в который мы можем загружать различные красивые шрифты для создания оригинальных надписей. Однако, стоит учесть, что Stencyl может работать только с английским набором символов, поэтому для добавления русских букв файл шрифта, нам нужно заменить ими какие-нибудь из латинских символов.
  4. Scenes - место для создания и редактирования уровней игры. Именно здесь мы можем задать внешний вид любого этапа и разместить всех персонажей, бонусы и другие игровые элементы.
  5. Sounds - соответственно хранилище всех звуков, использованных в игре.
  6. Tilesets - специальная ветка в которой хранятся тайлы - специальные спрайты, которые мы можем использовать для построения игровых уровней.

Создание и настройка тайлов

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

Создаем первую сцену - создаем персонажа - создаем врагов - создаем бонусы - создаем остальные этапы

Чтобы создать сцену в Stencyl нужно нарисовать ее внешний вид в ветке Scenes. Однако, для того, чтобы рисовать, нам нужно сначала иметь блоки, которыми можно «рисовать». Эти блоки в программе имеют название тайлов (tiles) и хранятся в разделе Tileset:

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

Для начала нам нужно создать новый набор тайлов (кнопка «Create New» в разделе Tilesets), после чего мы увидим окно, как на скриншоте выше. Для загрузки изображения нам нужно нажать кнопку «Choose Image» и выбрать в открывшемся окне Проводника заранее подготовленный файл с нужной картинкой (-ами).

Когда изображение загрузится, зададим ему параметры разбивки и размеры по ширине и высоте, после чего (если все правильно отображается) можно добавлять изображение в набор нажатием кнопки «Add».

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

В верхней части правой панели откроется раздел «Collision Bounds» (границы столкновений). Здесь мы можем выбрать произвольную форму, обозначающую границы взаимодействия нашего объекта с игровыми персонажами. По умолчанию у всех тайлов стоит параметр «Square» (квадрат), который делает тайл полностью непроходимым и твердым. Если же Вам нужно сделать тайл «прозрачным» для персонажей (например, пол), то достаточно задать параметр «No Collisions».

Помимо границ, для каждого тайла можно задать анимацию, добавив кадров при помощи кнопки «Insert Frames» на нижней панели. По умолчанию скорость анимации равняется 100 миллисекундам, однако для каждого кадра это число можно произвольно изменить.

Для этого достаточно дважды кликнуть по нужному кадру левой кнопкой мыши и в открывшемся окне изменить показатели задержки так, как нам того требуется. Также имеется возможность подкорректировать выбранный кадр при помощи встроенного графического редактора, который открывается кнопкой «Edit Frame».

Отрисовка сцены в Stencyl

После того, как набор тайлов сформирован, логично перейти к следующему шагу - формированию из добавленных изображений готового игрового пространства. Сделать это можно, нажав кнопку «Create New» в разделе Scenes. После нажатия кнопки мы попадем в окно настроек сцены:

Здесь нам обязательно нужно в поле «Name» задать уникальное название нашей сцене, указать размеры (ширина и высота в тайлах (по умолчанию) или пикселях), а также опционально (то есть, по собственному желнию) задать фоновой цвет для новой сцены. Жмем «Ok» и попадаем в редактор уровня:

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

Первым делом рисуем фон нашей рабочей области. Для этого на правой панели активируем вкладку «Palette» а на ней вкладку «Tiles» и выбираем нужный тайл из представленного перечня. Затем на левой панели выбираем инструмент «Карандаш» (Pencil) и рисуем выбранным тайлом нужные области.

За счет поддержки слоев, тайлы могут накладываться друг на друга, поэтому логичнее всего организовывать уровень с учетом того, что, например, на слое «Layer 0» у нас будет находиться фоновая подложка, выше, слой с препятствиями и персонажами, а еще выше - слой с различными счетчиками и игровыми индикаторами.

Управлять слоями можно при помощи кнопок под панелью «Layers». Здесь имеются кнопки для создания, удаления, перемещения и переименования слоев. Кроме того, любой слой можно скрыть или отобразить, нажав на кнопку в виде глаза справа от имени слоя.

Создание персонажей

После того, как у нас создана первая сцена настало время «заселить» ее различными игровыми персонажами. В Stencyl они зовутся «актерами» и хранятся, соответственно, в разделе «Actor Types». Создаются актеры по одному и тому же принципу, поэтому рассмотрим мы этот процесс на примере создания главной героини нашей игры - Фриды.

Чтобы добавить нового актера достаточно зайти в вышеупомянутый раздел Actor Types и нажать там кнопку «Create New». Нас уже привычно снова спросят о том, как мы хотим назвать новый игровой объект, после чего перед нами появится окно редактирования анимации персонажа:

Здесь в левой части выводится список добавленных анимаций актера (по умолчанию пустой кадр «Animation 0»), а в правой находятся инструменты добавления и настройки этих самых анимаций.

Выбираем пустую анимацию (или добавляем новую кликом по кнопке с плюсом внизу) и кликаем в правой части по полю «Click here to add a frame». После этого откроется окошко добавления изображений, которое похоже на аналогичное окно для добавления новых тайлов в набор. Нажимаем кнопку «Choose image», выбираем нужное изображение и настраиваем его разбивку и размеры (если нужно).

Когда все настроено, жмем кнопку «Add» в правой нижней части окна добавления - анимация должна отобразится в виде превью в левой секции:

Теперь нам осталось только настроить скорость смены кадров (двойной клик на любом из кадров) и некоторые дополнительные параметры, типа, названия (Name) анимации (очень пригодится для сложных проектов), цикличности (Looping) воспроизведения (по умолчанию активно), синхронизации и базовой точки (Origin Point) происхождения спрайта (по умолчанию - центр).

На нижней панели инструментов в правой секции мы обнаружим ряд кнопок. Они позволяют:

  • добавить новые кадры в анимацию (Import Frames);
  • редактировать выбранный кадр во внешнем редакторе (Edit Frame (External));
  • создать кадр во внешнем редакторе (Create Frame (External));
  • редактировать кадр во встроенном редакторе (Edit Frame);
  • удалить кадр (Remove Frame);
  • копировать кадр (Copy Frame);
  • вставить кадр (Paste Frame);
  • переместиться на кадр назад (Move Back) или вперед (Move Forward).

Настройка параметров и поведения персонажей

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

Первым делом настроим столкновения. Для этого посмотрим на строку под списком открытых вкладок и найдем там кнопку «Collision».

По умолчанию область столкновений являет собой квадрат, описанный вокруг всего спрайта анимации. То есть, событие столкновения будет происходить по всей площади объекта. Однако, на практике наша картинка чаще всего содержит и дополнительные элементы (у Фриды, например, бластер), которые по идеи не должны бы ни с чем взаимодействовать. Именно при помощи данного раздела мы и можем настроить все области столкновений.

Для начала уменьшим область вокруг Фриды до размеров только ее тела. Здесь нужно учесть, что двигать область мышкой мы не можем, а для настроек используются четыре числовых параметра в секции «Current Shape». Вначале мы задаем сдвиг области по горизонтали (от левого края) и вертикали (от верха), а затем указываем новые ширину и высоту области столкновений.

Ниже есть еще несколько параметров, объединенных в секцию «Physical Properties». Здесь мы сталкиваемся с галочкой «Is a Sensor?» и понятием групп.

Если активировать флажок «сенсора», то выделенная область перестанет быть физическим объектом: персонаж или его часть станет как-бы «прозрачной» для различных преград, но в то же время сохранит возможность запускать какие-либо действия при определенных условиях.

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

Теперь, для чего нужны группы… Предположим, что у нашего персонажа в руках не бластер, а меч, которым он (точнее она:)) рубит в капусту врагов (кстати в исходнике у Фриды есть лазерный клинок;)).

Задача состоит в том, чтобы при касании к врагу мечом, враг погибал, но если мы промазали, и супостат задел Фриду, то у нее отнималась какая-то доля энергии. А главная проблема здесь то, что анимация удара у нас, по сути, является картинкой, на которой одновременно присутствует и Фрида, и меч…

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

По умолчанию у нас существует только одна область, которая соответствует самому персонажу («Same as Actor Type»). Однако при помощи инструментов рисования над основной рабочей областью мы можем создать новые виртуальные объекты и задать для них группу при помощи кнопки «Edit Groups».

Со столкновениями, пожалуй, все, а теперь предлагаю разобраться с самым основным - настройкой поведения актера на сцене. Для этого нам нужно перейти в раздел «Behaviors»:

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

Я для примера выбрал поведение «8 Way Movement», которое подразумевает передвижение актера по кругу в любую сторону. Теперь выбираем добавленное действие в списке слева и в правой части мы сможем настроить его параметры.

Добавление актеров на сцену и тестирование уровня

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

Возвращаемся в редактор созданной ранее сцены и вновь активируем палитру (Palette), но теперь вместо тайлов, включим вкладку «Actors» (Актеры). Перед нами появится список созданных ранее персонажей, которых мы сможем добавить на сцену при помощи инструмента «Карандаш»:

Главная героиня у нас одна, поэтому достаточно всего одного нажатия карандашом, чтобы добавить ее на сцену. И теперь наступил момент истины - первое тестирование! Чтобы запустить предварительную компиляцию проекта достаточно нажать кнопку «Test Scene» в правом верхнем углу вкладки с нашей сценой. Спустя некоторое время (первая компиляция всегда длится дольше) мы сможем полюбоваться своими трудами во флеш-плеере:

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

Как видим, двигать Фриду в разных направлениях мы уже можем, но сама сцена остается неподвижной и стоит наше героине выйти за край видимой части сцены, как она исчезает… Непорядок:). Решить проблему можно, добавив Фриде поведение «Camera Follow» или настроив нужные параметры при помощи событий.

Также, нелишним было бы заменить стандартный курсор на что-то более подходящее, например, прицел. Это мы можем реализовать, добавив нового актера в виде прицела, убрав у него область столкновения и прикрепив к сцене при помощи стандартного поведения «Custom Mouse Cursor»:

Система событий в Stencyl

Простые игры в Stencyl можно создавать при помощи одних только стандартных поведений (Behaviors), однако, если нам требуется что-то нестандартное, то тут уже придется подумать над использованием событий, которые настраиваются для актеров и сцен в разделе «Events»:

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

Окно событий делится на три секции:

  1. В левой секции находится список событий и кнопки для управления (создания/удаления/перемещения) ими. Для добавления события нам нужно нажать кнопку «Add Event», после чего выбрать нужную группу в выпадающем списке и указать конкретную нужную нам функцию. Справа от созданного события имеется галочка, которая позволяет нам при необходимости деактивировать его.
  2. В правой секции мы имеем список всех доступных действий, сгруппированный в 10 разделов, каждый из которых включается соответствующей кнопкой. Для большего удобства действия в каждом разделе рассортированы по тематическим вкладкам и имеют свой уникальный цвет. Внизу здесь есть еще три вкладки. По умолчанию активна вкладка «Palette» (палитра), на которой и располагаются списки действий. Вторая вкладка - «Attributes» - служит для отображения локальных переменных (о них чуть ниже), а третья - «Favorites» - служит для показа избранных Вами действий.
  3. Центральная секция - это рабочая область. Здесь мы и формируем окончательные примеры поведения персонажей при помощи различных комбинаций блоков действий и событий, по которым эти действия происходят. Комбинирование происходит путем простого перетаскивания блоков на рабочую область и последующей правки указанных в них параметров. Стоит учитывать, что функцию составляют только те блоки, которые объединены между собой и включены в основной блок события. Таким образом, чтобы временно убрать определенные ненужные в данный момент (но полезные) комбинации, нам достаточно просто вынести их из общей структуры на свободное место. Если же действия оказываются со временем ненужными вовсе, то их можно полностью удалить, переместив в корзину, которая находится в правой верхней части рабочей области.

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

Настройка физики и свойств

Мы с Вами уже рассмотрели много чего, но не коснулись некоторых дополнительных тем, которые могут быть очень важными при создании игр - я говорю о настройке всевозможных свойств наших актеров и сцен. Эти параметры у нас хранятся в двух последних вкладках. И первая из них - «Physics»:

Для сцен и актеров вкладка настройки физики выглядит по-разному. На вкладке с настройкой физики сцены находится всего два параметра - настройка горизонтальной и вертикальной гравитации. Внешний же вид секции настроек физических параметров актеров представлен на скриншоте выше и состоит из пяти вкладок с различными опциями:

  1. Вкладка «General» («Общие»). Здесь у нас есть три параметра: тип актера (неподвижный, платформа (может двигаться по заданным правилам, но его не могут двигать другие актеры) и подвижный), вращение актера (может вращаться или нет) и влияние гравитации.
  2. Вкладка «Heaviness» («Вес»). На этой вкладке можно настроить массу виртуального объекта и его инерционность.
  3. Вкладка «Material» («Материал») позволяет задать для актера такие характеристики, которые будут симулировать поведение реального предмета, сделанного из того или иного материала. У нас есть возможность выбрать одну из предустановок из выпадающего списка «Preset Materials» или вручную задать характеристики трения и упругости нашего актера.
  4. Вкладка «Damping» («Сопротивление») дает нам возможность более тонко настроить параметры взаимодействия актера с окружением за счет внедрения такой величины, как линейное (например, воздуху) и угловое (при вращении) сопротивление.
  5. Вкладка «Advanced» («Продвинутые») предоставляет нам доступ к различным дополнительным настройкам, не вошедшим в предыдущие разделы. Здесь можно активировать упрощенную модель физики (для оптимизации игры), автоматическое определение областей столкновений, события повторных столкновений и возможность применения паузы к актеру.

С физикой разобрались, а теперь посмотрим на свойства, которые вызываются нажатием кнопки «Properties»:

Как и в предыдущем случае, для сцен и актеров свойства будут разными. В свойствах сцены мы можем указать ее имя («Name»), размеры (секция «Size») и фоновой цвет («Background Color»).

В свойствах же актера можно, помимо имени, задать описание (поле «Description») объекта, группу, к которой относится актер (секция «Choose Group») и слой анимации для мобильных устройств (здесь можно ничего не менять, поскольку бесплатная версия программы не позволяет экспортировать игры в форматы для мобильников.

Но и это еще не все настройки, которые нам доступны в Stencyl. Общие настройки игры доступны нам по нажатию кнопки «Settings» на основной панели инструментов:

В окне настроек слева находится список групп параметров, а справа - основная область (иногда разделенная на несколько вкладок), содержащая всевозможные опции. Здесь нас интересуют следующие разделы:

  1. «Settings» («Настройки»). Первая группа настроек, которая позволяет немного персонализировать нашу игру. Эта группа содержит три вкладки. На первой из них («Main») мы можем задать игре новое имя, короткое описание, а также картинку-превью и иконку. На вкладке «Display» настраивается окончательный размер игрового пространства, а на последней («Advanced») есть возможность включить упрощенную физику и задать параметры сглаживания.
  2. «Loader» («Загрузчик»). В этой группе мы можем частично (учитывая некоторые ограничения бесплатной версии) настроить внешний вид прелоадера (загрузчика), который будет отображаться перед полной загрузкой игры. Здесь уже четыре вкладки. На первой («General» - общие) можно указать ссылку на Ваш сайт, включить защиту от копирования игры на других ресурсах (через запятую перечисляем список дозволенных сайтов во второй строке) и один из скинов загрузчика. На вкладке «Appearence» мы можем задать цвет экрана загрузчика и фоновое изображение. При помощи вкладки «Bar Style» указываются размеры полоски загрузчика, а «Bar Color», позволяет задавать, соответственно его цвета.
  3. «Attributes» («Атрибуты»). Данная группа настроек - одна из самых основных! Здесь можно управлять глобальными переменными, используемыми в игре (о переменных в следующем разделе ниже).
  4. «Controls» («Управление»). Как явствует из названия, в данной группе мы можем перенастроить и добавить кнопки клавиатуры, при помощи которых будут выполняться те или иные игровые действия.
  5. «Groups» («Группы»). Механизм групп мы уже рассматривали немного выше. Здесь мы имеем возможность видеть все созданные группы и править их.

Собственно, вот и все настройки, которые нам будут нужны для создания флеш-игр в бесплатной версии Stencyl. Но раз уж этот раздел о настройках, то тут грех не упомянуть о параметрах самой программы. Получить к ним доступ можно, активировав пункт «Preferences» в меню «File»:

В программе предусмотрена поддержка многоязычности интерфейса, однако, на данный момент существует только английская локализация, поэтому мы и перешли сразу ко второй вкладке - «Workspace». Дело в том, что в третьей версии Stencyl появилась функция автоматической генерации адаптивных изображений из загруженных спрайтов.

И по умолчанию стоит увеличение спрайта в два раза, что влечет за собой ухудшение качества графики. Чтобы этого не происходило, советую отключить переразмеривание картинок, выбрав в поле «Scale» значение «Standard (1x)».

Также советую заглянуть на третью вкладку - «Editors». Здесь можно ассоциировать действия обработки графики, звука и текста с внешними более продвинутыми (нежели встроенные в Stencyl) редакторами.

Немного о переменных

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

Переменные в любом языке программирования позволяют оперировать различными событиями, выражая их через определенные числа (числовые переменные), условия (булевые переменные), тексты (строковые переменные) и т.д. Главная особенность переменных - возможность замещать собой любое значение в заданных заранее рамках. Простой пример переменной: дежурный в классе. Сегодня им может быть Иванов, завтра Петров, а послезавтра Сидоров:).

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

В Stencyl переменные могут быть локальными и глобальными. Локальные переменные мы можем объявлять в рамках какого-нибудь события или поведения, и они будут работать только для указанных действий. Создать локальную переменную можно в редакторе событий, вызвав раздел «Attributes»:

Здесь у нас есть несколько вкладок:

  1. Вкладка «Getters» позволяет задать переменные, которые будут получать значение из каких-либо вычислений или прямых указаний.
  2. Вкладка «Setters» дает возможность установить какие-либо значения для созданных ранее переменных.
  3. Вкладка «Games Attributes» хранит блоки глобальных переменных и при желании позволяет добавлять новые (хотя, как это делать лучше мы рассмотрим чуть ниже).
  4. Вкладка «Lists» предоставляет нам возможность создавать массивы данных.
  5. Вкладка «Functions» используется для организации созданных функций.

Алгоритм создания локальной переменной прост: вначале создаем новый блок во вкладке «Getters», а затем находим во вкладке «Setters» только что созданную переменную и добавляем блок с ней на рабочую область, приравнивая к какому-либо игровому параметру. Вот и все - переменная объявлена и получила набор допустимых значений.

Глобальные переменные (Game Attributes) в Stencyl задаются сразу для всей игры и могут быть вызваны в любом событии или поведении. Как уже говорилось выше, создать их можно в разделе «Attributes» на вкладке «Game Attributes»:

Однако просматривать все созданные переменные и управлять ими гораздо удобнее при помощи раздела «Attributes» в настройках (кнопка «Settings» на панели инструментов или «Show Game Attributes» на вкладке «Game Attributes» в редакторе событий):

Здесь у нас представлен весь список глобальных переменных и имеется возможность создавать новые при помощи нажатия кнопки «Create New». Для новой переменной мы можем тут же задать тип (числовая, текстовая, булева или массив) и стартовое значение, не покидая пределов окна, что очень удобно на мой взгляд.

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

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

Публикация, импорт и экспорт игр

Наконец-то мы, хоть и бегло, но ознакомились с основными принципами работы со Stencyl. Предположим, мы создали игру, проверили ее и все оказалось рабочим. Теперь дело за малым - превратить игру из проекта в реальный SWF-файл, который можно выложить в Интернет. Для этого нам достаточно открыть меню «Publish» и в списке «Web» кликнуть пункт «Flash».

Запустится компиляция файла игры, после чего появится запрос, куда и под каким именем сохранять полученный флеш-файл. Сохраняем и все - игра готова:).

Обратным процессом будет импорт игры. Благодаря функции импорта Вы сможете открывать проекты игр других пользователей, например, чтобы подсмотреть, как у них реализована та или иная функция;). Импортировать игру можно также из меню «File». При успешном импорте игра появится на главном экране в списке проектов. Однако здесь стоит сделать небольшую оговорку.

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

Достоинства и недостатки программы

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

Выводы

Из всех существующих сегодня программ для создания флеш-игр Stencyl является максимально разумным компромиссом между простотой работы и широтой возможностей. Радует то, что функционал конструктора в бесплатной редакции практически ничем не ограничен, что позволяет почти в полной мере реализовать любую задумку.

Однако, не стоит забывать о «почти»… Дело в том, что сам Stencyl работает на базе JAVA-машины, которая, как известно, довольно требовательна к ресурсам. Если к этой нагрузке добавить еще и нагрузку, которую создает игра, то получится, что для нормальной работы нам потребуется современный мощный компьютер.

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

Резюмируя, можно сказать, что Stencyl будет идеальным движком для создания всевозможных казуальных флеш-игр и бродилок-стрелялок с видом сбоку. Более того, потренировавшись создавать флеш-игры, Вы сможете приобрести один из типов лицензии и, немного изменив механику, портировать свою игру в форматы, поддерживаемые Android и iOS. А это уже реальный способ заработать деньги, разместив игру на Play Market’е или в App Store!

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

P.S. Разрешается свободно копировать и цитировать данную статью при условии указания открытой активной ссылки на источник и сохранения авторства Руслана Тертышного.

Мы постоянно сталкиваемся с флеш-анимацией – в интернете и в телевизионных трансляциях. Создание простой флеш-анимации с помощью технологии Flash – довольно простая задача, так как Flash предлагает много полезных инструментов, которые упрощают весь процесс. Если вы хотите создать флеш-анимацию или мультфильм, то вы можете сделать его набросок всего за пару часов.

Шаги

Часть 1

Покадровая флеш-анимация

    Основы покадровой анимации. Этот метод считается основным методом создания «традиционной» анимации, в которой каждый последующий кадр включает одно, но чуть измененное изображение. При воспроизведении всех кадров изображение «оживает». Этот же метод используется аниматорами, рисующими мультфильмы от руки, и отнимает больше времени, чем твининг (смотрите следующий раздел).

    • По умолчанию Flash воспроизводит 24 кадра в секунду (FPS). Это означает, что за одну секунду будут показаны 24 кадра, но не все из них должны быть обязательно разными. Вы можете изменить этот параметр (если хотите) на 12 кадров в секунду, но при 24 кадрах в секунду анимация будет воспроизводиться более «гладко».

  1. Установите Flash Professional. Есть множество программ для создания флеш-анимации, но наиболее мощной является Adobe Flash Professional CC. Вы можете бесплатно установить пробную версию этой программы или использовать другой продукт (если вы не хотите регистрироваться на Adobe Creative Cloud). Далее в этой статье описывается работа с Flash Professional.

    Так как покадровая анимация требует наличия нескольких изображений (которые немного отличаются друг от друга), то вам нужно создать эти изображения вручную. Для этого воспользуйтесь Adobe Flash Professional или нарисуйте изображения в любом графическом редакторе.

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

  2. Создайте первый кадр. При первом запуске Adobe Flash Professional вы увидите пустой холст (слой) и пустую временную шкалу. По мере добавления кадров временная шкала будет заполняться автоматически. Вы можете работать со слоями так же, как вы делаете это в Photoshop.

    • Прежде чем добавить изображение, создайте базовый фон вашей анимации. Переименуйте «Слой 1» в «Фон», а затем закрепите его. Создайте второй слой и назовите его как угодно. Это будет слой, на котором вы будете создавать анимацию.
    • Добавьте рисунок на холст первого кадра. Вы можете импортировать рисунок с вашего компьютера, или вы можете использовать инструменты для рисования, чтобы создать рисунок непосредственно в программе.
    • Первый кадр – это «ключевой» кадр. Ключевой кадр – это кадр, который включает изображение и образует основу («костяк») анимации. Вы будете создавать новый ключевой кадр каждый раз при изменении изображения.
    • Ключевые кадры на временной шкале обозначаются черной точкой.
    • Вы не нужен ключевой кадр в каждом последующем кадре. Создавайте ключевой кадр через каждые четыре-пять кадров, чтобы сделать хорошую анимацию.

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

    • Выделите рисунок. Щелкните правой кнопкой мыши по рисунку и выберите «Convert to Symbol» (Преобразовать в символ). Изображение будет добавлено в библиотеку, что упростит его использование в будущем.
    • Удалите рисунок. Не волнуйтесь - вы сможете добавлять его в кадр простым перетаскиванием из библиотеки. Так вы можете добавить в кадр один и тот же рисунок несколько раз.

  4. Добавьте пустые кадры. Если ваш первый ключевой кадр готов, вставьте пустые кадры, а затем приступайте к созданию второго ключевого кадра. Нажмите F5 (четыре или пять раз), чтобы добавить пустые кадры после первого ключевого кадра.

  5. Создайте второй ключевой кадр (после того, как вы добавили несколько пустых кадров). Есть два различных способа сделать это: вы можете скопировать существующий ключевой кадр и внести в него небольшие изменения, или вы можете создать пустой ключевой кадр и добавить в него новое изображение. Если вы используете рисунок, созданный в другой программе, воспользуйтесь вторым способом. Если вы вставляете изображение, созданное при помощи инструментов для рисования Adobe Flash Professional, воспользуйтесь первым методом.

    • Чтобы создать ключевой кадр, используя содержимое предыдущего ключевого кадра, нажмите F6. Чтобы создать пустой ключевой кадр, щелкните правой кнопкой мыши по последнему кадру на временной шкале и выберите «Insert Blank Keyframe» (Вставить пустой ключевой кадр).
    • После того как вы создали второй ключевой кадр, вам нужно внести изменения в его изображение, чтобы анимация «ожила». Если вы пользовались инструментами для рисования Adobe Flash Professional, выберите инструмент «Transform» (Преобразование), чтобы выделить элемент вашего рисунка (например, руку персонажа) и изменить его.
    • Если в каждый ключевой кадр вы вставляете новое изображение, убедитесь, что оно находится в нужном месте (согласно логической последовательности кадров).

  6. Повторите процесс. После создания двух ключевых кадров повторите процесс – добавьте несколько пустых кадров между каждыми ключевыми кадрами и убедитесь, что анимация будет проигрываться «гладко».

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

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

    • Выберите кадр, в котором рисунок будет преображаться.
    • Откройте панель свойств рисунка. Для этого нажмите F3.
    • Измените значения параметров в окне свойств рисунка. Например, вы можете изменить оттенок или цвет, добавить фильтры, изменить размер.
    • Вы также можете использовать инструмент «Free Transform» (Свободное преобразование), чтобы менять рисунок так, как вам угодно.

  8. Добавьте заключительные штрихи. Проверьте созданную анимацию, нажав Ctrl + Enter. Убедитесь, что рисунок (персонаж) правильно меняется и что анимация воспроизводится с правильной скоростью. Если анимация воспроизводится слишком быстро, уменьшите значение FPS или увеличьте продолжительность твина.

    • По умолчанию FPS равен 24, поэтому попробуйте уменьшить это значение до 12. Измените значение FPS на панели свойств. Однако при FPS = 12 анимация может воспроизводиться недостаточно плавно.
    • Чтобы изменить продолжительность твина, выберите слой, содержащий твин, и при помощи ползунка измените продолжительность твина. Если вы хотите удвоить продолжительность твина, передвиньте ползунок на 48 кадров. Не забудьте вставить фон в пустые кадры, чтобы фон не исчез посередине анимации. Для этого выберите фоновый слой, щелкните по последнему кадру анимации (на временной шкале), а затем нажмите F5.
© 2024 biathlonmordovia.ru - Записки электрика. Электробытовые приборы. Электродвигатель. Светотехника. Заземление