Adobe Flash
6 января 2011

Flash + IntelliJ IDEA

Из песочницы
Всем привет. Если вы сталкивались с разработкой Flash-приложений, то скорее всего стандартные инструменты, предоставляемые Flash IDE для написания кода не вызвали у вас особого восторга. Существует несколько популярных сред для Flash/Flex-разработки: FlashDevelop, FlashBuilder, FDT, еще может быть парочка. В сети полно холиваров насчет того, какая из них лучше, но в данной статье я буду исходить из того, что вам приглянулась IntelliJ IDEA (или просто — «Идея»), но вы с ней совсем не знакомы и не знаете, с какой стороны к ней подступиться. Что же, попробуем разобраться вместе!

Flash + IntelliJ IDEA

Что Вы найдете в этой статье:
  • Краткое описание: где скачать, как установить, настроить IDE'ю
  • Как создать проект, начать работу
  • Как связать IDE'ю с Flash-проектом
  • Как компилировать, запускать проект, подключать библиотеки
  • Описание некоторых приятных мелочей, которые я регулярно использую
Чего Вы в этой статье не найдете:
  • Каких-то чисто Flex-специфик вещей
  • Описания сборки проекта ANT'ом (хотя вскользь мы этого коснемся), использования Maven и т.д.
  • Описания преимуществ IDE'и перед аналогами, её главных фич
Вроде бы здесь считается хорошим тоном предупреждать о трафике — под катом небольшая кучка скриншотов, весит ~500кб.

Предисловие


Сам я с Идеей знаком не так давно, так что многих вкусных особенностей не знаю, в чем-то могу ошибаться. Статья рассчитана в первую очередь на тех, кто делает проекты на чистом ActionScript'e и хочет пересесть на Идею. Если вы раньше уже работали с ней, то скорее всего вам не составит труда самим разобраться в тех вещах, о которых я буду говорить.

Скачивание, установка


Итак, идем на сайт, видим, что есть две версии: Community Edition (бесплатная) и Ultimate (платная; персональная лицензия 249$, коммерческая 599$; триал-версия на 30 дней). В бесплатной версии нет поддержки ActionScript, поэтому скачиваем платную — жмем на «Download Ultimate» (подробнее про цены и лицензии).

download IntelliJ IDEA

Запускаем скачанный exe'шник, «Next->Next->Next...», выбираем, что нужно, жмем «Install». Установка занимает пару минут, здесь никаких проблем возникнуть не должно. В конце ставим галочку напротив «Run IntelliJ IDEA», жмем «Finish».

Создание проекта


Допустим, что это первое ваше знакомство с Идеей, так что на предложение импортировать старые настройки отвечаем отказом и жмем «Ок». Вбиваем лицензионный ключ или выбираем «Evaluate for free for 30 days» и жмем «Ок». Опять лицензионное соглашение, очередной «Ок».

Вот теперь начинается более-менее интересная часть: предлагают выбрать плагины для контроля версий. Здесь и далее работает простое правило — чем меньше плагинов мы выберем, тем быстрее и непринужденнее будет грузиться/работать Идея. Допустим мне нужна только поддержка Subversion:

VCS Integration Plugins

Далее нам предлагают выбрать Web/JavaEE плагины — здесь можно смело убирать вообще все галочки, это все конечно круто, но нам ни к чему:

Web/JavaEE Technology Plugins

Далее HTML/JavaScript плагины. Здесь мы видим интересующий нас Flex-plugin, который в свою очередь завязан на JavaScript и CSS. Так что выбираем эти три (и еще до кучи я взял HTML-плагин):

HTML/JavaScrip Development Plugins

И, наконец, Other Plugins. Здесь много всего, что-то может пригодиться, что-то нет. Я ориентировался просто по названиям и убирал заведомо ненужные (например, ASP, Android), оставлял те, которые могут понадобиться в будущем (например, Ant — оставьте его, он нам еще может пригодиться). Что делать с плагинами с совсем незнакомыми названиями решать вам, я отключил большинство (при клике на любом из них внизу выводится краткая информация о плагине):

Other Plugins

Перед нами появляется окошко «QuickStart», здесь нажимаем «Create New Project» (так же создать проект можно через «File->New project»), в следующем окошке выбираем «Create project from scratch»:

Create New Project

В следующем окошке выбираем имя проекта (например, «HelloHabr»), папку, где он будет сохранен, ставим галочку напротив «Create module», выбираем тип «ActionScript/Flash/Flex Module». В принципе уже можно было бы нажать «Next», но хочется сказать пару слов о проектах и модулях. У одного проекта может быть много модулей и они могут находиться в разных местах. Более того, файл проекта может быть в одном месте, файл модуля в другом, а код, на который смотрит модуль, в третьем. У проекта свои общие настройки, у модуля дополнительно свои. Предположим, что Вы работаете уже над каким-то приложением и хотите подсунуть создаваемому модулю написанный ранее код — это просто. Пусть есть папка C:\Develop\HelloHabr, с вложенными паками /art и /src. Тогда в поле «Content Root» пишем «C:\Develop\HelloHabr», в поле «Module File location», например, тоже «C:\Develop\HelloHabr», жмем «Next»:

New Project

Теперь нам предложат создать директорию для исходников — укажем папку с кодом нашего приложения (необходимо указать путь относительно «Content root»). Выбираем «Create source directory» и пишем в текстовом поле «src»:

Source

Теперь нам понадобится указать путь к FlexSDK (скачать можно здесь) жмем на кнопку "..." в верхнем правом углу, в новом окошке жмем на "+" и указываем путь к распакованному SDK:

Select Flex SDK

Ок, указали SDK, дальше выбираем «Output type» — «Application (*.swf)», снимаем галочку с «Create sample Flex application» и с «Create HTML wrapper». Все! Жмем «Finish»:

Finish Creating New Project

Начало работы


Ура! Дальше есть 2 пути — писать код в Идее, но компилровать приложение все же во Flash'е (для кого-то это может показаться диким, но многие так делали еще с FlashDevelop'ом, в этом даже есть некоторый смысл… наверное) или все делать на месте, импортируя графику через swc-библиотеки (или подгружая непосредственно swf'ки уже во время работы скомпилированного приложения), и компилировать mxmlc-компилятором. Если первый вариант вам не интересен, то можно переходить сразу ко второму, они никак не связаны. Итак, по порядку.

Из Идеи вызываем компиляцию Flash-приложения

Сам я давно этого не делал и когда начал писать эту часть статьи, выяснилось, что прежний путь в 10 версии Идеи не работает. Но решение есть, пусть и немного замороченное. В общем, следующие манипуляции избавят вас от необходимости вручную «сворачивать_Идею-разворачивать_Flash-нажимать_Alt+Enter» при каждой компиляции, и только. Стоит ли овчинка выделки — решать вам.

Допустим в нашей папке /art лежит «HelloHabr.fla». Мы хотим править код в Идее, затем нажать кнопку «Сделать хорошо» и чтобы после этого Flash сам развернулся и скомпилился. Схема будет такой: Идея запускает .bat-файл, этот .bat-файл создает и запускает простейший JSFL-скрипт, который, собственно, занимается компиляцией проекта. Для начала нужно скачать этот батник — “Publish in Flash IDE” Shell Script For Windows. Содержимое этого файла, на всякий случай:
echo document.testMovie(); > %TEMP%\PublishInIDE.jsfl
@cmd /c start %TEMP%\PublishInIDE.jsfl
Раньше можно было установить плагин «Batch Scripts Support» и создать конфигурацию компиляции на основе скачанного батника (подробнее здесь), но этот метод внезапно перестал работать (вроде бы, чтобы он вновь заработал достаточно попросить создателей плагина «Batch Scripts Support» подлатать свое заброшенное(?) детище). Предлагаю такое решение — создаем простенький ANT-скрипт, который запускает скачанный .bat-файл. Для начала создаем файл build.xml в который вставляем следующий код:

<?xml version="1.0"?>
<project name="RunInIDE" default="hello-habr" basedir=".">
    <target name="hello-habr">
        <exec executable="cmd"><arg value="/c"/><arg value="PublishInIDE.bat"/></exec>
    </target>
</project>

Кладем эту xml'ку рядом со скачанным PublishInIDE.bat. Далее возвращаемся в Идею, нам нужно указать JavaSDK: ПКМ по имени проекта в дереве классов слева, выбираем «Open Module Settings», в открывшемся окне слева выбираем пункт «SDKs», жмем на "+", выбираем «JSDK», указываем путь к JDK (если у вас его нет, то его нужно скачать и установить), что-то типа «C:\Program Files\Java\jdk1.6.0».

Select Java SDK

Дальше — справа есть кнопка «Ant Build», жмем на нее, появится вкладка, жмем там на "+", в появившемся меню указываем путь к созданному build.xml. Затем ПКМ внутри вкладки «Ant Build», поле «Properties»:

Ant: build.xml

В открывшемся окошке выбираем вкладку «Execution», в списке «Run under JDK» выбираем наш свежеустановленный JDK:

Execution

Проверяем, открыт ли Flash (нужно, чтобы был открыт проект, который хотим скомпилить). И, наконец, торжественно (обязательно торжественно, это важно) жмем на зеленую стрелку!

Run

Та-да! Работает? Здорово! Ну что, стоила овчинка выделки? Имхо нет, но без этой части статьи описание получилось бы неполным… Что ж, перейдем, наконец, к более здоровому методу работы.

HelloWorld средствами Идеи

Итак, в папке /src создаем файл «Main.as» с содержимым:
package {

    import flash.display.MovieClip;
    import flash.text.TextField;

    public class Main extends MovieClip {
        public function Main() {
            var tf:TextField = new TextField();
            tf.text = "Hello Habr!";
            addChild(tf);
        }
    }
}

Этот класс будет точкой входа в наше приложение, теперь нужно сказать об этом Идее. Настроим конфигурацию запуска: жмем на стрелочку «Select Run/Debug Configuration» на верхней панели инструментов, выбираем «Edit Configurations» (или «Run->Edit Configurations»), жмем на "+", выбираем «Flex», задаем имя конфигурации, например «Run HelloHabr», в области «Launch» выбираем пункт «Main Class» и указываем путь к нашему классу Main.as — «Main»:

Edit Run Configurations

Теперь жмем на зеленую стрелку (или «Shift+F10») и вуаля! HelloHabr!

HelloHabr!

Где найти полученную swf'ку? По умолчанию она лежит рядом с файлом проекта в папке типа ...\IdeaProjects\HelloHabr\out\production\HelloHabr\_Main.swf. Почему такое странное название? Об этом чуть ниже, а пока разберемся, как поменять этот путь. У нас есть папка, в которую по умолчанию будут помещаться все скомпиленные модули проекта, изменить ее можно в настройках проекта: «File»->«Project Structure», «Project compiler output»:

Project compiler output

Но, как мне кажется, более правильный и удобный путь — это не использовать общую папку проекта, а задать нужную папку для конкретного модуля. Делается это так: ПКМ по имени проекта в дереве классов слева, «Open Module Settings», открываем вкладку «Flex Compiler Settings», убираем галочку с «Inherit project compile output path», вместо него выбираем пункт «Use module compile output path» и меняем путь на более удобный:

Module compile output path

Теперь нужно сказать о разнице между «Run» (то, что мы проделали) и «Build». Run — это все еще что-то из разряда отладки, при этом мы можем играться с разными конфигурациями. Например, если бы мы убрали галочку «Make» в настройках конфигурации запуска, то не было бы никаких гарантий того, что после закрытия свфки она бы где-то сохранилась (Идея, кстати, заботливо об этом бы поворчала), а так мы имеем хотя бы "_Main.swf". По-науке нам нужно делать «Make» проекта или модуля (у которого есть своя расширенная конфигурация — вроде как это «Flex Compiler Settings») — для этого есть кнопка странного вида, левее «зеленой стрелки» (или просто «Ctrl+F9»), при нажатии на нее нужно будет указать точку входа (наш класс Main). Этот главный класс приложения и имя свфки, получаемой на выходе, можно менять в предыдущем окошке — поля «Main Class» и «Output file name» соответственно. В итоге вместо "_Main.swf" мы получим вполне себе приличный «HelloHabr.swf» в удобной для нас папке.

Make Project

Всякое разное полезное, необходимое, удобное, приятное, интересное и т.д.


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

1) Для того, чтобы выводились сообщения по «trace()» и работал дебаггер Идеи, необходимо установить debug-версию флешплеера и запускать проект опять же в режиме «debug». Если возникли какие-то трудности с установкой, то можно сделать так — скачать standalone дебаг-плеер, и указать путь к нему в настройках конфигурации запуска в разделе «Options» в поле «Launch with»:

Launch with

Ну и раз речь зашла об этом, расскажу как ставить брэйкпоинты и запускать дебаггер. Слева от интересующей нас cтроки щелкаем мышкой — брейкпоинт готов. Дебаггер запускается по нажатию на «зеленую стрелку с букашкой» (или «Shift+F9»), которая находится рядом с «обычной» зеленой стрелкой. При этом трэйсы показываются внизу во вкладке «Console», а отладкой можно управлять во вкладке «Debug» (интерфейс довольно понятный и дружелюбный):

Debug

2) Импорт swc-библиотек. Допустим мы хотим подключить библиотеку для работы с АПИ «МоегоМира» — «mailru-call.swc»: ПКМ по имени проекта в дереве классов слева, «Open Module Settings», справа открываем вкладку «Dependencies», еще правее кнопка «Add», «Single-Entry Module Library», указываем путь к нужной .swc-библиотеке. Готово, теперь нам доступны классы этой библиотеки:

Import SWC

3) Изменить форматирование кода можно так: «File»->«Settings», раскрываем поле «Code Style». Если покопаться здесь немного, то можно найти наверное любые настройки, какие вам могут прийти в голову. Мне, например, привычно, когда содержимое package'а обрамляется отступами, для этого нужно поставить галочку напротив «Indent package statement children» в разделе «JavaScript/ ECMAScript/ ActionScript»:

Code Style

4) И, наконец, перечислю несколько хоткеев (полный список здесь), без которых я уже чувствую себя не в своей тарелке, редактируя что-нибудь не в Идее:
  • Ctrl+Space — старый добрый автокомплит
  • Ctrl+Alt+L — автоформатирование кода
  • Ctrl+Alt+O — оптимизация импортов
  • Shift+F6 — рефакторинг (мощная штука!)
  • Alt+F7 — поиск вхождений/использования конструкции в проекте
  • Ctrl+F/Ctrl+Shift+F — поиск в документе/поиск в проекте или в папке

Ну, думаю остановлюсь на этом, всем спасибо!

P.S. Взял для статьи пару изображений без спроса, надеюсь никто из-за этого сильно не расстроится…
+24
21,9k 71
Комментарии 36
Похожие публикации
Популярное за сутки