Создание изображений-карт

Изображение-карта (image-map) — это цельное (не разбитое на фрагменты, как это описано выше) изображение, у которого, тем не менее, определены области, называемые "горячими" и имеющие ссылки на другие текстовые файлы, изображения или Web-страницы. "Горячие области" при этом могут быть произвольной формы, расположения и количества. Изображение-карту можно создать с помощью совокупности инструментов группы Image Map (Изображение-карта):

• Rectangle Image Map (Прямоугольная область-карта) ( )

• Circle Image Map (Круглая область-карта) ( )

• Polygon Image Map (Многоугольная область-карта) ( ).

Назначение этих инструментов понятно из названия. Присвоить параметры "горячим" областям можно с помощью палитры Image Map (Изображение карта). Параметры для такой области ничем не отличаются от тех, которые характерны и для фрагментов. Если требуется изменение формы, перемещение или установка параметров изображения-карты, следует использовать инструмент Image Map Select (Выделение изображения-карты) ( ) Для отображения или сокрытия границ изображения-карты используется инструмент Image Map Visibility (Отображение изображения-карты) ( ), расположенный в палитре инструментов.

Создание активных кнопок (ролловеры)

Активные кнопки (rollover) широко используются в Web-дизайне и представляют собой изображение, которое изменяет свой вид, когда к нему подводят курсор. Такая кнопка производит приятное впечатление, а секрет ее прост: на самом деле она состоит из двух (иногда больше) изображений.

Первое изображение - исходное, которое выводится на экран сразу же после загрузки страницы, а второе - заменяемое, которое отображается как раз в момент указывания курсором на кнопку. Возможны и другие реакции ("поведение") кнопки, например, на щелчок кнопки мыши, на отпускание кнопки мыши и т. п.

Программа Adobe ImageReady позволяет легко создавать такие активные кнопки с помощью специализированной палитры Rollover (Ролловер) и универсальной палитры Layers (Слои).

В палитре Rollover (Ролловер) отображаются миниатюры для различных состояний, первое из которых является исходным - Normal (Нормальное), это состояние не подлежит изменению. Последующие состояния можно изменять. Кроме того, данная палитра отображает фрагменты (slices), изображения карты (image maps), что помогает отслеживать эффекты, применяемые к ним, и кадры (frames) анимации, что позволяет изменять состояния активной кнопки, включающие или прекращающие анимацию.

Для настройки палитры необходимо выполнить команду Palette Options (Параметры палитры) меню палитры, на экран выводится диалоговое окно Rollovers Palette Options (Параметры палитры Ролловеры) (рис. 1.19.3.).

Рис. 1.19.3. Диалоговое окно Rollovers Palette Options

В этом окне, помимо традиционных установок размеров пиктограмм, предлагается два дополнительных поля.

В группе Palette Contents (Содержание палитры) представлены флажки Include Slices and Image Maps (Включить фрагменты и изображения-карты) и Include Animation Frames (Включить кадры). Их необходимо установить, если активная кнопка взаимодействует с анимированными изображениями или изображениями-картами.

В группе Thumbnail Contents (Содержание миниатюры) представлены два переключателя Object Bounds (По границам объекта) и Entire Document (Весь документ), обеспечивающие различную степень подробности в миниатюрах. Флажок Show Thumbnail Icon Badges (Показывать на миниатюрах обозначения) обеспечивает на миниатюрах условные обозначения для фрагментов, кадров и т. д.

Элементы для активных кнопок легко получить с помощью палитры Rollovers (Ролловеры). Следует предпочесть фрагменты-слои (layer-based slices), потому что размер изображения может меняться в процессе работы, а фрагмент-слой автоматически подстроится под общий размер изображения. Для создания такого изображения необходимо нажать на кнопку Create Layer-based Rollover (Создать изображение из слоя) в нижней части палитры Rollovers (Ролловеры). По умолчанию этому изображению активной кнопки присваивается состояние Over (Над кнопкой) (рис. 1.19.4, 1.19.5).

Если данное состояние не устраивает, активной кнопке можно присвоить другое состояние или даже несколько, если снабдить ее несколькими изображениями.

Рис. 1.19.4. Исходное положение слоев при отсутствии активной кнопки

Рис. 1.19.5. Создание активной кнопки с состоянием Over

Рис. 1.19.6. Диалоговое окно Rollover State Options

Для изменения состояния необходимо выделить соответствующее изображение в палитре Rollovers (Ролловеры) и выполнить команду Rollover State Options (Состояния ролловера) меню палитры, которая открывает одноименное диалоговое окно (рис. 1.19.6).

В группе переключателей State (Состояние) можно включить один из следующих переключателей:

• Over (Над кнопкой) - определяет состояние кнопки или изображения, когда над ними располагается курсор. Этот вариант принимается по умолчанию;

• Down (Нажатая кнопка) - определяет состояние кнопки или изображения в тот момент, когда нажата кнопка мыши. Это состояние продолжается до тех пор, пока не отпущена кнопка мыши;

• Click (Щелчок) - определяет состояние кнопки или изображения, когда выполнен щелчок на кнопке или изображении. Это состояние сохраняется до активизации следующего состояния;

• Out (Вне кнопки) - определяет состояние кнопки или изображения, когда курсор покидает площадь кнопки или изображения. Как правило, для этого служит состояние Normal (Нормальное), хотя это и не обязательно;

• Up (Отпущенная кнопка) - определяет состояние кнопки или изображение, когда отпускается кнопка мыши;

• Custom (Пользовательская кнопка) - позволяет создать новое состояние, если составить соответствующую программу на языке JavaScript;

• Selected (Выделенный) - определяет состояние кнопки при нажатии кнопки мыши на соответствующем фрагменте. Это состояние сохраняется до щелчка на другом фрагменте. Флажок Use as Default Selected State (Выделенное состояние по умолчанию) позволяет инициализировать изображение в состоянии Selected (Выделенный) при просмотре в браузере.

Для создания миниатюры нового состояния необходимо использовать кнопку New State (Новое состояние) в нижней части палитры или одноименную команду в меню палитры.

Большим преимуществом палитры Rollovers (Ролловеры) является возможность непосредственного действия активной кнопки в режиме просмотра, который активизируется инструментом Rollover Preview (Просмотр активной кнопки). Кроме того, предусмотрен просмотр действия активной кнопки в интересующем пользователя браузере с помощью инструмента Preview in Default Browser (Просмотр в браузере по умолчанию) или с помощью команд меню File/Preview In (Файл/Просмотр в). Последний инструмент загружает соответствующий браузер и демонстрирует действие активной кнопки.

Активную кнопку можно также анимировать, если в качестве изображения для различных состояний использовать анимированные изображения в формате GIF. Для добавления кадров анимации к кнопке состояния необходимо выделить ее строку, а затем выполнить одно из двух действий:

• нажать на кнопку Create Animation Frame (Создать анимационный кадр) в палитре Rollover (Ролловер);

• выполнить команду New Animation Frame (Новый анимационный кадр) меню палитры.

А затем в палитре Animation (Анимация) создать требуемые кадры для анимированного изображения.

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

Для сохранения стиля активной кнопки необходимо в меню палитры Styles (Стили) выполнить команду New Style (Новый стиль) или нажать на кнопку Create New Style (Создать новый стиль) в нижней части палитры. В результате на экран будет выведено диалоговое окно Style Options (Параметры стиля), в котором можно определить элементы активной кнопки, включаемые в стиль.