Uso de componentes do HTML5 Canvas

Selecione Arquivo > Novo.

Escolha Avançado nas guias na parte superior da tela na caixa de diálogo Novo documento e, em seguida, selecione a opção HTML5 Canvas.

Selecione Janela > Componentes.

Selecione Componentes > Vídeo. Arraste e solte os componentes associados na tela. 

Selecione a ocorrência do componente de Vídeo no palco e altere os parâmetros no Inspetor de propriedades. O parâmetro Origem permite selecionar arquivos de vídeo de um ponto local ou fornecer qualquer URL para reproduzir o vídeo (formatos mp4, ogg, ogv ou webm). 

Selecione “corresponder ás dimensões de origem” para redimensionar o reprodutor de vídeo para corresponder às dimensões do vídeo da entrada. Esse recurso funciona apenas para vídeos mp4. Para outros tipos de vídeo, redimensione manualmente a instância de vídeo no palco para garantir que a proporção permaneça a mesma.

Pressione Ctrl + enter (cmd + enter no MAC) para visualizar o filme. O vídeo é reproduzido em seu navegador padrão. Como os controles estão visíveis por padrão, você pode ver os controles ao passar o mouse sobre o vídeo em um navegador.

Você pode usar o mesmo procedimento para usar outros componentes.

Selecione Janela > Componentes.

Para adicionar interatividade aos componentes, selecione Janela > Painel de snippets de código. Você pode exibir o mapeamento de diferentes comportamentos dos componentes disponíveis.

Na tela Snippet de código, selecione HTML5 Canvas > Componentes.

Baseado no componente selecionado, clique duas vezes no trecho de código correspondente para exibir o trecho no painel Ações. Para obter informações sobre como adicionar interatividade aos snippets de código, consulte Adicionar interatividade com snippets de código no Animate. 

Selecione a ocorrência de vídeo no palco e desabilite a configuração de Reprodução automática no Inspetor de propriedades. 

Clique duas vezes no botão do componente no painel Componentes para criar duas ocorrências no palco e posicionar os botões. Você também pode arrastar e soltar os componentes diretamente do painel para o palco.

Selecione a primeira ocorrência de botão e altere o rótulo para Reproduzir no PI e o segundo botão para Pausar. 

Abra o painel Trechos de código clicando em Janela > Trechos de código. Navegue para HTML5 Canvas > Componentes e expanda a seção Interface do usuário. 

Selecione o botão Reproduzir no palco, clique duas vezes no Evento de clique de botão no painel Snippets de código e clique em OK. O Animate atribui um nome de instância ao botão selecionado. Você pode ver o código recentemente adicionado no painel Ações.

Selecione o Vídeo no palco e expanda a seção Vídeo nos Snippets de código. Clique duas vezes em Reproduzir um vídeo. O código necessário para reproduzir o vídeo é adicionado ao painel Ações.

Para reproduzir o vídeo quando o botão é clicado, mova o código entre a seção <Iniciar código personalizado> e <Finalizar código personalizado>. 

Para adicionar um código para pausar o vídeo, selecione o botão pausar, atribua o novo manipulador de clique de botão e adicione o código de pausa do vídeo.

Visualize o filme. Clique no botão Reproduzir para reproduzir o vídeo e clique no botão Pausar para pausar o vídeo. 

Clique duas vezes no arquivo ManageExtensions.exe. A caixa de diálogos Gerenciar extensões é exibida.

Clique em Instalar uma extensão e selecione a extensão (arquivo .zxp) que deseja instalar. Para obter mais informações, consulte Instalar extensões.

Para exibir o componente instalado no Animate, clique em Janela > Componente. A caixa de diálogo Componentes é exibida. 

Clique no ícone de opções no canto superior direito e clique em Recarregar componentes.