Guia do Usuário Cancelar

Exportar animações para aplicativos móveis e mecanismos de jogo

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

 

Crie uma planilha de entidades gráficas ou um atlas de textura e exporte as animações para aplicativos móveis e mecanismos de jogos. Importe um atlas de textura do Unity ou de qualquer mecanismo de jogo de sua preferência usando o plug-in.

Visão geral

O Animate permite criar animações de planilha de entidades gráficas ou de atlas de textura e exportá-los para aplicativos móveis e mecanismos de jogos. 

Planilha de entidades gráficas

Uma planilha de entidades gráficas é um arquivo de imagem bitmap que contém vários gráficos menores organizados em uma grade lado a lado. Ao compilar vários gráficos em apenas um arquivo, você permite que o Animate Professional e outros aplicativos usem os gráficos carregando apenas um arquivo. Essa eficiência no carregamento pode ser útil em situações como o desenvolvimento de jogos, em que o desempenho é especialmente importante.

Planilha de entidades gráficas
Uma planilha de entidades gráficas com entidades gráficas em animação quadro a quadro.

Crie uma planilha de entidades gráficas a partir de uma seleção de qualquer combinação de clipes de filme, símbolos de botões, símbolos de gráficos ou bitmaps. Você pode selecionar itens no painel Biblioteca ou no Palco, mas não nos dois. Cada bitmap e cada quadro dos símbolos selecionados aparecem como um gráfico separado na planilha de entidades gráficas. Se exportar do Palco, qualquer transformação (dimensionamento, nivelamento, entre outros) que tiver aplicado para a ocorrência de símbolo estará preservada na saída da imagem.

Atlas de textura

O Atlas de textura é uma coleção de texturas como uma grande imagem única ou várias imagens de dimensão desejada. É possível otimizar seu jogo criando um atlas de textura e usando-o em seu aplicativo de jogo. 

No Animate, é possível criar um atlas de textura por meio de símbolos como clipes de filme, gráficos ou botões. Você pode selecionar itens no painel Biblioteca ou no Palco, mas não nos dois. Cada vetor e cada quadro-chave dos símbolos selecionados aparecem como um bitmap separado no atlas de textura. Se você exportar do palco, quaisquer transformações (dimensão, inclinação, e assim por diante) aplicadas à instância do símbolo serão preservadas na saída da imagem.

Diferença entre uma planilha de entidades gráficas e um atlas de textura

Você pode usar a planilha de entidades gráficas ou o atlas de textura em seus aplicativos móveis conforme desejar. Algumas das principais diferenças entre a planilha de entidades gráficas e o atlas de textura são apresentadas na tabela a seguir. 

Recurso

Planilha de entidades gráficas

Atlas de textura

Desempenho em aplicativos móveis

Baixo

Alto

Eficiência no carregamento do aplicativo

Alto, pois não há cálculo

Baixo, pois há um cálculo do arquivo JSON 

Tamanho

Ocupa mais tamanho

Ocupa menos tamanho

Qualidade da animação

Média

Alto

Número de arquivos gerados

Dois arquivos: um bitmap e um json

Variável: com base na dimensão da imagem.

Número de bitmaps gerados

Com base no número de quadros usados na planilha de entidades gráficas, o número de arquivos bitmap também pode aumentar, resultando no aumento do tamanho da planilha de entidades gráficas

Somente bitmaps exclusivos são gerados nas entidades gráficas, reduzindo assim o tamanho total.

Criar uma planilha de entidades gráficas

Para criar uma planilha de entidades gráficas, siga as etapas a seguir: 

  1. Selecione um ou mais símbolos na Biblioteca ou ocorrências de símbolos no Palco. A seleção também pode conter bitmaps.

  2. Clique com o botão direito do mouse na seleção e escolha Gerar planilha de entidades gráficas.

  3. Na caixa de diálogo Gerar planilha de entidades gráficas, selecione as opções exigidas e clique em Exportar.

    Opção de exportação

    Descrição

    Dimensão da imagem

    O tamanho total em pixels da planilha de entidades gráficas. A configuração padrão é Dimensionamento automático, que dimensiona a planilha para que caibam todas as entidades gráficas que você incluir.

    Formato da imagem

    O formato de arquivo da planilha de entidades gráficas exportada. PNG de 8 bits e PNG de 32 bits suportam o uso de plano de fundo transparente (canal alfa). PNG 24 bits e JPG não suportam planos de fundo transparentes. Normalmente, a diferença visual entre PNG 8 bits e PNG 32 bits é pequena. Arquivos PNG de 32 bits são quatro vezes maiores que arquivos PNG de 8 bits.

    Preenchimento de borda

    Preenchimento em volta da borda da planilha de entidades gráficas, em pixels.

    Preenchimento de forma

    Preenchimento entre cada imagem dentro da planilha de entidades gráficas, em pixels.

    Algoritmo

    A técnica para colocar as imagens na planilha de entidades gráficas. Há duas opções:

    • Básico (padrão)
    • MaxRects

    Formato de dados

    O formato interno usado para os dados da imagem. Escolha o formato que melhor se adapte ao fluxo de trabalho pretendido para a planilha de entidades gráficas depois de exportada.

    Girar

    Gira as entidades gráficas em 90°. Essa opção está disponível apenas para alguns formatos de dados.

    Aparar

    Essa opção economiza espaço na planilha de entidades gráficas aparando pixels não usados de cada quadro de símbolo acrescentado à planilha.

    Empilhar quadros

    Selecionar esta opção evita que quadros duplicados nos símbolos selecionados sejam duplicados na planilha de entidades gráficas resultante.

Exportar animações para aplicativos móveis ou mecanismos de jogos

O Animate ajuda a exportar animações para plataformas de jogos e aplicativos móveis. Deseja exibir a animação no celulare ou mecanismo de jogo? Assista ao tutorial no fim deste exemplo e siga estas etapas.

  1. Na Biblioteca, clique com o botão direito do mouse no clip de vídeo.

  2. Selecione Criar planilha de entidades gráficas.

  3. Na caixa de diálogo Planilha de entidades gráficas, selecione as opções necessárias.

  4. Clique em Exportar.

Como exportar animações para aplicativos móveis ou mecanismos de jogos

Assista ao vídeo para saber mais sobre outras opções para exportar animações.

Criar um atlas de textura

Os desenvolvedores podem usar o Animate para criar animações e exportá-las como atlas de textura para o mecanismo de jogos Unity ou para qualquer outra plataforma de jogos que prefiram. 

O processo de gerar o atlas de textura no Animate e importá-lo para o Unity está descrito no diagrama a seguir: 

Uma ilustração que descreve o fluxo de trabalho para gerar o atlas de texturas e importá-lo para o unity.

Para gerar o atlas de textura da sua animação, execute as etapas a seguir: 

  1. No Animate, é possível gerar um atlas de textura para um símbolo selecionado na Biblioteca ou uma instância do símbolo no palco. 

  2. Clique com o botão direito do mouse no símbolo e selecione Gerar atlas de textura no menu. A janela Gerar atlas de textura é exibida. 

    Gerar atlas de textura

  3. Escolha as opções de exportação apropriadas para o atlas de textura. 

    Opção de exportação Descrição
    Dimensão da imagem O tamanho total em pixels do atlas de textura. A configuração padrão é Dimensionamento automático, que dimensiona a planilha para que caibam todas as imagens que você incluir.
    Otimizar dimensões
    • Quando a opção Otimizar dimensões estiver marcada, ela removerá os pixels vazios dos bitmaps e as dimensões não estarão em potência de dois (opção padrão). Isso é aplicável para todos os bitmaps gerados.
    • Quando a opção Otimizar dimensões estiver desmarcada, os bitmaps serão gerados com base nas dimensões selecionadas.
    Formato da imagem O formato de arquivo da planilha de entidades gráficas exportada. PNG de 8 bits e PNG de 32 bits suportam o uso de plano de fundo transparente (canal alfa). Normalmente, a diferença visual entre PNG 8 bits e PNG 32 bits é pequena. Arquivos PNG de 32 bits são quatro vezes maiores que arquivos PNG de 8 bits.
    Resolução Escolha qualquer valor entre 0,3-3,0
    Preenchimento de borda Preenchimento em volta da bordas do atlas de textura, em pixels
    Preenchimento de forma Preenchimento entre cada imagem dentro do atlas de textura, em pixels.
    Algoritmo

    A técnica usada para colocar as imagens no atlas de textura. Há duas opções:

    • Básico 
    • MaxRects (padrão)
    Formato de dados O formato interno usado para os dados da imagem. O padrão é o formato JSON.
    Girar Gira as imagens em 90 graus. Essa opção está disponível apenas para alguns formatos de dados.
    Nivelar objetos inclinados para bitmap Selecione essa opção se você for usar transformações de distorção em seus objetos. O Animate converte esses objetos em imagens bitmap já que alguns dos mecanismos de jogo não interpretam as transformações de distorção apropriadamente. 
    Otimizar arquivo Animation.json
    • Quando a opção Otimizar arquivo Animation.json estiver selecionada, ela removerá o recuo, a matriz decomposta e reduzirá os nomes utilizados (opção padrão).
    • Quando a opção Otimizar arquivo animation.json estiver desmarcada, ela exportará com recuo e nomes significativos.

  4. Você pode optar por exportar o símbolo para vários bitmaps com base na dimensão.

    Gerar atlas de textura para vários bitmaps

    Para os ativos que excedem o tamanho de dimensão de imagem selecionado, um aviso será exibido.

  5. Para visualizar a saída do atlas de textura, clique na guia Visualizar.

    Visualize o atlas de texturas após o ter criado

  6. Clique em Procurar e escolha o caminho de destino em seu computador para o arquivo de saída ou insira o caminho na área de texto e clique em Exportar. 

A pasta de saída gerada para o atlas de textura contém os seguintes arquivos:

Animation.json

Esse arquivo contém informações sobre a animação. Os quadros idênticos são otimizados e consolidados no arquivo Animation.json por padrão.

spritemap.json

Esse arquivo contém informações sobre o arquivo spritesheet.png.

spritemap.png

Para o símbolo exportado, esse arquivo contém a representação bitmap de todas as texturas originais mínimas necessárias para reconstruir a animação.

É possível usar o Atlas de textura gerado em todos os mecanismos de jogos, tal como o Unity com o plug-in do importador adequado.

Importar Atlas de textura para o Unity

Você pode importar os arquivos de atlas de textura gerados no Animate para os seus mecanismos de jogos favoritos. Para importar arquivos do atlas de textura, é possível criar plug-ins de importação que correspondam aos seus mecanismos de jogos. É fornecida uma amostra do plug-in de importação para a plataforma Unity. 

Para importar o atlas de textura para o Unity, siga as etapas a seguir: 

  1. Na plataforma Unity, crie um projeto em qualquer local específico. Nesse local, é criada uma pasta com a subpasta Ativos. 

  2. Crie duas subpastas em Ativos como Recursos e Editor. 

  3. Clique aqui para baixar o plug-in de importação de amostra do Unity. Escolha Plug-in do Unity na guia Downloads e selecione o número da versão correspondente para baixar. 

    O unity-plugin.zip consiste-se em arquivos Plugin.cs, WrapperPlugin.cs, AnimateEditor.cs e Effect.shader

    Ao baixar a amostra, você indica que aceita os Termos de uso e a Política de privacidade online. 

  4. Mova os arquivos do atlas de texturas como Animation.json, spritemap.json, spritemap.png e os arquivos de plug-in unity como plugin.cs e Effect.shader para Ativos > Recursos.

  5. Mova os arquivos AnimateEditor.cs e WrapperPlugin.cs para a pasta Ativos. 

  6. No Unity, clique no arquivo AnimateEditor.cs e arraste-o para a Câmera principal.

  7. Reproduzir. Reproduzir seu projeto divide o mapa da entidade gráfica para entidades gráficas diferentes.

  8. Mova AnimateEditor.cs para o Editor.

  9. No Unity, clique no arquivo wrapperplugin.cs e e arraste-o para a Câmera principal. Além disso, desmarque ou remova AnimateEditor.cs de Câmera principal.

  10. Reproduza ou publique a saída de acordo com suas necessidades. 

Também é possível personalizar o plug-in, modificando o arquivo WrapperPlugin.cs para atender às suas necessidades. 

O plug-in Unity oferece suporte a efeitos de cor para Animar arquivos gerados do atlas de texturas. Além disso, o plug-in suporta mascaramento por meio de camadas. O recurso de mascaramento é aplicável somente à versão de 2017 ou posterior do Unity. 

Publicação de textura

Como um animador, você pode continuar a criar conteúdo no formato de vetor e na exportar como vetor ou formato rasterizado para plataformas HTML 5. Uma opção para exportar animações como um atlas de textura foi adicionada às configurações de publicação para aumentar o desempenho das animações.

1. Crie um documento do canvas. Selecione Arquivo> Novo para exibir a janela Novo documento. 

2. Selecione a guia Avançado e clique em HTML5 Canvas. Um novo documento FLA é aberto.

3. Clique em Arquivo > Configurações de publicação. Se a opção Exportar documento como textura estiver habilitada na guia Básico, a guia Configurações da imagem exibe as opções de Publicação de textura. Por padrão, todos os símbolos são incluídos na Publicação de textura. Para escolher seletivamente símbolos para texturas, clique no ícone de configurações ao lado. 

Embora essa opção possa aumentar o tamanho dos ativos, ela melhora o desempenho. Além disso, você pode aumentar a resolução das imagens em 2x e 3x a resolução original das imagens para telas HiDPI. Para alterar as configuração de resolução, clique no ícone de chave inglesa ao lado da opção Exportar documento como textura conforme mostrado na captura de tela abaixo. Arraste os números adjacentes até Resolução obter os múltiplos de 2x ou 3x.

Por padrão, a publicação de textura é definida na resolução 2X. E mais, o intervalo para a resolução pode ser alterado para entre 0,3 e 3X.

 A publicação de textura é aplicável somente ao tipo de documento HTML5 Canvas.

Exportar documento como textura habilitado
Exportar documento como textura habilitado

Exportar documento como textura habilitado

A escolha entre um arquivo de vetor ou raster é semelhante à escolha entre tamanhos de arquivo e desempenho. As plataformas HTML5 são otimizadas para o conteúdo de raster. Portanto, para algumas formas complexas, é melhor converter as imagem de vetor em raster previamente. Para alguns conteúdos básicos, você ainda pode usar o conteúdo vetorial. O Animate fornece essa opção por meio de uma caixa de diálogo de seleção parcial de símbolo. A seleção parcial de símbolo permite que você escolha os símbolos que devem ser convertidos em raster mantendo os restantes como vetores.

Para abrir a seleção parcial de símbolo, clique em Alterar na caixa de diálogo Configurações de publicação e selecione um símbolo na lista. Por padrão, todos os símbolos são selecionados.

Alterar seleção de símbolo parcial
Alterar seleção de símbolo parcial

Selecione os símbolos de sua escolha na lista. 

Seleção parcial de símbolo
Seleção parcial de símbolo

Melhorar o desempenho gráfico por meio de Texturas de bitmap

No Animate, as texturas de bitmap melhoram o desempenho das animações em diferentes plataformas. Deseja reduzir a complexidade dos vetores com texturas de bitmap? Assista ao tutorial no fim deste exemplo e siga estas etapas.

  1. No painel Inspetor de propriedades, clique em Configurações de publicação.

  2. Na guia Básico, selecione o ícone de chave inglesa ao lado de Exportar documento como textura.

  3. Na guia Configurações da imagem , clique em Alterar e selecione os símbolos de sua preferência.

  4. Clique em OK.

Como publicar seus ativos como texturas de bitmap para melhorar o desempenho

Assista ao vídeo para saber como as animações com texturas de bitmap são executadas.

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