В данной статье описывается процесс создания многофункциональных интерактивных веб-сайтов Muse с анимацией и эффектами наведения с помощью Adobe Edge Animate.

Примечание.

Новые функции больше не добавляются в Adobe Muse. Поддержка этого приложения будет прекращена 26 марта 2020 г. Для получения подробной информации и поддержки посетите страницу прекращения обслуживания Adobe Muse.

Adobe Edge Animate — это инструмент для создания интерактивных элементов для сайтов, который позволяет веб-разработчикам добавлять на веб-сайты анимированное содержимое с использованием таких веб-стандартов, как HTML5. Удобный в использовании интерфейс Animate на основе шкалы времени обеспечивает превосходную наглядность при создании привлекательной анимации HTML5, которая воспроизводится во всех современных браузерах.

Создание анимации в Animate

Прежде чем добавлять содержимое Animate в приложение Muse, в файл Animate можно внести несколько изменений, чтобы упростить процесс встраивания. Выполните следующие действия.

  1. Запустите приложение Animate. Откроется окно Начало работы.

  2. Нажмите Открыть файл и выберите загруженный файл образца проекта с расширением .an. Или откройте свой созданный файл Animate.

    Adobe Muse позволяет встраивать анимации Edge Animate.
    Ссылка «Открыть файл» в окне «Начало работы».

  3. Нажмите Открыть, чтобы открыть файл .an и закрыть диалоговое окно Открыть. Проект откроется в рабочей среде Animate.

    Открытие проекта
    Проект Animate, открытый на сцене.

    Анимации, созданные в Animate воспроизводятся либо автоматически (Автозапуск), либо после загрузки по щелчку мыши на статическое изображение. Образец SkyScraper настроен на автоматическое воспроизведение и не требует действий пользователя. Однако когда автоматическое воспроизведение отключено, на странице отображается неподвижное изображение, пока пользователь не нажмет анимацию. Чтобы просмотреть пример анимации без автоматического воспроизведения, посетите страницу Animate Showcase.

    Примечание.

    Для управления мгновенным воспроизведением анимации выделите сцену, а затем установите или снимите флажок Автозапуск на панели Свойства.

    Элемент «Автозапуск»
    Свойство «Автозапуск» для автоматического воспроизведения.

  4. Нажмите фоновое изображение, чтобы выделить его на сцене. Когда оно выделено, вокруг него отображается синяя ограничительная рамка, а на панели Свойства слева отображаются свойства изображения (в этом примере с именем Image2). Нажмите клавишу Backspace (Windows) или Delete (Mac), чтобы удалить файл фонового изображения.

    Синяя ограничительная рамка
    Выделение и удаление фонового изображения.

  5. Не снимая выделения со сцены, нажмите ячейку с цветом сцены на панели Свойства и установите параметр прозрачности.

    Параметр прозрачности
    Настройка прозрачности для фона сцены.

    Примечание.

    Содержимое сцены будет иметь белый фон. Фон будет отображаться прозрачным только в режиме предварительного просмотра анимации или после экспорта анимации.

  6. Выберите Файл > Сохранить, чтобы сохранить внесенные изменения.

  7. Выберите меню Файл > Настройки публикации, чтобы открыть диалоговое окно Настройки публикации.

  8. В столбце Назначение публикации слева снимите флажок Интернет и выберите параметр Пакет развертывания Animate.

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

  10. Выберите меню Файл > Опубликовать, чтобы опубликовать проект.

  11. Закройте приложение Animate. С помощью Проводника Windows (или Finder в Mac OS) найдите папку проекта Animate на жестком диске. После публикации проекта найдите на жестком диске папку «Animate Package». Файл .OAM в этой папке используется для добавления содержимого Animate на сайт Muse.

  12. Скопируйте файл .OAM и сохраните его в папке на компьютере, в которой содержатся все изображения и ресурсы сайта. Опубликовав анимацию и сохранив файл в папке сайта, переходите к следующему разделу для добавления содержимого Animate на страницу.

Добавление анимации, созданной в Animate, на веб-страницы Muse

Чтобы добавить анимацию на страницу веб-сайта Muse, выполните следующие действия.

  1. Запустите приложение Adobe Muse и откройте сайт, который требуется отредактировать.

  2. В представлении План дважды нажмите имя страницы, на которую необходимо добавить анимацию.

  3. Выберите меню Файл > Поместить... и выберите в папке сайта файл .OAM.

  4. Нажмите один раз на странице, чтобы добавить анимацию.

    Примечание.

    В отличие от добавления изображений размер анимации Animate нельзя изменить путем перетаскивания ее границ. Чтобы поместить содержимое другого размера, обновите проект Edge и снова опубликуйте файл .OAM.

  5. С помощью инструмента Выделение переместите анимацию в нужное место на странице. Обратите внимание: несмотря на то что фон в Muse отображается непрозрачным, он будет прозрачным при предварительном просмотре страницы или после публикации.

  6. Выберите Файл > Предварительный просмотр страницы в браузере, чтобы проверить отображение анимации. При необходимости внести изменения вернитесь в приложение Muse и измените положение элементов страницы. Файл .OAM теперь отображается в списке ресурсов на палитре Ресурсы. Анимации, созданные в Edge Animate, можно повторно связывать и обновлять так же, как другие ресурсы сайта.

    Например, вернувшись в приложение Animate, можно открыть проект и изменить его. После того как вы снова опубликуете файл .OAM и замените версию в папке сайта, на панели Ресурсы будет отображаться значок устаревшей ссылки. Это означает, что исходный файл был изменен после помещения ресурса на страницу.

    Чтобы обновить добавленный файл, нажмите правой кнопкой мыши файл .OAM на палитре Ресурсы и выберите Связать заново.

    Параметр Связать заново обновляет добавленный ресурс в соответствии с измененным исходным файлом. Это самый простой способ обновить анимацию, по сравнению с удалением и заменой файлов вручную.

  7. Нажмите ссылку Опубликовать на панели элементов управления. Выберите необходимые параметры и нажмите кнопку ОК, чтобы опубликовать измененные элементы сайта.

Дополнительную информацию о создании веб-содержимого HTML5 и анимации с помощью Adobe Edge Animate см. на веб-сайте Adobe Edge Animate Resources. Дополнительную информацию о работе с приложением Muse см. на странице Справка и учебные пособия Muse или на странице События Muse, содержащей записанные и онлайн-вебинары.

Встраивание мультимедийного содержимого для добавления на сайт анимации

  1. В представлении План дважды нажмите миниатюру страницы MasterFlash, чтобы открыть ее в представлении Дизайн. Обратите внимание, что после дублирования страницы «Шаблон-А», она по-прежнему содержит статичное изображение логотипа. Для размещения в прямоугольнике анимации удобно использовать статичное изображение. Однако после встраивания элемента мультимедиа статичное изображение логотипа необходимо удалить.

  2. Выберите Файл > Поместить. В диалоговом окне Импорт перейдите к папке Kevins_Koffee_Kart и выберите файл logo.swf.

  3. Поместите файл SWF в левый верхний угол, совместив его с существующим файлом изображения логотипа.

  4. Выровняв новое окно SWF со статическим изображением логотипа, удалите статический логотип, выделив его и нажав клавишу Delete.

  5. Чтобы проверить отображение сайта с внесенными на главную страницу изменениями, выберите Файл > Предварительный просмотр сайта в браузере и посмотрите, как отображается логотип на разных страницах. Вы можете работать локально на своем компьютере, а затем, не публикуя сайт, предварительно просмотреть его в браузере, переходя по его страницам. Обратите внимание, что анимация (файл SWF) на главной странице воспроизводится один раз и останавливается. При переходе на другую страницу отображается статичный логотип.

    Примечание.

    При выборе команды Файл > Предварительный просмотр страницы в браузере новое окно браузера с главной страницей загрузится быстрее, однако в нем будет отображаться только активная (главная) страница. Используйте этот параметр для проверки только одной страницы сайта, а не всего сайта полностью.

Добавление эффектов прокрутки в анимацию

Adobe Muse позволяет добавлять на веб-страницы анимацию, созданную в Adobe Edge Animate. Первый шаг в использовании функции эффектов прокрутки в Adobe Edge Animate — создание анимации специально для этой цели.

Adobe Muse позволяет добавлять эффекты прокрутки в файлы OAM, чтобы применить их к анимации на основной временной шкале. Подходя к созданию анимации стратегически, можно создавать интерактивную анимацию, т. е. чтобы на основной шкале времени находились только элементы, которые должны перемещаться во время прокручивания страницы. При этом подразумевается, что остальные элементы должны располагаться на вложенных шкалах времени. По мере прокрутки страницы посетителями настройки эффекта прокрутки применяются исключительно к воспроизведению анимированных элементов на основной шкале времени.

Дополнительные сведения об эффектах прокрутки в Adobe Muse см. в разделе Эффекты прокрутки.

Выполните указанные ниже действия, чтобы приступить к работе с вкладкой «Adobe Edge Animate» панели «Эффекты прокрутки».

  1. Экспортируйте файл OAM из Animate и сохраните его в папке с файлами сайта. Дополнительные сведения об экспорте файлов OAM из Animate см. в разделе Добавление анимации в Adobe Muse.
  2. Откройте приложение Muse и дважды нажмите страницу, чтобы открыть ее в представлении «Дизайн». Убедитесь, что страница имеет достаточную длину для прокручивания, изменив значение минимальной высоты в диалоговом окне «Свойства страницы».
  3. Выберите Файл > Поместить и перейдите к нужному файлу OAM в папке сайта.
  4. Откройте панель «Эффекты прокрутки». Нажмите вкладку «Adobe Edge Animate» (четвертую вкладку слева), чтобы перейти к настройкам в этом разделе.
  5. Выбрав файл OAM, установите флажок Edge Animate.
Панель «Эффекты»
Настройте воспроизведение анимации Edge Animate таким образом, чтобы оно начиналось тогда, когда страница прокручена до определенной отметки, или чтобы кадры менялись каждый раз, когда страница прокручена на определенное расстояние (в пикселях).

В этом примере для исходной позиции установлено значение 700 пикселей. Чтобы изменить эту позицию, можно перетащить T-образный маркер или указать нужное значение в поле «Исходное положение».

Указав исходное положение, можно управлять воспроизведением анимации двумя способами.

  • Автозапуск: при выборе этого параметра воспроизведение анимации на основной шкале времени начинается с момента достижения в браузере исходной позиции при прокрутке страницы, независимо от количества кадров на основной шкале времени. Воспроизведение анимации продолжается до тех пор, пока страница не будет прокручена до отметки выше исходной позиции.
  • Переключать кадры каждые: при выборе этого параметра воспроизведение анимации будет выполняться покадрово — по одному кадру за раз при прокрутке страница на определенное число пикселей. Например, если имеется страница высотой 3000 пикселей и для параметра задано значение «10», воспроизведение анимации на основной шкале времени будет осуществляться по одному кадру при прокрутке страницы на каждые 10 пикселей. Если посетитель прокручивает страницу быстрее, то и анимация будет воспроизводиться с более высокой частотой кадров.

Примечание.

Настройки эффектов прокрутки не влияют на анимированные объекты, вложенные или связанные с основной шкалой времени в композиции Animate. Поэтому можно выбрать либо статический фон, либо циклическое воспроизведение вложенных элементов, которые постоянно двигаются независимо от взаимодействия посетителя с элементами управления прокруткой страницы.

  1. Настроив параметры на вкладке «Edge Animate» панели «Эффекты прокрутки», выберите «Файл» > «Предварительный просмотр страницы в браузере» (или нажмите кнопку «Просмотр»). Проверьте поведение страницы, прокрутив ее вверх и вниз, чтобы просмотреть воспроизведение анимированного содержимого Edge Animate (добавленного на основную шкалу времени).
  2. Если требуется внести изменения, вернитесь в приложение Muse (или нажмите кнопку «Дизайн») и обновите нужные настройки на панели «Эффекты прокрутки».

Пример

В этом примере демонстрируются возможности управления файлами OAM, экспортированными из Adobe Edge Animate, с помощью эффектов прокрутки. В данном примере для страницы используется вертикальный градиентный фон, который начинается со светло-бирюзового цвета и постепенно переходит к темно-синему. Образец файла можно загрузить с ScrollEffects.com.

Такой анимационный эффект достигается за счет комбинирования настроек на вкладках «Перемещение» и «Edge Animate».

На странице по горизонтали рядом друг с другом размещены три экземпляра одного и того же файла OAM (три анимированных компаса в ряд). При просмотре примера сайта в браузере все три компаса постепенно появляются снизу вверх и остаются на своем месте. Стрелки компасов вращаются с разными скоростями, однако такое поведение задано с помощью настроек на панели «Эффекты прокрутки» и не является частью дизайна файла Edge Animation.

Чтобы создать подобный эффект с тремя файлами OAM, помещенными на страницу, выполните указанные ниже действия.

  1. В представлении «Дизайн» выберите Страница > Свойства страницы. В поле «Мин. высота» задайте довольно высокое значение. В этом примере минимальная высота страницы составляет 7465 пикселей.
  2. Выберите все три экземпляра компаса на странице. Можно заметить, что на вкладке «Перемещение» панели «Эффекты прокрутки» для всех файлов OAM указаны одинаковые значения настроек исходной позиции и перемещения.
Те же настройки исходных позиций и перемещений
Компасы сначала перемещаются вверх до достижения исходной позиции, после чего остаются на месте по мере прокрутки страницы вниз.

При просмотре примера в браузере можно увидеть, что все три элемента OAM появляются согласованно и остаются размещенными в ряд, как если бы они были закреплены.

  1. Нажмите в любом месте страницы, чтобы отменить выбор всех трех компасов, а затем выберите крайний компас слева. Удерживая нажатой клавишу Shift, нажмите крайний компас справа, чтобы выбрать оба компаса. Перейдите на вкладку «Edge Animate» панели «Эффекты прокрутки», чтобы просмотреть настройки на этой вкладке.
Переключение фреймов каждые 350 пикселей
Для компасов с обеих сторон задана настройка переключения кадров каждые 350 пикселей.

Оба компаса по бокам настроены на циклическое воспроизведение анимации с показом следующего кадра каждый раз, когда страница прокручивается вниз на 350 пикселей.

  1. Отмените выбор двух компасов по бокам. Выберите центральный компас и снова обратитесь ко вкладке «Edge Animate» и обратите внимание, что в поле «Переключать кадры каждые» указано значение 400 пикселей. В соответствии с этой настройкой анимация центрального объекта будет воспроизводиться медленнее по сравнению с двумя остальными компасами.
Переключение фреймов каждые 400 пикселей
Для центрального файла OAM кадры будут переключаться каждые 400 пикселей.

Изменяя скорости воспроизведения анимации нескольких помещенных на страницу элементов Edge Animate, относительно скорости прокрутки страницы, можно создавать интересные эффекты анимации. Например, можно создать косяк рыб, облака, перемещающиеся по небу, а также другие эффекты, добавляя несколько экземпляров одного и того же файла OAM и применяя к ним разные настройки эффектов прокрутки.

Эта работа лицензируется в соответствии с лицензией Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported  На посты, размещаемые в Twitter™ и Facebook, условия Creative Commons не распространяются.

Правовые уведомления   |   Политика конфиденциальности в сети Интернет