Create Rich Symbols in Fireworks


Создание настраеваемых символов, единственная функция которой так не хватает для обретения полной гармонии при дизайне интерфейса или прототипировании.
Идея заключается в том чтобы спроектировать универсальный символ одного элемента с настраиваемыми  параметрами. Например кнопка имеет три состояния "Обычная", "Наведение", "Нажатая". Есть желание иметь символ данной кнопки, в параметрах которой можно было бы управлять видом данной кнопки а так же прописывать текст кнопки и управлять его стилем.


В Fireworks есть несколько вариантов для реализации данной функциональности.

Вариант - 1

В Fireworks есть стандартный метод управления объектами внутри символа. Это реализовано на
базе JavaSript. Данную методику можно хорошо изучить на примере готовых настраиваемых символов встроенных в Fireworks.


Как видно на скриншоте у каждого символа есть JavaScript который управляет объектами внутри символа, а все параметры передаваемые данным скриптом доступны в Symbol Properties. Данный метод позволяет создавать сложные настраиваемые символы, но мало подходит дизайнерам, которые навряд ли умеют программировать. Использовать данный метод можно лишь обретя дзен буддизм и познания в JavaScript.

Вариант - 2

Нужен способ для дизайнеров, позволяющий генерировать JavaScript из интерфейса программы.  Данный способ реализован на базе встроенного в Fireworks скрипта Create Symbol Script.


До запуска в действие данного скрипта необходимо специальным образом подготовить ваш символ. Для этого необходимо сгруппировать все объекты одного состояния по слоям и дать данным группам осмысленные названия. Так же, если в символе мы собираемся управлять параметрами текста, текстовому слою необходимо дать имя "Label".


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


В параметрах необходимо задать имя символа, тип необходимо оставить выбранным как Graphics, выбрать флажки Enable 9-slice scaling guides и Save to Common Library. После нажатия кнопки "OK" вам необходимо выбрать место назначения, для сохранения символа.

После сохранения символа, можно запускать скрипт Create Symbol Script, в диалоговом окне необходимо выбрать искомый, сохраненный на предыдущем шаге символ.


Так же в интерфейсе присутствуют две кнопки "+" и "-". Для добавления и удаления элементов которыми мы хотим управлять. Элементы - это те самые слои которые мы подготавливали на начальном этапе.

В данном примере мы хотим создать кнопку, в параметрах которой можно управлять видимостью состояний, а так же свойствами текста кнопки, такими как, текст кнопки, цвет текста, и выравнивание.

Для этого добавим следующие элементы со следующими параметрами:
1. Слой с именем Label управляется атрибутом Aligment (выравнивание) с значением Center (выравнивать по центру)
2. Слой с именем Label управляется атрибутом textChars (управление текстом) с значением Text (текст по умолчанию Text)
3. Слой с именем Label управляется атрибутом fillColor (цвет заливки) с значением #ffffff (текст по умолчанию белый)
4. Слой с именем Normal управляется атрибутом visible (отображение) с значением true (отображать)
5. Слой с именем Over управляется атрибутом visible (отображение) с значением false (не отображать)
6. Слой с именем Pressed управляется атрибутом visible (отображение) с значением false (не отображать)




После завершения добавления всех необходимых для управления символа параметров, необходимо нажать кнопку Save, после чего для символа будет создан JavaScript и сохранен в то же место где находится искомый символ. О чем сообщит следующее окно с сообщением.


Теперь у вашего символа есть пара в виде скрипта который мы только что сгенерировали.




Если открыть сам скрипт в текстовом редакторе он будет страшен для дизайнеров но он прекрасен по функциональности.


Итак, теперь пора проветрить его в действии, для этого необходимо скопировать оба файла в папку Common Library, я для этого создал папку "My" внутри для своих символов.


Теперь можно возвращается в Fireworks, и посмотреть что получилось. Наш символ как и полагается доступен из панели Common Library.



Перетаскиваем его на холст, выделяем и смотрим какие параметры нам доступны из панели Symbol Properties.


Если вы дошли до конца, и у вас все получилось, значит вас можно поздравить вы создали свой первый RichSymbol которым можно управлять из собственной панели с параметрами символа.

Вариант - 3


Дело не стоит на месте, дизайнеры хотят иметь более простые и гибкие методы создания настраиваемых символов. Замечательный John Dunning автор множества дополнений для Fireworks, буквально вчера обрадовал в твиттере пользователей своим новым дополнением. Данное дополнение Create Symbol From States, как видно из названия, позволяет создавать символы из States. Для этого нам необходимо различные состояния объекта поместить в отдельные States и запустить данный скрипт.


После чего, вам необходимо сохранить символ в папку Common Library. Как и в предыдущем примере символ будет доступен из аналогичной панели Common Library.


Теперь символ можно поместить на холсте и управлять параметрами видимости States из панели управления символом. 


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

P.S. Сейчас я веду переписку с автором скрипта, о внесении ряда изменений, для поддержки текстовых слоев, будем надеяться что новая версия скрипта не  заставит себя долго ждать :)

UPD: Вышла новая версия скрипта Create Symbol From States, теперь он поддерживает текстовые слои.