Desenhar e criar objetos com o Animate

  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. Trabalhar com manipulação de caracteres 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. Trabalhar com pontos de sinalização de vídeo
    9. Desenhar e criar objetos com o Animate
    10. Remodelação de linhas e formas
    11. Traçados, preenchimentos e gradientes com o Animate CC
    12. Trabalhar com o Adobe Premiere Pro e o After Effects
    13. Painéis de cor no Animate CC
    14. Abrir arquivos do Flash CS6 com o Animate
    15. Trabalho com texto clássico no Animate
    16. Aplicação de ilustração final no Animate
    17. Bitmaps importados no Animate
    18. Gráficos em 3D
    19. Trabalhar com símbolos no Animate
    20. Desenhar linhas e formas com o Adobe Animate
    21. Trabalho com bibliotecas no Animate
    22. Exportação de sons
    23. Seleção de objetos no Animate CC
    24. Trabalho com arquivos AI do Illustrator no Animate
    25. Aplicação de padrões com a ferramenta Pincel de borrifar
    26. Aplicação de modos de mesclagem
    27. Organização de objetos
    28. Automação de tarefas com o menu Comandos
    29. Texto multilíngue
    30. Uso de câmera no Animate
    31. Uso do Animate com o Adobe Scout
    32. Trabalhar com arquivos Fireworks
    33. Filtros gráficos
    34. Som e ActionScript
    35. Preferências de desenho
    36. Desenho com a ferramenta Caneta
  7. Plataformas
    1. Converter projetos do Animate em outros formatos de tipo de documento
    2. Suporte da 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. Práticas recomendadas - Diretrizes de acessibilidade
    12. Acessibilidade no espaço de trabalho do Animate
    13. Programação e gerenciamento de scripts
    14. Ativação do suporte para plataformas personalizadas
    15. Visão geral do suporte da plataforma personalizada
    16. Criação de conteúdo acessível
    17. Trabalhar com plug-ins personalizados de suporte da plataforma
    18. Depuração do ActionScript 3.0
    19. 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. Exportação de arquivos de vídeo QuickTime
    9. Controle de reprodução de vídeo externo com o ActionScript
    10. Práticas recomendadas - Dicas para a criação de conteúdo em dispositivos móveis
    11. Práticas recomendadas - Convenções de vídeo
    12. Práticas recomendadas - Diretrizes de criação de aplicativos SWF
    13. Práticas recomendadas - Estruturação de arquivos FLA
    14. Práticas recomendadas para otimizar arquivos FLA para o Animate
    15. Configurações de publicação do ActionScript
    16. Especificar configurações de publicação para o Animate
    17. Exportação de arquivos projetores
    18. Exportar imagens e GIFs animados
    19. Modelos de publicação HTML
    20. Trabalhar com o Adobe Premiere Pro e o After Effects
    21. Compartilhar e publicar animações rapidamente

Sobre desenho

As ferramentas de desenho no Adobe Animate permitem criar e modificar linhas e formas para a arte em seus documentos. Todas as linhas e formas criadas no Animate são gráficos vetoriais leves, que ajudam a manter reduzido o tamanho do seu arquivo FLA.

Antes de desenhar e pintar no Animate, é importante entender como ele cria arte, e como o desenho, a pintura e a modificação de formas podem afetar outras formas da mesma camada.

Gráficos vetoriais e de bitmap

Os computadores exibem gráficos nos formatos vetoriais ou de bitmap. A compreensão da diferença entre os dois formatos ajuda você a trabalhar com mais eficiência. Com o uso do Animate, você pode criar e fazer a animação de gráficos vetoriais compactos. O Animate também importa e manipula gráficos vetoriais e de bitmap criados em outros aplicativos.

Gráficos vetoriais

Os gráficos vetoriais descrevem imagens usando linhas e curvas, denominadas vetores, que incluem também propriedades de cores e de posição. Por exemplo, a imagem de uma folha é descrita por pontos através dos quais passam linhas criando o contorno da folha. A cor da folha é determinada pela cor do contorno e a cor da área fechada pelo contorno.

Linhas na arte vetorial.

Quando se edita um gráfico vetorial, modifica-se as propriedades das linhas e das curvas que descrevem sua forma. Mover, redimensionar, remodelar e mudar a cor de um gráfico vetorial sem alterar a qualidade de sua aparência. Os gráficos vetoriais são independentes da resolução, isto é, eles podem ser exibidos em dispositivos de saída de resoluções variadas, sem perder qualquer qualidade.

Gráficos de bitmap

Os gráficos de bitmap descrevem imagens usando pontos coloridos, chamados pixels, organizados numa grade. Por exemplo, a imagem de uma folha é descrita pelo local específico e o valor da cor de cada pixel da grade, criando uma imagem de forma bem semelhante a um mosaico.

Pixels na arte com bitmap.

Quando você edita um gráfico de bitmaps, em vez das linhas e das curvas você modifica os pixels. Os gráficos de bitmap são dependentes da resolução, pois os dados descrevendo a imagem estão fixos em uma grade de tamanho especial. A edição de um gráfico de bitmap pode alterar a qualidade de sua aparência. Em particular, o redimensionamento de um gráfico de bitmap pode tornar as bordas da imagem irregulares, pois os pixels são redistribuídos na grade. A exibição de um gráfico de bitmap em um dispositivo de saída que tenha resolução menor do que a da própria imagem também degrada sua qualidade.

Caminhos

Sempre que traçar uma linha ou forma no Animate, você cria uma linha chamada caminho. Um caminho é composto de um ou mais segmentos retos ou curvados. O início e o final de cada segmento são indicados por pontos de ancoragem, que funcionam como alfinetes que prendem um esboço no lugar adequado. Um caminho pode ser fechado (por exemplo, um círculo) ou aberto, com extremidades distintas (por exemplo, uma linha ondulada).

É possível alterar a forma de um caminho arrastando os pontos de ancoragem, os pontos de direção no final das linhas de direção que aparecem em pontos de ancoragem, ou o próprio segmento de caminho.

Componentes de um caminho

A. Extremidade selecionada (sólida) B. Ponto de ancoragem selecionado C. Ponto de ancoragem não selecionado D. Segmento de caminho curvado E. Ponto de direção F. Linha de direção. 

Os caminhos podem ter dois tipos de pontos de ancoragem: pontos de vértice e pontos suaves. Em um ponto de vértice, o caminho muda repentinamente de direção. Em um ponto suave, os segmentos do caminho são conectados como uma curva contínua. É possível desenhar um caminho usando qualquer combinação de pontos de vértice e pontos suaves. Caso desenhe o tipo de ponto errado, você poderá alterá-lo.

Pontos em um caminho

A. Quatro pontos de vértice B. Quatro pontos suaves C. Combinação de pontos de vértice e pontos suaves. 

Um ponto de vértice pode conectar dois segmentos retos ou curvados, enquanto um ponto suave sempre conecta dois segmentos curvados.

Um ponto de vértice pode conectar tanto os segmentos retos e curvados.

Observação:

Não confunda pontos de vértice e pontos suaves com segmentos retos e curvados.

O contorno de um caminho é chamado de traçado. Uma cor ou um gradiente aplicado a uma área interior aberta ou fechada de um caminho é chamado de preenchimento. Um traçado pode ter peso (espessura), cor e um padrão tracejado. Após criar um caminho ou uma forma, você pode alterar as características do seu traçado e preenchimento.

Linhas e pontos de direção

Quando você seleciona um ponto de ancoragem que conecta segmentos curvos (ou seleciona o próprio segmento), os pontos de ancoragem dos segmentos de conexão exibem alças de direção, que consistem em linhas de direção que finalizam em pontos de direção. O ângulo e o comprimento das linhas de direção determinam a forma e o tamanho dos segmentos curvados. A movimentação dos pontos de direção remodela as curvas. As linhas de direção não aparecem na saída final.

Um ponto suave sempre tem duas linhas de direção, que se movem juntas como uma unidade única e reta. Quando uma linha de direção é movida em um ponto suave, os segmentos curvados de ambos os lados do ponto se ajustam simultaneamente, mantendo uma curva contínua naquele ponto de ancoragem.

Em comparação, um ponto de vértice pode ter duas, uma ou nenhuma linha de direção, dependendo se ela junta dois, um ou nenhum segmento curvado, respectivamente. As linhas de direção do ponto de vértice mantêm o vértice usando ângulos diferentes. Ao mover uma linha de direção em um ponto de vértice, só é ajustada a curva do mesmo lado do ponto que a linha de direção.

Após selecionar um ponto de ancoragem (à esquerda), as linhas de direção aparecem em quaisquer segmentos curvados conectados pelo ponto de ancoragem (à direita).

Ajuste das linhas de direção em um ponto suave (esquerda) e em um ponto de canto (direita).

As linhas de direção são sempre tangentes (perpendicular ao raio de) à curva nos pontos de ancoragem. O ângulo de cada linha de direção determina a inclinação da curva, e o comprimento de cada linha de direção determina a altura, ou profundidade, da curva.

Mover e redimensionar as linhas de direção altera a inclinação das curvas.

Modos de desenho e objetos gráficos

No Animate, você pode criar vários tipos de objetos gráficos com diferentes modos de desenho e ferramentas de desenho. Cada tipo tem suas próprias vantagens e desvantagens. Entendendo os recursos dos diferentes tipos de objeto gráfico, você pode tomar boas decisões sobre quais tipos de objetos usar em seu trabalho.

Observação:

No Animate, os objetos gráficos são itens no Palco. O Animate permite que você mova, copie, apague, transforme, armazene, alinhe e agrupe os objetos gráficos. Os “Objetos Gráficos” no Animate são diferentes dos “objetos ActionScript”, que fazem parte da linguagem de programação ActionScript®. Não confunda os dois usos do termo “objetos”. Para obter mais informações sobre objetos na linguagem de programação, consulte Sobre tipos de dados, em Uso do ActionScript 2.0 no Adobe Animate, ou Tipos de dados, no Guia do desenvolvedor do ActionScript 3.0.

Modo Mesclar desenho

O modo de desenho padrão automaticamente mescla as formas desenhadas quando você as sobrepõem. Quando você desenha formas que se sobrepõem umas às outras na mesma camada, a forma que estiver mais acima recorta a parte da forma abaixo. Dessa maneira, desenhar formas é um modo de desenho destrutivo. Por exemplo, se desenhar um círculo e sobrepor um círculo menor sobre ele e depois selecionar o círculo menor e movê-lo, a parte do segundo círculo sobreposta ao primeiro é removida.

Quando uma forma tem um traçado e um preenchimento, estes são considerados elementos gráficos separados, que podem ser selecionados e movidos de forma independente.

As formas criadas com o modo Mesclar desenho se fundem quando são superpostas. A seleção da forma e sua movimentação causam a alteração da forma superposta.

Entrar no modo Mesclar desenho

  1. Selecione a opção Mesclar desenho, no painel Ferramentas.

  2. Selecione uma ferramenta de desenho no painel Ferramentas e desenhe no Palco

Observação:

Por padrão, o Animate usa o modo Mesclar desenho.

Modo Desenho de objeto

Cria formas conhecidas como objetos de desenho. Objetos de desenho são objetos gráficos separados que não se mesclam automaticamente quando sobrepostos. Isso permite que você faça a sobreposição das formas sem alterar sua aparência quando você as separa ou reordena sua aparência. O Animate cria cada forma como objeto separado que pode ser manipulado individualmente.

Quando uma ferramenta de desenho está no modo Desenho de objeto, as formas que você cria com ela são independentes. O traçado e o preenchimento de uma forma não são elementos separados e as formas que se sobrepõem não alteram umas às outras. Quando você seleciona uma forma criada usando o modo Desenho de objeto, o Animate cerca a forma com uma caixa delimitadora retangular para identificá-la.

Observação:

Defina preferências para sensibilidade de contato quando selecionar as formas criadas usando o modo Desenho de objeto.

As formas criadas com o modo Desenho de objeto permanecem como objetos separados que você pode manipular separadamente.

Entrar no modo Desenho de objeto

Para desenhar formas usando o modo Desenho de objeto, é necessário ativá-lo.

  1. Selecione a ferramenta de desenho que suporte o modo Desenho de objeto (as ferramentas Lápis, Linha, Caneta, Pincel, Oval, Retângulo e Polígono).

  2. Selecione o botão Desenho de objeto do da categoria Opções do painel Ferramentas ou pressione a tecla J para alternar entre os modos Desenho de objeto e Mesclar desenho. O botão Desenho de objeto alterna entre os modos Desenho de objeto e Mesclar desenho. É possível definir as preferências para sensibilidade de contato quando você selecionar as formas criadas usando o modo Desenho de objeto.

  3. Desenhe no Palco.

Converta uma forma criada pelo modo Mesclar desenho para uma forma de modo Desenho de objeto

  1. Selecione a forma no Palco.

  2. Para converter a forma para outra de modo Desenho de objeto, selecione Modificar > Combinar objetos > União. Após a conversão, a forma é tratada como objeto de desenho com base em vetor que não altera sua aparência com a interação com outras formas.

Observação:

Para unir duas ou mais formas em uma forma única com base em objeto, use o comando União.

Primitivas de objetos

Primitivas de objetos são formas gráficas que permitem que você ajuste suas características no Inspetor de propriedades. Isso permite que você controle precisamente o tamanho, o raio do canto e outras propriedades da forma depois de criá-la sem ter que desenhá-la desde o começo.

Dois tipos de primitivas estão disponíveis, retângulos e ovais.

  1. Selecione a Ferramenta Primitiva de Retângulo ou Primitiva Oval no painel Ferramentas.

  2. Desenhe no Palco.

Sobreposição de formas

Quando você desenha uma linha em outra linha ou forma pintada no modo Mesclar desenho, as linhas sobrepostas ficam divididas em segmentos nos pontos de interseção. Para selecionar, mover e remodelar cada segmento individualmente, use a ferramenta Seleção.

Um preenchimento; o preenchimento com uma linha desenhada através dele; e três segmentos de linha criados por segmentação..

Quando você pinta sobre formas e linhas, a porção debaixo é substituída por aquilo que estiver por cima. As pinturas da mesma cor se mesclam. As pinturas de cores diferentes permanecem distintas. Para criar máscaras, recortes de arestas e outras imagens negativas use esses recursos. Por exemplo, o recorte de arestas seguinte é feito com a movimentação da imagem de pipa não agrupada para a forma verde, o cancelamento da seleção da pipa e, depois, a movimentação das partes preenchidas da pipa para fora da forma verde.

Recorte de arestas com a imagem da pipa.

Para evitar alterar inadvertidamente as formas, superpondo as linhas, agrupe as formas ou use camadas para separá-las.

Logotipo da Adobe

Fazer logon em sua conta