Итак, я начинаю совершенно новую ветку уроков по ActionScript(в уроках AS). На этот раз я займусь третьей версией. Для того чтобы пройти эти уроки, вам потребуется программа FlashDevelop(в уроках-FD), фреймворк Flixel(в уроках-Фликсел), специальный флеш плеер(в уроках-дебаггер), и конечно, самое важное, Flex SDK(в уроках-флекс). Ссылки можно найти в разделе Дополнительно. Все "новые" уроки являются переделкой английского туториала по Flixel'y, для более понятного изложения.
Уроки
Урок 1. Настройка.
Мы скачали FD, Фликсел, дебаггер и флекс. Теперь нам надо настроить программу. Но сначала расскажу подробнее о Фликселе. Фликсел-это фреймворк для AS, предназначенный для легкого создания флеш-игр. Он доступен для скачивания на сайте GitHub. На этом я останавливаюсь, и мы переходим к настройке FD. Сейчас откройте нашу программку и вверху выберите вкладку Tools. Там нажмите на Programm Settings. Откроется простое окошко, где мы и будем производить настройку. Выберите в списке слева надпись AS3Context. Если вы уже распаковали архив с флексом(не путать с Фликселом), то просто установите путь к папке флекса в пункте Flex SDK Location. Здесь все. Снова переходим к левому списку. Там мы жмякаем на FlashViewer и вводим в пункте External Player Path путь до дебаггера. Вот мы и настроили программу. Закрываем окно. Теперь нужно создать новый проект. Входим в вкладку Project, и выбираем New Project. Там в списке клацаем на AS3 Project, пишем имя проекта выбираем его путь(например C:\Documents and Settings\*имя юзера*\Мои документы), и если не создана папка для проекта, ставим галочку у Create directory for project, которая создаст для нашей игры отдельную папку. ЛКМ на Ок, и все! Проект будет создан и открыт. Наш файл автоматически назовется Main.as, и будет помещен в папку src. Осталось только установить Фликсел в проект. Для этого отправляем папку flixel в папку org, которая находится в папке src. Если папки org нет, просто создайте её. Теперь все установлено и настроено, можно начинать делать игру. Как? В следующем уроке! Пока что домашнего задания нет, потому что вам нечего делать. До следующего урока!
Урок 2. Делаем менюшку что-то, наподобие меню.
Начинаем второй урок! Открывайте снова FD, ваш проект должен появиться автоматически. В правом окошке, выберите файл Main.as, из папки src. Это главный класс, вся сцена, но в нем мы почти ничего делать не будем. Установим размер, фон, и все.
Файл мы открыли. Там уже будет написан программный код. Сотрите его. Он нам не нужен. Введите туда это:
package
{
import org.flixel.*;
public class Main extends FlxGame
{
public function Main():void
{
super(320, 240, MenuState, 1);
}
}
}Разберем: строкой import org.flixel.*; мы импортируем Фликсел в наш класс. Теперь мы создаем класс, основанный на классе FlxGame и пишем в нем функцию. Дальше мы ставим размеры, открываем класс MenuState, и делаем нормальный масштаб. Это весь файл! Но не спешите жать заветные Ctrl+Enter чтобы запускать программу. Ведь нам нужно ещё сделать меню! Создаем файл MenuState.as, выбрав во вкладке File, пункт New, и нажав на AS3 Document. Вводим название И ВСЕ. Жмяк на Ок. Вставляем туда этот код:
package
{
import org.flixel.FlxSprite;
import org.flixel.FlxState;
public class MenuState extends FlxState
{
[Embed(source="../media/title.png")]
protected var TitleImage:Class;
public function MenuState()
{
this.add(new FlxSprite(TitleImage));
}
}
}И снова разбираем: первые три строчки вы знаете. Дальше мы импортируем файл из папки media, который называется title.png. Соответственно, вам надо сделать папку media, в корневой папке проекта. И положить туда картинку, с названием title.png. Заранее напишите в ней что-то типа PRESS SPACE.
Закрепляем это в переменной TitleImage. Создаем ещё функцию, но это понятно. Добавляем на сцену нашу картинку. И теперь вы можете гордо заявить, что создали настоящую сцену, и не простой черный квадрат, а добавили в свое "окошко" изображение! И наконец, запускаем нашу программу. Обычным нажатием клавиш Ctrl+Enter. Любуйтесь своим творением. Конечно, назвать игрой это сложно... Но хотя бы что-то!
Домашнее задание: отправьте мне в ЛС, или по e-mail([email protected])ваш swf файл, который находится в папке bin. Называться он должен * имя вашего проекта*.swf. А теперь... До следующего урока!
Дополнительно
Оффициальный сайт Flixel, где вы можете скачать этот замечательный фреймворк
Оффициальный сайт FD, где вы можете скачать эту замечательную программу
Ссылки на флеш-плееры, где вы можете скачать этот замечательный дебаггер
Ссылка на просто замечательный туториал, который стал основой для этих уроков
"Старые" уроки
ВНИМАНИЕ!!! УРОКИ НИЖЕ ЯВЛЯЮТСЯ УСТАРЕВШИМИ, КАК И ПРОГРАММА, В КОТОРОЙ ОНИ ВЫПОЛНЯЮТСЯ.
Урок 1.Рисование персонажа.
Одна из главных частей игры-персонаж.Поэтому я и не начал с описания кода, а с рисования.Открываем Macromedia Flash 8.Там в окошке Create new выбираем Flash Document.Делаем размер побольше и в поле Frame rate пишем 12.Теперь рисуем части.Почему части?Потому что это будет особый спрайтшит, в котором всё будет двигаться.Как раз там и будет использоваться это.Соединяем части в вашего персонажа в стоячем положении.Выделите его и преобразуйте в мувиклип(мувик, MovieClip, называйте как хотите).Для этого нажмите по нему правой кнопкой мыши и выберите Convert to Symbol.Там выберите имя, тип(MovieClip(обязательно)), и поставьте точку регистрации в центре.ОК.Сохраняем документ.Для это подводим мышку к File и нажимаем на Save as...Выбираем папку и имя.Снова ОК.
На этом урок окончен.
Исходник
Урок 2.Движения.
Помните, в прошлом уроке, я говорил что это наш флеш документ будет спрайт шитом, и вот, в этом уроке мы сделаем несколько спрайтов(2-3).Открываем наш файл.Там будут наши части и первый спрайт.Копируем части.Вставляем.Собираем перса, который бежит.Преобразуем его в мувик.Щёлкаем по нему два раза.Делаем новый кейфрейм(вверху есть панель Timeline, щёлкаем ПКМ на белой клеточке рядом с первым кадром с чёрной точкой(это называется ключевой кадр(кейфрейм, KeyFrame))и там выбираем Create Keyframe).Там делаем второе положение персонажа в беге, например где он поднимает другую ногу.Щёлкаем два раза где-нибудь НЕ НА ПЕРСОНАЖЕ.Жмём Ctrl+Enter.Наслаждаемся нашим бегущим и стоящим персом.Далее, снова жмём два раза на "Бегущего".Выделяем и копируем все части из него.Снова два раза щёлкаем НЕ НА ПЕРСЕ.Вставляем.Подводим мышку к Modify->Transform.Жмём на Flip Horizontal.Convert to Symbol.Повторяем это на втором кадре, только вставляем в сам третий мувик(ДаблКлик на мувик и Paste).Если ваш перс может прыгать, то снова скопируйте и вставьте части, соберите положение в прыжке.Опять же преобразуем его в мувик.Сохраняем.Вот и весь урок.
Исходник дам потом.
_____________________________________________________________
Следующий урок:Меню!
Отредактировано Куфута (07-08-2011 05:55:10)
