Guia do Usuário Cancelar

Traçados, preenchimentos e gradientes com o Animate

Pesquisar
Animate

Animate

Abrir aplicativo
  1. Guia do Usuário do Adobe Animate
  2. Introdução ao 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
  3. Animação
    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
  5. Fluxo de trabalho e espaço de trabalho
    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
  6. Multimídia e vídeo
    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
  7. Plataformas
    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
  8. Publicação e exportação
    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
  9. Solução de problemas
    1. Problemas corrigidos
    2. Problemas conhecidos

 

Criar ou editar preenchimento de gradiente

Um gradiente é um preenchimento multicolorido no qual uma cor gradualmente muda para outra cor. O Animate (antigo Flash Professional CC) permite que você aplique até 15 transições de cor em um gradiente. A criação de gradiente é uma boa maneira de criar uma gradação suave de cores em um ou mais objetos. Você pode salvar um gradiente como amostra para facilitar a sua aplicação a vários objetos. O Animate pode criar dois tipos de gradientes:

Os gradientes lineares mudam de cor ao longo de um único eixo (horizontal ou vertical).

Os gradientes radiais mudam de cor numa direção para fora, com início em um ponto focal central. Você pode ajustar a direção do gradiente, assim como suas cores, a localização do ponto focal e muitas outras de suas propriedades.

O Animate oferece mais controle sobre o gradiente linear e o radial para uso com Flash Player. Esses controles, chamados de modos de estouro, permitem-lhe especificar como as cores são aplicadas além do gradiente.

  1. Para aplicar um preenchimento gradiente em arte existente, selecione um objeto ou objetos do Palco.

  2. Se o painel Cor não estiver visível, selecione Janela > Cor.

  3. Para selecionar a tela do modo cores, selecione RGB (configuração padrão) ou HSB no menu do painel.

  4. Selecione o tipo de gradiente no menu Tipo:

    Linear

    Crie um gradiente que matize do ponto inicial ao final numa linha reta.

    Radial

    Produz um gradiente que se mistura para fora em um caminho circular a partir de um ponto focal central.

     Quando você seleciona um gradiente linear ou radial, o painel Cores inclui também duas outras opções, se você estiver publicando material para o Flash Player 8 ou posterior. Primeiro, o menu Estouro é ativado abaixo do menu Tipo. Use o menu Estouro para controlar as cores aplicadas além dos limites do gradiente. Segundo, aparece a barra de definição do gradiente, com ponteiros abaixo da barra indicando as cores do gradiente.

  5. (Opcional) No menu Estouro, selecione um modo de estouro a ser aplicado no gradiente: Estender (modo padrão), Refletir ou Repetir.

  6. (Opcional) Para criar um gradiente linear ou radial compatível com SVG (Gráfico vetorial escalonável), clique na caixa de seleção RGB Linear. Isso permitirá que o gradiente pareça suave quando for alterado para diferentes tamanhos depois da primeira aplicação.

  7. Para alterar uma cor no gradiente, selecione um dos ponteiros de cor abaixo da barra de definição de gradiente (o triângulo na parte superior do ponteiro de cor selecionado ficará preto). Clique no painel de espaço de cor que aparece acima da barra de gradiente. Arraste o controle deslizante Brilho para ajustar a luminosidade da cor.

  8. Para incluir um ponteiro no gradiente, clique na barra de definição de gradiente ou abaixo dela. Selecione uma cor para o novo ponteiro, conforme descrito na etapa anterior.

    Pode-se incluir até 15 ponteiros de cor, o que permitirá a criação de um gradiente com até 15 transições de cores.

  9. Para reposicionar um ponteiro no gradiente, arraste o ponteiro ao longo da barra de definição do gradiente. Arraste o ponteiro para baixo e para fora da barra de definição do gradiente para removê-lo.

  10. Para gravar o gradiente, clique no triângulo no canto superior direito do painel Cores e selecione Incluir amostras no menu.

    O gradiente é incluído no painel Amostras para o presente documento.

  11. Para transformar o gradiente, como para fazer um gradiente vertical, em vez de horizontal, use a ferramenta Transformação de gradiente. Consulte Transformar gradiente e preenchimentos de bitmap para obter mais informações.

Ajustar cores de traçados e preenchimentos

Você pode especificar o traçado e a cor de preenchimento de objetos gráficos e formas usando os controles Cor de preenchimento e Cor do traçado, no painel Ferramentas, ou controles Cor do traçado e Cor de preenchimento, no Inspetor de propriedades.

A seção Cor do traçado e Cor de preenchimento do painel Ferramentas contém controles para ativação das caixas Cor do traçado e Cor de preenchimento, que, por sua vez, determinam se os traçados ou preenchimentos dos objetos selecionados são afetados pelas opções de cor. Além disso, a seção Cores tem controles para redefinir rapidamente as cores para o padrão, definir as configurações de cor de traçado ou de preenchimento para Nenhuma e trocar as cores de preenchimento e traçado.

Além de permitir selecionar a cor do traçado e preenchimento de um objeto gráfico ou forma, o Inspetor de propriedades oferece controles para especificar a largura e o estilo do traçado.

Para usar esses controles com o fim de modificar atributos de pintura de objetos existentes, primeiro selecione os objetos no Palco.

Consulte também: Visualização de cores do Live.

Ajuste de cores de traçados e preenchimentos usando o painel Ferramentas

Os controles Cor de preenchimento ou Cor do traçado no painel Ferramentas define os atributos da pintura de novos objetos criados com as ferramentas de pintura e de desenho. Para usar esses controles com o fim de modificar atributos de pintura de objetos existentes, primeiro selecione os objetos no Palco.

  • Clique no controle de cor Traçado ou Preenchimento e selecione uma amostra de cor.

  • Clique no botão do Seletor de cores do sistema na janela pop-up e selecione uma cor. Você também pode passar o mouse sobre diferentes cores para visualizar o efeito da cor sobre a forma.

  • Digite o valor hexadecimal da cor na caixa.

  • Para voltar para as configurações de cor padrão (preenchimento branco e traçado preto), clique no botão Preto e branco, no painel Ferramentas.

  • Para remover qualquer traçado ou preenchimento, clique no botão Sem cor.

     O botão Sem cor aparece apenas quando se está criando um oval ou um retângulo. Pode-se criar um objeto sem traçado ou preenchimento, mas você não pode usar o botão Sem cor com um objeto existente. Em vez disso, selecione o traçado ou preenchimento existente e exclua.

  • Para trocar as cores entre o preenchimento e o traçado, clique no botão Trocar cores no painel Ferramentas.

O Animate permite que você visualize Traço ou Preenchimento de cores ao alterá-los da amostra de cor. Para obter mais informações, consulte Visualização de cores do Live.

Aplicação de preenchimento de cor sólido usando o Inspetor de propriedades

  1. Selecione um objeto ou objetos fechados no Palco.
  2. Selecione Janela > Propriedades.

  3. Para selecionar uma cor, clique em cor de Preenchimento e faça o seguinte:

    • Selecione a amostra de cor da paleta.
    • Digite o valor hexadecimal da cor na caixa.

Selecione cor, estilo e espessura do traçado usando o Inspetor de propriedades

Para mudar a cor, o estilo e o peso do traçado de um objeto selecionado, use o controle Cor do traçado no inspetor de Propriedades. Para o estilo do traçado, escolha entre os estilos pré-carregados com o Animate ou crie um estilo personalizado. Para selecionar um preenchimento de cor sólida, use o controle de Cor de preenchimento no inspetor de Propriedades.

  1. Selecione um objeto ou objetos no Palco (para símbolos, primeiro clique duas vezes para entrar no modo de edição de símbolo).
  2. Selecione Janela > Propriedades.
  3. Para selecionar um estilo de traçado, clique no menu Estilo e selecione uma opção. Para criar um estilo personalizado, clique em Personalizar, no Inspetor de propriedades, selecione Opções, na caixa de diálogo Estilo de traçado, e clique em OK.

     A seleção de estilo de traçado exceto Sólido pode aumentar o tamanho do arquivo.

  4. Para selecionar uma espessura de traçado, defina o controle deslizante Traçado ou insira um valor na caixa de texto.
  5. Para ativar as dicas de traçado, selecione a caixa de seleção Dicas de traçado. Dicas de traçado ajusta as âncoras de curva e de linha em pixels totais, evitando linhas horizontais e verticais borradas.
  6. Para definir o estilo de um fim de caminho, selecione a opção Finalização:

    Nenhum

    É esvaziado com fim do caminho.

    Redondo

    Adiciona uma finalização redonda que se estende além do caminho em metade da largura do traçado.

    Quadrado

    Adiciona uma finalização quadrada que se estende além do caminho em metade da largura do traçado.

  7. (Opcional) Se estiver desenhando linhas com as ferramentas Lápis ou Pincel, com o modo desenho configurado para Suavização, use o controle deslizante Suavização para especificar o grau em que o Animate suaviza as linhas que está desenhando.

    Por padrão, o valor de Suavização é definido em 50, mas você pode especificar valores de 0 a 100. Quanto maior o valor da suavização, mas suave a linha resultante.

     Se o modo desenho for configurado para Correção ou Tinta, o controle deslizante Suavização fica desativado.

  8. Para definir como dois segmentos caminhos se encontram, seleciona a opção Unir. Para mudar os cantos em caminhos abertos ou fechados, selecione um caminho e outra opção unir.
    União em diagonal, redonda e em bisel.

  9. Para evitar o efeito de bisel em uma união em diagonal, digite o limite da diagonal.

    Os comprimentos de linha que excedam esse valor são quadrados em vez de pontudos. Por exemplo, um limite de diagonal de 2 para um traçado de 3 pontos significa que quando o comprimento do ponto for duas vezes o peso do traçado, o Animate remove o ponto limite.

    Aplicação de limite em diagonal.

Ajustar traçados de várias linhas ou formas

Para alterar a cor, a largura e o estilo de uma ou mais linhas do traçado ou contornos da forma, use a ferramenta Tinteiro. Você pode aplicar apenas cores sólidas, não gradientes ou bitmaps, nas linhas ou nos contornos das formas.

O uso da ferramenta Vidro de tinta, em vez da seleção de linhas individuais, facilita mudar os atributos do traçado de múltiplos objetos de uma só vez.

  1. Selecione a ferramenta Vidro de tinta no painel Ferramentas.
  2. Selecione uma cor de traçado.
  3. Selecione um estilo e uma largura do traçado no inspetor de Propriedades.
  4. Para aplicar as modificações do traçado, clique num objeto do Palco.

Copiar traçados e preenchimentos

Use a ferramenta Conta-gotas para copiar atributos de preenchimento e de traçado de um objeto e aplicar imediatamente em outro objeto. A ferramenta Conta-gotas permite também visualizar uma amostra da imagem em um bitmap para usar como preenchimento.

  1. Para aplicar os atributos de uma área preenchida ou com traçado para outra área preenchida ou com traçado, selecione a ferramenta Conta-gotas e clique na área preenchida ou com traçado cujos atributos deseja aplicar.

    Quando se clica num traçado, a ferramenta automaticamente muda a ferramenta Vidro de tinta. Quando se clica em área preenchida, a ferramenta automaticamente muda para a ferramenta Lata de tinta com o modificador Bloquear preenchimento ativado.

  2. Clique em outra área preenchida ou com traçado para aplicar os novos atributos.

Modificação de áreas pintadas com a ferramenta Lata de tinta

A ferramenta Lata de tinta preenche com cor as áreas fechadas. Esta ferramenta permite o seguinte:

  • Preenchimento das áreas vazias e mudança da cor de áreas já pintadas.

  • Pintar com cores sólidas e preenchimentos de gradientes e bitmaps.

  • Use a ferramenta Lata de tinta para preencher áreas não totalmente fechadas.

  • Faça o Animate fechar as lacunas nos contornos da forma enquanto você usa a ferramenta Lata de tinta.

  1. Selecione a ferramenta Lata de tinta no painel Ferramentas.
  2. Selecione a cor e o estilo do preenchimento.
  3. Clique no modificador Tamanho do espaço que aparece na parte inferior do painel Ferramentas e selecione uma opção de tamanho de espaço:
    • Não Fechar lacunas para fechar lacunas manualmente antes de preencher a forma. Fechar as lacunas manualmente pode ser mais rápido em desenhos complexos.
    • A opção Fechar para fazer o Animate preencher a forma que apresenta lacunas.

     Se as lacunas forem muito grandes, pode ser necessário fechá-las manualmente.

  4. Clique na forma ou na área fechada para preenchê-la.

Opções da ferramenta Lata de tinta

Você pode usar a ferramenta Lata de tinta para clicar e arrastar entre os contornos de um objeto para preenchê-los com uma cor escolhida. Clique e arraste a ferramenta em qualquer direção entre os contornos. A ferramenta Lata de tinta preenche uma cor sempre que os pontos são capturados nos contornos.

Ao marcar a caixa de seleção Preencher todas as regiões, todas as regiões da seleção são preenchidas com a cor ao arrastar.

Por padrão, a opção Preencher todas as regiões fica desmarcada. Neste modo, a ferramenta Lata de tinta preenche somente a cor específica. 

Quando a opção Preencher todas as regiões não estiver selecionada (padrão)

  • Nesse modo, quando um usuário clicar no mouse usando a Lata de tinta, você poderá observar a cor que está sendo substituída. Nesse caso, suponhamos que a cor verde esteja sendo substituída por vermelho agora.
  • À medida que o usuário arrasta em uma ilustração, essa opção substitui somente os contornos que são preenchidos com a cor verde.
  • Se o usuário arrastar por um contorno fechado vazio, ele será preenchido com vermelho.
  • No momento do clique do mouse, se o contorno subjacente estiver vazio, essa opção preencherá os contornos em branco quando o usuário arrastar a ferramenta Lata de tinta.

Quando a opção Preencher todas as regiões estiver selecionada

Todas as regiões são preenchidas com a cor selecionada. No caso da ilustração mencionada acima, a cor é vermelho.

Transformar gradiente e preenchimentos de bitmap

Você pode transformar um preenchimento gradiente ou com bitmap ajustando o tamanho, a direção ou o centro do preenchimento.

  1. Selecione a ferramenta Transformar gradiente do no painel Ferramentas. Caso não seja possível visualizar a ferramenta Transformar gradiente no painel Ferramentas, clique e mantenha pressionado o botão do mouse sobre a ferramenta Transformação livre e selecione a ferramenta Transformar gradiente no menu.
  2. Clique na área preenchida com gradiente ou bitmap. Aparece uma caixa delimitadora com alças de edição. Quando o ponteiro está sobre qualquer uma dessas alças, ele muda para indicar a função da alça.

    Ponto central

    O ícone de rolagem da alça do ponto central é uma seta de quatro pontas.

    Ponto focal

    A alça do ponto focal aparece apenas quando o gradiente radial está selecionado. O ícone de rolagem da alça do ponto focal é um triângulo invertido.

    Tamanho

    O ícone de rolagem da alça de tamanho (ícone médio da alça na borda da caixa delimitadora) é um círculo com uma seta no seu interior.

    Rotação

    Ajusta a rotação do gradiente. O ícone de rolagem da alça de rotação (o ícone inferior da alça na borda da caixa delimitadora) é um círculo formado por quatro alças.

    Largura

    Ajusta a largura do gradiente. O ícone de rolagem para a alça de largura (a alça quadrada) é uma seta de ponta dupla.

    Pressione Shift para restringir a direção do preenchimento gradiente linear para múltiplos de 45°.

    Controles de gradiente radial

    A. Ponto central B. Largura C. Rotação D. Tamanho E. Ponto focal. 

  3. Dê outra forma ao gradiente ou ao preenchimento da seguinte forma:
    • Para reposicionar o ponto central do gradiente ou do preenchimento com bitmap, arraste o ponto central.

    • Para mudar a largura do gradiente ou do preenchimento com bitmap, arraste a alça quadrada sobre o lado da caixa delimitadora. (Essa opção redimensiona apenas o preenchimento, não o objeto que contém o preenchimento).

    • Para mudar a altura do gradiente ou do preenchimento com bitmap, arraste a alça quadrada na parte inferior da caixa delimitadora.

    • Para girar o gradiente ou o preenchimento com bitmap, arraste a alça de rotação circular no canto. Você pode arrastar também a alça mais abaixo do círculo delimitador de um gradiente ou preenchimento circular.

    • Para dimensionar um gradiente linear ou um preenchimento, arraste a alça quadrada no centro da caixa delimitadora.

    • Para mudar o ponto focal de um gradiente circular, arraste a alça média circular do círculo delimitador.

    • Para inclinar ou colocar em oblíquo um preenchimento numa forma, arraste uma das alças circulares na parte superior ou no lado direito da caixa delimitadora.

    • Para cobrir um bitmap dentro de uma forma, dimensione o preenchimento.

     Para ver todas as alças enquanto você trabalha com preenchimentos grandes ou preenchimentos próximos à borda do Palco, selecione Visualizar > Área de trabalho.

Bloqueie o gradiente ou o bitmap para preencher o Palco

Você pode bloquear um gradiente ou o preenchimento com bitmap para dar a impressão que o preenchimento cobre todo o Palco e de que os objetos pintados com o preenchimento são máscaras revelando o gradiente ou bitmap subjacente.

Quando você seleciona o modificador Bloquear preenchimento com a ferramenta Pincel ou Lata de tinta e usa essa ferramenta para pintar, o preenchimento gradiente ou com bitmap se estende através dos objetos pintados no Palco.

O uso do modificador Bloquear preenchimento cria a aparência de um único preenchimento gradiente ou com bitmap aplicado a objetos separados no Palco.

Use preenchimento gradiente bloqueado

  1. Selecione a ferramenta Pincel ou Lata de tinta e gradiente ou bitmap como preenchimento.
  2. Selecione linear ou radial do menu Tipo no painel Cores.
  3. Clique no modificador Bloquear preenchimento do .
  4. Primeiro pinte as áreas onde deseja colocar o centro do preenchimento e depois mova para as outras áreas.

Use preenchimento com bitmap bloqueado

  1. Selecione o bitmap que vai usar.
  2. Selecione bitmap do menu Tipo no painel Cores.
  3. Selecione a ferramenta Pincel ou Lata de tinta.
  4. Clique no modificador Bloquear preenchimento do .
  5. Primeiro pinte as áreas onde deseja colocar o centro do preenchimento e depois mova para as outras áreas.

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