Use esse artigo para saber mais sobre a utilização de componentes personalizáveis.

O componente fornece uma função ou um grupo de componentes personalizáveis reutilizáveis relacionados que melhoraram a produtividade para criadores de publicidade. Anteriormente, o Animate CC suportava componentes de flash usados com destinos baseados em Flash. A partir dessa versão, o Animate oferece suporte ao HTML5 Canvas. 

  1. 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.

    Novo documento
    HTML5 Canvas
  2. Selecione Janela > Componentes.

    Componentes padrão
    Componentes padrão

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

  4. 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). 

    components_drag_drop
    Arrastar e soltar os componentes

  5. 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.

  6. 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.

    components_preview
    Visualizar saída do componente

Observação:

Os componentes são adicionados ao documento HTML como elementos DOM, portanto, consulte os snippets de código de Componente (Snippets de código> HTML5 Canvas > Componentes) para adicionar interatividade a Componentes.

Adicionar interatividade a componentes usando snippets de códigos

  1. Selecione Janela > Componentes.

  2. 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.

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

    component_snippets
    Snippets de código padrão

  4. 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 CC

Exemplo

Use o exemplo a seguir para aprender a usar os snippet de código quando a reprodução do vídeo for controlada por código.

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

  2. 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.

    Component_example_7
    Inserir botões

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

  4. 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. 

  5. 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 CC atribui um nome de instância ao botão selecionado. Você pode ver o código recentemente adicionado no painel Ações.

    Component_example_4
    Adição de snippets de código

  6. 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.

    Component_example_5
    Código adicionado ao painel Ações

  7. 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>. 

    Component_example_6
    Mova o código dentro das tags

  8. 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.

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

Observação:

Você pode ver o atributo className para cada componente no Inspetor de propriedades. Use esses nomes de classe para aplicar uma aparência a componentes usando CSS. Use o componente CSS para carregar seu CSS personalizado. O componente CSS permite selecionar qualquer arquivo CSS local incluído no filme.

Instalar componentes distribuídos

Os designers ou desenvolvedores do Animate podem instalar o componente de arquivo distribuído ZXP usando o utilitário Gerenciar extensões.

Pré-requisito

Gerenciar utilitário de extensões. Para instruções de download, clique em Ajuda > Gerenciar extensões em seu produto Animate CC.

Instalação de componentes

Para instalar componentes distribuídos, execute as seguintes etapas: 

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

    ManageExtensions
  2. Clique em Instalar uma extensão e selecione a extensão (arquivo .zxp) que deseja instalar.

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

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

    reloading-components

Esta obra está licenciada sob uma licença não adaptada da Creative Commons Attribution-Noncommercial-Share Alike 3.0  As publicações do Twitter™ e do Facebook não são cobertas pelos termos do Creative Commons.

Avisos legais   |   Política de privacidade online