Разработка фоновых элементов приложения

Разработка фоновых элементов приложения

Материалы к лекции Вы можете скачать здесь.

Приступим к разработке фоновых элементов приложения.

Фон

Варианты фона:

Фон приложения устанавливается в режиме меню "Модификация" - "Документ", выбирается цвет фона для разрабатываемого проекта. В дальнейшей работе может возникнуть необходимость окрашивать разные объекты проекта, отталкиваясь от цвета фона (например, заливать градиентом, переходящим в цвет фона). Поэтому 16-тиричное представление цвета фона необходимо скопировать.

В качестве фона может использоваться растровая импортированная графика. После импортирования ее в проект, она может быть преобразована в символ (типа "Графика") и отредактирована (на панели свойств во вкладке "Цветовой эффект" выбран стиль (например, прозрачность).

Перед импортом графического объекта во Флеш-проект его обрабатывают в Photoshop’е. Например, создается прямоугольник (цвет подбирается в зависимости от выбранной цветовой гаммы будущего приложения). Затем на него накладываются фильтры. После того, как достигнут необходимый эффект, изображение сохраняется, затем импортируется в среду разработки Флеш-проекта.

На рисунках ниже в качестве фона использована импортированная графика, графические примитивы предварительно обработаны в Photoshop’е при помощи фильтров. Остальные элементы приложения (панели, меню и др.) располагаются непосредственно "на" фоновых элементах (причудливо изогнутых графических изображений).

(рис 15.1) Рисунок с наложенным фильтром и его использование в приложении в качестве фона (рис 15.2) В качестве фона – импортированный рисунок (с наложенным фильтром) (рис 15.3) В качестве фона – импортированный рисунок (с наложенным фильтром) (рис 15.4) В качестве фона – импортированный рисунок (с наложенными фильтрами)

В качестве обрабатываемого в Photoshop’е изображения – фотография. Ее грани растушевываются, затем изображение сохраняется, импортируется в среду разработки Флеш-проекта. Как правило, на фоне такие обработанные фотографии размещают в углах, по краям экрана. Вокруг них располагают остальные элементы окна приложения – заголовок, панели, меню и др. На рисунках ниже в качестве фона использованы импортированные фотографии, обработанные в Photoshop’е с использованием растушевки: (рис 15.5) В качестве фона – импортированная фотография (с растушеванными краями) (рис 15.6) В качестве фона – импортированная фотография (с растушеванными краями) (рис 15.7) В качестве фона – импортированная фотография (с растушеванными краями)

Импортированная во Флеш-проект графика преобразуется в векторный формат, редактируется (удаляются ненужные элементы – на () заливка домов и тротуара кое-где удалена). Предварительно, рисунок обрабатывается в Photoshop (накладываются фильтры). (рис 15.8) Пример фона (рис 15.9) Пример фона

Часто элементы этого изображения фона являются кнопками меню - для этого они выделяются и преобразуются в символ "Кнопка"

Но порой выделение области кнопки на графическом объекте требует немалого времени. Еще один способ создания кнопок из фоновых элементов:

Панели

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

Виды панелей.

Панель – геометрический примитив (прямоугольник, окружность). На панели располагается текст (условие задачи). (рис 15.10) Пример панели для вывода текста

Обводка фигуры является "рамкой" панели, для обводки выбран соответствующий стиль. Заливка панели может быть однородная, градиентная, либо – текстурная (в качестве заливки используется обработанная Photoshop и затем импортированная во Флеш-проект графика, ). Своеобразного эффекта "объемности" панели можно добиться, если верхнюю и левую (правую) обводку окрасить цветом, более светлым, чем цвет самой панели, нижнюю правую (левую) – более темным.

Панель – геометрический примитив с измененной формой (). Для создания такой панели изменили форму прямоугольника (изменение формы векторного объекта рассмотрено в лекции 1), продублировали на экране изображение, сместив друг относительно друга, "зазор" между пересекающимися фигурами залили другим цветом. (рис 15.11) Пример панели – прямоугольник с измененной формой

Панель – геометрический примитив, преобразованный в символ "Графика". Затем символ делается полупрозрачным (на панели свойств – "Цветовой эффект" - "Стиль" - "Альфа-канал" задается величина прозрачности). Пример прозрачных панелей приведен на , .

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

(рис 15.12) Пример наложенных друг на друга прозрачных панелей

Панели – изображения фигур (коробки, мешки, окна и др). Такие изображения могут быть созданы во Флеш (, ) либо импортированы из других форматов. Импортированные изображения "растрируются" во Флеш и обрабатываются в соответствии со стилем разрабатываемого приложения.

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

(рис 15.13) Пример панелей – мешки (рис 15.14) Пример разработанного интерфейса приложения, в котором используются панели-мешки для перетаскивания в них слов. (рис 15.15) Пример панели "Окна" (рис 15.16) Пример панели "Телевизионного экрана"

Плавающие панели – изображение панели анимировано

Использование панелей позволяет визуально отделять области с разным назначением. Разделительные линии также помогают разграничивать экран на зоны. На приведен пример зонирования экрана панелями и разделительными линиями.

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

В приведенном выше примере используются прямы и круговые разделительные линии (, ).

Они созданы при помощи единого приема:

Комбинирование разнообразных стилей линий позволяет создавать оригинальные формы разделительных линий

Если выделить кружки, созданные при помощи линии "Точечный пунктир" и применить к ним прием "размытия" (Модификация" - "Фигура" - "Смягчить края заливки"), то получится уже знакомый нам эффект "размытия".

Линии, созданные при помощи "Сплошной линии" можно продублировать на экране – пусть две пересекаются, а третья, изначально окрашенная темнее и со смягченными краями заливки, дает эффект тени.

Созданные разделительные элементы преобразуйте в символ "Графика". Теперь их можно многократно вставлять в среду разработки проекта, менять размер, стиль ("Цветовой эффект" на панели свойств)., комбинировать друг с другом.

Еще один пример интерфейса, в котором кроме панелей для зонирования экранного пространства (отделения меню в верхней части экрана) использованы разделительные линии, приведен на

Созданные при помощи описанных выше приемов линии могут быть использованы не только в качестве разделителей экранных зон, но и как элементы дизайна:

для заполнения пустующих мест на экране (рис 15.22) Пример использования линий в дизайне

в качестве "осевой" линии, проходящей через центр группы однотипных объектов (рис 15.23) Пример использования "осевых" линий (рис 15.24) Пример использования "осевых" линий

Краткие итоги лекции:

При оформлении фона используют импортированные изображения, обработанные в растровом графическом редакторе (с наложением фильтров, с применением эффектов и др.)

Для редактирования фонового изображения во Flash его преобразуют в векторный формат.

Элементы фона могут выступать элементами интерфейса приложения, например, кнопками меню. "Невидимые" кнопки позволяют использовать элементы фонового изображения в качестве "изображения" кнопки.

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

Ключевые термины

Набор для практики:

Вопросы

Упражнения

Продолжаем разрабатывать приложение. Создайте отдельный слой – в нем сплошными линиями нанесите разметку (предварительное деление на зоны). Этот слой является рабочим и в дальнейшем подлежит удалению.

Создайте фон приложения, разработайте панели, разделительные линии.

Расположите созданные элементы в соответствии с разметкой. Вставьте из библиотеки созданный ранее заголовок.

Удалите слой с разметкой.