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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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