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

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

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

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

    Новый документ
    HTML5 Canvas
  2. Выберите меню «Окно» > «Компоненты».

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

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

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

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

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

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

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

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

Примечание.

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

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

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

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

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

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

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

Пример

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Примечание.

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

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

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

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

Утилита «Управление расширениями». Чтобы открыть инструкции по загрузке, перейдите в меню Справка > Управление расширениями продукта Animate CC.

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

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

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

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

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

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

    reloading-components

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

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