Как известно многим флешерам (и не только), создание простой формы на основе png ресурсов, в принципе не составляет труда, но что делать если эти формы постоянно меняются, корректируются и плодятся как грибы после дождя?
Что делать?
А делать мы будем вот что.
Мы будем превращать psd файл в интерактивную форму, с которой уже можно работать очень прозрачно и не задумываться о координатах и прочих дизайнерских вещах.
Основная идея не нова и освещалась например тут:
Экспорт пользовательского интерфейса из Фотошопа
Я только расширяю ее до, практически, автоматического получения результата.
Алгоритм такой:
Вообще говоря достаточно много мы можем сделать во время парсинга файла .PSD, например пробелы в начале и в конце имени слоя, пробелы в имени слоя, кирилица в имени слоя и т.п.
Сейчас я говорю только о правилах, при соблюдении которых мы получим форму с минимальным функционалом.
Будем делать такую форму:
Начнем сверху:
Обратите внимание, сами маркеры можно и не выгружать, так как данные о них есть в .XML, хотя я их сейчас выгружаю.
Обратите внимание, состояния для двух radioButton и соответственно Button, имеют одинаковое название, а сами сеты разное. Это означает, что при выгрузке мы получим 2-а radioButton и соответственно Button, в XML виде, но ресурсы для них будут в единственном экземпляре, что важно!
Все остальное можно называть как угодно, но лучше это как-то упорядочить, по этому я называю их 'decor_ + что угодно'
Вот в общем то и все по правилам.
Почему python? Потому, что все, что можно автоматизировать, делаю на нем. Не стал использовать Gimp + python, потому что Gimp не поддерживает папки(set), а в них, так сказать и вся соль. Не стал использовать javaScript, из собственных, достаточно тяжело аргументируемых соображений (но можно сказать из-за скорости). В итоге я остановился на COM технологии. Подробности в исходниках. А в двух словах, выяснилось, что из-за того что GUI Photoshop обновляется при работе его скриптов, а через COM можно просто скрыть Photoshop и тогда скорость, заметно увеличивается.
При помощи простенького скрипта на JSFL упаковываю все .PNG в удобный для нас .SWC
Присоединяем библиотеку к проекту, обязательно устанавливаем в свойствах библиотеки 'Includet library'.
Для отображения формы используются три класса
Создаем файл, например, psd_parser_habr.bat
в него пишем
Кладем его в надежное место. Создаем еще одну ссылку «Открыть с помощью», для файлов .psd, и указываем psd_parser_habr.bat в качестве программы на открытие. Теперь можно любой файл .PSD 'открыть' этим батником, и получить из него ресурсы в виде .SWC и .XML
Я не стал приводить тут какой-либо код, в связи с тем, что он есть в проекте, есть несколько нюансов, но они тоже, расписаны в проекте.
Для тех кому лень самому писать, могут взять код из исходников, другим, достаточно идеи.
Можно еще много рассуждать на эту тему, критиковать код, и подход, 'централизировать' настройки всего этого зоопарка и прочая и прочая. И наверняка так и будет, но цель данной заметки, лишь в том, что-бы показать как минимальными средствами, получить вполне себе, хороший результат.
Вот собственно и все. Результат.
Скачать Проект на FD4 с Google Docs
UPD. Во избежание нюансов модифицировал арт.
Что делать?
А делать мы будем вот что.
Мы будем превращать psd файл в интерактивную форму, с которой уже можно работать очень прозрачно и не задумываться о координатах и прочих дизайнерских вещах.
Используемые программы
- Adobe Photoshop CS5.5
- Adobe Flash Professional CS5.5
- python 2.6-2.7
- FlashDevelop 4.0.1 RTM
Идея
Основная идея не нова и освещалась например тут:
Экспорт пользовательского интерфейса из Фотошопа
Я только расширяю ее до, практически, автоматического получения результата.
Алгоритм такой:
- Дизайнер делает с файлом что угодно его светлой душе, но придерживается некоторых правил именования и структурирования слоев
- Программист получает этот файл, пропускает его через парсер, и в конечном итоге получает .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. Загрузка формы
Для отображения формы используются три класса
- Form.as — Собственно форма
- InteractiveContainer.as — Интерактивный контейнер, который парсит имя слоя и создает соответствующий, интерактивный или не очень, элемент
- ResourceLoaderFromForm.as — загрузчик графики из библиотеки или, как опция, по URL
BAT. Автоматизируем
Создаем файл, например, psd_parser_habr.bat
в него пишем
@echo off
cls
python D:\main\FlashDevelop\habraForm\python\psd_parser.py %1
D:\main\FlashDevelop\habraForm\python\export_in_swc.jsfl
Кладем его в надежное место. Создаем еще одну ссылку «Открыть с помощью», для файлов .psd, и указываем psd_parser_habr.bat в качестве программы на открытие. Теперь можно любой файл .PSD 'открыть' этим батником, и получить из него ресурсы в виде .SWC и .XML
Я не стал приводить тут какой-либо код, в связи с тем, что он есть в проекте, есть несколько нюансов, но они тоже, расписаны в проекте.
Для тех кому лень самому писать, могут взять код из исходников, другим, достаточно идеи.
Можно еще много рассуждать на эту тему, критиковать код, и подход, 'централизировать' настройки всего этого зоопарка и прочая и прочая. И наверняка так и будет, но цель данной заметки, лишь в том, что-бы показать как минимальными средствами, получить вполне себе, хороший результат.
Вот собственно и все. Результат.
Скачать Проект на FD4 с Google Docs
UPD. Во избежание нюансов модифицировал арт.