Как создать свой компонент?

[Скрипун]

Коллеги, доброго времени суток! Как дела ?

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

П.С. только не пишите поиск рулит.

[Nirth]

Вообщето поиск рулит
Вот три места где можно достать компоненты (http://flasher.ru/forum/showpost.php?p=424102&postcount=12)
Вообще компонентом считаеться класс или набор классов, для выполнения какой либо задачи.

[artcraft]

http://www.person13.com/articles/components/creatingcomponents.html
доступная статья, всё доходчиво описано

думал даже ее перевести, но потом забросил
вот начало перевода

Создание компонентов во Flash MX 2004

Пусть вас не пугает идея создания собственного компонента. Несмотря на то, что компоненты могут выглядеть очень сложными, на самом деле они всего лишь доработанные мувиклипы. Безусловно вы знаете как обращаться с мувиклипами, и даже если вы не знаете, вы всё равно поймёте как создать свой собственный компонент. Единственное что вам понадобится: это понимать что такое ActionScript 2.0 классы. Если вы не знакомы с классами в ActionScript 2.0, то вам сюда: Введение в ActionScript 2.0.

В этой статье мы обсудим следующее:

* Преимущества компонентов.
* Подготовка мувиклипа компонента.
* Создание простейшего класса компонента.
* Связывание класса с мувиклипом.
* Экспорт в compiled clip.

One thing that you may notice is not included in the preceding list is a discussion of extending the v2 component framework. The much-hyped v2 framework is not something I am going to discuss in this article for several reasons. One reason is that I think you'll find a benefit in understanding how to create a component from scratch, without relying heavily on the architecture built by Macromedia that can obfuscate the fundamental principals. Additionally, I don't find too much to champion about the v2 framework. While it definitely provides some nice functionality such as style and focus management, it also adds significant overhead in terms of kilobytes to your .swf. For example, if you add the Macromedia ProgressBar component to a Flash document and export the .swf, the file is 27KB. If you extend the v2 framework, you can be assured that your components will also have a minimum filesize that approximates that of the Macromedia ProgressBar.

I will note, however, that even if you do want to extend the v2 framework, this article will still cover all the basic concepts that you will want to know. Once you've understood the principals in this article you will be prepared to then utilize the v2 framework.

Преимущества компонентов

Перед тем как вы нечнёте учиться создавать компоненты, возможно будет полезно сперва разбираться с преимуществами использования компонентов. Несмотря на то, что компонент это всего лишь доработанный мувиклип, комронет это знечительно большее. Это пример того, когда целое это больше чем его части.

Касательно основных UI компонентов входящих в комплект флэш. Consider the basic UI components included with Flash. Вы можете создать комбобокс или кнопку, как только вам это понадобится. Вы можете нарисовать всё сами, написать кучу кода в главном таймлайне и получить нечто очень похожее. Но безусловно гораздо проще прость перетянуть компонент и установить несколько парпметров. Этот простой пример демонстрирует значительное приимущество компонентов. А именно, в компонент заключен многократно используемый функционал, таким образом, что для использования вам остаётся просто затащить его на сцену. Кроме того, компоненты позволяют вам устанавливать параметры как через графический интерфейс (Component Inspector), так и используя API.

Компоненты не только позволяют инкапсулировать функционал, но и облегчают распространение. Если вы хотите позволить кому-либо использовать ваш компонент, всё что вам остаётся сделать это только упаковать его, выслать им, и несколькими кликами они смогут установить его. Более того, если вы упакуете свой компонент как .swc файл, ващ код будет сравнительно защищённым. (хотя существуют декомпиляторы которые умеют извлекать ActionScript код.)

Подготовка мувиклипа компонента

За несколькими исключениями вы будете аттачить или грузить всю графику на лету. Это означает, что вы будете оперировать всем используя только ActionScript. Поэтому мувиклип компонента будет совершенно простым. Тем не менее, есть несколько вещей которые следует иметь в виду:

* Фактически компонент показывает только ту графику, которая попадает в границы области которую занимала графика до комптляции. Это может показаться немного странным. На практике это означает, что если вы оставите сцену совершенно пустой, то после компиляции любая приаттаченная или подгруженная графика не будет отображаться. Решением является положить прямоугольный мувиклип в первый кадр таймлайна компонента. Я обычно даю ему имя mcBoundingBox. Этот mcBoundingBox должен занимать ту область в которую будет помещаться вся грофика.

* Для того чтобы потом корректно экспортировать .swc файл, символ компонент должен содержать все символы, которые будут приаттачены скриптом. Иначе символы не будут включены в .swc при экспорте. Поэтому, нужно создать второй кадр в таймлайне мувиклипа компонента, и положить туда все символы исползуемые скриптом.

* Единственное что осталоь, это добавить команду stop() в первый кадр.

Создание класса компонента.

Компонент состоит по крайней мере из одного мувиклипа и связанного с ним ActionScript класса. Вы уже знаете как подготовить мувиклип, теперь нам осталось обсудить как создать ActionScript класс.

Класс нашего компонента будет расширять MovieClip класс. Расширяя MovieClip класс, вы можете быть уверены, что компонент унаследует все свойства и методы класса MovieClipЭто значи, что вы сможете использовать ActionScript для таких целей как изменение положения на сцене, управление прозрачностью, видимостью, и т. д. Также это значит что что вы сможете использовать такие методы как createEmptyMovieClip() и attachMovie() внутри класса и внутри элементов вложенных в компонент. Ваш класс может раширять MovieClip как непосредственно так и опосредовенно. Например, вы можете создать класс-основу для всех сврих компонентов, который будет содержать общие для всех свойства и методы. В таком случае этот класс должен расширять MovieClip, а классы всх ваших компонентов должны расширять класс-основу.

Есть несколько специальных методов которыми может (и возможно должен) быть снабжён класс компонента. Мы рассмотрим некоторые из них немного позже. Но сперва, давайте напишем простейший пример класса.

class com.person13.SampleComponent extends MovieClip {
// Вы должны объявить все члены класса для того что бы ссылаться на них из кода.
// В данном случае, mcBoundingBox это имя которое мы дали символу (габаритному контейнеру)
// лежащему в первом кадре мувиклипа компонента.

private var mcBoundingBox:MovieClip;

function SampleComponent() {
// Может быть полезным иметь constructor функцию для вызова других методов или даже
// для размещения большого количества кода. Это поможет хорошо организовывать код.
// В следующих примерах вы увидите насколько это удобно.
init();
}

private function init():Void {
// Вероятно вы захотите сделать габаритный контейнер невидимым, и уменьшить его размеры до 0.
// Габаритный контейнер определяет область прорисовки компонента во время работы нед сценой,
// но во время работы скрипта его можно спрятать.
mcBoundingBox._visible = false;
mcBoundingBox._width = 0;
mcBoundingBox._height = 0;
}
}

Данный пример демонстрирует основы класса компонента. Убедитесь что вы расширяете MovieClip класс и габаритный контейнер спрятан. Код пока ничего особенного не выполняет, просто я хочу показать вам весь процес последовательно что бы: а) не говорить обо всём одновременно б) показать для чего каждая часть нужна.

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

* init() - Это метод внутри которого может находиться код установки исходного состояния. Тут я обычно устанавливаю масштаб (_xscale и _yscale) компонента в 100% (зачем вы узнаете ниже), прячу габаритный контейнер (как вы уже заметили) и инициирую отслеживание событий (подробнее об этом тоже немного позже).

* createChildren() - Это метод в котором я создаю и аттачу все мувиклипы, текстовые поля и т. д. Обычно тут находятся attachMovie() и/или createEmptyMovieClip().

* draw() - Тут место где я программно рисую всё что необходимо. Не во всех компонентах есть чего рисовать, но если есть то у меня это делает функция draw() .

* arrange() - Метод где находится код расставляющий всю графику по местам. Обычно этот метод вызывается неоднократно (например во время изменения размеров компонента).

Далее рассмотрим всё это подробнее.

Связывание класса компонента с мувиклипом.

Создав класс компонента и мувиклип, вашим следующим шагом будет связать их вместе. Когда вы создаёте экземпляр мувиклипа (либо перетаскивая на сцену из библиотеки, либо приаттачивая кодом) - Flash связывает его с MovieClip классом. Но вам нужно что бы Flash ассоциировал символ с вашим собственным классом, что бы получить доступ к функционалу прописанному там.

Вы можете связать класс с мувиклипом указав класс в поле ActionScript 2.0 class в настройках связей (linkage settings) символа. Что бы добраться до настрек связей (linkage settings) кликните правой кнопкой мыши по символу в библиотеке и выберите Linkage... Там вам следует сделать следующее:

* Выбрать Export for ActionScript.
* Назначить символу linkage identifier.
* Указать класс в поле AS 2.0 Class. Вы должны указать полное корректное имя класса. Это значит что если класс находится внутри пакета (package) то вы должны указать имя пакета. (подробнее тут)

Также вам следует указать класс в описании компонента (component definition). Что бы добраться до описания компонента (component definition) кликните правой кнопкой мыши по символу в библиотеке и выберите Component Definition... . Укажите полное корректное имя класса в поле AS 2.0 Class.

Сделав эти две вещи вы связали класс с символом. Теперь когда вы создите экземпляр этого мувиклипа Flash автоматически будет ассоциировать его с вашим классом вместо класса MovieClip по умолчанию.

[artcraft]

если есть желающие перевести продолжение, пожалуйста поместите его в этот топик

[aksios]

2artcraft: хорошая статья. Чуток побольше написано в официальном мануале. А еще The Hidden Power of Flash Components.

[artcraft]

что никто превести остаток не захотел?...

[Nirth]

нет=) а должен кто то захотеть=)?

[artcraft]

нет, я не заставляю

[Nirth]

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

[sokiche]

http://www.flash-ripper.com/archives/000304.htm
http://www.flash-ripper.com/archives/000308.htm
http://www.flash-ripper.com/archives/000325.htm

Дык, вроде это и есть те переводы...

[artcraft]

нет, это другая статья.
вот оригинал того что на риппере 1 (http://www.person13.com/articles/as2primerpartone) 2 (http://www.person13.com/articles/as2primerparttwo) 3 (http://www.person13.com/articles/as2primerpartthree)
а вот (http://www.person13.com/articles/components/creatingcomponents.html) того что начал переводить я

[CorC]

для особо ленивых есть ПРОМТ
хотя потом его все равно править надо
а почитать дак и на англ полезно

http://www.vmstudio.com/materials.php?component
тут тоже кое что

и вообще можно погуглить

[vic_]

http://www.piter.com/bugs/5-469-00217-9/dop_glavi.rar
Дополнительные главы из книги Гурского, в 19 главе подробно расписано создание и использование компонентов

[wvxvw]

One thing that you may notice is not included in the preceding list is a discussion of extending the v2 component framework. The much-hyped v2 framework is not something I am going to discuss in this article for several reasons. One reason is that I think you'll find a benefit in understanding how to create a component from scratch, without relying heavily on the architecture built by Macromedia that can obfuscate the fundamental principals. Additionally, I don't find too much to champion about the v2 framework. While it definitely provides some nice functionality such as style and focus management, it also adds significant overhead in terms of kilobytes to your .swf. For example, if you add the Macromedia ProgressBar component to a Flash document and export the .swf, the file is 27KB. If you extend the v2 framework, you can be assured that your components will also have a minimum filesize that approximates that of the Macromedia ProgressBar.

I will note, however, that even if you do want to extend the v2 framework, this article will still cover all the basic concepts that you will want to know. Once you've understood the principals in this article you will be prepared to then utilize the v2 framework.
Как вы уже наверное заметили, в этой статье не рассматривается возможность наследования от mx.core.UIComponent (т.н. компоненты второго поколения). Тому есть несколько причин: первая - создав "с нуля" свой первый компонент, вы сможете понять базисные принципы его устройства, скрытые под "надстройкой" от ММ (тут и дальше - Макромедиа). Вторая - на мой взгляд, преимущества от использования этой "надстройки" очень сомнительны. Работа со стилями и фокусом ввода (и та местами кривая - прим. пер. :D ) добавленная в компонентах второго поколения существенно увеличит размер конечного SWF. Например, если вы откомпилируете файл содержащий только ProgressBar (компонент от ММ) то его размер будет 27KB. Это и есть приблизительный минимальный размер файла использующего компонент второго поколения.

Но даже, если после всех уговоров вы все таки захотите использовать компоненты второго поколения, в этой статье вы найдете всю полезную вам информацию. Главное понять общие принципы, - как только это случится, вам и компоненты второго поколения будут ни по чем. =)

* Будет время - постараюсь еще чего перевести =) Простите, не совсем дословно, но уж как вышло =)

[wvxvw]

Да, вот еще некоторые полезности:
Как прикрутить к компоненту свою картинку (будет отображаться в библиотеке)
[IconFile("icon.png")]
до объявления класса (там же где импорты)
* картинка должна быть максимум 16х16 пикселов

Как вынести переменные в панель "Параметры"
[Inspectable(defaultValue="0x000000")]
var color:String;
в объявлении переменных класса
* некоторы неприятности: если вы укажете тип переменной, то принцип занесения пользователем данных в поле предназначенное для переменной будет аналогичен обычному окну типа "инпут". Но есть и некоторые неприятности, например, числа в восьмеричном и шестнадцатеричном представлении (0хAEFF00) будут восприниматься как строка, и не будут "писаться" в нужном поле. Так что если хотите задавать цвета - прийдеться сделать парсер =)

Как создать событие, которое должен "слушать" компонент.
[Event("update")] там же, где импорты
вариант дальнейшего использования:
dispatchEvent( {type:"update", ..., ...});