Компоненты: готовые и "самодельные"

Использование live preview

Во Flash MX действительно сделан большой шаг вперед в сторону RAD - быстрой разработки приложений. У вас есть компоненты повторного использования, вы можете писать свои компоненты, и, что самое главное, эти компоненты можно быстро и удобно настраивать. Исключительно важным элементом во всей этой цепочке является технология live preview, которая позволяет разработчику конечного флэш-ролика сразу видеть, как будет выглядеть тот или иной компонент после запуска при изменении только одного параметра. Это существенно ускоряет разработку.

Технология live preview во Flash MX имеет много схожих черт с CustomUI: live preview - это отдельный *.swf-файл, который разработчик и будет видеть на сцене на месте настраиваемого компонента.

Две возможные стратегии реализации live preview

Представьте себе, что у вас есть сложный компонент, например, визуализатор математических формул. Вы хотите наблюдать формулу прямо во время редактирования флэш-ролика, поэтому вы делаете live preview. В таком случае имеет смысл положить во флэш-ролик с live preview сам компонент -визуализатор. Тогда при внесении каких-либо изменений в компонент -визуализатор, вы просто заново перетащите его в библиотеку ролика с live preview, и последний будет работать в соответствии со сделанными изменениями.

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

Итак, начнем делать ролик с preview. Как ни странно, начать надо с проверки того, нарисовано ли вообще хоть что-нибудь в самом компоненте (не в preview ). Дело в том, что, хотя вы можете создавать пустые клипы нулевого размера (скажем, чтобы затем нарисовать в них что-нибудь динамически во время выполнения), подключить preview к компоненту, в котором ничего не нарисовано, вы можете только теоретически. То есть, подключать - подключаете, но на экране ничего не отображается. Поэтому (даже если вы хотите, чтобы визуально компонент был пуст) положите в компонент хоть какой-нибудь графический объект (можно сделать его полностью прозрачным).

Дальше приступайте к рисованию preview. Вы можете ограничиться совсем простой картинкой, дающей лишь представление о размерах компонента, а можете положить в ролик с preview сам компонент с полной функциональностью (это не всегда удается из-за того, что компонент может требовать присутствия специального окружения; но если окружение не нужно, мы рекомендуем поступать именно так). После того, как preview нарисовано, нужно разместить в нем код, который будет отвечать за масштабирование и выравнивание preview относительно контрольной точки компонента. Для решения этой задачи нам понадобится объект Stage, который как раз и отвечает за размещение ролика внутри демонстрирующей его среды (например, браузера). Параметры масштабирования можно указать при помощи поля Stage.scaleMode. Этому полю можно присвоить одно из четырех возможных текстовых значений: " exactFit ", " showAll ", " noBorder ", and " noScale ". По умолчанию стоит режим showAll - это значит, что ролик масштабируется таким образом, чтобы в отводимую область он поместился целиком. Более всего от этого режима отличается режим noScale, в котором масштабирование вовсе не производится. Довольно часто именно его удобно устанавливать в live preview. Второй важный параметр объекта Stage - это поле align. Этому полю также присваиваются текстовые значения. При этом используются следующие соглашения: " T ", " B ", " L ", " R " означают соответственно top, bottom, left, right (верх, низ, лево, право), если стоит только одна буква, то по другой оси подразумевается выравнивание на центр. Если же мы равняем не по центру по обеим осям, то пишем соответственно " TL ", " TR ", " BL " или " BR ". По умолчанию используется выравнивание на центр как по вертикали, так и по горизонтали.

Предположим, что вы нарисовали компонент таким образом, что его опорная точка находится в левом верхнем углу клипа. Тогда вам, скорее всего, будет удобно нарисовать live preview с таким же выравниванием и вызвать внутри preview такой код:

Stage.scaleMode = "noScale";
Stage.align = "TL";

В результате опорные точки компонента и live preview совпадут.

Обмен информацией: объект xch

Обмен информацией между компонентом и live preview производится примерно так же, как и между компонентом и CustomUI. Только теперь мы не отправляем, а получаем информацию об измененных параметрах из xch . Напомним, что специально создавать этот объект не обязательно, в контексте live preview он будет доступен и так. Учтите также, что информация лишь копируется из xch интерфейса (стандартного или CustomUI ) в xch нашего live preview. Поэтому вы можете без опаски изменять поля xch в live preview - вы ничего не испортите и в параметры компонента эти изменения не попадут. С другой стороны, поля xch для live preview не будут сохранены при сохранении *.fla-файла, как это происходит с параметрами компонента.

Как в live preview узнать, что какие-то параметры изменились (и нужно, скажем, изменить внешний вид)? И для этого все предусмотрено. В любом live preview в первом кадре главной линейки нужно поместить функцию onUpdate, в теле которой и использовать новые значения параметров:

function onUpdate() {
	// достаем нужные параметры из xch
	var width = xch.width;
	var height = xch.height;
	var roundRadius = xch.round.Radius;
// перерисовываем все, что нужно
}

Функция onUpdate вызывается, как только изменяется один из параметров экземпляра компонента (что и происходит при редактировании параметров через стандартный интерфейс установки параметров или через CustomUI ).

На самом деле то, что мы описали только что - это некоторое приближение. В действительности же происходит следующее. Если в объекте xch интерфейса ("родного" или CustomUI ) происходят изменения, то устанавливается некий внутренний флаг (или какой-то аналог флага), сигнализирующий об этом. Раз в секунду (а вовсе не раз в кадр, как можно было бы подумать) состояние флага проверяется и если флаг был установлен, то содержимое xch из интерфейса копируется в xch из live preview. После этого у live preview вызывается функция onUpdate. Если же флаг установлен не был, то ничего не происходит и onUpdate не вызывается.