Flash-платформа / [Из песочницы] Полуавтоматическое создание форм для Adobe Flash, на основе Adobe Photoshop файлов

Как известно многим флешерам (и не только), создание простой формы на основе png ресурсов, в принципе не составляет труда, но что делать если эти формы постоянно меняются, корректируются и плодятся как грибы после дождя?
Что делать?

А делать мы будем вот что.
Мы будем превращать psd файл в интерактивную форму, с которой уже можно работать очень прозрачно и не задумываться о координатах и прочих дизайнерских вещах.

Используемые программы

• Adobe Photoshop CS5.5
• Adobe Flash Professional CS5.5
• python 2.6-2.7
• FlashDevelop 4.0.1 RTM

Идея

Основная идея не нова и освещалась например тут:
href="http://habrahabr.ru/blogs/gdev/135429/">Экспорт пользовательского интерфейса из Фотошопа
Я только расширяю ее до, практически, автоматического получения результата.
Алгоритм такой:

• Дизайнер делает с файлом что угодно его светлой душе, но придерживается некоторых правил именования и структурирования слоев
• Программист получает этот файл, пропускает его через парсер, и в конечном итоге получает .XML и .SWC файлы
• Подключает .SWC и .XML к проекту (если это не в первый раз происходит, то к проекту уже все подключено)

Подробнее

Photoshop. Правила именования и структурирования слоев.

Вообще говоря достаточно много мы можем сделать во время парсинга файла .PSD, например пробелы в начале и в конце имени слоя, пробелы в имени слоя, кирилица в имени слоя и т.п.
Сейчас я говорю только о правилах, при соблюдении которых мы получим форму с минимальным функционалом.
Будем делать такую форму:

Начнем сверху:

• text_custom_cursor — это слой в котором есть маркер для текста, в дальнейшем по этому названию мы получим доступ к маркеру и на основе его геометрических характеристик создадим текстовое поле.
• text_sound_on_off — аналогично первому слою.

Обратите внимание, сами маркеры можно и не выгружать, так как данные о них есть в .XML, хотя я их сейчас выгружаю.

• radio_set_cursor — папка(set) которая в недрах AS3 превратится в radioButton
  далее в ней находятся слои, с «говорящими» состояниями
  radio_on
  radio_off
  radio_fon
• radio_set_sound
  radio_on
  radio_off
  radio_fon
• button_set_1 — папка(set) которая в недрах AS3 превратится в Button
  далее в ней находятся слои, с «говорящими» состояниями
  b_1_up
  b_1_over
  b_1_down
  b_1_fon
• button_set_2
  b_1_up
  b_1_over
  b_1_down
  b_1_fon

Обратите внимание, состояния для двух radioButton и соответственно Button, имеют одинаковое название, а сами сеты разное. Это означает, что при выгрузке мы получим 2-а radioButton и соответственно Button, в XML виде, но ресурсы для них будут в единственном экземпляре, что важно!

Все остальное можно называть как угодно, но лучше это как-то упорядочить, по этому я называю их 'decor_ + что угодно'

Вот в общем то и все по правилам.

Python. Выгрузка в .XML и .PNG

Почему python? Потому, что все, что можно автоматизировать, делаю на нем. Не стал использовать Gimp + python, потому что Gimp не поддерживает папки(set), а в них, так сказать и вся соль. Не стал использовать javaScript, из собственных, достаточно тяжело аргументируемых соображений (но можно сказать из-за скорости). В итоге я остановился на COM технологии. Подробности в исходниках. А в двух словах, выяснилось, что из-за того что GUI Photoshop обновляется при работе его скриптов, а через COM можно просто скрыть Photoshop и тогда скорость, заметно увеличивается.

JSFL. Упаковка всего этого в .SWC

При помощи простенького скрипта на JSFL упаковываю все .PNG в удобный для нас .SWC
Присоединяем библиотеку к проекту, обязательно устанавливаем в свойствах библиотеки 'Includet library'.

SWF. Загрузка формы

Для отображения формы используются три класса

1. Form.as — Собственно форма
2. InteractiveContainer.as — Интерактивный контейнер, который парсит имя слоя и создает соответствующий, интерактивный или не очень, элемент
3. ResourceLoaderFromForm.as — загрузчик графики из библиотеки или, как опция, по URL

BAT. Автоматизируем

Создаем файл, например, psd_parser_habr.bat
в него пишем
@echo off
cls
python D:mainFlashDevelophabraFormpythonpsd_parser.py %1
D:mainFlashDevelophabraFormpythonexport_in_swc.jsfl


Кладем его в надежное место. Создаем еще одну ссылку «Открыть с помощью», для файлов .psd, и указываем psd_parser_habr.bat в качестве программы на открытие. Теперь можно любой файл .PSD 'открыть' этим батником, и получить из него ресурсы в виде .SWC и .XML

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

Можно еще много рассуждать на эту тему, критиковать код, и подход, 'централизировать' настройки всего этого зоопарка и прочая и прочая. И наверняка так и будет, но цель данной заметки, лишь в том, что-бы показать как минимальными средствами, получить вполне себе, хороший результат.

Вот собственно и все. Результат.

Скачать Проект на FD4

Автор: lunariusis