Поскольку я общаюсь со все большим количеством дизайнеров и разработчиков, одна из вещей, которая возникает, заключается в том, облегчает ли Catalyst итеративный дизайн проекта. Рабочий процесс, который видели большинство людей, заключается в том, что вы запускаете такой инструмент, как Illustrator, Photoshop или Fireworks; создать высококачественный визуальный дизайн в этом инструменте; и затем импортируйте это в Flash Catalyst, где вы можете начать превращать это изображение в визуальные компоненты. Я думаю, что это довольно мощный рабочий процесс для дизайнеров всех мастей.
Проблема, которая возникает чаще всего, заключается в том, что не все начинают так. Во многих случаях люди сначала создают скелетное приложение во Flash Builder, а затем хотят применить визуальный дизайн. Темы — это один из вариантов, и у нас есть новый инструмент выбора тем в Flash Builder, чтобы помочь с этим, но одна из замечательных особенностей Flex 4 заключается в том, что легко создавать очень настраиваемые, уникальные обложки для компонентов. Таким образом, без возможности выполнять циклическое переключение между Flash Catalyst и Flash Builder в версии 1.0 Catalyst, что могут сделать дизайнеры, чтобы перебирать дизайн вместе с разработчиком? Ответ — проект библиотеки Flex.
Я понимаю, что это далеко не идеальный рабочий процесс, но я думаю, что для Flash Catalyst 1.0 и Flash Builder 4 он работает нормально и дает возможность командам дизайнеров и разработчиков выполнять итерации вместе, не наступая друг другу на ноги.
Основные шаги
- Экспорт активов в библиотечный проект во Flash Catalyst.
- Импортируйте этот библиотечный проект как библиотечный проект в Flash Builder
- Свяжите импортированный библиотечный проект с основным проектом Flash Builder.
- Внесите изменения в дизайн Flash Catalyst.
- Повторно экспортируйте проект библиотеки и импортируйте его, переписав старый проект библиотеки Flash Builder.
- Ваш основной проект Flash Builder будет обновлен с новым дизайном.
Подробное прохождение
Допустим, у разработчика есть приложение, созданное с использованием компонентов по умолчанию. Я начну с чего-то действительно простого:
<s:Button x="19" y="78" label="Button"/>
<s:HSlider x="210" y="31" />
<s:List x="152" y="108">
</s:List>
<s:TextInput x="10" y="31"/>
<s:Button x="152" y="77"/>
Совершенно очевидно, что в процессе разработки — отличная РИА. Но я очень горжусь своей работой и хочу использовать возможности Flex 4 для создания уникального набора скинов и компонентов, которые выделяются. В идеальном рабочем процессе я мог бы передать это своему дизайнеру, он откроет его в Catalyst, создаст несколько замечательных компонентов и отправит его мне. Я не могу этого сделать, но я могу сделать какой-то дизайн в Catalyst, а затем добавить его в особый способ. Сначала я создам несколько великолепно выглядящих компонентов в Catalyst, начав с пустого проекта и импортировав ресурсы Illustrator / Photoshop, а затем преобразовав их в компоненты.
После того, как я превращу все свои рисунки в интерактивные компоненты, я открою панель библиотеки и начну давать им пригодные названия. По умолчанию Catalyst называет созданные компоненты «Button1 ″,« Button2 ″, «ItemRenderer1 ″ и т. Д. Я даю им имена, которые будут что-то значить для разработчика и помогут дифференцировать компоненты.
Как только я это сделаю, все, что мне нужно сделать, это экспортировать мой библиотечный файл в файл FXPL, щелкнув правой кнопкой мыши в любом месте на панели «Библиотека» Catalyst. После этого у меня есть возможность импортировать этот файл FXPL в качестве нового проекта библиотеки Flex во Flash Builder.
That library file contains all of the assets and skinned components I just created. In order to use those, I simply add that project to my main Flex project from the project Properties->Flex Build Path and I can start changing the skinClass attribute for my components to point to those new files.
<s:Button x="19" y="78" label="Button" skinClass="components.BlackPushButton"/>
<s:HSlider x="210" y="31" skinClass="components.MetallicSlider"/>
<s:List x="152" y="108" skinClass="components.GreyDataList">
</s:List>
<s:TextInput x="10" y="31" skinClass="components.MetallicTextInput"/>
<s:Button x="152" y="77" label="Button" skinClass="components.GreyButton"/>
Но теперь клиент говорит нам, что он хочет, чтобы эта черная кнопка была межгосударственным знаком (кто знает). У меня есть этот актив в Illustrator, поэтому я могу открыть исходный файл Flash Catalyst, в котором я создал проект библиотеки, и у меня есть несколько вариантов. Я мог бы создать новую кнопку с уникальным именем или изменить исходный компонент кнопки, используя циклическое переключение между Illustrator. Я сделаю последнее.
После этого вернитесь на панель «Библиотека» и повторно экспортируйте ресурсы, убедившись, что перезаписали исходный файл . Затем вернитесь в Flash Builder и снова выполните процесс импорта. По умолчанию он пытается создать новый проект и просто добавить «_1» в папку проекта. Убедитесь, что вы перезаписали свой проект, удалив его. Вы получите предупреждение, но это нормально.
Здесь происходит волшебство. Ничего не делая, вы можете запустить свое приложение, и вы автоматически получите эти новые ресурсы. Любые обработчики событий, которые вы подключили к кнопке, или любой код, созданный вами для этой кнопки, останутся без изменений; только графика кнопки будет меняться. Поскольку проекты связаны между собой, любые изменения, которые мы вносим в наши импортируемые активы, фильтруются до нашего основного проекта.
Дизайнер может использовать этот оригинальный файл Catalyst и процесс реэкспорта, чтобы внести изменения в любой актив, который мы хотим. Они также могут создавать новые компоненты из графических объектов, создавать пользовательские компоненты или добавлять графические ресурсы, и все они будут доступны для разработчика в рамках этого основного проекта Flex.
Это все еще какая-то работа в процессе, но я думаю, что это будет работать для некоторых из проблем разработки дизайна, которые люди должны решить. Хотя версия 1.0 Flash Catalyst будет иметь некоторые ограничения в отношении рабочего процесса Flash Builder, в ней все еще есть много основ, которые можно построить. Если вы попробовали это или у вас есть другие идеи о том, как это может работать, обязательно напишите мне по электронной почте . Я хотел бы услышать обратную связь.