Уважаемые посетители! Сообщаем Вам, что специалистами нашего сайта начато создание видеоуроков по материалам, представленным на страницах этого ресурса. Все создаваемые видеуроки будут выкладываться в свободном доступе самого распространённого видеохостинга YouTube и вставляться в статью с уроком.  Пример можно посмотреть здесь. Поэтому, в случаях когда Вам не понятны некоторые моменты отдельного урока, рекомендуем проверить наличие видеоурока на данную тему внутри статьи, либо следить за публикациями нашего канала на YouTube!

Создание анимационных кнопок
Рейтинг пользователей: / 2
ХудшийЛучший 
31.07.2013 19:39

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

создатьВ качестве примера создадим анимацию - кнопку, которая меняет свой внешний вид.

Видеоурок на данную тему:

Скачать Размер файла 11.6 МБ.

fybvfwbz Вначале следует создать заготовку, из которой будут сделаны все варианты нажатой и не нажатой кнопки. Создайте прямоугольник с закругленными краями и залейте его серым цветом 1.

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

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

редактировать Для придания кнопке динамичности (для создания анимации), необходимо изменить её рисунок для двух дополнительных состояний - при наведении на неё мыши, при щелчке мышью на кнопке. Для чего щёлкните правой кнопкой мыши на объекте и выберите в появившемся контекстном меню команду Редактировать ролловер (Edit Rollover) 6. Все рисунки, кроме редактируемой кнопки, станут невидимыми, и на экране появится дополнительная панель инструментов Интернет (Internet) 7.

ролловер Переход в режим редактирования осуществляется нажатием кнопки Редактировать ролловер (Edit Rollover) 8 на панели инструментов Интернет (Internet) 7.

рисунок Теперь нам необходимо создать рисунки для двух вышеуказанных положений кнопки. Выберите в раскрывающемся списке 9, расположенном в левой части панели Интернет (Internet) 7, вариант Сверху (Over) 10. Мы перешли к редактированию кнопки, когда на неё установлен указатель мыши. Ранее в списке был выбран вариант Обычное (Normal), что указывает на обычный вид кнопки в статичном состоянии (курсор не наведён на кнопку). Удалите контур текста и залейте его другим цветом. Так будет выглядеть кнопка при прохождении над ней указателя мыши 11.

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

картинку Нажмите экранную кнопку Закончить редактирование ролловера (Finish Editing Rollover) 14 на панели Интернет (Internet) 7 чтобы закончить редактирование кнопки и вернуться в обычный режим работы редактора. Теперь можно посмотреть, что у нас получилось.

изображение Нажмите экранную кнопку Прямой предварительный просмотр ролловеров 15 на панели Интернет (Internet) 7. Вы можете попробовать, как работает анимация кнопки 16. Установите указатель мыши на созданной Вами кнопке, и рисунок на ней изменится. Нажмите кнопку мыши, и не отпускайте ее. Пока Вы нажимаете кнопку мыши, на созданной кнопке нарисован третий рисунок. Отпустите кнопку мыши и отведите указатель мыши в сторону. На кнопке вновь появится начальный рисунок. Отожмите кнопку Прямой предварительный просмотр ролловеров 15 чтобы вернуться в режим редактирования.

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

разместить Чтобы подготовить созданный рисунок для публикации в сети Интернет, используется экранная кнопка Публикация в Интернете 18 на панели Интернет (Internet) 7 и на экране появится диалоговое окно 19, в котором настраивается формат Интернет – документа.

 

как сделать анимацию в корел дро, бесплатныеуроки.рф

Рис. 53. Последовательность создания анимированной кнопки в CorelDRAW

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

Обновлено 31.07.2013 21:14
 

Добавить комментарий


Защитный код
Обновить

Яндекс.Метрика
Рейтинг@Mail.ru