Lee Brimelow опубликовал отличное видео, в котором делается обзор новых возможностей Flash CS4. Рекомендую ознакомиться, если кто-то не сделал этого раньше.
От себя добавлю, что эти изменения в новой версии Flash должны порадовать в основном аниматоров и дизайнеров. Однако, как среду разработки кода, Flash по прежнему нельзя рассматривать. Будем надеяться, что уже в версии Flash CS5 разработчики из Adobe доведут встроенный редактор кода до уровня других современных AS-редакторов.
Создание swc-библиотек — задача, с которой рано или поздно сталкивается каждый actionscript-разработчик, и способы ее решения зависят во многом от тех инструментов, которые есть в распоряжении программиста. В своей работе я стараюсь минимально использовать возможности среды, насколько это возможно, разумно и позволяют условия, поэтому описанные в статье действия минимально привязаны к возможностям конкретной среды разработки и могут быть с легкость выполнены в рамках любой IDE, использующей Flex 3 SDK.
Однако, дабы материал был более предметным, в качестве среды разработки я использовал FDT. В любом случае, весь процесс сборки будет возложен на плечи Ant, так что, как я уже сказал, повторить приведенные действия в другой среде разработки будет не сложно. Приступим.
В качестве примера создадим swc, содержащий в себе два простых, но, на мой взгляд, весьма полезных класса — CookieManager и FirebugConsole. Начнем с создания нового проекта — File → New → New Flash Project. В появившемся окне диалога задаем имя проекта, его расположение, версию ActionScript, а также указываем, что хотим использовать Pure AS(Flex 3).
Приступим к созданию структуры проекта. Для этого создадим основные директории:
Как только все директории созданы, можно приступать к их наполнению. Для начала в папке src разместим исходные коды, думаю здесь сложностей возникнуть не должно. Следующий этап — создание файлов в директории build. Нам потребуются следующие файлы:
Самое время приступить к наполнению вышеперечисленных файлов. Начнем с local.properties:
flex.sdk.dir=E:/tools/flex3sdk
compc.path=${flex.sdk.dir}/bin/compc.exe
В первой строке мы прописали путь до Flex SDK, во второй — относительно него указали путь до компилятора compc, так что правим только первую строку согласно своим условиям и переходим к build.properties:
source.dir=${basedir}/src
output.dir=${basedir}/bin
output.file=riafactory.swc
Здесь тоже все весьма просто, указали пути до src и bin, а так же прописали имя файла нашей swc-библиотеки.
Если все готово, переходим к написанию build-файла. В нашем случае он будет небольшим, и состоять из двух задач: build и compile.swc.
<?xml version="1.0" encoding="utf-8" ?>
<project name="RIAFactory classes" basedir=".." default="build">
<property file="build/local.properties" />
<property file="build/build.properties" />
<property name="compc.args" value="-load-config '${output.dir}/compc-config.xml'" />
<target name="build">
<antcall target="compile.swc" />
</target>
<target name="compile.swc">
<filter token="flex.sdk.dir" value="${flex.sdk.dir}" />
<filter token="source.dir" value="${source.dir}" />
<filter token="output.dir" value="${output.dir}" />
<filter token="output.file" value="${output.file}" />
<copy file="${basedir}/build/compc-config.xml" tofile="${output.dir}/compc-config.xml" filtering="true" />
<exec executable="${compc.path}">
<arg line="${compc.args}" />
</exec>
<delete file="${output.dir}/compc-config.xml" />
</target>
</project>
Как вы наверно обратили внимание, компилятору передается единственный параметр –load-config указывающий путь до конфигурационного файла. По сути, использование конфигурационного файла является альтернативой передачи множества параметров компилятору, а поскольку build.xml в идеале должен отвечать только за последовательность этапов процесса сборки, то, на мой взгляд, этот подход является предпочтительным.
Переходим к compc-config.xml:
<?xml version="1.0" encoding="utf-8"?>
<flex-config>
<compiler>
<external-library-path>
<path-element>@flex.sdk.dir@/frameworks/libs/player/playerglobal.swc</path-element>
</external-library-path>
<source-path>
<path-element>@source.dir@</path-element>
</source-path>
</compiler>
<output>@output.dir@/@output.file@</output>
<include-classes>
<class>ru.riafactory.external.FirebugConsole</class>
<class>ru.riafactory.net.CookieManager</class>
</include-classes>
</flex-config>
В конфигурационном файле мы прописали путь до playerglobal.swc, относительно корневой директории Flex SDK, указали пути до src и до итоговой swc-библиотеки, а также перечислили те классы, который хотим включить в наш swc-файл.
Примечание: узел
<include-classes>можно опустить, в этом случае компилятор вкомпилит все найденные классы в директориях указанных вsource-path, однако наличие этого узла позоляет вам точно знать, какие классы будут вкомпилены.
Теперь все готово, чтобы собрать swc. Открываем панель Ant (Window → Show View → Ant), в ней нажимаем на кнопку Add Buildfile, выбираем build.xml, после чего выделяем его в панели и нажимаем Run the Default Target of the Selected Buildfile. В консоли должны появиться сообщения о ходе сборки, среди которых самым приятным для нас должно стать BUILD SUCCESSFUL. Если все так, смотрим в папку bin (не забывая сделать Refresh во Flash Explorer) и видим там свежесобранный swc.
На этом можно было и закончить, если бы не один момент. Получившийся swc будет отлично подключаться к проектам, разрабатываемых в средах, использующих Flex SDK, однако все попытки подключить его к проекту во Flash IDE путем копирования в папку Flash-компонентов будут тщетны.
Причина этому на самом деле проста и в определенной степени логична. В панели Components появляются только те swc, который содержат в себе компоненты. Хотя точнее будет сказать, Flash просматривает swc на предмет наличия в нем компонентов и, если таковые имеются, отображает их в панели. Таким образом, чтобы Flash увидел наш swc и позволил использовать классы, находящиеся в нем, нам придется перекомпилировать swc, указав, что в нем имеются компоненты.
Для этого нам потребуется manifest.xml. Справедливости ради, стоит отметить, что манифест служит ни сколько целям компиляции Flash CS3 совместимых swc, сколько огранизационным целям, по крайней мере, так гласит документация. И так, приступим к написанию manifest.xml, предварительно создав его в директории src.
<?xml version="1.0" encoding ="utf-8"?>
<componentPackage>
<component id="FirebugConsole" class="ru.riafactory.external.FirebugConsole" />
<component id="CookieManager" class="ru.riafactory.net.CookieManager" />
</componentPackage>
В манифесте мы прописываем необходимые компоненты, указав их идентификатор и класс, понятное дело, что id должен быть уникальным.
Теперь, когда у нас есть manifest.xml, нам потребуется немного изменить параметры компиляции. Начнем с build.properties, добавим в него пару строк:
namespace.uri=http://www.riafactory.ru
namespace.manifest.file=manifest.xml
В первой строке, мы указываем uri пространства имен наших компонентов, во второй — имя файла манифеста.
Далее внесем изменения в build.xml. Теперь задача compile.swc выглядит следующим образом:
<target name="compile.swc">
<filter token="flex.sdk.dir" value="${flex.sdk.dir}" />
<filter token="source.dir" value="${source.dir}" />
<filter token="output.dir" value="${output.dir}" />
<filter token="output.file" value="${output.file}" />
<filter token="namespace.uri" value="${namespace.uri}" />
<filter token="namespace.manifest.file" value="${namespace.manifest.file}" />
<copy file="${basedir}/build/compc-config.xml" tofile="${output.dir}/compc-config.xml" filtering="true" />
<exec executable="${compc.path}">
<arg line="${compc.args}" />
</exec>
<delete file="${output.dir}/compc-config.xml" />
</target>
Ну и последнее, что нам потребуется сделать — это внести соответсвующие поправки в compc-config.xml, после которых он должен выглядеть так:
<?xml version="1.0" encoding="utf-8"?>
<flex-config>
<compiler>
<external-library-path>
<path-element>@flex.sdk.dir@/frameworks/libs/player/playerglobal.swc</path-element>
</external-library-path>
<source-path>
<path-element>@source.dir@</path-element>
</source-path>
<namespaces>
<namespace>
<uri>@namespace.uri@</uri>
<manifest>@source.dir@/@namespace.manifest.file@</manifest>
</namespace>
</namespaces>
</compiler>
<include-namespaces>
<uri>@namespace.uri@</uri>
</include-namespaces>
<output>@output.dir@/@output.file@</output>
<compute-digest>false</compute-digest>
<include-classes>
<class>ru.riafactory.external.FirebugConsole</class>
<class>ru.riafactory.net.CookieManager</class>
</include-classes>
</flex-config>
Теперь снова откомпилируем наш swc и попробуем его подключить к Flash CS3. Для этого скопируем его в директорию с Flash компонентами (можете создать там отдельную папку для сторонних swc):
C:\Program Files\Adobe\Adobe Flash CS3\en\Configuration\ComponentsHD:Applications:Adobe Flash CS3:Configuration:ComponentsТеперь запускаем Flash, открываем панель Components (Window → Components или Ctrl+F7) и видим в ней компоненты из нашего swc (если Flash уже запущен необходимо сделать Reload из контекстного меню панели).
Теперь перетаскиваем компоненты в Library, после чего смело можем пользоваться классами из swc во Flash CS3. Ну а в качестве проверки можем вставить в первый кадр следующий код:
После чего нажимаем Ctrl+Enter и видим в Output:
[class CookieManager]
[class FirebugConsole]
Что означает, что Flash прекрасно видит классы из swc. Архив с FDT проектом.
Напоследок несколько заключительных слов. Использование конфигурационного файла вместо множества параметров, как показала моя практика, является более удачным подходом, поскольку все параметры компиляции собраны в одном специально предназначенном для этого файле. Конечно, работая во Flex Builder, большинство параметров можно задать используя диалоговые окна, однако многие разработчики используют альтернативные IDE.
Еще один момент, который стоит отметить. В панели Components Flash IDE, отображаются все компоненты, входящие в состав swc, а точнее перечисленные в файле catalog.xml, который находится внутри swc-библиотеки. Здесь есть важный момент, перетаскивая в Library один из компонентов, мы фактически импортируем все классы, расположенных в том же swc. Это легко проверить, удалите из Library один из добавленных компонентов и попробуйте снова скомпилировать приложение, результаты вызовов trace останутся неизменными. В этом случае, если в состав вашего swc входит библиотека классов, не являющихся компонентами как таковыми, то более красивым решением будет создание пустого класса, своим названием характеризующего обшие задачи библиотеки. Скажем, если в swc расположена библиотека классов логгинга, то общий класс может называться LoggingClasses или что-нибудь в этом роде, и именно его следует указать в качестве единственного компонента входящего в swc.
Что касается создания визуальных компонентов для Flash CS3 силами Flex SDK, здесь, к сожалению, не могу дать каких либо полезных замечаний. Единственный известный мне способ создания таких компонентов — использование Flash IDE и класса fl.livepreview.LivePreviewParent. Если, кто-то знает решение обозначенной задачи, милости прошу в комментарии.
Ну и наконец, тем из вас, кто дожил до этих строк и кому представленного материала показалось мало или остались вопросы, несколько ссылок по теме:
Майк Чемберз в своем блоге напоминает нам, что на сайте Adobe.com в разделе «Adobe CS3 Video Workshop» имеется целая тонна обучающих видеоматериалов, о которых почему-то все постоянно забывают. По одному Flash CS3 Professional только 34 урока!
В общем, владельцы быстрых интернет-каналов могут воспользоваться этими видеоуроками, чтобы подтянуть свои знания, в той или иной области, касающейся Flash CS3.
Ну а вообще, это довольно неплохая идея — изучать что-то, просматривая видеоуроки по этой теме. Лично я изучал Flex 2 по видеокурсу с сайта Lynda.com. Все было очень доходчиво и понятно. А главное, я сэкономил кучу времени на обучении. Попробуйте, может и вам понравится.
