Adobe Edge Animate Учебное пособие: создание очаровательных слайд -шоу

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

Ключевые моменты запомнить

• Настройка отзывчивого документа в Adobe Edge Animate.
• Импорт и позиционирование изображений для слайд -шоу.
• Создание основных анимаций с использованием сроков с энмиматами края.
• Реализация навигационных элементов управления, таких как кнопки «Следующие» и задние кнопки.
• Добавление интерактивности с эффектами MouseOver.
• Понимание функций смягчения для более плавных анимаций.
• Обеспечение совместимости в разных браузерах и устройствах.
• Оптимизация производительности для более быстрого времени загрузки.

Начало работы с вашим краем Animate SlideShow

Настройка документа

Создание привлекательного слайд -шоу начинается с настройки вашего документа на Adobe Edge Animate. Вы захотите определить размер сцены и обеспечить его отзывчивый.

Чтобы начать, откройте Adobe Edge Animate и создайте новый файл. Вы можете сделать это, отправившись в File> New или используя ярлык Ctrl+N в Windows или CMD+N на Mac. Это открывает пустой холст, готовый к тому, чтобы вы начали создавать слайд -шоу.

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

Чтобы сделать свое слайд -шоу отзывчивым, переключите ширину на 100%. Таким образом, ваше слайд -шоу будет масштабироваться, чтобы соответствовать любому размеру экрана. Просто нажмите на значок Pixel рядом с полем ширины, измените его на процентный значок и введите 100%. По умолчанию переполнение установлено, чтобы скрыто, сохраняя все аккуратно в взгляде.

Не забудьте сохранить свой проект рано и часто. Перейдите в файл> Сохранить как , назовите его что-то вроде «slideshow-tut.html», и помните, где вы сохраняете его, так как переименование файла HTML позже может быть сложным.

Добавление и позиционирование слайдов с экраном края

Импорт изображений

Как только ваш документ будет настроен, пришло время импортировать ваши изображения. Edge Animate поддерживает форматы JPG, PNG и GIF. Вы можете импортировать изображения, перетаскивая и отбросив их на сцену, перемещаясь в File> Import или с помощью панели библиотеки.

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

Предполагая, что ваши изображения готовится, чтобы соответствовать вашему слайдскому шоу, поместите их и размер их с помощью панели свойств. Чтобы сосредоточить их и избегать отсечения, установите позиционирование X и Y на 0%, высоту до авто и ширину до 70%. Затем отрегулируйте стиль до преобразования: 50% 50% для правильного просмотра. Вы можете настроить эти настройки, щелкнув значок ручки рядом с размерами, который открывает редактор кода, где вы можете установить размер фонового размера для «Авто» и позиционировать проценты для большего контроля.

Повторите этот процесс, чтобы добавить больше слайдов в ваше шоу.

Анимируя ваше слайд -шоу

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

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

Начните с скольжения за пределами экрана вправо и используйте функцию смягчения, такую ​​как exatoutquad для менее роботизированного скольжения. Установите слайд, чтобы исчезнуть через 0,75 секунды от 0% экрана. С несколькими слайдами вы можете поразить их запись, перетаскивая их рядом друг с другом на нижней панели элементов.

Чтобы контролировать переходы слайдов, вставьте триггер, чтобы добавить точку остановки. Выберите Trigger вставить триггер с последующей остановкой . Для получения дополнительных слайдов используйте опцию Duplicate (ключ D) для создания копии, затем настройте имя, изображение и позиционирование. Помните, что цель состоит в том, чтобы дать время для каждого слайда плавно скользить и выходить.

Дополнительные советы

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

Как использовать Adobe Edge Animate для динамических слайд -шоу

Пошаговое руководство по созданию слайд-шоу

1. Настройте свой документ:
   • Анимированное открытое преимущество.
   • 
   • Создайте новый файл.
   • Установите размер стадии (например, 980x300 пикселей).
   • Обеспечьте отзывчивость, установив ширину до 100%.
   • Сохраните свой файл.
2. Импорт изображений:
   • Перетащите изображения на сцену или импортируйте их через файл> импорт .
   • Положение и размер изображения соответствующим образом.
3. Оживленные слайды:
   • Создайте ключевые кадры на временной шкале для каждого слайда.
   • Добавьте переходы для плавного входа и выхода.
   • Применить функции смягчения для улучшения анимации.
4. Реализуйте навигацию:
   • Добавьте кнопки следующих и задних кнопок, используя символы.
   • Прикрепите действия JavaScript к кнопкам для навигации.
5. Проверьте и оптимизируйте:
   • Предварительно просмотрите слайд -шоу в разных браузерах.
   • Оптимизируйте изображения для более быстрой загрузки.
   • Обеспечить отзывчивость между устройствами.

Плюсы и минусы использования анимирования края Adobe

Плюс

• Анимация на основе графиков: позволяет легко создавать сложные анимации.
• Поддержка HTML5: создает контент, совместимый с современными веб -браузерами.
• Интерактивные элементы: позволяет добавлять кнопки, опрокидывание и формы.
• Дизайн без кода: дизайнеры могут создавать анимацию без написания кода.

Минусы

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

Часто задаваемые вопросы

Что оживляет Adobe Edge?

Adobe Edge Animate был инструментом веб -дизайна для создания интерактивного и анимированного контента с использованием HTML5, JavaScript и CSS3. Это было особенно полезно для анимации, баннеров и слайд -шоу без вспышки.

Adobe Edge Animate все еще поддерживается?

Нет, Adobe Edge Animate больше не поддерживается с 2015 года. Однако он все еще используется для устаревших проектов или дизайнеров, которые предпочитают его конкретные возможности анимации. Современные альтернативы включают Adobe Animate CC и другие инструменты анимации HTML5.

Каковы альтернативы оживленному краю Adobe?

Современные альтернативы включают Adobe Animate CC, Google Web Designer, Tumult Hype, Greensock (GSAP) и CreateJS, которые предлагают надежные возможности анимации HTML5.

Как сделать свой край, а также реагировать на слайд -шоу?

Чтобы сделать свое слайд -шоу отзывчивым, установите ширину главной стадии на 100% и используйте процентные значения для позиционирования и размеров элементов. Проверьте между устройствами и браузерами, чтобы обеспечить отзывчивость.

Связанные вопросы

Как я могу оптимизировать свое слайд -шоу для более быстрого времени загрузки?

Чтобы оптимизировать свое слайд -шоу для более быстрой загрузки, рассмотрите сжатие изображений, министерство кода, кэширование браузера, использование CDN и реализацию ленивых методов загрузки.

Могу ли я добавить интерактивные элементы в свой слайд -шоу Animate Animate?

Да, вы можете добавить интерактивные элементы, такие как кнопки, переноски, формы и внешние ссылки, используя действия JavaScript в крае.

Как я могу обеспечить совместимость с кросс-браузером для моего скового слайд-шоу?

Обеспечить совместимость с кросс-браузером, тестируя на различных браузерах и устройствах, придерживаясь веб-стандартов, используя префиксы поставщиков для CSS и используя фреймворки JavaScript для обработки различий.

Как встроить на моем веб -сайте слайд -шоу Andimate Animate?

Чтобы встроить свое слайд -шоу, включите сгенерированные файлы HTML, CSS и JavaScript на вашей веб -странице. Скопируйте код и вставьте его в HTML вашего веб -сайта, обеспечивая правильные пути к файлам CSS и JavaScript.