Разработка скинов для Flex 2 с помощью Flash, Photoshop или Fireworks

Автор: Narciso (nj) Jaramillo

Перевод: Андрей Горбатов (www.gorbatov.org)

С помощью Flex 2 вы создаете приложения, которые будут выглядеть замечательно, так как по умолчанию используется встроенная тема для компонентов - Halo Aeon. Но Flex дает нам возможность создавать собственный внешний вид компонентов. Если вы хотите сохранить основной вид темы Aeon, но подкорректировать цвета, закругления углов и т.д., вы можете стилизовать компоненты, используя CSS. Если же вы хотите изменить компоненты более радикально, вы должны создать новый набор скинов, который полностью заменить встроенный.
Если вы не знаете, использовать скинование или простую стилизацию, поиграйте с Flex Style Explorer (необходим Flash Player 9) или используйте режим Flex Builder Design, чтобы понять, что вы можете добиться с помощью стилизации. Если вы решите использовать стили, просто скопируйте CSS код из Style Explorer и передайте его разработчику. Но если для вас этого мало, то эта статья для вас.
В статье описывается, как с помощью Flash, Photoshop или Fireworks создавать набор скинов для Flex компонентов. Используя шаблон со скинами (см. ниже), вы можете создавать новые скины, затем экспортировать в файлы с наборами скинов, необходимые для Flex. Вам не надо учить MXML или ActionScript—языки, использующиеся во Flex приложениях—но, зато необходимо знать немного CSS, чтобы разобраться в приложенном файле. Если вы не знаете CSS, не переживайте, я вас познакомлю!

Требования

Необходим один из следующих продуктов:

Не обязательно: Flex Builder 2 (только для Windows, включает SDK) – Для тестирования созданных скинов

Необходимо загрузить один из следующих файлов (в зависимости от используемого приложения)

Необходимые знания

Небольшое знакомство с CSS не повредит.

Графическое скинование и Flex

Flex приложения состоят из индивидуальных компонентов. Существует два вида компонентов – виджеты и контейнеры. Виджеты – это знакомые нам элементы пользовательского интерфейса, такие как Button (кнопка), CheckBox (чекбокс) или ComboBox (выпадающий список). Контейнеры – это компоненты, такие как Accordion, TabNavigator и Panel, содержащие в себе виджеты. (Есть еще контейнеры как HBox и VBox, помогающие расположить в себе элементы, но такие контейнеры, как правило, не имеют визуального представления и поэтому их нельзя скиновать.)
Каждый компонент, который можно скиновать, состоит из элементов для скинования. Для таких элементов, как кнопка, эти элементы соответствуют различным ее состояниям:

Другие компоненты имеют более сложный набор скинов. Например, ScrollBar (прокрутка) имеет скины для  отпущенного/наведенного/нажатого/выключенного состояния верхней стрелки, тот же набор скинов для нижней стрелки, а также для бегунка и полосы прокрутки.
Несмотря на сложность компонентов, каждый отдельный скин – это просто графический набор. Вы можете создавать элементы скинов как графические файлы или как символы во Flash. Иногда это похоже на создание изменяющихся при наведении изображений в HTML: вы создаете одно GIF или JPEG изображение для нормального состояния, а другое для наведенного. В отличие от HTML, во Flex 2 вы можете скиновать элементы с помощью CSS.
Возможно, все это звучит нудно и сложно: создание кучи маленьких картинок, затем написание CSS кода, чтобы все это связать. Но все еще впереди!

Перед началом рассмотрим один аспект – масштабирование скинов.

 

 

Масштабирование

Возможность масштабирования скинов означает, выглядит ли компонент корректно при изменении его размера. Вы можете создать скин определенного размера для Button, но на самом деле в приложении используются кнопки различного размера. Обычно, они шире или уже, чем вы нарисовали, потому что размер кнопки зависит от количества текста и используемого шрифта. По умолчанию, скин будет растягиваться и сжиматься, чтобы соответствовать размеру кнопки.
При сжатии/растяжении растрового скина, возникает две проблемы. Во-первых, скин может стать пикселизованным или мутным, особенно на границах. Во-вторых, если вы используете закругленные элементы, их формы могут быть искажены при изменении пропорции растра (если вы используете векторные скины, то для вас актуальна только вторая проблема.)
На рисунке пример того, что может быть с растровым скином:
Stretching a bitmap skin
Рисунок 1. Растяжение растрового скина
Как вы заметили, правая граница кнопки выглядит немного тоньше, углы растянуты по горизонтали.
Если вы захотите проделаеть что-то подобное  в HTML с помощью таблиц, вам придется нарезать скин на отдельные картинки и масштабировать их отдельно:

Этот метод работает, но увеличивает количество изображений, которыми надо управлять. Запомните, что скин для кнопки состоит из четырех частей, значит, вам необходимо управляться с 36 картинками ради одной кнопки!
К счастью, Flex имеет более удобный способ работы с этим - scale-9 grid (сетка масштабирования) (также известная как "9-slice" – 9 частей). Вместо нарезки растра, вы просто указываете Flex, где должны проходить линии отреза, и он автоматически масштабирует необходимые части. Итак, для нашей кнопки, эта сетка будет выглядеть так:
Arrows showing which way the different portions scale
Рисунок 2. Стрелки показывают направления масштабирования
Имейте в виду, что даже при использовании этой сетки, центральная часть будет масштабироваться в обоих направлениях. Если вы создали растровый скин с вертикальным градиентом, то при растяжении кнопки по вертикали, он будет выглядеть не очень хорошо (проблема может быть заметна даже при малейших изменениях). При создании векторных скинов во Flash данная проблема отсутствует.
Я расскажу, как использовать сетку масштабирования позже. Возможно, вам и не придется использовать сетку масштабирования, так как она встроена в наши шаблоны. Также, не все скины должны масштабироваться.
Теперь начнем непосредственно создавать скины. Перейдите к разделу, соответствующему вашей среде разработки: "Использование Flash", " Использование Photoshop" или "Использование Fireworks."

Использование Flash

Перед началом приведу несколько подсказок по использованию Flash файла с шаблоном:

1. Загрузка файла со скином

Загрузите flex_skins_flash.zip и распакуйте его в папку flex_skins. Если хотите, то можете работать с копией этого файла, чтобы потом создать на основе исходного другие скины.

2. Редактирование элементов скина

Запустите Flash 8 и откройте flex_skins.fla из рабочей папки. Вы увидите все скины на сцене. Каждый элемент соответствует символу в библиотеке.
Чтобы их редактировать:

  1. Кликните два раза по символу скина, чтобы редактировать на месте. (Вы также можете найти соответствующий элемент в библиотеке.)
  2. Измените скин или создайте собственный.
  3. По окончанию редактирования кликните два раза вне элемента или нажмите кнопка «Назад» в левом верхнем углу сцены (над таймлайном).

При редактировании символов обращайте внимание на точку регистрации (знак «+» в левом верхнем углу символа). Flex всегда помещает точку регистрации в левый верхний угол компонента. Поэтому вы должны поместить точку регистрации туда же (кроме бегунка скроллбара, который смещен на один пиксель.)
Если размер вашего скина отличается от изначального, то вам придется редактировать сетку масштабирования.
Этапы редактирования сетки масштабирования:

  1. По окончанию редактирования, вернитесь на основную сцену.

3. Экспорт скина

Экспорт очень прост - выберите File > Publish. При этом автоматически в той же папке создастся файл flex_skins.swf. Этот файл и файл flex_skins.css необходимы нам для скинования Flex приложения.
После публикации swf переходите в раздел  "Редактирование стилей".

Использование Photoshop

В Photoshop создаются растровые скины. При этом необходимо обоатить внимание на следующие моменты:

Вот несколько подсказок по использованию файла с шаблоном:

1. Загрузка файла со скином

Загрузите flex_skins_photoshop.zip и распакуйте его в папку flex_skins.

 

2. Редактирование элементов скина

Запустите Photoshop CS2 и откройте файл flex_skins.psd. Вы увидите все элементы скина, расположенные на отдельных слоях.
Для редактирования необходимо:

3. (Необязательно) Использование нескольких слоев для создания элемента скина

По умолчанию, каждый элемента скина состоит только из одного слоя. Но вы можете добавить другие слои в элемент. При экспорте изображение нарезается на отдельные части, соответствующие элементам скинов. Мы заранее нарезали элементы, чтобы процесс экспорта происходил автоматически, но если вы хотите использовать несколько слоев для элемента, вы можете заменить исходную нарезку слоя пользовательской, но с тем же именем. Вот как это можно сделать:

  1. В свободном месте создайте слои для элемента скина.
  2. Выберите инструмент Slice и создайте границы нарезки вокруг вашей части скина. (При этом появятся границы нарезки других элементов).
  3. Выберите инструмент Slice Select и кликните дважды по исходному элементу скина.
  4. В окне Slice Options задайте имя элемента скина (например, Button_upSkin) и нажмите Command+C (Mac OS) или Control+C (Windows), чтобы скопировать его. Закройте диалоговое окно.
  5. Кликните дважды по новой нарезке и вставьте имя нарезки из Шага 4 в качестве имени слоя. Нажмите OK.
  6. Удалите исходный слой элемента скина.

4. Экспорт скина

  1. На панели Layers, скройте слой HIDE BEFORE EXPORTING, расположенный в самом низу.
  2. Выберите File > Save for Web.
  3. Убедитесь, что выбран формат PNG-24.
  4. Нажмите Save.
    1. Выберите папку для экспорта скина.
    2. Убедитесь, что в Save As  стоит *.png.
    3. Убедитесь, что в Slices - All Slices.
  1. Нажмите Save.

Photoshop сохранит все элементы скина в отдельных файлах. (Например, Button_upSkin.png).
Пока не закрывайте Photoshop! Если ваши элементы отличаются от исходных элементов скина, то вам придется редактировать сетку масштабирования в CSS файле. Перейдите к разделу "Редактирование сетки масштабирования". А если вам не требуется ее редактировать, перейдите к разделу "Редактирование стилей"

Использование Fireworks

При создании скинов с помощью Fireworks используются растровые изображения вместо векторных. При этом есть несколько моментов, на которые надо обратить внимание:

Вот несколько подсказок по использованию файла с шаблоном:

1. Загрузка файла со скином

Загрузите flex_skins_fireworks.zip и распакуйте его в папку flex_skins.

2. Редактирование элементов скина

Запустите Fireworks 8 и откройте flex_skins.png. Вы увидите все элементы скина, расположенные на отдельных слоях.
Для редактирования необходимо:

  1. Выбрать слой соответствующего элемента скина. Мы предлагаем включить опцию Single Layer Editing из контекстного меню панели Layers, а затем найти необходимый слой. Также вы можете выключить опцию Single Layer Editing и выбирать слои через элементы на сцене.
  2. Удалите изображение слоя и создайте свое, если необходимо.

Заметьте, что фреймы в файле не используются.

3. Экспорт скина

  1. В панели Optimize убедитесь, что стоит PNG32.
  2. Выберите File > Export.
  3. Выберите папку для экспорта.
  4. Создайте папку images.
  5. Из меню Export выберите Layers to Files.
  6. Убедитесь, что отмечен Trim Images.
  7. Нажмите Export.

Fireworks сохранит все элементы скина в отдельных файлах. (например, Button_upSkin.png).
Пока не закрывайте Fireworks! Если ваши элементы отличаются от исходных элементов скина, то вам придется редактировать сетку масштабирования в CSS файле. Перейдите к разделу "Редактирование сетки масштабирования". А если вам не требуется ее редактировать, перейдите к разделу "Редактирование стилей"

Редактирование сетки масштабирования для растровых изображений

Как я упомянул выше, текущие версии Photoshop и Fireworks не поддерживают автоматического редактирование сетки масштабирования. Придется делать это вручную

  1. Откройте файл flex_skins.css в текстовом редакторе. (Вы также можете открыть его с помощью Flex Builder.)
Button
{
disabledSkin: Embed
   (source="images/Button_disabledSkin.png",
            scaleGridLeft="4",
            scaleGridTop="4",
            scaleGridRight="78",
            scaleGridBottom="18");
downSkin: Embed
   (source="images/Button_downSkin.png",
            scaleGridLeft="4",
            scaleGridTop="4",
            scaleGridRight="78",
            scaleGridBottom="18");
overSkin: Embed
   (source="images/Button_overSkin.png",
            scaleGridLeft="4",
            scaleGridTop="4",
            scaleGridRight="78",
            scaleGridBottom="18");
upSkin: Embed
   (source="images/Button_upSkin.png",
            scaleGridLeft="4",
            scaleGridTop="4",
            scaleGridRight="78",
            scaleGridBottom="18");
}
    1. Если вы не видите никаких параметров scaleGrid, значит, эта часть не масштабируется и ее можно пропустить.
    2. Вернитесь в файл с изображением, прикиньте, где должна проходить сетка масштабирования. Для этого увеличьте необходимую часть скина и проведите гайдлайны.
    3. Включите линейку и отмеряйте, расстояние от всех линий сетки масштабирования  до левой границы скина.
    4. Переместите значения, подсчитанные на предыдущем этапе, в CSS файл.
    5. Если для различных элементов одного компонента сетка масштабирования одинакова, ее код можно просто скопировать.
  1. Сохраните CSS файл.

Редактирование стилей

После создания скинов необходимо добавить некоторые стили в CSS файл:

Если вы знаете, как CSS работает в HTML, вам будет легко произвести эти настройки.

Текстовые стили

Сначала определитесь с основным шрифтом для большинства виджетов. Предположим, вы хотите использовать голубоватый цвет и  9-px Verdana. Задать это вы можете в CSS файле в правиле global:

global
{
   color: #333399;
   fontFamily: Verdana;
   fontSize: 9px;
}

Заметка: Опытные CSS-ники заметят, что используется fontFamily вместо font-family. Flex понимает оба синтаксиса.
Если вы хотите применять свои стили для различных компонентов, просто добавьте их в соответствующие CSS правила. Например, если вы хотите, чтобы на кнопках был жирный шрифт, просто добавьте между фигурными скобками fontWeight: bold для Button.
Вы также можете задать цвет текста при наведении и при нажатии: textRollOverColor и textSelectionColor.

Задание цветов компонентов

Многим компонентам можно задать цвета, отображающиеся при выборе, наведении указателя мыши, попадании в фокус. Через скинование эти цвета задать нельзя.
А через стили можно:

Если вы хотите применять стили borderColor или backgroundColor к конкретным компонентам, просто добавьте соответствующее правило в CSS файл:

List
{
   borderColor: #333366;
   backgroundColor: #CCCCFF;
}

Задание фона приложения

Гораздо легче задать цвет фона приложения через CSS, нежели использовать растровый скин для фона как в Photoshop или в Fireworks. Для этого необходимо просто удалить атрибут backgroundImage из правила для Application и заменить его следующим:

Application {
   backgroundColor: #CCCCFF;
}
Application
{
   backgroundGradientColors: [#CCCCFF, #666699];
}

Задание области контента для Panel

Panel отличается от других компонентов, тем, что он может содержать другие компоненты. При создании скина  для Panel с более тонкими границами, чем имеют содержащиеся в ней компоненты, вы можете заметить наложение. Исправить это можно задав толщину границ всех сторон Panel в CSS файле. Также можно задать высоту заголовка.

Panel
{
   borderThicknessTop: 5;
   borderThicknessLeft: 5;
   borderThicknessBottom: 5;
   borderThicknessRight: 5;
   headerHeight: 20;
}

В CSS файлах, которые идут в нашем архиве, данные стили уже заданы.

Использование Flex Style Explorer

Чтобы поэкспериментировать с другими стилями, воспользуйтесь Flex Style Explorer.

Создание нескольких скинов для одного компонента

Для многих компонентов необходим только один скин. А для некоторых необходимо несколько скинов. Например, необходимо сделать все кнопки одинаковыми, а одну более яркую.
Вот как это сделать:

  1. Определитесь с именем нового скина. Например, glowButton. (По соглашению, собственные названия скинов называются с прописной буквы.)
  2. Заметьте, что элементы скина называются, например, для кнопки: Button_upSkin, Button_overSkin, Button_downSkin, и Button_disabledSkin.
.glowButton
{
   upSkin: Embed(source="flex_skins.swf", symbol="glowButton_upSkin");
   overSkin: Embed(source="flex_skins.swf", symbol="glowButton_overSkin");
   downSkin: Embed(source="flex_skins.swf", symbol="glowButton_downSkin");
   disabledSkin: Embed(source="flex_skins.swf", symbol="glowButton_disabledSkin");
}
.glowButton
{
   upSkin: Embed(source="images/glowButton_upSkin.png");
   overSkin: Embed(source="images/glowButton_overSkin.png");
   downSkin: Embed(source="images/glowButton_downSkin.png");
   disabledSkin: Embed(source="images/glowButton_disabledSkin.png");
}
<mx:Button  styleName="glowButton"  label="My Glowing Button"/>

Обратите внимание, что Flex использует атрибут styleName вместо class в HTML.

Тестирование скинов и стилей

На этом этапе вы можете передать ваши скины и CSS файл Flex разработчику. Если у вас есть Adobe Flex Builder 2, вы можете протестировать их сами.
Заметка: Эти инструкция применимы к standalone Flex Builder, а не к  плагинам к Eclipse.

  1. Запустите Flex Builder 2.
  2. Выберите File > New > Flex Project.
  3. Убедитесь, что выбрано Basic нажмите Next.
  4. Введите название проекта.
  5. В Project Contents уберите галочку Use Default Location.
  6. Нажмите Browse и перейдите в папку со скинами. В папке должен быть файл FlexSkinTest.mxml.
  7. Нажмите Next.
  8. Нажмите Browse для Main application file, выберите FlexSkinTest.mxml и нажмите OK.
  9. Нажмите Finish.
  10. Выберите Run > Run FlexSkinTest , или нажмите зеленую кнопку Run на панели.

В окне браузера вы увидите все ваши компоненты. Протестируйте компоненты и убедитесь, что все выглядит корректно.
Чтобы протестировать внешний вид компонентов с различными параметрами, используйте режим design  и измените размеры компонента или параметры его шрифта:

  1. В виде Navigator слева, нажмите дважды на FlexSkinTest.mxml.
  2. Нажмите кнопку Design на панели вверху документа.
  3. Найдите необходимый элемент и выберите его.
  4. Измените размер элемента.
  5. Если вы хотите изменить шрифт, используйте вид Properties, расположенный  в правом нижнем углу.
  6. Запустите приложение.

Не все скины корректно отображается в режиме design. Например, растровые скины выглядят растянутыми, а Panel вообще не отображается. Не паникуйте, а просто запустите приложение и убедитесь, что все в порядке в браузере.

Что дальше?

Чтобы использовать скин, скопируйте CSS файл и файлы со скином в папку приложения и в файл приложения добавьте строку:

<mx:Style source="flex_skins.css"/>

Вот и все!

Благодарности

Kim Pimmel, Ryan Tandy, Rob Adams, Glenn Ruehle.