a_[w] блог

Среди flash разработчиков уже, наверно, нет тех, кто ещё не сталкивался с компонентами. Сейчас существуют сайты, компании продающие тонны компонент на разные темы и много людей ими пользуются. И есть относительно немного людей, которые пишут эти самые компоненты и знают нюансы их написания. Я, как разработчик компонент, когда то писал статью для начинающих по этой теме, но меня опередил замечательный и всеобъемлющий цикл статей по написанию компонент для Flash CS3, на adobe.com. Это пособие распространялось внутри компании, и было написано достаточно сухо. Сейчас в сети продолжают появляться вопросы по этому поводу, и я решил дополнить статью и выложить, может, кому то поможет разъяснить некоторые моменты разработки.

Мета-теги
LivePreview mode
Компиляция
SWC+MXI = MXP
Пример

Для Flash CS3 существует два типа компонент – визуальные и не визуальные, отличаются они тем, что визуальные компоненты производные от класса flash.display.Sprite и при добавлении на сцену сохраняются там и после компиляции проекта они отображаются там, где вы их оставили. Не визуальные компоненты нужны для каталогизации группы классов объедидённых одной целью. Конечно можно создавать компоненты с несколькими такими группами - целые наборы мини библиотек. Такие компоненты тоже можно, в среде разработки, добавлять на сцену, но после компиляции от них ничего не останется, кроме, конечно, классов в библиотеке. Не визуальный компонент используется просто как библиотека классов и очень удобна в использовании, особенно в тех случаях, когда не хочется делиться прелестями реализации в исходном коде, с кем либо.

Сам компонент – SWC файл, представляет собой переименованный ZIP архив, содержащий в себе, как минимум, два файла – catalog.xml с описанием компонента, находящихся в нём классов и library.swf – SWF файл, содержащий скомпилированный код компонента. В этом пакет может находится любое количество файлов, но обычно там ещё находятся PNG иконка, отображаемая для компонента в IDE и livepreview.swf – LivePreview SWF файл отображаемый в IDE вместо компонента. Имена файлов, кроме файла catalog.xml, могут быть любыми, а назначение файла можно узнать, прочитав catalog.xml - в этом XML файле содержится вся информация о компоненте и об используемых файлах и классах.

Получить доступ к исходному коду компонента можно, так же как и к коду любого другого SWF файла, нужно только разархивировать SWC файл и скормить SWF файл компонента декомпилятору. Каких либо средств защиты SWC файлов не предусмотрено (Flash CS3 использует SWC версии 1.0).

У Flash компонента, как библиотеки классов, есть одна важная особенность - при компиляции, компонент проходит проверку на существование более новых классов из подключенных к среде источников. Если такой класс находится, то он вкомпиливается в проект вместо класса находящегося в SWC файле. Свежесть класса находящегося в компоненте указывается в файле catalog.xml с помощью атрибута mod, в формате Unix timestamp. Так же, классы, находящиеся в SWC файле можно расширять, но при этом нужно точно указывать строку импорта – до имени класса и забыть о модификаторе "*", к примеру:

// правильно
import my.component.net.SomeStream;
import my.component.net.SomeLoader;
import my.component.net.SomeRequest;
import my.component.net.SomeConnection;
import my.component.net.SomeLoaderDataFormat; 
 
// неправильно
import my.component.net.*;

Как бы это странно не звучало, но у Flash CS3 нет возможности создавать не визуальные компоненты – только визуальные, т.е. те, что можно создать с помощью его интерфейса – производные от flash.display.Sprite. А во Flex SDK нельзя "напрямую" создать визуальный компонент для Flash CS3, он будет добавляться на сцену, как и любые другие компоненты, но после компиляции просто исчезнет со сцены, как любой нормальный не визуальный компонент. Но визуальные компоненты, скомпилированные Flex SDK, нормально функционируют, если их использовать в коде:

import my.component.Component;
this.addChild(new Component());

Как всегда, есть обходные шаги:

• Во Flash CS3 можно задать символ компонента и в его классе определить переменные с типами, которые нужно импортировать в компонент. На самом деле, есть ещё способы импортировать классы в SWF файл, но я всегда использую переменные и константы.

public class FakeComponent extends Sprite{
	static public const REAL_COMPONENT1:NonVisualComponent1;
	static public const REAL_COMPONENT2:Class = NonVisualComponent2;
	NonVisualComponent3;
    public function FakeComponent():void{...
}

• Во Flex SDK можно создать визуальный компонент, но только при условии, что вы его не сможете добавлять на сцену в Design mode при работе с IDE или не будете использовать Flash CS3.

И в обоих случаях советую вам добавить демонстрационный SWF файл для отображения в LivePreview mode, которая будет говорить пользователю, что компонент достаточно добавить в библиотеку(или типа того).

У каждого Flash компонента должен быть основной класс, предоставляющий API компонента. Есть масса способов предоставить API не как простые свойства основного класса, но обсуждаться здесь они не будут. Основной класс компонента, требует особенного, бережного отношения. Обычно объекты этого класса единственный способ достучатся до настроек компонента, поэтому через него нужно давать максимум рычажков для управления компонентом. Тем более, только его свойства, отмеченные мета-тегом Inspectable, будут отображаться в IDE, как редактируемые свойства в панели Component Inspector.

Написание класса компонента отличается дополнительным набором опций, вставляемых в класс. Они называются мета-тегами и их написание требует соблюдения определённых правил, таких как, очерёдность написания и позиция в коде класса. Мета-теги не обязательные условия класса компонента и не существует мета-тега без которого ваш компонент не будет работать. Но они сообщают среде разработки и компилятору о дополнительных особенностях компонента, как например, список изменяемых свойств, их типы и значения по умолчанию.

Мета-теги, как правило, используются для добавления информации или описания сущностей (класс, метод, свойство). Все мета-теги описываются в контейнерах – внутри квадратных скобок и ставятся почти всегда перед сущностью. Если для сущности нужно объявить несколько мета-тегов, они идут один за другим, в любой последовательности, перед объявлением сущности. Каждый мета-тег описывается приблизительно так:

[Имя мета-тега(параметры через запятую)]
Пример:
[InspectableList("param1", "param2", "param3")]

В компонентах для Flash CS3, в основном, используется несколько типов мета-тегов.

Inspectable

Используется для задания параметра используемого в Flash CS3, для того чтоб позволить изменять его значение через панель Component Inspector/Properties.
Можно использовать примитивные типы, как значения параметров – Number, String, Array, Object.

Пример:

[Inspectable(type="Number",defaultValue="32")]
public function set distance(p:Number):void{
…
}
[Inspectable(type="String",defaultValue="Blur")]
public function set defaultFilter(p:String):void{
…
}
[Inspectable(type="Array",defaultValue="value1,value2,value3,value4")]
public function set items(p:Array):void{
…
}
[Inspectable(type="Object",defaultValue="fill:true,fillColor:0xffffffff,stroke:true,strokeColor:0x000000ff,strokeThickness:1")]
public function set style(p:Object):void{
…
}

Существуют ещё другие типы, с которыми работает мета-тег, к примеру List, он отличается от Array тем, что его значения не может изменять пользователь, можно только выбрать один из вариантов:

[Inspectable(type="List",defaultValue="value1,value2,value3,value4" ,listOffset=1)]

Тип задаётся с помощью параметра type, а значение по умолчанию - с помощью defaultValue.

Пример:

[Inspectable(type="String",defaultValue="adobe.com")]
public function set site(p:String):void{
…
}

Для каждого параметра можно задать собственное имя, отличное от имени свойства класса. Это нужно для того чтоб отделить свойства, работающие с примитивными и сложными типами.

Пример:

public function set url(p:URLRequest):void{
…
}
[Inspectable(name="url",type="String",defaultValue="")]
public function set urlUI(p:String):void{
	this.url = new URLRequest(p);
}

InspectableList

Необходим для отсеивания заранее прописанных параметров с помощью мета-тега Inspectable. К примеру, ваш класс наследуется от UIComponent, у которого заранее определён параметр visible. Если вам нужно, чтоб этот параметр не отображался в списке параметров Component Inspector’а, нужно просто не включить в список параметров определяемых этим мета-тегом. Данный мета-тег ставится непосредственно перед определением класса.

Пример:

[InspectableList("content","type","padding")]
public class SomeComponent extends UIComponent{…

В Component Inspector будут добавлены только параметры content, type и padding.

IconFile

Путь к файлу изображения(PNG 18x18) используемого, как иконка компонента, отображаемая в списке компонент и в библиотеке проекта. Этот мета-тег добавляется перед объявлением класса, как и InspectableList.

import fl.core.UIComponent;
[IconFile("путь к файлу иконки компонента")]
class SomeComponent extends UIComponent{...

Collection

Специальный мета-тег заменяющий тег Inspectable, если нужно воспользоваться особым, сложным типом данных. Для использования данного тега должно быть заранее определено два класса – класс коллекции и класс её элементов. Компонент получит в свойство объект класса коллекции с добавленными в неё элементами коллекции. В таком случае нужно соблюдать два правила:

1. Класс коллекции должен содержать определенные методы, предоставляющие возможность добавлять и удалять элементы. Имена их известны и неизменны (лучше заранее определить интерфейс для данного случая). Для стандартных ActionScript 2 компонент уже определён класс отвечающий за эту возможность - mx.utils.CollectionImpl.
2. Класс элемента коллекции должен содержать любое количество свойств, отмеченное мета-тегом Inspectable, чтоб IDE знала какие свойства можно изменять.

[Collection(collectionClass="имя класса коллекции", collectionItem="имя класса элемента коллекции ")]

Вот, как будет выглядеть добавление элементов в коллекцию:

Как видите, очень простой интерфейс и, в отличие, от обычной складки Properties, нет удобств, как выпадающий список, колор селектор, чекбокс – все свойства просто имеют текстовое поле, в которое можно вводить любой текст. Подобная панель отображается и при редактировании массива или объекта (и особенно раздражает, что нельзя изменять её размер). И именно это обстоятельство я считаю наиболее ущербным в данном случае, т.к. пользователь может делать кучу ошибок при вводе значений констант, даже в true/false.

Мета-теги, это вотчина Flex, а Flash лишь немного позаимствовал и если вы не планируете всю свою сознательную жизнь использовать исключительно Flash CS3, то рекомендую ознакомиться со всеми мета-тегами(энтузиасты каждый день раскапывают новые, не описанные мета-теги из исходников Flex фреймворка). А вот то немногое, что смог перенять Flash CS3(документ относится к ActionScript 2, но документов указывающих на отличия с AtionScript 3 я не нашёл).

Функция LivePreview mode заключается в отображении актуального состояния компонента. Этот режим работает только во время работы с FLA файлом в IDE и к работе скомпилированной программы отношения не имеет. Когда вы добаляете компонент на сцену, в его область автоматически загружается SWF файл из пакета SWC файла, указанная в файле catalog.xml атрибутом preview, которая умеет принимать указания, т.е. необходимые параметры от среды разработки и отображать их действие на компонент.

Как правило, LivePreview SWF файл запускается в прозрачной среде, без фона и с частотой обновления 1000 кадров в секунду (изменение значения этой частоты вряд ли вам чем-то поможет). Причём после каждого обновления параметров отображается всего один кадр LivePreview т.е. происходит всего одно событие Event.ENTER_FRAME. Так что операции требующие времени, работающие с внешней средой, такие как загрузка данных извне, отобразить не получится.

Обновление параметров происходит через ExternalInterface. Наилучший способ получить параметры из Flash IDE, это использовать класс fl.livepreview.LivePreviewParent, как DocumentClass для LivePreview mode. Этот класс поставляется с исходниками стандартных Flash компонент и является прокладкой между запущенным LivePreview SWF файлом и Flash IDE. Его действие заключается в том, что он принимает данные по интерфейсу ExternalInterface, обрабатывает их (приводит в "нормальное состояние" т.к. из Flash IDE он принимает обычный массив с чередующимся именем и значением параметра) и применяет к компоненту по имени параметра.

При изменении размера LivePreview всё происходит по другой схеме - LivePreviewParent проверяет у символа компонента наличие метода setSize и если таковой имеется, то параметры размера (высота и ширина) применяются к этому методу, если же такого метода нет, то значения высоты и ширины применяются к параметрам width и height, соответственно.

LivePreviewParent ещё в конструкторе пытается получить доступ к символу находящемуся на нулевой глубине основной временной шкалы, этот символ и будет использован для применения параметров т.е. для того, чтоб обеспечить взаимодействие между символом LivePreview и классом LivePreviewParent, нужно первый добавить на рабочую область, а второй сделать классом документа т.е. root(Main Timeline). LivePreview символ уже в конструкторе имеет доступ к свойствам DisplayObject.stage, DisplayObject.root и DisplayObject.parent, но лучше сделать проверку (на всякий случай):

protected function initialize():void{
if(this.stage) this.addedToStageHandler();
else this.addEventListener(Event.ADDED_TO_STAGE, this.addedToStageHandler);
}
protected function addedToStageHandler(e:Event=null):void{
…
}

Получив доступ к родительскому символу можно узнать, является ли он LivePreviewParent’ом:

if(this.parent is LivePreviewParent){…

Но в стандартном fl.core.UIComponent выполняется подобная проверка, а результат, в виде логического значения, записывается в защищённый параметр isLivePreview. Если вы захотите улучшить класс LivePreviewParent, то вам нужно учитывать, что в UIComponent проверка на режим LivePreview происходит таким образом:

if(getQualifiedClassName(this.parent)=="fl.livepreview::LivePreviewParent")…

Скорее всего, такой вид проверки был сделан для того чтоб, избежать постоянного вкомпиливания класса LivePreviewParent везде где используется UIComponent.
Но такая проверка при расширении класса LivePreviewParent работать не будет, поэтому лучше после вызова суперконструктора сделать повторную проверку в виде:

if(this.parent is fl.livepreview.LivePreviewParent)…

Или использовать предыдущий вариант, но заменить имя класса на необходимое.

При переносе исходных файлов компонента каждый раз проверяйте путь к LivePreview в панели Component Definition на соответствие, либо задавайте относительный путь.

Кроме LivePreview файла можно к компоненту ещё добавить особый интерфейс для задания свойств компоненту, заменяя интерфейс вкладки Properties. Я не пробовал создавать подобные вещи, поэтому ничего не могу рассказать об этом. Вообще, компоненты, это мутировавшие SmartClip из Flash 5 и некоторые особенности их создания улучшились и совершенствовались, а некоторые так и застряли на том же уровне. Custom Properties panel можно добавить к компоненту в панели "Component definition", указав путь в "Custom UI".

Для Flash IDE

Идеально подходит для создания визуальных компонент для использования в этой же среде разработки. У меня не получилось с помощью Flash IDE создать не визуальный компонент, т.е. в любом случае должен присутствовать класс наследуемый от DisplayObject, к которому будет подвязано всё остальное. В такой способ, можно конечно обмануть среду и создать класс пустышку, наследуемый от Sprite и в нём объявить классы, которые необходимо вкомпилить в библиотеку.

Для создания компоненты на основе стандартных, нужно описать основной класс компоненты, расширяя базовый класс стандартных компонент UIComponent. Можно, конечно и не расширять UIComponent, но в таком случае вы теряете массу полезностей и гарантию на совместимость с другими компонентами. Далее следует создать FLA файл и внутри создать символ типа MovieClip (UIComponent расширяет MovieClip). В библиотеке для созданного символа задать Linkage - указать класс компонента, а внутри компоненты нужно нарисовать прямоугольник, по площади которого будет определяться начальный размер компонента.

Внутри символа можно рисовать всё что угодно (не преобразовывая в символ) т.к. UIComponent при инициализации отчищает связанный с ним объект Graphics.

Далее, там же в библиотеке, следует задать Component Definition(правый клик по символу). Там нужно повторно указать класс компонента, путь к файлу LivePreview, иконку компонента(квадратная кнопка под "Description") и дополнительные установки компонента. Параметры компонента устанавливать не стоит – они все будут взяты из класса с помощью заранее установленных мета-тегов Inspectable. После каждого обновления LivePreview для компонента желательно перегружать Flash IDE, чтоб "дать забыть" Flash IDE о предыдущей версии LivePreview.

Для того чтоб получить готовый SWC файл, необходимо из библиотеки сохранить символ как SWC файл(Export SWC file…) . После обновления классов следует обновить Component Definition, для этого откройте окошко Component Definition и нажмите кнопку "Ok". Если вы всё сделали правильно, то Flash IDE подхватит новые параметры и отобразит их в Component Inspector.

Перед компиляцией советую зайти в панель Component Definition и лишний раз указать, где находится иконка т.к. Flash CS3 далеко не вегда её видит и частенько о ней забывает, даже с указанием её через мета-тег IconFile.

Для Flex SDK

Нужно установить последнюю версию Flex SDK и Flex 2.0.1 patch for Flash CS3 для обеспечения совместимости SWC файлов с Flash CS3. Далее нужно

1. Cоздать файл manifest.xml(имя файла, на самом деле, не имеет значения), приблизительно такого содержания:

<?xml version="1.0" encoding="utf-8"?>
<componentPackage>
   <component
       id="Название компонента"
       class="Класс компонента"
   />
</componentPackage>

2. Скомпилировать нужные файлы, такие как LivePreview версия компоненты
3. Создать SWC файл с помошью такой команды:

c:\путь к компилятору\compc -source-path с:/.../ActionScript3/ . -namespace org.guibuilder.Skin с:/.../manifest.xml -include-namespaces org.guibuilder.Skin -output с:/.../Component.swc -include-file livepreview.swf с:/.../livepreview.swf -include-file icon.png с:/ .../icon.png

Обратите внимание, что при указании параметров используются обычные слеши в путях к файлам, а не обратные, как в DOS. Это облегчает понимание путей для Flex SDK и избавляет вас от лишнего геморроя при использовании длинных путей к файлам.

Используемые параметры:

• source-path - Пути к необходимым файлам через пробел.
• namespace - Пространство имён создаваемого компонента и путь к файлу настроек компонента задаваемые через пробел.
• include-namespaces - Позволяет включить класс в сборку.
• output - Путь по которому будет создан конечный файл.
• include-file – Опция позволяет включить файл в сборку. Указывается путь внутри SWC файла и исходный путь(откуда брать), через пробел. Стоит обратить внимание, что эта опция принимает сначала значение результата, а потом исходное значение.
• compute-digest – для Flex SDK 3.0 и выше, нужно задавать как false, для Flex SDK 2.* не указывать. Проблема в том ,что Flex SDK 3.0 использует SWC версии 1.2, а Flash CS3 использует 1.0 и нововведения в 1.2 помешают Flash CS3 распознать библиотеку.

4. Переименовать получившийся файл изменив его расширение на .zip. Распаковать или открыть и отредактировать находящийся внутри файл
   catalog.xml. Необходимо добавить два атрибута в тег <component/> - icon и preview.

Было:

  <components>
    <component className="имя класса" name="имя компонента" uri="пространство имён"  />
  </components>

Стало:

  <components>
    <component className="имя класса" name="имя компонента" uri="пространство имён" icon="путь к иконке" preview="путь к LivePreview файлу"/>
  </components>

Обратите внимание, что используются пути относительно корня архива:

<component className="Class" name="Component" uri="urn:uri-namespace" icon="icon.png" preview="livepreview.swf"/>

Эти атрибуты указывают среде разработки, какую иконку отображать и какой файл использовать, как LivePreview.

Далее нужно создать MXI файл, как описание компонента и с помощью Adobe Extension Manager создать установочный пакет компонента.

Ссылки по теме:
Beginners Guide to Getting Started with AS3 (Without Learning Flex)
Сборка Flex-приложений с помощью Ant
Компиляция совместимых с Flash CS3 swc-библиотек с помощью Flex 3 SDK
Compiling components with Flex SDK
Using the Flex Compilers
Building an SWC library using the Flex 3 SDK

Чтоб распростанять компонент, его необходимо ещё раз запаковать(первый раз, это сам SWC файл) в MXP файл. Этот файл является своего рода установочным файлом для Extension Manager. Кстати, он вам тоже понадобится, чтоб создавать такие файлы и устанавливать их. Вполне возможно, что он уже установлен, если у вас уже есть на компьютере Flash CS3.

Для создания полноценного компонета, который уже можно распространять, необходим сам компонент(SWC файл) и описание компонента в виде MXI файла – XML файл с определённой структурой.

<macromedia-extension name="Название компонента" version="2.0.1" type="flashcomponentswc" requires-restart="true">
	<author name="Автор" />
	<description>
		<![CDATA[Описание компонента]]>
	</description>
<products>
<product name="Flash" version="9" primary="true" required="true"/>
	</products>
	<ui-access>
		<![CDATA[Описание действий заставляющих работать компонент]]>
	</ui-access>
	<files>
		<file source = "Component.swc" destination="Путь установки"/>
	</files>
</macromedia-extension>

В теге <macromedia-extension/> параметр name содержит название компонента. В теге <author/> параметр name содержит имя автора. Тег <description/> содержит описание компонента отображаемое в Extension manager. Тег <ui-access/> содержит описание выполняемых действий для использования компонента отображаемое в Extension manager. Список <files/> определяемый список Файлов добавляемых в пакет. Каждый файл описан своим узлом <file/> в котором атрибут source указывает на исходный файл, а атрибут destination – куда этот файл копировать при установке. В атрибуте destination можно использовать ссылки, к примеру $flash указывает на папку данных Flash IDE. При указании пути к файлу следует использовать обычные слешы, а не обратные, как принято в Windows:

<files>
	<file source = "component.swc" destination = "$flash/Components/во_избежание_коллизий_категорией_компонента_обычно_указывают_автора_или_компанию"/>
</files>

Дерево папок внутри папки Components точно отображается в панели Components. Для более полных сведений обращайтесь к спецификации формата MXI. Для того, чтоб создать MXP пакет, нужно открыть Extension Manager и в меню выбрать File --> Package Extension… в диалоге выбора файла указать нужный MXI файл, а потом указать куда сохранять готовый пакет.

Ещё следует обращать внимание на имя файла – оно остаётся неизменным и если в папке для копирования уже содержится SWC компонент с таким именем файла, то будут коллизии и Extension Manager обязательно об этом сообщит (сам он переименовывать ничего не будет). Так, же учитывайте, что если компилировать с помощью Flash CS3, то имя компонента, отображаемое в панели Components, будет взято из названия символа в библиотеке, поэтому нужно везде указывать одно и то же имя.

В этом примере попробую наглядно разъяснить всё вышеописанное. Для начала опишем классы компонента. Очень важно, чтоб экземпляры компонента можно было создавать визуально (перетаскиванием из панели Components) и с помощью кода, к примеру:

var component:Component = new Component({width:100, height:100});

Учтите, что вариант с кодом будет работать только в случае наличия компонента в библиотеке FLA файла. Все добавленные в библиотеку компоненты будут добавлены в конечный SWF файл. Скажем, у нас уже есть все готовые классы проекта и осталось из всего этого сделать компонент.

package com.afcomponents.test{
	import fl.core.*;
	import flash.utils.*;
	import flash.events.*;
	import flash.display.*;
	public class Component extends UIComponent{
		protected var _tlColor:int = 0x000000;
		protected var _color:int = 0x0000ff;
		protected var _wpart:Number = 10;
		protected var _hpart:Number = 10;
		public function Component(size:Object=null):void{
			super();
			addEventListener(Event.ADDED_TO_STAGE, onStageAdded);
			if(size){
				if(!isNaN(Number(size.width))) this.width = size.width;
				if(!isNaN(Number(size.height))) this.height = size.height;
				if(!isNaN(Number(size.color))) this.color = size.color;
				if(!isNaN(Number(size.tlColor))) this.tlColor = size.tlColor;
			}
		}
		public function set tlColor(p:Number):void{
			this._tlColor = p;
			this.invalidate();
		}
		public function get tlColor():Number{
			return this._tlColor;
		}
		public function set color(p:Number):void{
			this._color = p;
			this.invalidate();
		}
		public function get color():Number{
			return this._color;
		}
		override protected function draw():void{
			var g:Graphics = this.graphics;
			var hp:Number = this._height-this._hpart;
			var wp:Number = this._width-this._wpart;
			g.clear();
			g.beginFill(this._tlColor, 100);
			g.drawRect(0, 0, this._wpart, this._hpart);
			g.endFill();
			g.beginFill(this._color, 100);
			g.drawRect(wp, 0, this._wpart, this._hpart);
			g.drawRect(wp, hp, this._wpart, this._hpart);
			g.drawRect(0, hp, this._wpart, this._hpart);
			g.endFill();
		}
		protected function onStageAdded(e:Event):void{
			this._tlColor = 0xff0000;
			this.invalidate();
		}
	}
}

Этот класс наследуется от UIComponent просто для наглядности. После каждого изменения любого свойства вызывается метод UIComponent.invalidate, который в свою очередь, делает вызов Component.draw. В конструкторе я добавил слушатель на событие добавления на сцену, так можно будет видеть, в каких случаях он срабатывает, а в каких – нет.

Не забудьте указать как источник папку, в которой находятся исходные файлы стандартных компонент. Как правило, они находятся в папке:

C:\Program Files\Adobe\Adobe Flash CS3\en\Configuration\Component Source\ActionScript 3.0\User Interface

Добавить можно и такой путь:

$(AppConfig)/Component Source/ActionScript 3.0/User Interface

Сейчас экземпляры этого класса/компонента можно создавать с помощью кода:

import com.afcomponents.test.*;
var component:Component = new Component({width:100, height:100, color:0x00ff00, tlColor:0xff0000});
addChild(component);

И получить:

Как видите, левый верхний квадратик красный, как и должно, быть при срабатывании Event.ADDED_TO_STAGE. Теперь нам нужно указать параметры, отображаемые в Component Inspector. Я укажу их с помощью мета-тегов:

[Inspectable(name="TL Corner Color",type="Color",defaultValue="#00ff00")]
public function set tlColor(p:Number):void{
...
[Inspectable(name="Color",type="Color",defaultValue="#000000")]
public function set color(p:Number):void{
...

Теперь нужно создать FLA файл и в нём создать символ(Ctrl+F8) типа MovieClip. В свойствах Linkage нужно задать его классу произвольное (или производное) имя, а базовым классом указать com.test.Component. Теперь следует определить начальный размер компонента, для этого войдите в символ и создайте в нём прямоугольник от начала координат (или создайте, а потом выровняйте его по верхнему левому краю). Учтите, что толщина линии тоже влияет на размер, как в случае DisplayObject.getBounds().

Теперь перейдите в библиотеку и в контекстном меню символа компонента вызовите "Component definition…". Пока что вам нужно просто указать класс компонента com.test.Component и нажать Ok. После этого ваш символ должен был сменить значок на значок компонента, а тип символа должен измениться на "Component". Теперь откройте опять это окошко, и вы должны будете увидеть, что IDE уже прочитала все параметры и внёсла их в таблицу параметров.

Как видите, все нужные параметры были добавлены с указанными значениями по умолчанию. Но были добавлены и другие параметры, которые были указаны ранее, в UIComponent. Мы можем их отключить, с помощью InspectableList, указав только необходимые параметры.

[InspectableList("tlColor", "color")]
public class Component extends UIComponent{…

При следующем открытии этого окна получим:

Теперь можете попробовать добавить компонент на рабочую область. Но сейчас вы увидите только закрашенную область и не более. Для того чтоб отображалось актуальное состояние компонента (размер и цвет, в нашем случае), необходимо создать для него LivePreview.

Создайте FLA файл(или скопируйте существующий) и в Document сlass укажите fl.livepreview.LivePreviewParent. Далее необходимо скопировать символ будущего компонента из предыдущего FLA файла и поместить его на рабочую область, выровнять по верхнему левому краю и откомпилировать. Тут очень важным моментом является то, что вы можете задать любой класс для LivePreview, вы можете создать отдельный набор классов, работающий исключительно как LivePreview версия компонента и заменить их в Component Definition. Так же нужно учитывать ,что конструктор компонента должен уметь не принимать параметров вовсе и чтоб это не вызывало ошибок, ведь при визуальном добавлении компонента на сцену ни LivePreview версия, ни после компиляции, оригинальная версия, не получают никаких параметров в конструктор. Итак, мы скомпилировали LivePreview версию компонента, теперь откройте оригинальную FLA и отредактируйте символ компонента, указав LivePreview SWF файл.

Как видите, есть опция указания LivePreview версии внутри этого же FLA файла, для его создания нужно было сделать другой символ и указать в Linkage его родительский класс fl.livepreview.LivePreviewParent, поместить внутри него экземпляр нашего компонента и скомпилировать с помощью контекстной команды "Convert to Compiled Clip". Теперь если добавить компонент на сцену, и если всё сделано правильно, и LivePreview был скомпилирован без ошибок, то вы увидите, что вместо прямоугольника компонента отображается сам компонент – это и есть LivePreview. Теперь можно открыть панель Component Inspector, вкладку Parameters(по умолчанию она дублируется внизу) и попробовать изменить значения параметров, изменить размер и посмотреть, как изменения влияют на компонент и на его вид в среде разработки, а потом сравнить с готовым результатом. Особенностью тестирования LivePreview является то что Flash IDE после первого отображения кэширует LivePreview файл и если его обновить или поменять, даже в настройках компонента, Flash продолжит отображать кэшированную версию. Посему, настоятельно рекомендую после каждого обновления LivePreview, чтоб протестировать его, перезагружать FLA файл, т.е. закрывать его и потом заново открывать.

В создании компонент всегда нужно учитывать тот факт, что заданные параметры экземпляру компонента доставляются раньше выполнения его конструктора (но после инициализации предустановленных значений свойств), т.е. нужно определить механизм приёма параметров, который работал бы в любом случае.

Далее следует экспортировать символ из библиотеки в SWC файл с помощью команды "Export SWC file…" из контекстного меню символа. Вы получили готовый компонент, который теперь можно скопировать в папку компонент Flash IDE и после перезагрузки программы она отобразит его в Components. SWC файл это всё, что нужно для нормального функционирования компонента, но не для его распространения.

Далее следует упаковать компонент в установочный пакет, для этого нам понадобится установленный Adobe Extension Manager и файл MXI, вот я описал тестовый MXI файл для этого компонента:

<macromedia-extension
	 name="AS3 Component Test"
	 version="3.5.0"
	 type="flashcomponentswc"
	 requires-restart="true">
	<author name="Test Components" />
<products>
<product name="Flash" version="9" primary="true" />
	</products>
	<description><![CDATA[Test component]]></description>
	<ui-access><![CDATA[This item is accessed by choosing Components --> Test Components --> AS3 Component Test]]></ui-access>
<license-agreement><![CDATA[License text]]></license-agreement>
	<files>
		<file source="component.swc" destination="$flash/Components/Test Components" />
	</files>
</macromedia-extension>

Далее создаёте MXP файл, как было описано выше. Можете установить и протестировать, но не забудьте перезагрузить среду разработки. Появится компонент в папке "Test Components" панели "Components", но как вы видите, он всё ещё со стандартным значком. Если захотите указать значок, то это необходимо сделать до компиляции SWC файла в окошке "Component Definition…". Так же, там можно указать содержимое всплывающей подсказки и описания, версию среды разработки, языка программирования и версию плеера. "Custom UI" параметр, указывающий на SWF файл, отображаемый вместо панели параметров это полезно, если необходимо создать свой интерфейс задания параметров компонента.

Если вы попытаетесь скомпилировать данный пример под Flex SDK, то обнаружите, как минимум, 4 сообщения(warnings) – это неточности стандартной библиотеки Flash CS3.

Архив с тестовым компонентом(пути прописаны относительно папки C:\Component). Предпологается, что у вас установлены Flash CS3 и Flex Builder 3, в стандартные директории.

Метки: ActionScript 3, Flash CS3, MXI, MXP, SWC, Компоненты

Эта запись опубликована в Воскресенье, 6/07/2008 , 1:42 дп и размещена в рубрике ActionScript 3, Flash. Вы можете следить за обсуждением этой записи с помощью ленты RSS 2.0. Вы можете оставить отзыв, или обратную ссылку с вашего сайта.