Руководство пользователя Отмена

Использование компонентов в HTML5 Canvas

  1. Руководство пользователя Adobe Animate
  2. Введение в Animate
    1. Новые возможности Animate
    2. Визуальный глоссарий
    3. Системные требования Animate
    4. Сочетания клавиш Animate
    5. Разные типы файлов в Animate
  3. Анимация
    1. Основы анимации в Animate
    2. Кадры и ключевые кадры в Animate
    3. Покадровая анимация в Animate
    4. Классическая анимация движения в Animate
    5. Инструмент «Кисть»
    6. Руководство по движению
    7. Анимация движения и язык ActionScript 3.0
    8. Сведения об анимации движения
    9. Анимация движения
    10. Создание анимации движения
    11. Использование ключевых кадров свойств
    12. Положения в анимации движения
    13. Использование Редактора движения для анимаций
    14. Редактирование траектории анимации движения
    15. Управление анимациями движения
    16. Настраиваемое ускорение и замедление
    17. Создание и применение стилей движения
    18. Настройка диапазонов анимации движения
    19. Сохранение анимации движения в файлах XML
    20. Анимация движения и классическая анимация
    21. Анимация фигур
    22. Инструмент «Кость» в Animate
    23. Скелетная анимация персонажей в Animate
    24. Слои-маски в Adobe Animate
    25. Работа со сценами в Animate
  4. Интерактивность
    1. Создание кнопок в Animate
    2. Преобразование проектов Animate в другие форматы документов
    3. Создание и публикация документов HTML5 Canvas в Animate
    4. Добавление интерактивных возможностей с помощью фрагментов кода в Animate
    5. Создание пользовательских компонентов HTML5
    6. Использование компонентов в HTML5 Canvas
    7. Создание пользовательских компонентов: примеры
    8. Фрагменты кода для пользовательских компонентов
    9. Рекомендации: реклама в Animate
    10. Разработка и публикация контента для виртуальной реальности
  5. Рабочая среда и рабочий процесс
    1. Создание и использование малярных кистей
    2. Использование шрифтов Google в документах HTML5 Canvas
    3. Использование библиотек Creative Cloud Libraries и Adobe Animate
    4. Использование рабочей области и панели «Инструменты» в Animate
    5. Рабочие процессы и рабочая среда Animate
    6. Использование веб-шрифтов в документах HTML5 Canvas
    7. Временные шкалы и ActionScript
    8. Работа с несколькими временными шкалами
    9. Задание настроек
    10. Использование панелей разработки Animate
    11. Создание слоев временной шкалы в Animate
    12. Экспорт анимаций для мобильных приложений и игровых платформ
    13. Перемещение и копирование объектов
    14. Шаблоны
    15. Поиск и замена в Animate
    16. Отмена/повтор действий и панель «История»
    17. Сочетания клавиш
    18. Использование временной шкалы в Animate
    19. Создание HTML-расширений
    20. Параметры оптимизации изображений и GIF-анимаций
    21. Настройки экспорта для изображений и GIF
    22. Панель «Ресурсы» в Animate
  6. Мультимедиа и видео
    1. Преобразование и объединение графических объектов в Animate
    2. Создание экземпляров символов и работа с ними в Animate
    3. Трассировка изображения
    4. Использование звука в Adobe Animate
    5. Экспорт SVG-файлов
    6. Создание видеофайлов для использования в Animate
    7. Добавление видео в Animate
    8. Работа с ключевыми точками видео
    9. Рисование и создание объектов в Animate
    10. Изменение линий и фигур
    11. Обводки, заливки и градиенты в Animate CC
    12. Работа с Adobe Premiere Pro и After Effects
    13. Панели «Цвет» в Animate CC
    14. Открытие файлов Flash CS6 в Animate
    15. Работа с классическим текстом в Animate
    16. Размещение иллюстраций в Animate
    17. Импортированные растровые изображения в Animate
    18. Трехмерная графика
    19. Работа с символами в Animate
    20. Рисование линий и фигур в Adobe Animate
    21. Работа с библиотеками в Animate
    22. Экспорт звуков
    23. Выделение объектов в Animate CC
    24. Работа с AI-файлами Illustrator в Animate
    25. Нанесение узоров с помощью инструмента «Аэрограф»
    26. Применение режимов наложения
    27. Упорядочивание объектов
    28. Автоматизация задач с помощью меню «Команды»
    29. Многоязычный текст
    30. Использование камеры в Animate
    31. Использование Animate с Adobe Scout
    32. Работа с файлами Fireworks
    33. Графические фильтры
    34. Звук и ActionScript
    35. Настройки рисования
    36. Рисование инструментом «Перо»
  7. Платформы
    1. Преобразование проектов Animate в другие форматы документов
    2. Поддержка специализированных платформ
    3. Создание и публикация документов HTML5 Canvas в Animate
    4. Создание и публикация документа WebGL
    5. Упаковка приложений AIR for iOS
    6. Публикация приложений AIR for Android
    7. Публикация для Adobe AIR на настольных ПК
    8. Параметры публикации ActionScript
    9. Рекомендации: размещение ActionScript в приложении
    10. Использование ActionScript в Animate
    11. Рекомендации: специальные возможности
    12. Специальные возможности в среде Animate
    13. Создание и использование сценариев
    14. Обеспечение поддержки специализированных платформ
    15. Общие сведения о поддержке специализированных платформ
    16. Создание содержимого со специальными возможностями
    17. Работа с плагинами поддержки специализированных платформ
    18. Отладка сценариев ActionScript 3.0
    19. Обеспечение поддержки специализированных платформ
  8. Экспорт и публикация
    1. Экспорт файлов из Animate CC
    2. Публикация OAM
    3. Экспорт SVG-файлов
    4. Экспорт графики и видео из Animate
    5. Публикация документов AS3
    6. Экспорт анимаций для мобильных приложений и игровых платформ
    7. Экспорт звуков
    8. Экспорт видеофайлов в QuickTime
    9. Управление воспроизведением внешнего видео с помощью ActionScript
    10. Рекомендации: советы по созданию контента для мобильных устройств
    11. Рекомендации: правила работы с видео
    12. Рекомендации: руководство по созданию SWF-приложений
    13. Рекомендации: формирование структуры FLA-файлов
    14. Рекомендации: оптимизация FLA-файлов для Animate
    15. Параметры публикации ActionScript
    16. Задание параметров публикации для Animate
    17. Экспорт файлов-проекторов
    18. Экспорт изображений и анимированных файлов GIF
    19. Шаблоны публикации HTML
    20. Работа с Adobe Premiere Pro и After Effects
    21. Быстрая публикация анимаций

В этой статье рассматривается использование настраиваемых компонентов.

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

  1. Выберите Файл > Создать.

    Выберите Дополнительно на вкладках вверху экрана в диалоговом окне Создание документа и щелкните параметр HTML5 Canvas.

    Новый документ
    HTML5 Canvas

  2. Выберите меню «Окно» > «Компоненты».

    Компоненты по умолчанию

  3. Выберите "Компоненты" > "Видео". Перетащите связанные компоненты на холст. 

  4. Выберите экземпляр видеокомпонента в рабочей области, затем просмотрите и измените параметры в инспекторе свойств. Параметр Источник позволяет выбрать видеофайл из локальной папки или указать любой URL-адрес для воспроизведения видео (в формате MP4, OGG, OGV или WEBM).

    Перетащите компоненты

  5. Выберите «В соответствии с исходными размерами», чтобы изменить размер окна видеоплеера в соответствии с размерами входного видео. Эта функция поддерживается только для видео в формате mp4. Для видео других типов вручную измените размер экземпляра на рабочей области, чтобы сохранить соотношения сторон.

  6. Нажмите клавиши Ctrl + Enter (Cmd + Enter на компьютере Mac), чтобы предварительно посмотреть ролик. Видео будет воспроизведено в браузере по умолчанию. Так как элементы управления отображаются по умолчанию, их можно просмотреть при наведении указателя мыши на видеоролик в браузере.

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

    Предварительный просмотр вывода компонентов

 Компоненты добавляются в документ HTML как элементы DOM. Чтобы добавить интерактивные возможности в компоненты, просмотрите соответствующие фрагменты кода («Фрагменты кода» > HTML5 Canvas > «Компоненты»).

Добавление интерактивных возможностей в компоненты с помощью фрагментов кода

  1. Выберите меню «Окно» > «Компоненты».

  2. Чтобы добавить интерактивность в компоненты, выберите «Окно» > «Фрагменты кода». Можно просматривать сопоставление различных доступных вариантов поведения отображение компонентов.

  3. На экране «Фрагменты кода» выберите «HTML5 Canvas» > «Компоненты».

    Фрагменты кода по умолчанию

  4. В зависимости от выбранного компонента, дважды щелкните соответствующий фрагмент кода, чтобы отобразить его на панели «Действия». Дополнительные сведения о добавлении интерактивности в фрагменты кода см. в разделеДобавление интерактивных возможностей с помощью фрагментов кода в Animate.

Пример

Давайте рассмотрим на следующем примере, как использовать фрагменты кода, где воспроизведение видео управляется с помощью кода.

  1. Выберите экземпляр видео в рабочей области и отключите настройку «Автозапуск» в инспекторе свойств. 

  2. Дважды щелкните компонент «Кнопка» на панели «Компоненты», чтобы создать два экземпляра в рабочей области, и разместите кнопки. Их также можно перетащить непосредственно с панели «Компоненты» в рабочей области.

    Размещение кнопок

  3. Выберите первый экземпляр кнопки и замените ярлык на «Воспроизведение» в инспекторе свойств, а для второй кнопки выберите вариант «Пауза». 

  4. Откройте панель «Фрагменты кода», выбрав «Окно» > «Фрагменты кода». Выберите «HTML5 Canvas» > «Компоненты» и разверните раздел «Интерфейс пользователя». 

  5. Выберите кнопку «Воспроизведение» в рабочей области, дважды щелкните событие нажатия кнопки на панели «Фрагменты кода» и затем нажмите кнопку «ОК». Animate присваивает имя экземпляра выбранной кнопки. Вновь созданный код можно просмотреть на панели «Действия».

    Добавление фрагментов кода

  6. Выберите видеоролик в рабочей области и разверните раздел «Видео» на панели «Фрагменты кода». Дважды щелкните «Воспроизведение видео». Код, необходимый для воспроизведения видео, добавляется на панель «Действия».

    Код добавлен на панель «Действия»

  7. Чтобы воспроизвести видео при нажатии кнопки, поместите код между тегами <Start your custom code> и <End your custom code>. 

    Перемещение кода в теги

  8. Чтобы добавить код для приостановки видео, выберите кнопку паузы, назначьте обработчик нажатий для новой кнопки и добавьте код для приостановки видео.

  9. Предварительно просмотрите фильм. Нажмите кнопку «Воспроизведение», чтобы воспроизвести видео, и кнопку «Пауза», чтобы приостановить воспроизведение. 

 Атрибут className для каждого компонента можно просмотреть в инспекторе свойств. Используйте эти имена классов для упаковки компонентов с использованием CSS. Используйте компонент CSS для загрузки пользовательских CSS. Компонент CSS позволяет выбрать любой локальный файл CSS, который будет включен в ролик.

Интересные компоненты HTML5

Добавление интерактивности в контент интересно само по себе, а также предоставляет множество возможностей для компонентов HTML 5. Хотите узнать, как использовать эти компоненты HTML 5 в Animate? Посмотрите учебный видеоролик в конце этого примера и выполните следующие действия.

  1. Щелкните Windows и выберите Компоненты.

  2. Разверните папку Видео, щелкните и перетащите значок видео в рабочую область.

  3. В окне Свойства разверните вкладку Positions and Size (Позиции и размер) и задайте необходимые значения.

Улучшение композиций Animate с помощью компонентов HTML 5

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

Установка распределенных компонентов

Дизайнеры или разработчики Animate могут установить распределенный компонент (файл ZXP) с помощью утилиты Управление расширениями. Дополнительные сведения см. в разделе Установка расширений.

Предварительное условие

Установка компонентов

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

  1. Дважды щелкните файл ManageExtensions.exe. Откроется диалоговое окно Управление расширениями.

  2. Щелкните Установить расширение и выберите расширение (файл .zxp) для установки. Дополнительные сведения см. в разделе Установка расширений.

  3. Чтобы найти установленный компонент в Animate, щелкните Окно > Компонент. Откроется диалоговое окно «Компоненты». 

  4. Щелкните значок гамбургера в правом верхнем углу и нажмите Повторно загрузить компоненты.

Логотип Adobe

Вход в учетную запись