Вступительное слово
![image](http://dl.dropbox.com/u/1474897/Flashist.ru/PushButton-Engine-Lesson-1/big-icon.png)
В ходе Flash разработок часто приходится выполнять однотипные задачи. Разработка Flash-игр не является исключением, поэтому мне захотелось найти какой-нибудь фреймворк или набор классов, которые помогли бы мне упростить и ускорить процесс разработки. Немного изучив текущий «рынок» игровых фреймворков, я остановил своё внимание на PushButton Engine (PBE).
Каждому, кто захочет изучить PushButton Engine помогут 5 официальных уроков, в которых описывается работа с PBE начиная с самых основ (настройкой среды разработки), и заканчивая встраиванием графики в ваши проекты с помощью гибкого функционала от PBE.
Начав изучение уроков, я сразу подумал, что, возможно, эти уроки будут интересны не только мне одному, но и другим Flash-разработчикам, которые хотели бы «улучшить» свою жизнь.
Далее пойдёт текст перевода первого урока.
PushButton Engine Lesson #1: настройка FlashDevelop
Привет, в этом уроке вы узнаете как можно использовать PushButton Engine с FlashDevelop.
Содержание:
— Требования к уроку
— Настройка FlashDevelop
— Создание нового проекта
— Библиотека
— Исходники
— Hello, World
— Обзор
— Заключение
— Файлы
Требования к уроку
Для того, чтобы выполнить этот урок, вам нужно скачать и установить несколько программ:
— Adobe Flash 10 Project Content Debugger: Скачать
— Adobe Flash 10 Debug Player: Скачать | Установка
— Adobe Flex 3 SDK: Скачать — Чтобы установить, просто распакуйте архив в нужную директорию.
— FlashDevelop: Скачать | Установка
— PushButton Engine: Скачать — Чтобы установить, просто распакуйте архив в нужную директорию.
Настройка FlashDevelop
Когда вы запустите FlashDevelop в первый раз после установки, вам необходимо будет указать путь к Flex SDK. Для того, чтобы сделать это вам необходимо зайти в меню программы Tools->Program Settings, в открывшемся окне необходимо будет выбрать пункт AS3Context и кликнуть на нём. В списке параметров (ближе к концу списка) нужно будет найти пункт Flex SDK Location (см. скриншот). Тут необходимо будет вписать путь или выбрать в окне проводника нужную папку с Flex SDK (та папка, куда вы распаковали Flex SDK архив).
![image](http://dl.dropbox.com/u/1474897/Flashist.ru/PushButton-Engine-Lesson-1/Lesson1FlashDevelop_1.png)
Теперь FlashDevelop готов к разработке AS или Flex приложений.
Создание нового проекта
Теперь нам нужно настроить проект для урока. Кликните в меню на пункт Project->New Project. У вас откроется окно с различными типами проектов для FlashDevelop. Для этого урока нам необходимо создать AS3 Project (выберите этот пунект в списке типов проектов). Назовите его Lesson1FlashDevelop и укажите нужную папку. Можно нажимать OK и двигаться дальше =)
![image](http://dl.dropbox.com/u/1474897/Flashist.ru/PushButton-Engine-Lesson-1/Lesson1FlashDevelop_2.png)
Теперь мы должны задаться вопросом: «планируем ли мы использовать PushButton Engine как есть или мы будем изменять исходный код PushButton Engine».
Если вы планируете использовать PushButton Engine как есть, то пропустите раздел «Исходники» и перейдите к разделу «Библиотека».
Примечание переводчика: «в принципе, если вы не знакомы с азами работы FlashDevelop, то ничего плохого в прочтении раздела „Исходники“ не будет в любом случае, даже если вы планируете править исходники PushButton Engine».
Если вы планируете работать с исходным кодом PushButton Engine, то пропустите раздел «Библиотека» и перейдите к разделу «Исходники».
Примечание переводчика: «как и в предыдущем случае, если вы не очень знакомы с FlashDevelop, то вам будет только на пользу прочитать раздел „Библиотека“».
Библиотека
С нашими текущими настройками мы можем начать разработку «чистого» ActionScript или Flex, на выбор. В этом уроке мы будем создавать «чистый» ActionScript проект, но вам ничего не мешает создать Flex проект. Чтобы использовать PushButton Engine нам нужно указать ссылку на файл PBEngine.swc в нашем проекте. Так давайте сделаем это сейчас!
Откройте папку, в которую вы распаковали PushButton Engine. Найдите папку Bin, в ней нужно найти файл PBEngin.swc и скопировать его в папку lib внутри созданного FlashDevelop проекта.
![image](http://dl.dropbox.com/u/1474897/Flashist.ru/PushButton-Engine-Lesson-1/Lesson1FlashDevelop_3.png)
Далее вам нужно будет открыть окно FlashDevelop, в правой части окна вам нужно будет переключиться на вкладку Project, найдите в этой вкладке папку lib, а внутри ней скопированный файл FBEngine.swc, кликните на нём правой кнопкой и выберите пункт Add To Library. Этим действием мы как-бэ говорим FlashDevelop, что мы хотим использовать данную .swc библиотеку в нашем проекте.
![image](http://dl.dropbox.com/u/1474897/Flashist.ru/PushButton-Engine-Lesson-1/Lesson1FlashDevelop_4.png)
![image](http://dl.dropbox.com/u/1474897/Flashist.ru/PushButton-Engine-Lesson-1/Lesson1FlashDevelop_5.png)
Исходники
Для того, чтобы наш FlashDevelop проект мог работать с исходниками PushButton Engine, нужно указать путь к исходным файлам PushButton Engine. Кликните правой кнопкой мыши на названии вашего проекта во вкладке Project, обычно название находится в самом верху, и выберите пункт Properties. В открытом окне нужно перейти на вкладку Classpath, в ней нужно будет нажать на кнопку Add Classpath… и в диалоговом окне указать путь к папке src, которая находится в папке с разархивированными файлами PushButton Engine.
![image](http://dl.dropbox.com/u/1474897/Flashist.ru/PushButton-Engine-Lesson-1/Lesson1FlashDevelop_6.png)
Теперь нам нужно установить несколько настроек компилятора для работы с PushButton Engine. Для этого кликните правой кнопкой мыши на названии вашего проекта во вкладке Project, выберите пункт «Properties» и перейдите на вкладку «Compiler Options». Далее в строку «Additional Compiler Options» необходимо добавить строку «--keep-as3-metadata+=TypeHint,EditorData,Embed» (без кавычек) и нажать OK.
![image](http://dl.dropbox.com/u/1474897/Flashist.ru/PushButton-Engine-Lesson-1/Lesson1FlashDevelop_7.png)
Hello, World
Всё клёво =) Теперь настало время для написания кода!
В окне FlashDevelop кликните на вкладке «Project», если она ещё не открыта. В папке src будет находиться файл Main.as (он создаётся автоматически FlashDevelop). Кликните по нему правой кнопкой мышки и переименуйте его в Lesson1FlashDevelop.as
![image](http://dl.dropbox.com/u/1474897/Flashist.ru/PushButton-Engine-Lesson-1/Lesson1FlashDevelop_8.png)
Далее вам нужно будет открыть переименованный файл и удалить всё его текстовое содержимое, заменив на:
// ...
package
{
// Flash Imports
import flash.display.Sprite;
// PushButton Engine Imports
import com.pblabs.engine.PBE;
import com.pblabs.engine.debug.Logger;
public class Lesson1FlashDevelop extends Sprite
{
public function Lesson1FlashDevelop():void
{
PBE.startup(this);
Logger.print(this, "Hello, World!");
}
}
}
* This source code was highlighted with Source Code Highlighter.
Этот код представляет собой минимальное приложение для PushButton Engine. Когда мы скомпилируем приложение (Ctrl+Enter) в панели «Output» должно будет появиться примерно следующее сообщение:
INFO: Lesson1FlashDevelop - Hello, World!
* This source code was highlighted with Source Code Highlighter.
Так давайте же скомпилируем флешку и протестируем всё. Нажмите на пункт меню Project->Test movie (или Cntr+Enter) и, если мы не допустили ошибок, у нас должно будет появиться сообщение во вкладке «Output».
![image](http://dl.dropbox.com/u/1474897/Flashist.ru/PushButton-Engine-Lesson-1/Lesson1FlashDevelop_9.png)
Обзор
Итак, кратко перечислим необходимые действия, для создания минимального приложения:
1) Создать новый FlashDevelop проект (Project->New Project).
2) В качестве типа проекта необходимо указать AS3 Project.
3.а) Чтобы начать работу с .swc библиотекой PushButton Engine, вам нужно скопировать файл PBEngine.swc в папку lib вашего проекта. После этого нужно будет кликнуть правой кнопкой мышки по .swc файл и выбрать пункт «Add To Library».
3.б) Чтобы начать работу с исходниками PushButton Engine, необходимо указать путь к папке src, внутри папки, куда вы разархивировали PushButton Engine, а так же задать настройки компилятора в настройках FlashDevelop проекта.
Заключение
Поздравляем вас! Вы только что завершили урок #1 и знаете, как создавать проекты для работы с PushButton Engine.
Знания, полученные в данном уроке помогут вам в выполнении будущих уроков.
Файлы
Вы можете скачать все файлы, которые использовались в уроке по ссылке ниже.
Архив с исходниками урока
От переводчика
Вот и закончился первый урок. Надеюсь, это будет хорошим началом к изучению PushButton Engine. Если вы, пока ещё, не имеете опыта работы с FlashDevelop, то, думаю, что вам будет полезно ознакомиться со статьёй про создание Flash приложений в FlashDevelop.
P.S.:
Если статья будет интересна, то в будущем я опубликую переводы других 4-х базовых уроков.
Ссылки на все уроки (будут пополняться по мере выкладывания уроков):
1) PushButton Engine Lesson #1: настройка FlashDevelop
2) PushButton Engine Lesson #2: добавление простой фигуры
3) PushButton Engine Lesson #3: добавление управления к пользовательскому компоненту