Магазин портативной техники "Портатив"
:: на главную
CorelDRAW > 12.2. Создание анимированных кнопок

Графические ссылки на WWW - страницах значительно лучше воспринимаются, если они меняют свой вид при наведении на них мыши и при щелчке мышью. В CorelDRAW 10 создание таких объектов автоматизировано.

В качестве примера создадим кнопку, которая меняет свой внешний вид. Вначале следует создать заготовку, из которой будут сделаны все варианты нажатой и не нажатой кнопки. Создайте прямоугольник с закругленными краями и залейте его черным цветом. Создайте копию прямоугольника, немного сдвинув его левее и выше, после чего залейте копию белым цветом. Поместите сверху надпись, установите для текста черный контур и залейте его белым цветом. Кнопка в не нажатом состоянии готова (Рис. 12.3, слева). Далее из нее следует сделать динамический объект.

Кликните для увеличения

Рис. 12.3. Различные фазы. кнопки

Выделите рисунок кнопки и выберите команду меню Effects Rollover Create Rollover (Эффекты Нажимаемые кнопки Создать нажимаемые кнопки). Внешне ничего не изменится, но теперь вместо нескольких объектов в документе имеется нажимаемая кнопка в обычном состоянии, о чем говорит надпись в строке состояния Rollover [NORMAL] (Нажимаемая кнопка [ОБЫЧНЫЙ]).

Для изменения рисунка в других режимах щелкните правой кнопкой мыши на объекте и выберите в появившемся вспомогательном меню команду Edit Rollover (Редактировать нажимаемую кнопку). Все рисунки, кроме редактируемой кнопки, станут невидимыми, и на экране появится дополнительная панель инструментов Internet (Интернет). Если вы часто создаете рисунки для Интернета, следует постоянно поместить ее в окне программы. Если панель инструментов Internet (Интернет) все время видна, то для создания кнопки можно не выбирать команду меню, а нажать в панели кнопку "Create Rollovers". Переход в режим редактирования осуществляется нажатием кнопки "Edit Rollover".

После перехода в режим редактирования вы должны создать рисунки для двух других положений кнопки. Выберите в списке, расположенном в левой части панели Internet (Интернет), вариант OVER (Над). Вы перешли к редактированию кнопки, когда на нее установлен указатель мыши. Ранее в списке был выбран вариант NORMAL (Обычно), что указывает на обычный вид кнопки. Удалите контур текста и залейте его черным цветом. Так будет выглядеть кнопка при прохождении над ней указателя мыши (Рис. 12.3, в центре).

Выберите в списке вариантов рисунка значение DOWN (Нажать). Теперь осталось нарисовать нажатую кнопку. В качестве заготовки предлагается первый вариант. Сделайте черным текст и уберите его контур. Подвиньте текст и белый прямоугольник ниже и правей, а черный прямоугольник - в противоположную сторону. Теперь кнопка выглядит нажатой (Рис. 12.3, справа).

Нажмите кнопку "Finish Editing Rollover" чтобы закончить редактирование кнопки и вернуться в обычный режим работы редактора. Теперь можно посмотреть, что у нас получилось. Нажмите кнопку "Edit Rollover". панели Internet (Интернет). Вы можете попробовать, как работает анимация кнопки. Установите указатель мыши на созданной вами кнопке, и рисунок на ней изменится. Нажмите кнопку мыши, и не отпускайте ее. Пока вы нажимаете кнопку мыши, на созданной кнопке нарисован третий рисунок. Отпустите кнопку мыши и отведите указатель мыши в сторону. На кнопке вновь появится начальный рисунок. Не беспокойтесь, если изменения рисунка происходят слишком медленно. При реальной работе в Интернете все будет происходить значительно быстрее. Отожмите кнопку "Finish Editing Rollover " чтобы вернуться в режим редактирования.

Если вы после выделения анимационной кнопки нажмете кнопку "Extract Rollover Object" панели Internet (Интернет), то все фазы будут выделены в отдельные объекты, расположенные друг на друге. Вы можете перетащить их мышью в сторону, чтобы убедиться в этом. Чтобы подготовить созданный рисунок для публикации в Интернете, нажмите кнопку "Internet" панели Internet (Интернет) и на экране появится диалог, в котором настраивается формат Интернет - документа. При сохранении будут созданы не только рисунки, но и необходимый код, позволяющий менять внешний вид объектов при просмотре WWW - страницы. Рассмотрим этот диалог подробнее.


<< назад содержание вперед >>