Выберите Файл > Создать.
Выберите Дополнительно на вкладках вверху экрана в диалоговом окне Создание документа и щелкните параметр HTML5 Canvas.
В этой статье рассматривается использование настраиваемых компонентов.
Компонент предоставляет функцию или группу связанных настраиваемых компонентов для многократного использования, которая повышает производительность для создателей объявлений. Раньше приложение Animate поддерживало компоненты Flash, используемые с целевыми объектами на базе Flash. Начиная с этого выпуска Animate поддерживает HTML5 Canvas.
Выберите Файл > Создать.
Выберите Дополнительно на вкладках вверху экрана в диалоговом окне Создание документа и щелкните параметр HTML5 Canvas.
Выберите меню «Окно» > «Компоненты».
Выберите "Компоненты" > "Видео". Перетащите связанные компоненты на холст.
Выберите экземпляр видеокомпонента в рабочей области, затем просмотрите и измените параметры в инспекторе свойств. Параметр Источник позволяет выбрать видеофайл из локальной папки или указать любой URL-адрес для воспроизведения видео (в формате MP4, OGG, OGV или WEBM).
Выберите «В соответствии с исходными размерами», чтобы изменить размер окна видеоплеера в соответствии с размерами входного видео. Эта функция поддерживается только для видео в формате mp4. Для видео других типов вручную измените размер экземпляра на рабочей области, чтобы сохранить соотношения сторон.
Нажмите клавиши Ctrl + Enter (Cmd + Enter на компьютере Mac), чтобы предварительно посмотреть ролик. Видео будет воспроизведено в браузере по умолчанию. Так как элементы управления отображаются по умолчанию, их можно просмотреть при наведении указателя мыши на видеоролик в браузере.
Эту же процедуру можно использовать для других компонентов.
Компоненты добавляются в документ HTML как элементы DOM. Чтобы добавить интерактивные возможности в компоненты, просмотрите их фрагменты кода ("Фрагменты кода" > "Холст HTML5" > "Компоненты").
Выберите меню «Окно» > «Компоненты».
Чтобы добавить интерактивность в компоненты, выберите «Окно» > «Фрагменты кода». Можно просматривать сопоставление различных доступных вариантов поведения отображение компонентов.
На экране «Фрагменты кода» выберите «HTML5 Canvas» > «Компоненты».
В зависимости от выбранного компонента, дважды щелкните соответствующий фрагмент кода, чтобы отобразить его на панели «Действия». Дополнительные сведения о добавлении интерактивности в фрагменты кода см. в разделеДобавление интерактивных возможностей с помощью фрагментов кода в Animate.
Давайте рассмотрим на следующем примере, как использовать фрагменты кода, где воспроизведение видео управляется с помощью кода.
Выберите экземпляр видео в рабочей области и отключите настройку «Автозапуск» в инспекторе свойств.
Дважды щелкните компонент «Кнопка» на панели «Компоненты», чтобы создать два экземпляра в рабочей области, и разместите кнопки. Их также можно перетащить непосредственно с панели «Компоненты» в рабочей области.
Выберите первый экземпляр кнопки и замените ярлык на «Воспроизведение» в инспекторе свойств, а для второй кнопки выберите вариант «Пауза».
Откройте панель «Фрагменты кода», выбрав «Окно» > «Фрагменты кода». Выберите «HTML5 Canvas» > «Компоненты» и разверните раздел «Интерфейс пользователя».
Выберите кнопку «Воспроизведение» в рабочей области, дважды щелкните событие нажатия кнопки на панели «Фрагменты кода» и затем нажмите кнопку «ОК». Animate присваивает имя экземпляра выбранной кнопки. Вновь созданный код можно просмотреть на панели «Действия».
Выберите видеоролик в рабочей области и разверните раздел «Видео» на панели «Фрагменты кода». Дважды щелкните «Воспроизведение видео». Код, необходимый для воспроизведения видео, добавляется на панель «Действия».
Чтобы воспроизвести видео при нажатии кнопки, поместите код между тегами <Start your custom code> и <End your custom code>.
Чтобы добавить код для приостановки видео, выберите кнопку паузы, назначьте обработчик нажатий для новой кнопки и добавьте код для приостановки видео.
Предварительно просмотрите фильм. Нажмите кнопку «Воспроизведение», чтобы воспроизвести видео, и кнопку «Пауза», чтобы приостановить воспроизведение.
Атрибут className для каждого компонента можно просмотреть в инспекторе свойств. Используйте эти имена классов для упаковки компонентов с использованием CSS. Используйте компонент CSS для загрузки пользовательских CSS. Компонент CSS позволяет выбрать любой локальный файл CSS, который будет включен в ролик.
Дизайнеры или разработчики Animate могут установить распределенный компонент (файл ZXP) с помощью утилиты Управление расширениями. Дополнительные сведения см. в разделе Установка расширений.
Чтобы установить распределенные компоненты, выполните следующие действия.
Дважды щелкните файл ManageExtensions.exe. Откроется диалоговое окно Управление расширениями.
Щелкните Установить расширение и выберите расширение (файл .zxp) для установки. Дополнительные сведения см. в разделе Установка расширений.
Чтобы найти установленный компонент в Animate, щелкните Окно > Компонент. Откроется диалоговое окно «Компоненты».
Щелкните значок гамбургера в правом верхнем углу и нажмите Повторно загрузить компоненты.