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

в 11:53, , рубрики: actionscript, flash, photoshop, python, метки: , , ,

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

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

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

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

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

Автор: lunariusis

* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js