Как в adobe muse сделать снег
Обновлено: 07.07.2024
В данной статье описывается процесс создания многофункциональных интерактивных веб-сайтов Muse с анимацией и эффектами наведения с помощью Adobe Edge Animate.
Adobe Edge Animate — это инструмент для создания интерактивных элементов для сайтов, который позволяет веб-разработчикам добавлять на веб-сайты анимированное содержимое с использованием таких веб-стандартов, как HTML5. Удобный в использовании интерфейс Animate на основе шкалы времени обеспечивает превосходную наглядность при создании привлекательной анимации HTML5, которая воспроизводится во всех современных браузерах.
Прежде чем добавлять содержимое Animate в приложение Muse, в файл Animate можно внести несколько изменений, чтобы упростить процесс встраивания. Выполните следующие действия.
Запустите приложение Animate. Откроется окно Начало работы .
Нажмите Открыть файл и выберите загруженный файл образца проекта с расширением .an . Или откройте свой созданный файл Animate.
Нажмите Открыть , чтобы открыть файл .an и закрыть диалоговое окно Открыть . Проект откроется в рабочей среде Animate.
Анимации, созданные в Animate воспроизводятся либо автоматически (Автозапуск), либо после загрузки по щелчку мыши на статическое изображение. Образец SkyScraper настроен на автоматическое воспроизведение и не требует действий пользователя. Однако когда автоматическое воспроизведение отключено, на странице отображается неподвижное изображение, пока пользователь не нажмет анимацию. Чтобы просмотреть пример анимации без автоматического воспроизведения, посетите страницу Animate Showcase.
Для управления мгновенным воспроизведением анимации выделите сцену, а затем установите или снимите флажок Автозапуск на панели Свойства .
Нажмите фоновое изображение, чтобы выделить его на сцене. Когда оно выделено, вокруг него отображается синяя ограничительная рамка, а на панели Свойства слева отображаются свойства изображения (в этом примере с именем Image2). Нажмите клавишу Backspace (Windows) или Delete (Mac), чтобы удалить файл фонового изображения.
Не снимая выделения со сцены, нажмите ячейку с цветом сцены на панели Свойства и установите параметр прозрачности.
Содержимое сцены будет иметь белый фон. Фон будет отображаться прозрачным только в режиме предварительного просмотра анимации или после экспорта анимации.
Выберите Файл > Сохранить , чтобы сохранить внесенные изменения.
Выберите меню Файл > Настройки публикации , чтобы открыть диалоговое окно Настройки публикации .
В столбце Назначение публикации слева снимите флажок Интернет и выберите параметр Пакет развертывания Animate .
Выберите меню Файл > Опубликовать , чтобы опубликовать проект.
Закройте приложение Animate. С помощью Проводника Windows (или Finder в Mac OS) найдите папку проекта Animate на жестком диске. После публикации проекта найдите на жестком диске папку «Animate Package». Файл .OAM в этой папке используется для добавления содержимого Animate на сайт Muse.
Скопируйте файл .OAM и сохраните его в папке на компьютере, в которой содержатся все изображения и ресурсы сайта. Опубликовав анимацию и сохранив файл в папке сайта, переходите к следующему разделу для добавления содержимого Animate на страницу.
Чтобы добавить анимацию на страницу веб-сайта Muse, выполните следующие действия.
Запустите приложение Adobe Muse и откройте сайт, который требуется отредактировать.
В представлении План дважды нажмите имя страницы, на которую необходимо добавить анимацию.
Выберите меню Файл > Поместить. и выберите в папке сайта файл .OAM.
Нажмите один раз на странице, чтобы добавить анимацию.
В отличие от добавления изображений размер анимации Animate нельзя изменить путем перетаскивания ее границ. Чтобы поместить содержимое другого размера, обновите проект Edge и снова опубликуйте файл .OAM.
С помощью инструмента Выделение переместите анимацию в нужное место на странице. Обратите внимание: несмотря на то что фон в Muse отображается непрозрачным, он будет прозрачным при предварительном просмотре страницы или после публикации.
Выберите Файл > Предварительный просмотр страницы в браузере , чтобы проверить отображение анимации. При необходимости внести изменения вернитесь в приложение Muse и измените положение элементов страницы. Файл .OAM теперь отображается в списке ресурсов на палитре Ресурсы . Анимации, созданные в Edge Animate, можно повторно связывать и обновлять так же, как другие ресурсы сайта.
Например, вернувшись в приложение Animate, можно открыть проект и изменить его. После того как вы снова опубликуете файл .OAM и замените версию в папке сайта, на панели Ресурсы будет отображаться значок устаревшей ссылки. Это означает, что исходный файл был изменен после помещения ресурса на страницу.
Чтобы обновить добавленный файл, нажмите правой кнопкой мыши файл .OAM на палитре Ресурсы и выберите Связать заново .
Параметр Связать заново обновляет добавленный ресурс в соответствии с измененным исходным файлом. Это самый простой способ обновить анимацию, по сравнению с удалением и заменой файлов вручную.
Нажмите ссылку Опубликовать на панели элементов управления . Выберите необходимые параметры и нажмите кнопку ОК , чтобы опубликовать измененные элементы сайта.
Дополнительную информацию о создании веб-содержимого HTML5 и анимации с помощью Adobe Edge Animate см. на веб-сайте Adobe Edge Animate Resources. Дополнительную информацию о работе с приложением Muse см. на странице Справка и учебные пособия Muse или на странице События Muse, содержащей записанные и онлайн-вебинары.
В представлении План дважды нажмите миниатюру страницы MasterFlash, чтобы открыть ее в представлении Дизайн . Обратите внимание, что после дублирования страницы «Шаблон-А», она по-прежнему содержит статичное изображение логотипа. Для размещения в прямоугольнике анимации удобно использовать статичное изображение. Однако после встраивания элемента мультимедиа статичное изображение логотипа необходимо удалить.
Выберите Файл > Поместить . В диалоговом окне Импорт перейдите к папке Kevins_Koffee_Kart и выберите файл logo.swf.
Поместите файл SWF в левый верхний угол, совместив его с существующим файлом изображения логотипа.
Выровняв новое окно SWF со статическим изображением логотипа, удалите статический логотип, выделив его и нажав клавишу Delete .
Чтобы проверить отображение сайта с внесенными на главную страницу изменениями, выберите Файл > Предварительный просмотр сайта в браузере и посмотрите, как отображается логотип на разных страницах. Вы можете работать локально на своем компьютере, а затем, не публикуя сайт, предварительно просмотреть его в браузере, переходя по его страницам. Обратите внимание, что анимация (файл SWF) на главной странице воспроизводится один раз и останавливается. При переходе на другую страницу отображается статичный логотип.
При выборе команды Файл > Предварительный просмотр страницы в браузере новое окно браузера с главной страницей загрузится быстрее, однако в нем будет отображаться только активная (главная) страница. Используйте этот параметр для проверки только одной страницы сайта, а не всего сайта полностью.
Adobe Muse позволяет добавлять на веб-страницы анимацию, созданную в Adobe Edge Animate. Первый шаг в использовании функции эффектов прокрутки в Adobe Edge Animate — создание анимации специально для этой цели.
Adobe Muse позволяет добавлять эффекты прокрутки в файлы OAM, чтобы применить их к анимации на основной временной шкале. Подходя к созданию анимации стратегически, можно создавать интерактивную анимацию, т. е. чтобы на основной шкале времени находились только элементы, которые должны перемещаться во время прокручивания страницы. При этом подразумевается, что остальные элементы должны располагаться на вложенных шкалах времени. По мере прокрутки страницы посетителями настройки эффекта прокрутки применяются исключительно к воспроизведению анимированных элементов на основной шкале времени.
Дополнительные сведения об эффектах прокрутки в Adobe Muse см. в разделе Эффекты прокрутки.
Выполните указанные ниже действия, чтобы приступить к работе с вкладкой «Adobe Edge Animate» панели «Эффекты прокрутки».
- Экспортируйте файл OAM из Animate и сохраните его в папке с файлами сайта. Дополнительные сведения об экспорте файлов OAM из Animate см. в разделе Добавление анимации в Adobe Muse.
- Откройте приложение Muse и дважды нажмите страницу, чтобы открыть ее в представлении «Дизайн». Убедитесь, что страница имеет достаточную длину для прокручивания, изменив значение минимальной высоты в диалоговом окне «Свойства страницы».
- Выберите Файл > Поместить и перейдите к нужному файлу OAM в папке сайта.
- Откройте панель «Эффекты прокрутки». Нажмите вкладку «Adobe Edge Animate» (четвертую вкладку слева), чтобы перейти к настройкам в этом разделе.
- Выбрав файл OAM, установите флажок Edge Animate .
В этом примере для исходной позиции установлено значение 700 пикселей. Чтобы изменить эту позицию, можно перетащить T-образный маркер или указать нужное значение в поле «Исходное положение».
Указав исходное положение, можно управлять воспроизведением анимации двумя способами.
- Автозапуск: при выборе этого параметра воспроизведение анимации на основной шкале времени начинается с момента достижения в браузере исходной позиции при прокрутке страницы, независимо от количества кадров на основной шкале времени. Воспроизведение анимации продолжается до тех пор, пока страница не будет прокручена до отметки выше исходной позиции.
- Переключать кадры каждые: при выборе этого параметра воспроизведение анимации будет выполняться покадрово — по одному кадру за раз при прокрутке страница на определенное число пикселей. Например, если имеется страница высотой 3000 пикселей и для параметра задано значение «10», воспроизведение анимации на основной шкале времени будет осуществляться по одному кадру при прокрутке страницы на каждые 10 пикселей. Если посетитель прокручивает страницу быстрее, то и анимация будет воспроизводиться с более высокой частотой кадров.
Настройки эффектов прокрутки не влияют на анимированные объекты, вложенные или связанные с основной шкалой времени в композиции Animate. Поэтому можно выбрать либо статический фон, либо циклическое воспроизведение вложенных элементов, которые постоянно двигаются независимо от взаимодействия посетителя с элементами управления прокруткой страницы.
- Настроив параметры на вкладке «Edge Animate» панели «Эффекты прокрутки», выберите «Файл» > «Предварительный просмотр страницы в браузере» (или нажмите кнопку «Просмотр»). Проверьте поведение страницы, прокрутив ее вверх и вниз, чтобы просмотреть воспроизведение анимированного содержимого Edge Animate (добавленного на основную шкалу времени).
- Если требуется внести изменения, вернитесь в приложение Muse (или нажмите кнопку «Дизайн») и обновите нужные настройки на панели «Эффекты прокрутки».
Пример
Такой анимационный эффект достигается за счет комбинирования настроек на вкладках «Перемещение» и «Edge Animate».
На странице по горизонтали рядом друг с другом размещены три экземпляра одного и того же файла OAM (три анимированных компаса в ряд). При просмотре примера сайта в браузере все три компаса постепенно появляются снизу вверх и остаются на своем месте. Стрелки компасов вращаются с разными скоростями, однако такое поведение задано с помощью настроек на панели «Эффекты прокрутки» и не является частью дизайна файла Edge Animation.
Чтобы создать подобный эффект с тремя файлами OAM, помещенными на страницу, выполните указанные ниже действия.
При просмотре примера в браузере можно увидеть, что все три элемента OAM появляются согласованно и остаются размещенными в ряд, как если бы они были закреплены.
- Нажмите в любом месте страницы, чтобы отменить выбор всех трех компасов, а затем выберите крайний компас слева. Удерживая нажатой клавишу Shift, нажмите крайний компас справа, чтобы выбрать оба компаса. Перейдите на вкладку «Edge Animate» панели «Эффекты прокрутки», чтобы просмотреть настройки на этой вкладке.
Оба компаса по бокам настроены на циклическое воспроизведение анимации с показом следующего кадра каждый раз, когда страница прокручивается вниз на 350 пикселей.
- Отмените выбор двух компасов по бокам. Выберите центральный компас и снова обратитесь ко вкладке «Edge Animate» и обратите внимание, что в поле «Переключать кадры каждые» указано значение 400 пикселей. В соответствии с этой настройкой анимация центрального объекта будет воспроизводиться медленнее по сравнению с двумя остальными компасами.
Изменяя скорости воспроизведения анимации нескольких помещенных на страницу элементов Edge Animate, относительно скорости прокрутки страницы, можно создавать интересные эффекты анимации. Например, можно создать косяк рыб, облака, перемещающиеся по небу, а также другие эффекты, добавляя несколько экземпляров одного и того же файла OAM и применяя к ним разные настройки эффектов прокрутки.
Читайте также: