Как знают многие флешеры (и не только другие), создать простую форму на основе png-ресурсов в принципе несложно, но что делать, если эти формы постоянно меняются, корректируются и множатся, как грибы после дождя? Что делать? И это то, что мы сделаем.
Мы превратим psd-файл в интерактивную форму, с которой вы сможете работать очень прозрачно и не думать о координатах и других дизайнерских вещах.
Используемые программы
- Adobe Photoshop CS5.5
- Adobe Flash Профессиональный CS5.5
- питон 2.6-2.7
- FlashDevelop 4.0.1 RTM
Идея
Основная идея не нова и была рассмотрена, например, здесь: Ээкспортировать пользовательский интерфейс из Photoshop Я лишь расширяю его, чтобы почти автоматически получить результат. Алгоритм такой:- Дизайнер делает с файлом все, что хочет, но придерживается некоторых правил именования и структурирования слоев.
- Программист получает этот файл, пропускает его через парсер и в конечном итоге получает файлы .
XML и .
SWC.
- Подключает к проекту .
SWC и .
XML (если это не первый раз, то к проекту уже все подключено)
Подробнее
Фотошоп.
Правила именования и структурирования слоев.
Вообще говоря, при анализе .
PSD-файла мы можем сделать довольно многое, например, пробелы в начале и конце имени слоя, пробелы в имени слоя, кириллицу в имени слоя и т. д. Сейчас я говорю только о правилах, если их соблюдать, то мы получим форму с минимальным функционалом.
Мы сделаем такую форму: 
Начнем сверху:
- text_custom_cursor — это слой, в котором находится маркер для текста.
В дальнейшем по этому имени мы получим доступ к маркеру и на основе его геометрических характеристик создадим текстовое поле.
- text_sound_on_off - аналогично первому слою.
XML, хотя я их сейчас выгружаю.
- radio_set_cursor — папка (набор), которая в недрах AS3 превратится в радиокнопку
далее идут слои с «говорящими» состояниями радио_вкл
радио_выкл.
радио_фон
- radio_set_sound
радио_вкл
радио_выкл.
радио_фон
- button_set_1 — папка (набор), которая в недрах AS3 превратится в Button далее идут слои с «говорящими» состояниями b_1_up b_1_over b_1_вниз b_1_fon
- button_set_2 b_1_up b_1_over b_1_вниз b_1_fon
Это значит, что при загрузке мы получим 2 радиоКнопки и, соответственно, Кнопки, в XML-виде, но ресурсы для них будут в единственном экземпляре, что немаловажно! Все остальное можно называть как угодно, но лучше это как-то организовать, поэтому я называю их «декор_+как угодно» В целом все по правилам.
Питон.
Загрузка в форматы .
XML и .
PNG Почему питон? Потому что я делаю на нем все, что можно автоматизировать.
Gimp + python я не использовал, потому что Gimp не поддерживает папки (набор), а в них, так сказать, вся суть.
Я не стал использовать javaScript по своим, достаточно труднообоснованным причинам (но можно сказать из-за скорости).
В конце концов я остановился на технологии COM. Подробности в источниках.
В двух словах получилось, что за счет того, что GUI Photoshop обновляется при запуске его скриптов, а через COM можно просто скрыть Photoshop и тогда скорость заметно возрастает.
JSFL. Упаковка всего этого в .
SWC С помощью простого JSFL-скрипта я упаковываю все .
PNG в удобный для нас .
SWC Присоединяем библиотеку к проекту, в свойствах библиотеки обязательно ставим «Includet Library».
SWF. Загрузка формы
Для отображения формы используются три класса- Form.as — Фактическая форма
- InteractiveContainer.as — интерактивный контейнер, который анализирует имя слоя и создает соответствующий элемент, интерактивный или нет.
- ResourceLoaderFromForm.as — графический загрузчик из библиотеки или, как вариант, по URL
ЛЕТУЧАЯ МЫШЬ.
Мы автоматизируем
Создаем файл, например, 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 УПД.
Чтобы избежать нюансов, я изменил арт. Теги: #flash #python #photoshop #ActionScript #Adobe Flash
-
Комментарий К Статье О Проекте К28А
19 Oct, 24 -
Новый Продукт «Tm Google Site Analyzer»
19 Oct, 24 -
Криптография В Java. Mac-Класс
19 Oct, 24
