Создание библиотеки ресурсов (swc) с помощью compc
Запись от ps_spectre размещена 02.02.2011 в 20:03
Итак, у нас стоит задача создать библиотеку (swc) ресурсов (картинки, звук), не используя при этом FlashIDE.
Для этого нам понадобится FlexSDK в котором есть компилятор компонентов compc, вот его мы и будем использовать.
Рассмотрим пример:
у нас есть набор файлов Image 1.png .. Image N.png, Sound1.mp3 .. SoundN.mp3, мы хотим их включить в свик файл, чтобы потом использовать в проекте.
Первый вариант — мы можем написать класс, который будет хранить в себе ссылки на связанные классы с ресурсами.
Создаем класс GraphicAssets.as (класс находится в том же каталоге где и картинки)
package { public class GraphicAssets { [Embed(source="image 1.png")] public static var Image1:Class; [Embed(source="image 2.png")] public static var Image2:Class; [Embed(source="image 3.png")] public static var Image3:Class; .... [Embed(source="image N.png")] public static var ImageN:Class; public function GraphicAssets() { } } }
(в Windows7 это можно сделать так: start -> Control Panel -> System -> Advanced System Settings -> Advanced -> Environment Variables -> system variables -- Path, дописываем туда путь, например c:\flexSDK\flex_sdk_4.5.0.18623\bin;)
(мы в каталоге где Image1.png .. ImageN.png и созданный только что класс GraphicAssets.as)
комилируем, вызывая компилятор и передавая параметры:
Код:
compc -sp . -ic GraphicAssets -output lib.swc
-ic какие классы включать (включаем наш созданный GraphicAssets.as, указывая только его имя)
-output lib.swc имя библиотеки, которую получим после компиляции.
на выходе получаем swc файл с нашими картинками
использовать в коде (после того как залинковали библиотеку)
var b1:Bitmap = new GraphicAssets.Image1(); addChild(b1); var b2:Bitmap = new GraphicAssets.Image2(); b2.x = b2.y = 100; addChild(b2); .... или так var b3:Bitmap = new GraphicAssets_Image3();
откуда взялся GaphicAssets_ImageX ?
Рассмотрим процесс компиляции более подробно.
Во время компиляции флекс автоматически разворачивает конструкции подобного вида:
в отдельный класс: (это можно посмотреть с помощью указания ключа компилятору -keep, тогда создастся каталог generated, в котором будет список автоматически созданных классов)
generated/Graphics_Image1.as
package { import mx.core.BitmapAsset; [ExcludeClass] [Embed(_resolvedSource="%PATH%/image 1.png", _column="3", source="image 1.png", exportSymbol="GraphicAssets_Image1", _line="5", _pathsep="true", _file="%PATH%/GraphicAssets.as")] public class GraphicAssets_Image1 extends mx.core.BitmapAsset { public function GraphicAssets_Image1() { super(); } } }
public class Graphics { public static var Image1:Class = Graphics_Image1; public static var Image2:Class = Graphics_Image2; public static var Image3:Class = Graphics_Image3; public static var Image4:Class = Graphics_Image4; public function Graphics() { } }
Раз флекс создает классы GraphicAssets_Image1 .. GraphicAssets_ImageN , то зачем нам в коде свой класс, который хранит ссылки на эти классы?
К тому же, при автоматической генерации классов флекс наследует их от своего класса mx.core.BitmapAsset, а не напрямую от flash.display.Bitmap
отсюда следует тот факт, что при компиляции библиотеки попадают с десяток лишних классов из флекс_фреймворка (mx.core.*, mx.utils.*) (8 классов, если быть точным)
тоже самое звук он наследует от mx.core.SoundAsset
Отсюда мы переходим к другому варианту
На каждый файл ресурса (.png, .jpg, .mp3) будем создавать по отдельному классу:
Image_1Png.as
package { import flash.display.Bitmap [Embed(source="image 1.png")] public class Image_1Png extends Bitmap { public function Image_1Png() { } } }
Image_1Png.as
package { import flash.display.BitmapData [Embed(source="image 2.png")] public class Image_2Png extends BitmapData { public function Image_2Png(width:Number=0,height:Number=0) { super(width,height); } } }
на звуковые файлы точно так же создаем свой класс:
Sound1Mp3.as
package { import flash.media.Sound; [Embed(source="sound1.mp3")] public class Sound1Mp3 extends Sound { public function Sound1Mp3() { } } }
Плюс следует в том, что флекс не будет пихать свои классы, т.к. мы явно наследуемся от родных классов (Bitmap, Sound, BitmapData)
И у нас не будет общего класса со всеми ссылками. (может это и не плюс)
Так же если у нас есть подкаталоги, то мы можем явно писать package
Теперь нам осталось это все добро с компилировать. (сейчас у нас кол-во ресурсов == кол-во классов)
Есть несколько вариантов
в командной строке с ключем -ic перечисляем все наши классы, или создать конфиг файл в котором перечислим их.
Например создаем файл config.xml
Код:
<?xml version="1.0"?> <flex-config> <compiler> <source-path> <path-element>.</path-element> </source-path> </compiler> <include-classes> <class>Image_1Png</class> .. <class>Image_NPng</class> .. <class>Sound1Mp3</class> .. <class>SoundNMp3</class> </include-classes> </flex-config> <compiler> <source-path> <path-element>.</path-element> </source-path> </compiler>
в секции <include-classes> явно перечисляем классы, которые хотим включить (у нас на один ресурс -- один класс)
алиас: -ic
(package явно надо указывать
если у нас есть папка assets в ней папка icons, в ней класс Icon1.as у которого package assets.icons { }, тогда
<class>assets.icons.Icon1</class>
)
другой вариант, мы можем указать компилятору путь к исходникам, которые надо обазятельно включить (<include-sources>) (полностью включить)
config.xml
Код:
<?xml version="1.0"?> <flex-config> <compiler> <source-path> <path-element>.</path-element> </source-path> </compiler> <include-sources> <path-element>.</path-element> </include-sources> </flex-config>
Работает это следущим образом, флекс видить путь откуда начинать искать (в<include-sources>, мы там указали текущий путь , где мы находимся) и начинает включать все классы которые найдет. (если есть лишнии классы, которые не мы создавали для наших ресурсов, то он и их подхватит, все классы которые найдет включит)
Выбираем подходящий вариант и компилируем следущим образом
Код:
compc -load-config+=config.xml -output lib.swc
-load-config указывает на то, какой конфиг подгружать , += надо для того, чтобы стандартный конфиг файл флекс загрузил (находится в %flexsdk_path%/frameworks/flex-config.xml)
на выходе получаем swc файл в котором зашиты наши ресурсы.
Использовать в коде стандартно, для любого swc:
var bd:Bitmap = new Image_1Png();
Компиляция из командной строки без конфиг файла
Код:
compc -sp . -is . -output lib.swc
Код:
<include-sources> <path-element>.</path-element> </include-sources>
Точно так же мы можем скомпилировать не только наши ресурсы, а, например, Flixel: (2д блитинг движок)
качаем исходники, распаковуем в папку flixel, заходим в нее (в ней будет каталог org -flixel - *.as)
(или git clone git://github.com/AdamAtomic/flixel.git)
c:\flixel>compc -sp . -is . -output flixel.swc
если распаковали исходники, но в папку не зашли, тогда указываем не текущий путь откуда начинать, а название каталога
(если мы в текущей папке, в которой есть другие, например flashPunk, flixel, ... )
c:\>compc -sp flixel -is flixel -output flixel.swc
так же путь можно абсолютный задавать.
Более детально compc -help
------------------
Мы рассмотрели два основных подхода создания библиотеки с картинками/звуками с помощью compc.
Но такие задачи всегда лучше автоматизировать.
Например использовать java ant + flex ant.
Или написать свой скрипт, который будет генерить все это добро.
Я написал небольшой скрипт на питоне (gswc.py), который работает следущим образом:
начиная с текущего каталога ищет файлы .png, .jpg., .mp3 , создает рядом такой же файл .as с классом куда внедряет ресурс (второй подход выше рассмотренный)
подкаталоги учитываются (в подкаталогах создается класс , в котором указан package subfolder1.subsubfolder1... )
потом создается config.xml куда перечисляются все созданные классы, вызывается compc которым компилит все это добро, а дальше подчищаем за собой.
для правильной работы скрипта необходимо чтобы путь в системных переменных был указан до флекс_сдк/bin, где лежит compc. (если из cmd написать compc в любом месте и это работает, то путь уже прописан)
или в исходниках указать абсолютный путь где лежит compc.
я у себя положил скрипт в тот же каталог где compc (флекс/бин) , и вызываю с любого места набирая имя gswc.py.
дополнительные параметры:
-a : не добавлять расширения в имя класса (Image1PNG.as vs Image1.as)
-b : вставлять картинки как битмапДату
-o <swc_name.swc> : имя библиотеки, по-дефолту assetLibrary.swc
-t : не подчищать за собой временные файлы
обычный вызов: gswc.py
вызов с параметрами: gswc.py -a -b -o lib.swc -t
проверялось на питоне 2.6 и flex_sdk 4.5.
p.s. не забываем, что swc это архив, в котором .swf + catalog.xml.
p.p.s. во вложение картинка, которая показывает результат.
Всего комментариев 8
Комментарии
03.02.2011 00:01 | |
Отличный материал! печатать и вникать)
Давно было желание попрактиковаться в создании swc-библиотек, но думал, что без Flash IDE не обойтись. |
03.02.2011 00:49 | |
Цитата:
но думал, что без Flash IDE не обойтись
|
03.02.2011 02:25 | |
http://sourceforge.net/projects/exportswc/
Скачать и закинуть его C:\Program Files\FlashDevelop\Plugins , и там запустить , рестартануть FD и в панели появится кнопка , сразу генерит swc и asdoc. |
03.02.2011 02:34 | |
Это прекрасно, что есть такие плагины. Но иногда докопаться до сути вещей куда приятнее, чем делать всё одной кнопкой.
Статью ещё не читал, но заранее спасибо. Тема интересная. |
Последние записи от ps_spectre
- Используем фичи flash player 10.2 или 11.0 во FlashIDE CS5 (08.03.2011)
- mxmlc: подключение внешней библиотеки (external library) (04.02.2011)
- Создание многокадровой флешки с помощью mxmlc (03.02.2011)
- Создание библиотеки ресурсов (swc) с помощью compc (02.02.2011)