Создаем компонент во Flash CC с Live Preview

Share Button

Перед началом статьи хочу объяснить, что такое Live Preview. Представьте, что на рабочую поверхность перетягиваете компонент и он моментально отображает свое состояние. К примеру, это может быть введенный текст в панели инспектора компонента, а изменения видны сразу же на рабочей поверхности.

Данный подход можно применять в безграничном количестве случаев. Я расскажу это на примере своего текущего проекта. У нас была задача — создавать точки навигации в громадном количестве. Естественно, что когда их очень много — обычный «одинаковы» вид доставлял бы массу неудобств. По-этому, запивая печенье чаем — я накидал компонент.

Создаем файлик Live.fla и в нем рисуем флажок. Конвертируем его в MovieClip с именем символа Waypoint и задаем Linkage класс (делаем видимым для ActionScript). К примеру — WaypointFlag. У флажка должно быть dynamic текстовое поле. Дадим ему имя informer. В нем будут происходить изменения — обновляться числа.

Вот так будет выглядеть наш флажок. Таких размеров делать не обязательно — я увеличил его в несколько раз для лучшего представления.

WaypointFlag

Дальше пишем для него код для привязанного к нему WaypointFlag.as файлу:

package  {
	import flash.display.Sprite;
	public class WaypointFlag extends Sprite {
		[Inspectable (name="Waypoint ID", variable="point_id", type="Number")]
		public var waypointID : int = 0;
		public function WaypointFlag() {
			// constructor code
		}
		public function set point_id(value:int):void{
			waypointID = value;
			informer.text = waypointID.toString();
		}
	}
}

Объясню немного. Мета-тэг Inspectable говорит, что этот файл являюется классом для параметров компонента. Name — это текст, который будет выводится в инспекторе компонентов. Variable — это переменная, которая будет записыватся при изменениях и это должен быть setter метод. Type — это формат данных. Их много разных (Array, Object, Collection, String и так далее). Я лишь рассмотрю нужный мне тип.

Логика работы такая, что когда мы начнем менять в компоненте поле Waypoint ID — оно будет сохранять введенные данные в point_id методе.

У нас это будет LivePreview — тут мы дублируем лишь те поля, которые хотим изменять в реальном времени. Для демонстрации этого достаточно.

Сохраняем файл и через библиотеку делаем Export SWF для нашего флажка. Для удобства сохраним флажок под именем LiveFlag.swf.

WaypointFlagExport

Теперь создаим новый проект Map.fla и в нем создадим пустой MovieClip из библиотеки. Для удобства назовем символ Flag и сделаем ему Linkage класс с тем же именем, чтоб было удобнее.

Теперь уже пишем класс, который и будет обрабатывать наш Waypoint в игре. Напомню, что выше мы создавали простейший LivePreview. И так, открываем Flag.as и пишем ему код:

package  {

	import flash.display.Sprite;

	public class Flag extends Sprite {

		[Inspectable (name="Waypoint ID", variable="point_id", type="Number")]
		[Inspectable (name="Update speed", variable="updateSpeed", type="Number")]

		public var waypointID : int = 0;
		public var speed : int = 0;

		public function Flag() {
			// constructor code
		}

		public function set point_id(value:int):void{
			waypointID = value;
		}
		public function set updateSpeed(value:Number):void{
			speed = value;
		}
	}

}

Если присмотреться — половину кода у нас уже было в LivePreview. Мы добавили поля для обновления скорости в конкретной точке. У меня в проекте была задача менять скорость объекта в зависимости от точки. Но для чистоты эксперимента — я не стал вносить метод updateSpeed в LivePreview :)

Сохраняем файл и в библиотеке на симовле Flag жмем правой кнопкой. Выбираем Component definition и в первой строке Class задаем наш Flag класс и жмем галочку справа для валидации и приминения класса к компоненту.

Дальше, в этом же окне, есть поле Live Preview. Именно туда мы загружаем наш LiveFlag.swf, созданный ранее. Я рекомендую делать ему Embed in fla. А если он будет менятся и дорабатываться — нажимайте update кнопку там же.

После этих манипуляций наше окошко будет таким:

FlagDefinition

На этом мы закончили. Переходим на Stage и перетягиваем из библиотеки наш компонент в количестве 5 штук и задаем в Component Inspector уникальные ID для каждого флага. На выходе такая картина:

FlagComponent

Если запустим проект — будет видно, что флажков нет и это правильно. Они создаются только в рамках IDE и не попадают в релизную SWF.

Стоит запомнить одну очень важную вещь. У мета-тэга Inspectable есть параметр defaultValue и он часто вызывает путаницу у людей. Впрочем, я запросил у ребят из Adobe пересмотреть метод его работы в следующих обновлениях Flash CC.

[Inspectable (name="Waypoint ID", variable="point_id", defaultValue="7", type="Number")]

Если мы установим в defaultValue число 7, а в переменной waypointID число 3, то геттер point_id нам не вернет число 7 потому, что defaultValue влияет лишь на данные в рамках LivePreview, CustomUI и инспектор компонентов. По-этому приходится дублировать значение в переменной, которая возвращается из геттера с тем, что вводим в defaultValue. Или же вообще можно отказаться от defaultValue.

Не менее важное замечание. Пока мы не внесем собственноручно значения в инспекторе компонентов — они не будут загружены в код.

Будут вопросы — пишите в камментах, дам ответ. В ближайшее время я сделаю другой, более мощный пример по превращению Flash IDE в нечто офигенное на базе компонентов. Мы будем загружать атлас и выводить нужный объект на лету. Без надобности загружать все в библиотеку.

Сообщаю небольшой секрет, который не скрывается, но и не афишируется — весь Stage у Flash IDE — это чудо в виде SWF файла, которое лежит C:\Program Files\Adobe\Adobe Flash CC\Common\Configuration\StagePlayer.swf и дает нам уникальные возможности. К примеру, я рисовал связи между этими флажками и они изменялись в зависимости от положения связанных флажков. Это очень сильно помогало решать вопросы отображения связей :)

Share Button

This Post Has Been Viewed 4,701 Times

Создаем компонент во Flash CC с Live Preview: 5 комментариев

  1. MMMaXXX

    Чтобы работало, как компонент, обязательно нужно в отдельный swf экспортить?
    И при экспорте флажок должен быть один в документе, я имею в виду 2 вида Флажков в 1 swf экспортировать нельзя?

  2. TheRabbit Автор записи

    Если нет надобности в Live Preview — мы можем в проекте любой MovieClip/Sprite определить как компонент и задать ему параметры. Для этого выносить в SWF смысла нет. А задавать параметры можем как через класс (в этой статье), так и динамически из Component Definition, если не указывать класс в поле Class для Component Definition. Там для этого есть галочка Parameters are locked in Instances.

    На счет флажков — их можно сколько угодно экспортировать. Live Preview это SWF по-сути самый обычный. Когда мы перетягиваем его на сцену — это обычный addChild. Parent у нашего флажка будет LivePreviewParent. А у него — Sprite, который уже является сценой самого Flash IDE. Значит у нас есть возможность в LivePreview кодом менять кадры у флажка, вставлять другие из библиотеки подключенного SWF.

    Либо я ответил на вопрос, либо я его не так понял :) Тут действует простое правило. Если нужен живой предпросмотр — это отдельный SWF, который мы вставляем в Live Preview в рабочей флешке :) Если нам просто надо определить параметры компонента и Live не нужен — просто определяем параметры компонента и все.

  3. Anardhell

    А можно по подробнее про рисование связей между поинтами?
    Чуть больше конкретики, ибо не совсем понятно как и где в коде добраться до этого заветного спрайта, который родитель всех родителей))

Добавить комментарий

Ваш e-mail не будет опубликован.

Blue Captcha Image Новый проверочный код

*

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>