Photoshop for WEB
       

Состояния анимированных кнопок


Состояние анимированной кнопки определяется расположением слоя, его стилями и другими атрибутами (табл. 12.1 и 12.2).

Таблица 12.1. Состояния анимированных кнопок, связанные с выполняемыми пользователем действиями

Состояние Действие пользователя
Over Мышь наведена на изображение, но кнопка мыши не нажата
Down Нажатие кнопки мыши на области. Состояние длится, пока кнопка мыши нажата
Click

Щелчок мышью на области анимированной кнопки. Состояние длится до тех пор, пока не будет выполнено другое действие
Out Мышь за пределами активной области изображения
Up Кнопка мыши отпущена

Таблица 12.2. Состояния анимированных кнопок, не связанные с действиями пользователя

Состояние Описание
/Normal Характеризует вид анимированной кнопки при первой загрузке изображения в браузер
Custom Характеризует отличное от стандартных состояние, которое можно создать, используя код JavaScript
.None Сохраняет текущее состояние изображения для дальнейшего его использования в качестве состояния анимированной кнопки. Это состояние на web-странице не отобразится

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

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

  • нажать
    кнопку, находящуюся в нижней части панели анимированных кнопок;

  • выполнить команду New Rollover State (Новое состояние) из меню панели ани мированных кнопок.

    • ВНИМАНИЕ. При назначении состояния фрагменту или карте-изображению помните, что они долж- ны быть основанными на слое. Это требование связано с тем, что размер содержимого слоя может изменяться в процессе создания анимированной кнопки.

    При необходимости изменить состояние можно выполнить команду Rollover State Options... (Настройки состояния...) из меню панели анимированных кнопок (рис. 12.2).




    Рис. 12.2. Диалоговое окно команды Rollover State Options...

    Состояние можно скопировать и заменить им другое. При этом слои состояния-источника заменят слои состояния-приемника. Скопировать можно кадры анимации и вставить их как состояния (и наоборот — вставить состояния как кадры).

    ПРИМЕЧАНИЕ. Команды копирования из меню панели анимации и панели анимированных кнопок используют внутренний буфер обмена, предназначенный исключительно для этих процессов, следовательно, содержимое основного буфера ImageReady остается в целости и сохранности.

    Для того чтобы скопировать состояние, нужно выделить его и выполнить команду Copy Rollover State (Копировать состояние) из меню панели анимированных кнопок. Затем необходимо выбрать, какое состояние вы хотите заменить скопированным и выполнить команду Paste Rollover State (Вставить состояние).

    Состояние может включать в себя анимацию. Чтобы добавить анимацию, нужно выполнить следующее:

  • с помощью панели анимированных кнопок создать новое состояние или выбрать миниатюру уже существующего, которое надо сделать анимированным;


  • с помощью панели анимации создать кадры.


    • Чтобы удалить одно состояние, можно использовать кнопку
    или команду Delete State (Удалить состояние), а для удаления всех состояний применя ется команда Delete Rollover (Удалить анимированную кнопку) из меню панели анимированных кнопок.

    Проверить работу анимированной кнопки можно либо непосредственно в ImageReady, либо в браузере. Для просмотра в ImageReady служит кнопка
    . Нажатие кнопки приводит к выводу изображения в окне браузера вместе с HTML-кодом, служащим для его помещения на web-страницу. Если для просмотра по умолчанию используется другой браузер, то на кнопке
    будет изображен его логотип.


    Содержание раздела