Guia do Usuário Cancelar

Uso de componentes do HTML5 Canvas

Pesquisar
Animate

Animate

Abrir aplicativo
  • Guia do Usuário do Adobe Animate
    1. Novidades no Animate
    2. Glossário visual
    3. Requisitos de sistema do Animate
    4. Atalhos de teclado do Animate
    5. Trabalhar com vários tipos de arquivo no Animate
    1. Noções básicas de animação no Animate
    2. Como usar quadros e quadros-chave no Animate
    3. Animação quadro a quadro no Animate
    4. Como trabalhar com animação de interpolação clássica no Animate
    5. Ferramenta Pincel
    6. Guia de movimento
    7. Interpolação de movimento e ActionScript 3.0
    8. Sobre a animação com interpolação de movimento
    9. Animações de interpolação de movimento
    10. Criação de uma animação de interpolação de movimento
    11. Utilização dos quadros-chave de propriedade
    12. Animação de posição com uma interpolação
    13. Editar interpolações de movimento usando o Motion Editor
    14. Edição do caminho de movimento de uma animação de interpolação
    15. Manipulação de interpolações de movimento
    16. Adição de atenuações personalizadas
    17. Criação e aplicação das predefinições de movimento
    18. Configuração de extensões de interpolação de animação
    19. Trabalhar com interpolações de movimento salvas como arquivos XML
    20. Interpolações de movimento e interpolações clássicas
    21. Interpolação de formas
    22. Uso da animação da ferramenta Bone no Animate
    23. Trabalho com articulações de personagens no Animate
    24. Como usar camadas de máscara no Adobe Animate
    25. Como trabalhar com cenas no Animate
  • Interatividade
    1. Como criar botões com o Animate
    2. Converter projetos do Animate em outros formatos de tipo de documento
    3. Criação e publicação de documentos HTML5 Canvas no Animate
    4. Adicionar interatividade com snippets de código no Animate
    5. Criar componentes HTML5 personalizados
    6. Uso de componentes do HTML5 Canvas
    7. Criação de componentes personalizados: exemplos
    8. Snippets de código para componentes personalizados
    9. Práticas recomendadas - Publicidade com o Animate
    10. Criação e publicação de Realidade virtual
    1. Criação e gerenciamento de pincéis
    2. Uso de Google Fonts em documentos HTML5 Canvas
    3. Uso das Bibliotecas da Creative Cloud e do Adobe Animate
    4. Uso dos painéis Palco e Ferramentas do Animate
    5. Fluxo e espaço de trabalho do Animate
    6. Uso de fontes da Web em documentos HTML5 Canvas
    7. Linhas de tempo e ActionScript
    8. Trabalhar com múltiplas linhas de tempo
    9. Definir preferências
    10. Uso de painéis de criação do Animate
    11. Criar camadas na linha do tempo com o Animate
    12. Exportar animações para aplicativos móveis e mecanismos de jogo
    13. Mover e copiar objetos
    14. Modelos
    15. Localização e substituição no Animate
    16. Desfazer, refazer e o painel de Histórico
    17. Atalhos de teclado
    18. Como usar a linha do tempo no Animate
    19. Criação de extensões HTML
    20. Opções de otimização para imagens e GIFs animados
    21. Configurações de exportação para imagens e GIFs
    22. Painel Ativos no Animate
    1. Transformação e combinação de objetos gráficos no Animate
    2. Criar e trabalhar com instâncias do símbolo no Animate
    3. Traçado de imagem
    4. Como usar som no Adobe Animate
    5. Exportação de arquivos SVG
    6. Criação de arquivos de vídeo para uso no Animate
    7. Como adicionar vídeos no Animate
    8. Desenhar e criar objetos com o Animate
    9. Remodelação de linhas e formas
    10. Traçados, preenchimentos e gradientes com o Animate CC
    11. Trabalhar com o Adobe Premiere Pro e o After Effects
    12. Painéis de cor no Animate CC
    13. Abrir arquivos do Flash CS6 com o Animate
    14. Trabalho com texto clássico no Animate
    15. Aplicação de ilustração final no Animate
    16. Bitmaps importados no Animate
    17. Gráficos em 3D
    18. Trabalhar com símbolos no Animate
    19. Desenhar linhas e formas com o Adobe Animate
    20. Trabalho com bibliotecas no Animate
    21. Exportação de sons
    22. Seleção de objetos no Animate CC
    23. Trabalho com arquivos AI do Illustrator no Animate
    24. Aplicação de modos de mesclagem
    25. Organização de objetos
    26. Automação de tarefas com o menu Comandos
    27. Texto multilíngue
    28. Uso de câmera no Animate
    29. Filtros gráficos
    30. Som e ActionScript
    31. Preferências de desenho
    32. Desenho com a ferramenta Caneta
    1. Converter projetos do Animate em outros formatos de tipo de documento
    2. Compatibilidade com plataforma personalizada
    3. Criação e publicação de documentos HTML5 Canvas no Animate
    4. Criação e publicação de um documento WebGL
    5. Compactação de aplicativos no AIR para iOS
    6. Publicação de AIR em aplicativos Android
    7. Publicação no Adobe AIR para desktop
    8. Configurações de publicação do ActionScript
    9. Práticas recomendadas - Organização do ActionScript em um aplicativo
    10. Como usar ActionScript com o Animate
    11. Acessibilidade no espaço de trabalho do Animate
    12. Programação e gerenciamento de scripts
    13. Ativação do suporte para plataformas personalizadas
    14. Visão geral do suporte da plataforma personalizada
    15. Trabalhar com plug-ins personalizados de suporte da plataforma
    16. Depuração do ActionScript 3.0
    17. Ativação do suporte para plataformas personalizadas
    1. Exportação de arquivos do Animate CC
    2. Publicação OAM
    3. Exportação de arquivos SVG
    4. Exportar gráficos e vídeos com o Animate
    5. Publicação de documentos AS3
    6. Exportar animações para aplicativos móveis e mecanismos de jogo
    7. Exportação de sons
    8. Práticas recomendadas - Dicas para a criação de conteúdo em dispositivos móveis
    9. Práticas recomendadas - Convenções de vídeo
    10. Práticas recomendadas - Diretrizes de criação de aplicativos SWF
    11. Práticas recomendadas - Estruturação de arquivos FLA
    12. Práticas recomendadas para otimizar arquivos FLA para o Animate
    13. Configurações de publicação do ActionScript
    14. Especificar configurações de publicação para o Animate
    15. Exportação de arquivos projetores
    16. Exportar imagens e GIFs animados
    17. Modelos de publicação HTML
    18. Trabalhar com o Adobe Premiere Pro e o After Effects
    19. Compartilhar e publicar animações rapidamente
    1. Problemas corrigidos
    2. Problemas conhecidos
    1. Guia do Usuário do Adobe Animate
      1. Novidades no Animate
      2. Glossário visual
      3. Requisitos de sistema do Animate
      4. Atalhos de teclado do Animate
      5. Trabalhar com vários tipos de arquivo no Animate
      1. Noções básicas de animação no Animate
      2. Como usar quadros e quadros-chave no Animate
      3. Animação quadro a quadro no Animate
      4. Como trabalhar com animação de interpolação clássica no Animate
      5. Ferramenta Pincel
      6. Guia de movimento
      7. Interpolação de movimento e ActionScript 3.0
      8. Sobre a animação com interpolação de movimento
      9. Animações de interpolação de movimento
      10. Criação de uma animação de interpolação de movimento
      11. Utilização dos quadros-chave de propriedade
      12. Animação de posição com uma interpolação
      13. Editar interpolações de movimento usando o Motion Editor
      14. Edição do caminho de movimento de uma animação de interpolação
      15. Manipulação de interpolações de movimento
      16. Adição de atenuações personalizadas
      17. Criação e aplicação das predefinições de movimento
      18. Configuração de extensões de interpolação de animação
      19. Trabalhar com interpolações de movimento salvas como arquivos XML
      20. Interpolações de movimento e interpolações clássicas
      21. Interpolação de formas
      22. Uso da animação da ferramenta Bone no Animate
      23. Trabalho com articulações de personagens no Animate
      24. Como usar camadas de máscara no Adobe Animate
      25. Como trabalhar com cenas no Animate
    4. Interatividade
      1. Como criar botões com o Animate
      2. Converter projetos do Animate em outros formatos de tipo de documento
      3. Criação e publicação de documentos HTML5 Canvas no Animate
      4. Adicionar interatividade com snippets de código no Animate
      5. Criar componentes HTML5 personalizados
      6. Uso de componentes do HTML5 Canvas
      7. Criação de componentes personalizados: exemplos
      8. Snippets de código para componentes personalizados
      9. Práticas recomendadas - Publicidade com o Animate
      10. Criação e publicação de Realidade virtual
      1. Criação e gerenciamento de pincéis
      2. Uso de Google Fonts em documentos HTML5 Canvas
      3. Uso das Bibliotecas da Creative Cloud e do Adobe Animate
      4. Uso dos painéis Palco e Ferramentas do Animate
      5. Fluxo e espaço de trabalho do Animate
      6. Uso de fontes da Web em documentos HTML5 Canvas
      7. Linhas de tempo e ActionScript
      8. Trabalhar com múltiplas linhas de tempo
      9. Definir preferências
      10. Uso de painéis de criação do Animate
      11. Criar camadas na linha do tempo com o Animate
      12. Exportar animações para aplicativos móveis e mecanismos de jogo
      13. Mover e copiar objetos
      14. Modelos
      15. Localização e substituição no Animate
      16. Desfazer, refazer e o painel de Histórico
      17. Atalhos de teclado
      18. Como usar a linha do tempo no Animate
      19. Criação de extensões HTML
      20. Opções de otimização para imagens e GIFs animados
      21. Configurações de exportação para imagens e GIFs
      22. Painel Ativos no Animate
      1. Transformação e combinação de objetos gráficos no Animate
      2. Criar e trabalhar com instâncias do símbolo no Animate
      3. Traçado de imagem
      4. Como usar som no Adobe Animate
      5. Exportação de arquivos SVG
      6. Criação de arquivos de vídeo para uso no Animate
      7. Como adicionar vídeos no Animate
      8. Desenhar e criar objetos com o Animate
      9. Remodelação de linhas e formas
      10. Traçados, preenchimentos e gradientes com o Animate CC
      11. Trabalhar com o Adobe Premiere Pro e o After Effects
      12. Painéis de cor no Animate CC
      13. Abrir arquivos do Flash CS6 com o Animate
      14. Trabalho com texto clássico no Animate
      15. Aplicação de ilustração final no Animate
      16. Bitmaps importados no Animate
      17. Gráficos em 3D
      18. Trabalhar com símbolos no Animate
      19. Desenhar linhas e formas com o Adobe Animate
      20. Trabalho com bibliotecas no Animate
      21. Exportação de sons
      22. Seleção de objetos no Animate CC
      23. Trabalho com arquivos AI do Illustrator no Animate
      24. Aplicação de modos de mesclagem
      25. Organização de objetos
      26. Automação de tarefas com o menu Comandos
      27. Texto multilíngue
      28. Uso de câmera no Animate
      29. Filtros gráficos
      30. Som e ActionScript
      31. Preferências de desenho
      32. Desenho com a ferramenta Caneta
      1. Converter projetos do Animate em outros formatos de tipo de documento
      2. Compatibilidade com plataforma personalizada
      3. Criação e publicação de documentos HTML5 Canvas no Animate
      4. Criação e publicação de um documento WebGL
      5. Compactação de aplicativos no AIR para iOS
      6. Publicação de AIR em aplicativos Android
      7. Publicação no Adobe AIR para desktop
      8. Configurações de publicação do ActionScript
      9. Práticas recomendadas - Organização do ActionScript em um aplicativo
      10. Como usar ActionScript com o Animate
      11. Acessibilidade no espaço de trabalho do Animate
      12. Programação e gerenciamento de scripts
      13. Ativação do suporte para plataformas personalizadas
      14. Visão geral do suporte da plataforma personalizada
      15. Trabalhar com plug-ins personalizados de suporte da plataforma
      16. Depuração do ActionScript 3.0
      17. Ativação do suporte para plataformas personalizadas
      1. Exportação de arquivos do Animate CC
      2. Publicação OAM
      3. Exportação de arquivos SVG
      4. Exportar gráficos e vídeos com o Animate
      5. Publicação de documentos AS3
      6. Exportar animações para aplicativos móveis e mecanismos de jogo
      7. Exportação de sons
      8. Práticas recomendadas - Dicas para a criação de conteúdo em dispositivos móveis
      9. Práticas recomendadas - Convenções de vídeo
      10. Práticas recomendadas - Diretrizes de criação de aplicativos SWF
      11. Práticas recomendadas - Estruturação de arquivos FLA
      12. Práticas recomendadas para otimizar arquivos FLA para o Animate
      13. Configurações de publicação do ActionScript
      14. Especificar configurações de publicação para o Animate
      15. Exportação de arquivos projetores
      16. Exportar imagens e GIFs animados
      17. Modelos de publicação HTML
      18. Trabalhar com o Adobe Premiere Pro e o After Effects
      19. Compartilhar e publicar animações rapidamente
      1. Problemas corrigidos
      2. Problemas conhecidos

     

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

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

      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.

      Visualizar saída do componente

     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.

      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. 

    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.

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

      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.

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

      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. 

     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.

    Componentes HTML5 interessantes

    Adicionar interatividade a seu conteúdo é algo interessante e inclui muitos recursos com componentes HTML 5. Quer saber como usar esses componentes HTML5 no Animate? Assista ao tutorial no fim deste exemplo e siga estas etapas.

    1. Clique em Windows e selecione Componentes.

    2. Expanda a pasta Vídeos, clique e arraste o ícone de vídeo para o palco.

    3. Nas Propriedades, expanda a guia Posições e Tamanho e defina os valores necessários.

    Como aprimorar suas composições do Animate usando componentes HTML5

    Assista ao vídeo para saber como incluir mais componentes a sua composição.

    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. Para obter mais informações, consulte Instalar extensões.

    Pré-requisito

    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.

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

    3. Para exibir o componente instalado no Animate, 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.

    Mais itens similares

    Receba ajuda com mais rapidez e facilidade

    Novo usuário?

    Links rápidos

    Veja todos os seus planos Gerenciar seus planos
    Ver links rápidos
    Ocultar links rápidos

    Avisos legais | Política de privacidade online