Editar interpolações de movimento usando o Motion Editor

  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

O Editor de movimento do Animate CC ajuda você a criar Interpolações de movimento complexas de maneira muito simples. O Editor de movimento apresenta uma exibição compacta de todas as Propriedades aplicadas à determinada interpolação no formato de gráficos bidimensionais. Você pode optar pode modificar cada um desses gráficos, além das propriedades de interpolação correspondentes. Com controle preciso e alta granularidade, é possível enriquecer muito suas animações para simular um comportamento real no Editor de movimento.

Sobre o Editor de movimento

O Editor de movimento foi projetado para facilitar a criação de interpolações complexas. O Editor de movimento permite controlar e manipular as propriedades de uma interpolação. Após criar uma Interpolação de movimento, é possível aproveitar o Editor de movimento para refinar com exatidão sua interpolação. O Editor de movimento possibilita a edição direcionada da interpolação, permitindo selecionar e modificar uma propriedade por vez.

Por que usar o Editor de movimento?

O Editor de movimento foi projetado para facilitar a criação de interpolações complexas. Assim, o Editor de movimento oferece controle granular de interpolações e suas propriedades. Os itens a seguir podem ser obtidos somente pelo uso do Editor de movimento:

  • Fácil acesso e modificação de todas as Propriedades aplicadas a uma interpolação em um único painel.
  • Adicionar diferentes predefinições atenuadas ou personalizar a atenuação: o Editor de movimento permite adicionar predefinições diferentes, adicionar várias predefinições ou criar uma Atenuação personalizada. Uma maneira fácil de simular o comportamento real de objetos é adicionar uma atenuação a uma propriedade interpolada.
  • Curva resultante: é possível aplicar atenuações a propriedades individuais e ver os efeitos dessas atenuações em gráficos de propriedade individuais por meio da Curva resultante. Uma curva resultante é uma representação da interpolação real.
  • Pontos de ancoragem e pontos de controle: é possível isolar e editar as seções principais de uma interpolação através dos Pontos de ancoragem e pontos de controle.
  • Animações refinadas: o Editor de movimento é a única maneira de fazer determinados tipos de animações, como criar uma interpolação de caminho com curva em uma propriedade individual ajustando sua Curva de propriedade.
(A) Propriedades aplicadas à interpolação (B) Botão Adicionar ponto de ancoragem (C) Ativar/desativar Ajustar à visualização (D) Botão Remover propriedade (E) Adicionar atenuação (F) Ativar/desativar Zoom vertical

Como abrir o painel do Editor de movimento

Neste artigo, presume-se que você já criou uma Interpolação de movimento e está usando o Editor de movimento para refinar a interpolação. Para obter informações sobre como criar uma Interpolação de movimento, consulte Animação de interpolação de movimento.

Para abrir o Editor de movimento, faça o que se segue:

  1. Na Linha do tempo, selecione o intervalo de interpolação de movimento que deseja refinar e clique duas vezes no intervalo de interpolação. Também é possível clicar no intervalo de interpolação e selecionar Refinar interpolação para ativar o Editor de movimento.

Curvas de propriedade

O Editor de movimento representa as Propriedades de uma interpolação por meio de gráficos bidimensionais chamados Curvas de propriedade. Esses gráficos são formados em uma grade no Editor de movimento. Cada propriedade possui sua própria Curva de propriedade, organizada em relação ao tempo no eixo horizontal (da esquerda para a direita), e em relação à alteração para um valor de propriedade no eixo vertical.

É possível manipular a Interpolações de movimento através da edição das Curvas de propriedade no Editor de movimento. Para isso, o Editor de movimento proporciona uma edição estável das Curvas de propriedade, permitindo que você tenha mais controle sobre a interpolação. Você pode adicionar Quadros-chave da propriedade ou Pontos de ancoragem para manipular uma Curva de propriedade. Isso permite manipular as partes-chave da Curva de propriedade, onde você deseja que as interpolações exibam transições para determinada Propriedade.

Observe que o Editor de movimento só permite editar as propriedades que não podem ser alteradas durante um intervalo de interpolação. Por exemplo, a Propriedade de qualidade do filtro Bisel de gradiente pode receber apenas um valor durante o intervalo de interpolação e, assim, não é possível editá-lo com o Editor de movimento.

(A) Curvas de propriedade sobrepostas. (B) Curva de propriedade no foco para a Propriedade selecionada atualmente.

Pontos de ancoragem

Os pontos de ancoragem oferecem um controle maior sobre as Curvas de propriedade, o que permite a modificação explícita das partes essenciais de uma curva. Você pode controlar com precisão a forma de grande parte das curvas no Editor de movimento ao adicionar os quadros-chave da propriedade ou os pontos de ancoragem.

Os Pontos de ancoragem são exibidos como quadrados na grade. Você pode usar o Editor de movimento para controlar o comportamento da interpolação ao adicionar Pontos de ancoragem a uma Curva de propriedade ou modificar sua posição. Ao adicionar um Ponto de ancoragem, um canto é criado, no qual a Curva passa pelos ângulos. Contudo, é possível suavizar qualquer segmento de uma Curva de propriedade com os controles de Bézier para os Pontos de controle.

Pontos de controle

Os pontos de controle permitem suavizar ou modificar uma Curva de propriedade em qualquer um dos lados de um Ponto de ancoragem. Os Pontos de controle podem ser modificados usando os Controles de Bézier padrão.

Edição de curvas de propriedade

Para editar as Propriedades de uma interpolação, faça o seguinte:

  1. No Animate CC, com um intervalo de interpolação selecionado, Clique com o botão direito do mouse > selecione Refinar interpolação para exibir o Editor de movimento (ou clique duas vezes no intervalo de interpolação selecionado).
  2. Role para baixo e selecione a Propriedade que deseja editar. Para inverter a seleção, clique com o botão direito do mouse e selecione Inverter seleção.
  3. Com a Curva de propriedade para a Propriedade selecionada em exibição, é possível escolher qualquer uma das ações abaixo:
    1. Adicione o Ponto de ancoragem ao clicar no botão  e em um quadro desejado na Curva de propriedade para adicionar um Ponto de ancoragem. Ou clique duas vezes na curva para adicionar um ponto de ancoragem.
    2. Selecionar e mover (para qualquer direção) um Ponto de ancoragem existente para o quadro desejado localizado dentro da grade. O limite vertical do movimento está restrito ao intervalo de valores da Propriedade.
    3. Remova um Ponto de ancoragem ao selecionar e pressionar Ctrl + Clique (Cmd + Clique no MAC).

Edição de Curvas de propriedade usando Pontos de controle

Para editar as Curvas de propriedade usando os Pontos de controle, faça o seguinte:

  1. No Animate CC, com um intervalo de interpolação selecionado, Clique com o botão direito do mouse > selecione Refinar interpolação para exibir o Editor de movimento (ou clique duas vezes no intervalo de interpolação selecionado).
  2. Role para baixo e selecione a Propriedade que deseja editar. Para inverter a seleção, clique com o botão direito do mouse e selecione Inverter seleção.
  3. Com a Curva de propriedade para a Propriedade selecionada em exibição, é possível escolher qualquer uma das ações abaixo:
    1. Adicionar um Ponto de ancoragem clicando no botão  e em seguida clicando no quadro desejado localizado dentro da grade. Ou clique duas vezes na curva para adicionar um ponto de ancoragem.

      OU

    2. Selecionar um Ponto de ancoragem existente na grade.
  4. Com o Ponto de ancoragem selecionado, aplique o comando Alt+arrastar verticalmente para ativar os Pontos de controle. É possível modificar a forma da curva para suavizar os segmentos do canto usando os controles de bézier. 

Como copiar Curvas de propriedade

Também é possível copiar Curvas de propriedade para outras Propriedades localizadas dentro do Editor de movimento.

Para copiar uma Curva de propriedade, faça o seguinte:

  1. No Animate CC, com um intervalo de interpolação selecionado, Clique com o botão direito do mouse > selecione Refinar interpolação para exibir o Editor de movimento (ou clique duas vezes no intervalo de interpolação selecionado).
  2. Selecione a Propriedade cuja curva deseja copiar e clique com o botão direito do mouse > Copiar OU pressione Ctrl + C (Cmd + C no MAC).
  3. Para colar a curva com valores absolutos, selecione a Propriedade na qual você deseja colar a curva de propriedade copiada e clique com o botão direito do mouse em > Colar ou pressione Ctrl + V (Cmd + V no MAC).
  4. Para colar a curva no intervalo da curva de destino, selecione a Propriedade na qual você deseja colar a curva de propriedade copiada e clique com o botão direito do mouse em > Colar para ajustar ao intervalo atual.

Como reverter uma Curva de propriedade

Para reverter uma Curva de propriedade, faça o seguinte:

  1. No Editor de movimento, selecione uma Propriedade.
  2. Clique com o botão direito do mouse > Reverter para reverter a Curva de propriedade.

Aplicação da predefinição e de atenuações personalizadas

O efeito Easing permite controlar a velocidade da interpolação, produzindo um movimento mais realista e com efeitos mais agradáveis. Aplicar atenuações em interpolações de movimento permite manipular o início de uma animação, fazendo com que o objeto apresente um movimento mais natural. Por exemplo, um dos usos mais comuns é adicionar a aceleração e desaceleração realística no final do caminho de movimento de um objeto. Em outras palavras, o Animate CC realiza alterações na taxa de mudança do valor da Propriedade, dependendo da atenuação aplicada.

A atenuação pode ser simples ou complexa. O Animate inclui um grande intervalo de atenuações predefinidas que você pode aplicar para obter efeitos simples ou complexos. Você também pode atribuir Força a uma atenuação, para aprimorar o efeito visual de uma interpolação. No Editor de movimento, você também pode criar suas próprias curvas de atenuação.

Como as curvas de atenuação no Editor de movimento podem ser complexas, use-as para criar um movimento complexo no Palco, sem criar caminhos complexos de movimento no mesmo. Também é possível usar as curvas de atenuação para criar interpolações complexas de qualquer outra propriedade, além das propriedades espaciais como Local X e Y.

Curva organizada para a Atenuação da predefinição de salto

Facilidade na personalização

A personalização de atenuações permite que você crie sua própria atenuação usando a curva de Atenuação personalizada no Editor de movimento. É possível aplicar a atenuação personalizada a qualquer propriedade de uma interpolação selecionada.

O gráfico de Atenuação personalizada representa o nível de movimento com o passar do tempo. Os quadros são representados pelo eixo horizontal, e a percentagem de alteração nas interpolações é representada pelo eixo vertical. O primeiro valor na animação é em 0% e o último quadro-chave pode ser definido de 0 a 100%. A taxa de alterações da instância interpolada é exibida pelo declive na curva do gráfico. Se você criar uma linha horizontal (sem declive) no gráfico, a velocidade será zero; se você criar uma linha vertical no gráfico, haverá uma taxa instantânea de alteração.

Como aplicar uma curva de atenuação a uma Curva de propriedade

Para adicionar atenuação a uma Propriedade interpolada, faça o seguinte:

  1. No Editor de movimento, selecione a Propriedade na qual você deseja aplicar a Atenuação e clique no botão Adicionar atenuação para exibir o Painel de atenuação.
  2. No Painel de atenuação, você pode:
    1. Aplicar uma Atenuação predefinida, selecionando uma predefinição no painel esquerdo. Especificar a Força da atenuação, inserindo um valor no campo Easing.
    2. Criar uma atenuação personalizada, selecionando Personalizar atenuação no painel esquerdo e modificando Curva de atenuação. Para obter mais informações, consulte Criação e aplicação de curvas de atenuação personalizadas.
  3. Clique em qualquer ponto fora do Painel de atenuação para fechá-lo. Observe que o botão Adicionar atenuação exibe o nome da Atenuação aplicada à Propriedade.

Como criar e aplicar Curvas de atenuação personalizadas

Para criar e aplicar uma Atenuação personalizada a uma Propriedade interpolada, faça o seguinte:

  1. No Editor de movimento, selecione a Propriedade na qual deseja aplicar a Atenuação personalizada, e em seguida clique no botão Adicionar atenuação para exibir o Painel de atenuação.
  2. Nele, é possível modificar a curva padrão da Atenuação personalizada da seguinte maneira:
    1. Pressione Alt + Click para adicionar Pontos de ancoragem na curva. Além disso, você pode mover esses pontos para qualquer local da grade.
    2. Ativar Pontos de controle (Alt+click em um Ponto de ancoragem) em um Ponto de ancoragem para suavizar segmentos de curva em qualquer um dos lados de um Ponto de ancoragem.
  3. Clique fora do Painel de atenuação para fechá-lo. Observe que o botão Adicionar atenuação exibe Personalizado, indicando que você aplicou a Atenuação personalizada na Propriedade.

Como copiar Curvas de atenuação

Para copiar uma Curva de atenuação, faça o seguinte:

  1. No Painel de atenuação, selecione a Curva de atenuação que deseja copiar e pressione Ctrl + C (Cmd + C no MAC).
  2. Selecione a Propriedade na qual deseja colar a curva de atenuação copiada, e pressione Ctrl + V (Cmd + V no MAC).

Como aplicar a Atenuação à múltiplas propriedades

Agora você pode aplicar uma Atenuação predefinida ou personalizada à grupos de propriedade. O Editor de movimento organiza as propriedades de maneira hierárquica em grupos de propriedade e sub-propriedades. Você pode optar por aplicar a Atenuação a qualquer nível, ou seja: em propriedades individuais ou em grupos de propriedade, desde estejam inclusos nesta hierarquia.

Observe que, após aplicar a Atenuação a um Grupo de propriedade, você pode editar as sub-propriedades individualmente. Isso também quer dizer que você pode aplicar uma Atenuação diferente (daquela usada no grupo) a uma sub-propriedade.

Para aplicar a Atenuação a múltiplas propriedades, faça o que se segue:

  1. No Editor de movimento, selecione o Grupo de propriedade e clique no botão Adicionar atenuação para exibir o Painel de atenuação.
  2. No Painel de atenuação, selecione uma Atenuação predefinida ou crie uma Atenuação personalizada. Clique em qualquer lugar ao redo do Painel de atenuação para aplicar a Atenuação selecionada ao Grupo de propriedade.

Curva resultante

Quando uma curva de atenuação é aplicada a uma curva de propriedade, uma sobreposição visual chamada Curva resultante é exibida na grade. A curva resultante é uma representação exata do efeito da Atenuação aplicada a uma Curva de propriedade. Indica a animação final do objeto interpolado. A curva resultante  permite compreender o efeito que você visualiza no Palco ao testar uma animação.

(A) Curva resultante da Atenuação predefinida de salto interno aplicada ao Local em relação à Propriedade.

Como controlar a exibição do Editor de movimento

No Editor de movimento, você pode controlar que curvas de propriedade serão editadas, e o tamanho da exibição de cada propriedade de curva. As curvas de propriedade exibidas em um tamanho grande são mais fáceis de editar.

  • O novo Editor de movimento exibe apenas as propriedades que foram aplicadas a uma interpolação.
  • É possível usar a alternância de ajuste da visualização () para ajustar o Editor de movimento à largura da linha do tempo.
  • É possível usar o ajuste do tamanho do Editor de movimento e optar por exibir menos () ou mais quadros () no uso dos controles de Zoom da linha do tempo. Também é possível usar o controle deslizante para definir uma visualização apropriada do Editor de movimento.
  • O Editor de movimento também possui uma alternância de zoom vertical. É possível usar o Zoom vertical para exibir uma faixa adequada de valores de propriedade no Editor de movimento. A aplicação de zoom também permite fazer edições direcionadas e mais refinadas em uma Curva de propriedade.
  • As propriedades aparecem expandidas, por padrão, no painel esquerdo do Editor de movimento. Contudo, clicar no nome de uma propriedade recolherá a lista de busca detalhada.

Atalhos de teclado

Clique duas vezes - em uma curva de propriedade para adicionar um Ponto de ancoragem.

Alt+Arrastar - um ponto de ancoragem para ativar os Pontos de controle.

Alt+Arrastar - para manipular um ponto de controle selecionado (edição unilateral).

Alt-clique - em um ponto de ancoragem para desativar pontos de controle (ponto do canto).

Shift+arrastar - para mover um ponto de ancoragem em direção linear.

Comando/Control + Clique - para excluir um ponto de ancoragem.

Teclas de seta para cima/para baixo - para mover verticalmente um ponto de ancoragem selecionado.

Comando/Control + C/V - para copiar/colar uma curva selecionada.

Comando/Control + R - para reverter uma curva selecionada.

Comando/Control + Rolar - para aumentar/diminuir o zoom.

Logotipo da Adobe

Fazer logon em sua conta