Фрагменты

Фрагменты представляют собой базовые компоненты для создания интерактивности в программе Adobe Fireworks. Фрагменты – это web-объекты в коде HTML. Просмотр, выбор и переименование фрагментов производится в области «Web Layers» (Веб-слои) на панели «layers» (Слои) (Рисунок 2).

Рисунок 2 – Панель «Layers» (Слои)

Фрагментирование разделяет документ Fireworks на части меньшего размера и экспортирует каждую часть в виде отдельного файла (Рисунок 3). В процессе экспорта программа Fireworks создает HTML-файл, содержащий код таблицы, которая служит для объединения в браузере частей изображения в единое целое.

Рисунок 3 – Фрагментирование разделяет документ на части

Фрагментирование изображения создает три основных преимущества:

• оптимизация изображений для ускорения загрузки;

• интерактивное добавление чтобы изображения реагировали на события мыши;

• упрощение обновлений для часто изменяемых частей веб-страниц (например, фотографии и имена на странице "Сотрудник месяца").

Работа с макетами фрагментов аналогична использованию таблицы в текстовом редакторе. При перетаскивании направляющей для изменения размеров фрагмента происходит изменение всех прилегающих прямоугольных фрагментов (Рисунок 4).

Рисунок 4 – Изменение размеров фрагмента

Форму прямоугольного объекта-фрагмента можно изменить, перетягивая окружающие его направляющие фрагментов. Если к одной направляющей привязано несколько объектов-фрагментов, то при перетягивании этой направляющей размер всех фрагментов будет изменяться одновременно.Если вдоль некоторой оси перетягивается одна направляющая, то все направляющие, расположенные вдоль той же оси, перетягиваются вместе с ней.

Многоугольный фрагмент может иметь произвольный вид (Рисунок 5).

Рисунок 5 – Примеры многоугольных фрагментов

Изменить размер многоугольного фрагмента перемещением направляющих невозможно. Изменение размера и формы осуществляется с помощью переноса угловых точек фрагмента (Рисунок 6).

Рисунок 6 – Изменение многоугольного фрагмента

Направляющие фрагментов определяют периметр и положение фрагментов (Рисунок 7).

Рисунок 7 – Фрагмент и его параметры

Интерактивные фрагменты

Назначить фрагментам интерактивность можно двумя способами:

• простая интерактивность;

• для создания более сложной интерактивности используется панель «behaviors» (Варианты поведения) (Рисунок 8).

Рисунок 8 – Панель «behaviors» (Варианты поведения)

Создание простой интерактивности

Простая интерактивность достигается созданием ролловера методом перетаскивания.

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

При выделении фрагмента в его центре появляется окружность с перекрестием в центре. Она называется маркером поведения (Рисунок 9).

Рисунок 9 – Маркер поведения

Перетаскивая маркер поведения с фрагмента-активатора на целевой фрагмент, можно легко создать эффект ролловера или замены изображения. При этом активатор может быть одновременно и целевым фрагментом.