| | |
Анимация на Web-страницах
Программа FrontPage позволяет при оформлении Web-страниц использовать различные анимационные эффекты, заимствованные из программы PowerPoint, входящей в программный пакет Microsoft Office, предназначенной для подготовки презентаций.
Используя объект Бегущая строка (Marquee), можно заставить перемещаться строку текста в отведенной для него области. А с помощью анимации можно "оживлять" целые абзацы и задавать им различные направления для их перемещения.
При создании эффектов анимации используется панель инструментов DHTML Effects (рис. 20.9). Для ее размещения в главном окне программы выполните одно из следующих действий:
Рис. 20.9. Панель инструментов Эффекты DHTML
На панели инструментов расположены три списка. Список Вкл (Оn) содержит события, при наступлении которых выполняется динамический HTML-эффект. В табл. 20.1 перечислены возможные события, входящие в этот список.
Таблица 20.1. События, при наступлении которых применяется DHTML-эффект
| Событие | Описание |
| Щелчок (Click) | Щелчок кнопки мыши |
| Двойной щелчок (Double click) | Двойной щелчок мыши |
| Наведение мыши (Mouse over) | Установка курсора мыши |
| Загрузка страницы (Page load) | Загрузка Web-страницы |
Список Применить (Apply) панели инструментов Эффекты DHTML содержит перечень анимационных действий (табл. 20.2), выполняемых объектами. Термин "объект" подразумевает не только фрагмент текста. Эффекты анимации могут быть применены, например, к графическим изображениям.
Таблица 20.2. Анимационные действия, применяемые к объектам
| Действие | Описание |
| Падение слов (Drop in by word) | Текст падает сверху по одному слову |
| Пружина (Elastic) | Объект перемещается с небольшими колебаниями |
| Влет (Fly in) | Объект влетает |
| Вылет (Fly out) | Объект вылетает |
| Скачок (Hop) | Объект перемещается прыжками |
| Виток (Spiral) | Объект движется по спирали |
| Волна (Wave) | Объект движется колебательными движениями |
| Масштаб (Zoom) | Объект изменяет размеры |
Направление движения объекта задается с помощью списка Эффект (Effect), содержащего большое количество значений. Объект может перемещаться по разнообразным направлениям: диагоналям страницы, справа налево, слева направо, из центра, справа, слева, сверху, снизу и т. д.
Для применения анимационного эффекта необходимо выделить объект и, используя значения списков панели инструментов, выбрать необходимые значения.
Комбинируя значения всех трех списков панели инструментов Эффекты DHTML, вы сможете сформировать самые разнообразные эффекты. При загрузке Web-страницы текст будет влетать по спирачи или волнообразно, въезжать сверху, снизу, справа, слева или по диагонали из разных углов страницы. Размер размещаемого текста можно увеличивать или уменьшать. Отдельные слова текста могут падать в формируемую фразу сверху или вплывать, двигаясь волнообразно. Попробуйте различные варианты и подберите то, что вам понравится и не будет раздражать посетителя вашей Web-страницы.
Рассмотрим несколько примеров использования на Web-страницах анимационных эффектов. Разместим на странице заголовок, отдельные слова которого будут как бы падать на страницу при ее загрузке. Для создания этого эффекта выполните следующие действия:
1. Откройте в режиме редактирования Web-страницу, для которой создаете анимацию.
2. Разместите в ней заголовок.
3. Для того чтобы панель инструментов Эффекты DHTML появилась на экране, выберите в меню Формат (Format) команду Эффекты DHTML (Dynamic HTML Effects).
4. Установите курсор мыши на заголовок, для которого задаете эффект анимации.
5. Из списка Вкл (On) панели инструментов выберите значение Загрузка страницы (Page load), указывающее, что анимационное действие будет выполняться при загрузке страницы.
6. Из списка Применить (Apply) выберите значение Падение слов (Drop in by word), указывающее, что заголовок будет формироваться из слов, падающих последовательно сверху.
7. Перейдите в режим просмотра Web-страницы, выбрав вкладку Просмотр (Preview), расположенную в нижней части рабочей области программы FrontPage, и посмотрите, как формируется заголовок страницы (рис. 20.10).
Рис. 20.10. Формирование заголовка с использованием эффекта падающих сверху слов Ранее мы разместили на Web-странице бегущую строку. Теперь рассмотрим пример удаления ее с экрана в режиме просмотра, используя для этого эффект анимации. 1. Откройте в режиме редактирования страницу, содержащую бегущую строку. При установке курсора на объект, к которому применен динамический HTML, под курсором появляется подсказка с указанием наименования эффекта. На рис. 20.11 представлена бегущая строка, к которой применен эффект Динамический эффект: Вылет Наверх. Рис. 20.11. Бегущая строка с примененным к ней эффектом анимации Динамический эффект: Вылет Наверх 7. Перейдите в режим просмотра Web-страницы, выбрав вкладку Просмотр (Preview), расположенную в нижней части рабочей области программы FrontPage или загрузите страницу в обозреватель, выбрав в меню Файл (File) команду Просмотр в обозревателе (Preview in Browser). Совет Для удаления DHTML-эффекта установите курсор на объект и нажмите кнопку Удалить эффект (Remove Effect) на панели инструментов
2. Разместите на экране панель инструментов Эффекты DHTML, выбрав в меню Формат команду Эффекты DHTML (Dynamic HTML Effects).
3. Установите курсор мыши на текст бегущей строки.
4. Из списка Вкл (On) панели инструментов выберите значение Click (Щелчок мыши), указывающее, что анимационное действие будет выполняться при щелчке кнопкой мыши.
5. Из списка Применить (Apply) выберите значение Вылет (Fly out), указывающее, что объект покинет Web-страницу.
6. Используя список Эффект (Effect), можно указать направление, в котором объект покинет страницу. Выберите, например, Наверх (То top).
Замечание
8. При загрузке страницы начинает формироваться текст заголовка Адреса магазинов фирмы "Книжный мир", для которого мы задали динамический эффект в предыдущем примере. Слова по одному падают сверху в строку, пока не образуют весь текст. Одновременно с этим по странице движется бегущая строка с текстом Мы рады приветствовать Вас!. Щелкните в любом месте бегущей строки. Она начинает медленно двигаться вверх и исчезает с экрана.
| | |
