Компилируйте код в Flash Develop, а графику в Flash IDE

Хочу поделиться навыками организации работы с flash, которые я получил на свой недолгий опыт flash-разработчика. Я думаю, эти рекомендации прежде всего будут полезны новичкам. Статья касается прежде всего разработки flash-игр.
Говорить я буду о работе с Flash IDE, Flash Develop(AS3) и GIT.
Flash IDE — используйте для работы с графикой.
FlashDevelop — для кода.
GIT — для контроля версий.

Статья 1. Компилируйте код в Flash Develop, а графику в Flash IDE.

Если вы разрабатываете более-менее сложную по коду игру, вам много приходится работать с кодом. Если вы правите as-файлы в Flash Develop, а потом компилируете игру в Flash IDE — это ваша первая ошибка. Я раньше тоже так делал. Теперь я делаю графику в Flash IDE и экспортирую её в swc-файл. Потом редактирую код в Flash Develop и компилирую его через Flex.
Этот подход дает следующие преимущества:
  • Компилируется в разы быстрее. Компиляция происходит значительно быстрее, за счет того, что графика уже «готова к употреблению».
  • Flash Develop подхватывает классы из SWC. В коде доступны классы из библиотеки. Не скажу, что это больше преимущество, но это плюс.
  • Работает debug. Удивительная вещь! Раньше у меня отладка сводилась к применению trace, а теперь можно делать полноценную отладку! В случаях ошибки также Flash Develop переключается на отладку и останавливает работу на строке с ошибкой.
Пример.
Всем своим сердцем я надеюсь, что у вас уже установлен Flex SDK.  Если нет — устанавливаем (Скачать Flex 4). Установленным должен быть и FlashDevelop (Скачать FlashDevelop). Там же есть инструкция по настройке.
Открываем FlashDevelop. Выбираем Project->New Project… и создаем проект «AS3 Project».

После этого должен получится примерно такой состав проекта:

Компилируем его (Enter+Ctrl). Если появилось пустое окно Flash Player — значит все работает правильно. Если нет, внимательно читайте окошко Output(там может быть намек на ошибку), и пишите в комментариях.
Настраиваем Flash IDE. Создаем новый AS3 проект. Создаем для проверки Символ в библиотеке.

Файл сохраняем в  проекте, в папке «lib». Заходим в Flash IDE->Файл(File)->Параметры публикации(Public settings)->Вкладка «Flash»->Ставим галку «Экспортировать SWC-файл». Публикуем проект(Alt+Shift+F12). В папке lib должен появится файл swc:
Как мы видим, в проекте FlashDevelop появился файл swc с списком классов в нем. Теперь необходимо его подключить: Project->Properties->Compiter Options->Добавляем в SWC Libraries наш swc файл.

Для проверки попробуем использовать класс из swc-файла в нашем коде (Main.as):

private function init(e:Event = null):void {
        ...
        addChild( new myMovieClipClass());
}

Компилируем, и видим, что все получилось:

Да, конечно такой вид работы потребует от Вас изменения стиля разработки игр, если вы делали их по-другому. Лично у меня переход игры на такой стиль потребовал пару часов. Кое-какие привычные вещи придется сделать кодом. Но поверье, все это окупится теми плюсами, которыми обладает данный метод работы.
Продолжение следует.



P.S.
Решил переделать то, что начал делать, под этот метод. Раньше в библиотеке был мувиклип button, для него был прописан и создан класс (ui.MyButton) с определенной функциональностью. Вот вкомпилил я этот мувиклип в swc. Ну не получается у меня создать экземпляр этого символа из библиотеки, и чтобы у него был весь этот функционал. Создается я так понял просто экземпляр класса ui.MyButton. Направь на правильный путь плиз.

Весь вопрос в том, что получается ты вкладываешь функциональную часть в swc файл(логику в графику), а потом опять эту графику опять вкладываешь в логику. Это не правильно с точки зрения похода. Я понимаю, что это накладывает некоторые ограничения на процесс разработки, но тебе нужно добавлять ui.MyButton уже непосредственно в коде, программно задавая им позиции.
К примеру, у меня есть MovieClip mcLevelMapLightClass, а функциональность я уже добавляю в FlashDevelop:
public class LevelMapLight extends mcLevelMapLightClass


Дальше я знаю 2 варианта:
1. Считывать положения конкретных MovieClip на сцене и заменять их уже функциональными с соотв. положением.
2. Сделать конфигурацию (я сделал в XML) положений элементов и добавлять их в соотв. с этой конфигурацией.
Конечно, проще накидать элементы в Flash IDE. А тут приходится это делать кодом. Сначала непривычно. Но в большинстве случаев это занимает не так много работы, как кажется.

Пример:

// Создаем положения для кнопок
var btnConf:XML = <root>
        <item x="63" y="267" />
        <item x="150" y="267" />
        <item x="195" y="249" />
        <item x="195" y="288" />
        <item x="232" y="288" />
        <item x="232" y="249" />
        <item x="269" y="267" />
        <item x="360" y="267" />
        <item x="360" y="222" />
        <item x="415" y="210" />
        <item x="415" y="325" />
        <item x="475" y="325" />
        <item x="535" y="325" />
        <item x="535" y="210" />
        <item x="475" y="210" />
        <item x="475" y="265" type="big" />
</root>

// Создаем кнопки согласно конфига
for (var i:int = btnConf.item.length() - 1; i >= 0 ; i-- ) {
        // Создаем экземпляр кнопки
        var newButton:LevelMapLight = new LevelMapLight();
        
        // Присваиваем ей имя
        newButton.name = "mcBtn" + Math.round(i+1);
                        
        // Устанавливаем положение
        newButton.x = btnConf.item[i].@x;
        newButton.y = btnConf.item[i].@y;
        
        // Сохраняем кое-какие данные                   
        newButton.userData = i + 1;

        // Добавляем обработчик, который вызовется по нажатию
        newButton.click_hendler = function(e:MouseEvent):void {
                Game.instance.currentLevelNumber = e.currentTarget.userData;
                startGame();
        }

        //Добавляем на сцену                            
        addChild(newButton);
}
  • +21

Комментарии (72)

0
Спасибо, как раз вчера поставил девелоп.
+2
Тоже работаю в такой связке. swc еще можно подключить нажав правой кнопкой по нему в окне проекта и поставив галочку Add To Library
0
Верное замечание.
0
И ещё раз можно нажать правой кнопкой для изменения опций подключения… (:
0
отличный пост! плюсанул. отладка и быстрая компиляция это хорошо. со следующей игрой перехожу на эту схему)
0
полезно, спасибо
0
Сколько уже слышал хорошего о FD, но в AF меня, все пока устраивает. Удобство это конечно хорошо, но действительно серьезных причин переходить пока не вижу.
0
Что такое AF?
0
Тот самый Adobe Flash)
0
А какая версия Flash IDE у тебя стоит?
0
у меня Flash CS4
0
как по мне, самое сильное преимущество FD перед редактором кода CS4 это наличие автодополнения имен переменных/функций/свойств и т.п. начинаешь писать имя переменной и после первых трех букв выскакивает окошко с переменными, нажимаешь enter и оно подставляется. волшебство. :) на словах может звучит не очень убедительно, но если один раз попробовать, то потом действительно невозможно вернуться в редактор CS4.

зы. или я туплю и в CS4 это тоже можно как-то включить? :)
+2
А еще есть страшное колдунство: жмешь ctrl+b выбираешь, например, for, а он тебе в код заготовочку вставляет
for (var i:int = 0; i < ; i++) 
{
        
}
Можно и свои сниппеты писать.
+3
Можно ещё быстрее — пишешь «for», нажимаешь Tab и вуаля! :)
0
это справедливо только для коротких, если название сниппета длинное, например function — быстрее через ctrl+b :)
0
Ну это уже как кому удобнее, но насчёт быстрее — сомневаюсь…
Например ту же function всё равно быстрее — нажимаешь «f», «u» и «Tab». Хотя конечно тут уже индивидуально, может кому то и «Ctrl + B» удобнее нажимать...:)
0
У меня просто несколько разных вариантов вставки функций и все начинаются с function, мне проще «Ctrl + B», «f», «u» и из списка выбрать, заодно не надо в голове все держать. И, да, как говорится, на вкус и цвет… все фломастеры разные ))
0
аааааа!!! крутотенюшка!!! :)) спасибо, не знал, давно мечтал о такой штуке))
0
А попробуй поработать с FD неделю и AF перестанет устраивать да и причины станут явными :)
0
В будущем скорее всего перейду, сейчас у меня больше проблемы с созданием игры как таковой, а не с софтом на котором это делаю. Компиляция возможно быстрее, но мне порой даже нравится, что нужно какое то время, чувствуешь что, что-то сделал. Но отладка, это да, ужас… если на FD, она действительна так хороша, как пишут, то это действительно большой плюс. А так, все относительно просто и удобно, работает отлично)
0
Отладка самая настоящая: с breakpoint, watch, inspect, с пошаговым выполнением и т.п.
Судите сами:
0
Можно все делать во АФ, а код писать в ФлешДевелопе.
Попробуйте на проекте, где надо солидно покодить и в АФ уже не вернетесь
0
Сразу только так и работаю. Удобно и быстро.
Flashdevelop (или любая другая среда на выбор: FlashBuilder, FDT, VIM, notepad :) + flex4sdk.

1) Можно вообще не использовать flash IDE (графику можно рисовать в чем угодно: Photoshop, AI, Gimp, Inkscape… Paint :D )
2) Редактор и компилятор от flash ide — убогое поделие.
3) При необходимости можно работать в linux без костылей или виртуализации (нужен только любой редактор + sdk, или FDT например).

В реальности сейчас использую flashdevelop в виртуальной машине (просто некоторое количество софта, приходится запускать в windows).
В дальнейшем думаю перейти на что-то типа fdt + linux, или тоже самое + macos (если вдруг займусь написанием под iOS).
0
А как ты делаешь анимацию?
0
Анимацию можно делать програмно — добавил на объект картинку, когда надо заменил другой.
Или отдельно во флеше делать
0
На самом деле никак.
Я не художник, в текущем проекте графика все растровая, анимация программная. Плюс tween эффектов немного.
Возможно для меню или заставок что-то изображу в flash в виде movieclip, простые вещи рисовать там не сложно.
Если в других проектах действительно будет много векторной анимации, ее в любом случае будет рисовать дизайнер/художник.
Я возьму просто готовый swc или то, что художник мне даст :)
Ну и если графика в svg например, тогда уже есть некоторый выбор (http://wiki.inkscape.org/wiki/index.php/Animation-%28Timeline%29)
+3
Для программистов пришедших с других платформ ну очень не удобно писать код во Flash IDE. Проблема возникает скорее в выборе между различными IDE: FD, FDT, FB…
Еще один момент, который пригодится это разделение ресурсов в разные *.swc
К примеру: game.swc, gui.swc, sound.swc.

Такой подход кроме скорости компиляции — в основном вы меняете несколько или даже 1 библиотеку перед очередным билдом, поможет структурировать ваши ресурсы.
Это должны оценить те у кого огромные *.fla файлы и после каждого небольшого изменения флешка собирается несколько минут:)
+3
+1, еще уровни лучше выносить во внешний xml (до финальной версии, в финалке потом эмбедить) особенно когда идет балансировка уровней, так не придется все пере компилировать, чтобы «сдвинуть кирпичик на пиксель вправо»))
0
попробовав ФД ещё весной бесповоротно пересел на него, всё устраивает, всё круто,
единственное со спонсорским интро помучался, не сумел подружиться с swc
в связи с этим хочу поинтересоваться, swc хорошо работает с мувиками внутри которых мувики с кодом? иными словами такие сложные мувиклипы в swc нормально открываются?
доступ к ним хороший? можно достучаться до свойств и методов?
0
Стараюсь не писать код средине клипа.
Такие сложные мувиклипы и их части к которым хотите достучатся должны быть так же экспортированы (Export for ActionScript) — помогает. Если код все же нужен выношу его в отдельный *.as файл и так же экспортирую.
+1
Обычно в спонсорском интро или прелоадере куча кода, который лучше не трогать. Единственное, что я меняю — это код возврата в игру. Обычно это что-то вроде
this.root.play();

Может быть в последнем кадре анимации или в листенере на кнопке Плей. Такое я обычно заменяю на генерацию события.
dispatchEvent(new Event("gameStart"));

Ловлю это событие из кода прелоадера и всё.
Сам код внутри MovieClip'ов из SWC работает прекрасно. Делаете play() и всё. Музыка, код — всё работает как и хотел спонсор.
0
я тоже не пишу код где попало, но мало ли какой спонсорский прелоадер попадётся =)
2elmortem, тоесть подключив swc всё что там у них в прелоадерах и интро было намешано всё впринципе работает нормуль?
Если так то это очень даже здорово)
0
Да, всё работает шикарно. (:
0
Уже честно у FD работает дебаггер? И как не глючит? Я обычно использую флекс билдер для кода ну и конечно адобовскую ИДЕ для графики, билдер как раз из-за дебаггера и профайлера.
0
3.2.1 глючил страшно.
Сейчас вышел 3.2.2, может там что поменялось, хз.
Билдер рулит.
0
В 3.2.2 всё гораздо лучше по сравнению с 3.1.1, стоит попробовать.
Дебагер у меня не разу не глюканул(хотя я его слабо использую), профайлер работает. Автокомплит самый лучший из тех что я пробовал…
0
Нормально работает. Ходит по коду, ватчит, переменные показывает.
Бывает правда что иногда отваливается вывод trace в консоль, решается перезапуском.
И это я его еще в virtualbox + xp гоняю.
Flash 10.1 debug из комплекта flex4.1
0
я тоже раньше в Adobe Flash кодил пока он мне сюрприз не сделал
в коде была конструкция типа

var k:int;
var t:int;
var b:int;
var c:int;

var i:int =(k - t)*(b - c);

каторая после автоформатирования превратилась в

var k:int;
var t:int;
var b:int;
var c:int;
var i:int = k - t * b - c;


что есть логическая ошибка, даже в CS5 так делает
0
Да автоформат испортили с CS 3 и это очень жаль, наверное единственная фича которая была полезной в Флеш ИДЕ.
0
Сам пока сижу на CS4, flex показался страшным, вплане сложности. Скорей всего из-за незнания.
Я так понял основые плюсы лишь в скорости компиляции и удобстве кодинга?
А что насчет дебагера в CS4, что в нем не так? Вроде ошибки он отлавливает, по-крайней мере у меня с ним проблем не было. Да и кодить для меня не большая проблема, к примеру, написать тот же for сейчас для меня достаточно быстро. Вот если бы FD сам писал бы за меня игру, тогда это да)))

Но в любом случае плюсую, как-нибудь попробую сделать, что-нибудь простое на твоем примере, т.к. скорость компиляция очень важна для меня.
  • z3lf
  • z3lf
0
Flex — это по сути набор из компилятора as3 кода, компилятора xmml кода и набора гуёвых библиотек. Вам же предлагается использую FD использовать только первое. Т.е. тот же знакомый вам as3, только прогать удобнее и компилится быстрее.
К тмоу же сам FD позволяет использовать Flash IDE для компиляции, но при этом сам код можно писать в нём. Просто при компиляции вас кидает в Flash IDE и основной FLA файл должен быть открыт.
0
Есть офигенная фича в FD, которую узнал совсем недавно. Если кто не слышал, на всякий случай — магическая комбинация ctrl+shift+1. Пишем название функции, котом нажимаем эту комбинацию и генерируем шаблон функции или например берем локальную переменную и безболезненно переводим ее в переменную класса. Что-то еще было, но сейчас уже не помню.
  • adzh
  • adzh
0
еще ctrl+shift+1 добавляет в начало класса необходимые импорты классов
0
Кроме того эта магическая коомбинация может добавить для переменной getter/setter…
0
тоже узнал об этой магической комбинации не так давно из роликов по box2d с kerp.com
0
О, как раз в тему :)

Месяц назад подключал FD проект, но до сих пор проблему не решил:
на всех машинах (xp sp3, win7 home, win7 ult) при запуске профайлера вылезает ошибка:
Метод не найден: «Boolean System.Threading.WaitHandle.WaitOne(Int32)

Так же FD трейс в аутпут панель не выводит, и соответственно профайлер не грузится. Работа срочная была, потому использовал полумеру — написал дельфовую прогу и выводил трейс из дебаг плейера в нее — при изменении файла лист обновлялся.
Сейчас времени побольше, потому спрошу у сообщества: чо за… и как ее лечить? :) Как подключить профайлер и вывод трейса в аутпут панельку?
+1
Судя по эксепшину — это косяк .net фреимворка, скорей всего туда и надо копать: может версия ниже требуемой или сервиспак не стоит.
0
Любые версии в наличии :) Идея хорошая, снесу старые, поставлю новый. Данке.
0
только винду вчера установил, такая же ошибка была. ЭТо проблема с сервис паком для фреймворка.
Вот держи:ок
0
Все там выводится. Вы просто не умеете готовить :) trace выводится если использовать для запуска дебагверсию флешплейера.
А еще вместо трейса можно использовать:
import org.flashdevelop.utils.FlashConnect;
...
FlashConnect.trace("...");
+1
Чтобы нормально работал trace (да и отладка тоже) нужно:
1) поставить свежий FD + NET 2/3 (со всеми сервиспаками)
2) проверить что включены flashviewer, flashconnect, flasdebuger в FD
3) в настройках FD/проекта выставить external player и прописать там debug версию плеера (который можно найти в flexsdk).
0
Спасибо. Дело действительно было в .net
0
Во флеше, я в пропертис элементу библиотеки прописал:

Вылезает:

Под флешом компилится ок, а фд никак не хочет.
0
А код какой в тех строках, на которые ругается?
0
ну код во флеше иде компилится. А в фд не.

public function addPiece(col,row:int):Piece {
0
А ты точно подключил SWC в библиотеку (ПКМ на swc-файле и Add to Library)?
0
эээээ а без свц никак? подключил вроде бы
0
и еще там фишка, я на рабочем поле назвал hero и unhero
мувиклипы, и во флеш девелопе пишет
E:\Flash\Rune Invaders 2\RuneInvaders2.as(25): col: 4 Error: Access of undefined property unhero.
unhero.gotoAndStop(2);
0
Ещё подскажи, слово «Piece» подсвечивается синим цветом? Без swc можно обойтись, только подскажи, откуда FlashDEvelop должен взять класс Piece?
0
Ох не знаю, прекомпилил для флеш плеера 10 и все пашет. Был 10.1
Хотя «и еще там фишка, я на рабочем поле назвал hero и unhero
мувиклипы, и во флеш девелопе пишет
E:\Flash\Rune Invaders 2\RuneInvaders2.as(25): col: 4 Error: Access of undefined property unhero.
unhero.gotoAndStop(2);»
это еще осталось.
0
а можешь сказать, как настроить, чтобы перкидывало сразу во флеш вместо флеш сдк
0
F6 в FlashDevelop — Test Movie in Flash IDE
0
проект должен быть типа Flash IDE Project
0
спасибо
0
спасибо) буквально за 10 мин все настроил и проверил) работает)
нужно будет что-нибудь просто написать, попробывать. Если понравится, то перейду обязательно на такую связку)

И еще вопрос, а как менять размер окна?) посредством кода? или есть где нибудь настройки ?)
  • z3lf
  • z3lf
+1
Можно в свойствах проекта, а можно директивой в коде, например
[SWF(width=«465», height=«465», backgroundColor=«0x000000», frameRate=«40»)]
+1
Можно менять в свойствах проекта во (FlashDevelop).
0
и еще одно! можно ли там изменить стиль написания кода?)
я про привык
...() {

}
  • z3lf
  • z3lf
0
Не совсем понял о чем ты))), посмотри code snippets, там все шаблоны автоподстановки
0
спасибо! с размером разобрался)
по стилем имел в виду это:
по дефаулту создается так:
public function Main()
{

}
а я хочу так:
public function Main() {

}

придирки, но комфортней)
+1
Заходишь в code snippets(иконка — зеленый пазл) --> выбираешь шаблон function --> удаляешь инструкцию $(CSLB) --> Сохраняешь )))
0
Отличный пост, спасибо огромное за него; и всем комментировавшим также большое спасибо!
  • SeeD
  • SeeD
0
Специально нашел статью, что бы сказать огромное спасибо!
Когда только начинал осваиваться — она очень мне помогла!
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.