Criação e publicação de documentos HTML5 Canvas no Animate

O Canvas é um novo elemento no HTML5, que fornece APIs que permitem gerar e renderizar dinamicamente gráficos, imagens e animação. A presença da API Canvas para HTML5 fortalece a plataforma HTML5 ao fornecer recursos de desenho bidimensional. Esses recursos são suportados na maioria dos sistemas operacionais e navegadores modernos.

Basicamente, o Canvas é um mecanismo de renderização de bitmap e os desenhos são finais e não podem ser redimensionados. Além disso, objetos desenhados no Canvas não são parte do DOM da página da Web.

Em uma página da Web, é possível adicionar elementos Canvas usando a tag <Canvas>. Esses elementos podem ser aprimorados usando JavaScript para criar interatividade. Para obter mais informações, consulte este link.

O novo tipo de documento HTML5 Canvas

O Animate permite que você crie um documento HTML5 Canvas com artes finais, gráficos, animações etc. Um novo tipo de documento (HTML5 Canvas) foi adicionado ao Animate e oferece suporte nativo para criar conteúdos HTML5 ricos e criativos. Isso significa que você pode usar a linha do tempo, a área de trabalho e as ferramentas tradicionais do Animate para criar conteúdo, mas produzir uma saída HTML5. Com alguns cliques simples, você está pronto para criar um documento HTML5 Canvas e gerar uma saída totalmente funcional. Para esse fim, as opções de documento e publicação são predefinidas no Animate para gerar uma saída HTML5.

O Animate está integrado ao CreateJS, o que permite conteúdos interativos ricos em tecnologias de rede aberta pelo HTML5. O Animate gera HTML e JavaScript para conteúdos (inclui bitmaps, vetores, formas, sons, interpolações etc.) criados no palco. A saída pode ser executada em qualquer dispositivo ou navegador com suporte para HTML5 Canvas.

Animate e a API Canvas

O Animate publica no HTML5 aproveitando a API Canvas. O Animate converte com simplicidade objetos criados no palco para seus correspondentes no Canvas. Ao fornecer um mapeamento um a um de recursos Animate com as APIs no Canvas, o Animate permite que você publique conteúdos complexos em HTML5.

Criar um documento HTML5 Canvas

Para criar um documento HTML5 Canvas, faça o seguinte:

1. Selecione Arquivo> Novo para exibir a caixa de diálogo Novo documento. Selecione a guia Avançado na parte superior da tela e clique na opção HTML5 Canvas. Isso abre um novo FLA com as Configurações de publicação modificadas para produzir a saída HTML5.

Agora, você pode começar a criar conteúdos HTML5 usando as ferramentas no Animate. Quando começar a trabalhar com o documento HTML5 Canvas, você perceberá que alguns recursos e ferramentas não são suportados e estão desativados. Isso acontece porque o Animate permite apenas as ferramentas que também são compatíveis com o elemento Canvas em HTML5. Por exemplo, transformações 3D, linhas pontilhadas, gradientes radiais e efeitos de chanfro não são suportados.

Adição de interatividade ao documento HTML5 Canvas

O Animate publica conteúdo HTML5 usando as bibliotecas CreateJS. O CreateJS é um conjunto de ferramentas e bibliotecas modulares que possibilitam conteúdos interativos ricos em tecnologias de rede aberta pelo HTML5. O conjunto CreateJS inclui: EaselJS, TweenJS, SoundJS e PreloadJS. O CreateJS converte os conteúdos criados no palco em HTML5 usando essas bibliotecas individuais para produzir arquivos de saída HTML e JavaScript. Também é possível manipular este arquivo JavaScript para aprimorar seu conteúdo.

Contudo, o Animate permite que você adicione interatividade a objetos no palco criados para HTML5 Canvas de dentro. Isso significa que você pode adicionar código JavaScript a objetos individuais no palco de dentro do Animate e visualizar no tempo por autor. Por sua vez, o Animate fornece suporte nativo para JavaScript com recursos úteis no editor de código para ajudar a melhorar a eficiência do fluxo de trabalho dos programadores.

Você pode escolher quadros individuais e quadros-chave na Linha do tempo para adicionar interatividade a seu conteúdo. Para um documento HTML5 Canvas, acrescente interatividade usando o JavaScript. Para obter mais informações sobre como gravar o código JavaScript, consulte este link.

O código JavaScript pode ser gravado diretamente no painel de Ações e oferece suporte aos seguintes recursos ao gravar o código JavaScript:

Permite que você insira e edite rapidamente o código JavaScript e sem erros. Conforme você digita os caracteres no painel de Ações, você pode ver uma lista de candidatos que possivelmente completam a sua entrada.

Além disso, o Animate também permite alguns recursos inerentes ao painel de Ações ao trabalhar com HTML5 Canvas. Esses recursos ajudam a aprimorar a eficiência de fluxo de trabalho ao adicionar interatividade aos objetos no palco. São os seguintes:

Exibe códigos em fontes ou cores diferentes de acordo com a sintaxe. Este recurso permite que você grave código de uma maneira estruturada, ajudando a diferenciar visualmente códigos corretos e erros de sintaxe.

Exibe códigos em cores diferentes de acordo com a sintaxe. Isso permite que você diferencie visualmente várias partes de uma sintaxe.

Adiciona automaticamente colchetes e parênteses de fechamento para abrir ao gravar código JavaScript.

Você pode adicionar interatividade a formas ou objetos no palco usando JavaScript. Você pode adicionar JavaScript a quadros individuais e quadros-chave.

1. Selecione o quadro ao qual deseja adicionar JavaScript.
2. Selecione Janela > Ações para abrir o painel de Ações.

Uso de snippets de código JavaScript

Você pode adicionar interatividade usando snippets de código JavaScript disponíveis no Animate. Para acessar e usar Snippets de código, selecione Janelas > Snippets de código. Para obter mais informações sobre como adicionar snippets de código JavaScript, consulte este artigo.

Referências à documentação CreateJS

Códigos para induzir a interatividade

O JavaScript oferece diversas opções para tornar a animação interativa. Quer saber mais sobre como adicionar movimentos interativos ao personagem? Assista ao tutorial no fim deste exemplo e siga estas etapas.

Como tornar seu conteúdo interativo com o HTML5

Publicar animações em HTML5

Para publicar o conteúdo no palco em HTML5, faça o seguinte:

1. Selecione Arquivo > Configurações de publicação.
2. Na caixa de diálogo Configurações de publicação, especifique as seguintes configurações:

Configurações básicas

O diretório em que o FLA é publicado. Isso tem como padrão o mesmo diretório que o FLA, mas pode ser alterado ao clicar no botão de navegação "...".

Se estiver marcado, a linha do tempo se repete, se não, ela para quando chegar ao final.

Se estiver desmarcado, as camadas ocultas não são incluídas na saída.

Permite que os usuários escolham se o palco ficará centralizado horizontalmente, verticalmente ou ambos. Por padrão, o palco HTML/HTML é exibido no meio da janela do navegador.

Permite que os usuários definam se a animação será adequada em relação à largura, altura ou ambas e redimensiona a saída publicada com base em vários fatores de formulários. O resultado é uma saída ágil, precisa e nítida, compatível com HiDPI.

A saída também será ampliada para cobrir a toda a área da tela sem bordas e manterá a proporção original, embora seja possível que alguma parte da tela não caiba na exibição.

• As opções largura, altura ou ambas garantem que todo o conteúdo seja proporcionalmente reduzido ao tamanho da tela e que ele fique visível mesmo quando você o visualiza em uma tela pequena (como dispositivos móveis ou tablets). Se o tamanho da tela for maior que o tamanho do palco de criação, a tela será exibida no tamanho original.

Permite que os usuários definam se a animação se ajustará à visualização da saída no modo de tela cheia ou se ela deverá ser ampliada. Por padrão, esta opção fica desativada.

Ajustar para visualização: indica a saída no modo de tela cheia com o espaço de tela inteira e mantém a proporção.

Esticar para ajustar: estica de tal forma que não há espaço para bordas na saída.

Permite que os usuários definam se querem o Pré-carregador padrão ou se desejam selecionar um Pré-carregador de sua preferência na biblioteca de documentos.

O Pré-carregador é um indicador visual na forma de GIF animado, que é exibido quando os scripts e ativos necessários para renderizar uma animação estão sendo carregados. Depois que os ativos são carregados, o pré-carregador fica oculto e a animação é exibida.

Por padrão, a opção Pré-carregador não está selecionada.

• A opção Padrão para usar o pré-carregador padrão ou a
• A opção Navegar para usar o GIF pré-carregador de sua preferência. O GIF pré-carregador é copiado para a pasta de imagens configurada em Exportar ativos da imagem.
• Use a opção Visualizar para pré-visualizar o GIF selecionado.

Use as opções de alternância para optar por publicar na raiz ou no nível da subpasta. Este botão fica ATIVADO por padrão. A opção DESATIVAR desabilita o campo da pasta e exporta os ativos para a mesma pasta do arquivo de saída.

Exportar documento como textura Exporte animações de vetor como texturas para melhorar o desempenho das animações. Para obter mais informações, consulte Publicação de textura.

 Isso é aplicável somente quando a opção Combinar imagens na planilha de entidades gráficas está desmarcada.

 Opte por exportar todas as imagens importadas (incluindo as compactadas) do documento de tela mantendo o seu tamanho. Desmarque as opções Exportar documento como textura e Combinar imagens na planilha de entidades gráficas na guia Básico. As imagens são exportadas sem nenhuma alteração de tamanho.

A pasta na qual os ativos de imagens são colocados e de onde são referenciados.

Combinar em planilhas de entidades gráficas: selecione essa opção para combinar todos os ativos de imagem em uma planilha. Para mais  opções de planilhas de entidades gráficas, consulte Exportação de bitmaps como planilhas de entidades gráficas.

A pasta na qual os ativos de som do documento são colocados e de onde são referenciados.

A pasta na qual as bibliotecas do CreateJS são colocadas e de onde são referenciadas.

 A configuração padrão continua a publicar os arquivos segregados em subpastas lógicas.

Configurações avançadas

As URLs relativas às quais exportar imagens, sons e bibliotecas CreateJS JavaScript de suporte. Se a caixa de seleção à direita não estiver marcada, esses ativos não serão exportados do FLA, mas o caminho especificado ainda é usado para montar as URLS. Isso agiliza a publicação de um FLA com muitos ativos de mídia, ou impede de substituir bibliotecas JavaScript modificadas.

A opção Exportar todos os bitmaps como Planilhas de entidades gráficas permite que você compacte todos os bitmaps no documento de canvas em uma planilha de entidades gráficas, que reduz o número de solicitações de servidor e melhora o desempenho. Você pode especificar o tamanho máximo planilha de entidades gráficas fornecendo valores de altura e largura.

Usar padrão: publique a saída HTML5 com o modelo padrão.

Importar novo: importe um modelo novo para o documento HTML5.

Exportar: exporte o documento HTML5 como um modelo.

Se estiver marcado, isso usa cópias das bibliotecas hospedadas no CreateJS CDN em code.createjs.com. Isso permite que as bibliotecas sejam colocadas em cache e compartilhadas entre vários sites.

Se estiver desmarcado, as camadas ocultas não são incluídas na saída.

Se estiver marcado, as instruções de vetor são direcionadas em uma forma compacta. Desmarque para exportar instruções legíveis e detalhadas (úteis para fins de aprendizagem).

Se estiver marcado, os símbolos da linha do tempo incluem uma propriedade frameBounds que contém uma matriz de Retângulos que corresponde aos limites de cada quadro na linha do tempo. Limites de multiquadro aumentos significativamente o tempo de publicação.

Se a opção Incluir Javascript no HTML estiver selecionada, a caixa de seleção Substituir arquivo HTML na publicação ficará marcada e desativada. Se você desmarcar a caixa de seleção Substituir arquivo HTML na publicação, a caixa de seleção Incluir Javascript no HTML ficará desmarcada e desativada.

3. Clique em Publicar para publicar seu conteúdo no local especificado.

 Uma animação projetada por linhas de tempo aninhadas, contendo somente um quadro, não pode ter um loop executado.

Variáveis de modelo HTML

Quando você importa um novo modelo do HTML personalizado, as variáveis padrão são substituídas durante a publicação por snippets de código personalizados baseados nos componentes do seu arquivo FLA. 

A tabela abaixo lista as variáveis de modelo atuais que são reconhecidas e substituídas pelo Animate:

Os tokens a seguir, provenientes de versões anteriores, foram descontinuados na versão atual:

 Estes tokens foram modularizados e substituídos por outros tokens.

Compatibilidade com JSAPI, que permite a importação e a exportação dos modelos HTML para documentos Canvas

Os JSAPIs são compatíveis com a importação e a exportação dos modelos HTML para documentos Canvas:

• Exporta o modelo de publicação HTML5 Canvas para um determinado documento, no local especificado:

bool document::exportCanvasPublishTemplate(pathURI)

• Exemplo:

var pathURI ="file:///C|/Users/username/desktop/CanvasTemplate.html” 

var exportFlag =fl.getDocumentDOM().exportCanvasPublishTemplate(pathURI);

if(!exportFlag)

        fl.trace(“Template could not be exported”);

• Importa e define o modelo de publicação de HTML5 Canvas para um determinado documento, no URI do caminho do local especificado:
  

bool document::importCanvasPublishTemplate(pathURI)

• Exemplo: 

var pathURI= “file:///C|/Users/username/desktop/CanvasTemplate.html”;

var exportFlag =fl.getDocumentDOM().importCanvasPublishTemplate(pathURI);

if(!exportFlag)

        fl.trace(“Template could not be imported”);

Incorporação de Javascript no HTML

O Animate apresenta a possibilidade de incluir o arquivo JS dentro do arquivo HTML durante a publicação de telas.

1. No menu Configurações de publicação, mude para a guia Avançado e selecione Incluir JavaScript no HTML. 
2. Selecione OK na caixa de diálogo Incluir JavaScript em HTML na publicação para publicar novamente o conteúdo e substituir o HTML.
3. Essa ação desativa a caixa de diálogo Substituir o arquivo HTML na publicação e, durante eventos de publicação, o HTML será gerado, mas substituído.
4. Em Selecionar pausa incluindo JavaScript no HTML, selecione OK para excluir o JavaScript e publicar novamente o arquivo HTML.
5. Quando a opção  Substituir arquivo HTML na publicação não estiver selecionada, a opção Incluir JavaScript no HTML fica desativada automaticamente. 

 Se você não quiser que o HTML seja substituído, as opções Substituir arquivo HTML na opção Publicar e Incorporar JS em HTML não poderão coexistir.

Adição de scripts globais e de terceiros

Os animadores usam com frequência o código JavaScript que é aplicável à toda a animação. Com este recurso, você pode adicionar scripts globais e de terceiros específicos sem quadro, que podem ser aplicados à toda a animação do Animate. 

Para adicionar e usar scripts globais: 

Adição de scripts de terceiros

Os animadores incorporam com frequência bibliotecas JavaScript de terceiros, mas precisam modificar manualmente o código gerado pelo Animate Com este recurso, os animadores têm uma maior flexibilidade para utilizar as bibliotecas de JavaScript ou código de animação mais recente.

Para adicionar scripts de terceiros: 

Mesclagem de dados JSON em JS

Com base nos feedbacks de clientes e nos arquivos JSON que são essencialmente perigosos, nós reunimos dados relevantes com o arquivo JS para que um arquivo JSON não seja criado.

Otimização da saída do HTML5 Canvas

O Animate otimiza o tamanho de saída e o desempenho do HTML5 Canvas ao:

• Exportar bitmaps como planilha de entidades gráficas usando as opções na guia Planilha de entidades gráficas, presente nas Configurações de publicação.
• Excluir camadas ocultas (ao desmarcar a caixa de seleção Incluir camadas ocultas) da saída publicada.
• Excluir todos os recursos não utilizados como sons e bitmaps, bem como todos os recursos em quadros não utilizados (padrão).
• Especificar não exportar os recursos de FLA ao desmarcar as opções de exportação de recurso para imagens, sons e suporte das bibliotecas CreateJS JavaScript e utilizar os URLs relativos para exportação.
• Saída HiDPI compatível com HTML5 Canvas: o Animate dimensiona a saída com base na proporção de pixels do dispositivo no qual você vê o conteúdo. Essa compatibilidade gera uma imagem mais nítida com zoom e também corrige problemas de pixelação para documentos Canvas quando você visualiza a saída HTML Canvas em uma máquina com alto nível de DPI. 
  

Definição de um plano de fundo transparente de tela

Você pode personalizar a tela usando várias cores, além de alterar a transparência da exibição. Quando você cria uma tela transparente, é possível ver o conteúdo HTML subjacente durante a publicação.

Observação: essa configuração também torna o fundo transparente durante a publicação de OAM.

1. Selecione a tela que você deseja modificar.
2. No painel Propriedades, selecione Palco.
3. No palco, defina os valores de porcentagem para Alfa.

Suporte para amostra “Sem cor”

Você também pode usar a opção Amostra sem cor para tornar o fundo da tela transparente:

1. Selecione Modificar>Documento>Cor do palco ou, na opção Inspetor de propriedades, selecione Configurações avançadas.
2. Na amostra Cor do palco, selecione Sem cor.

Exportação de bitmaps como planilha de entidades gráficas

A exportação de vários bitmaps utilizados no documento do HTML5 Canvas como uma única planilha de entidades gráficas reduz o número de solicitações de servidor, reduz o tamanho da saída e melhora o desempenho. Você pode exportar planilhas de entidades gráficas como PNG (padrão), JPEG ou ambos.

1. Na guia Planilha de entidades gráficas , marque a caixa de seleção Combinar imagens e ativos em planilhas de entidades gráficas.
2. Selecione Formato como PNG, JPEG ou Ambos.
   
3. Se você selecionou PNG ou Ambos, especifique as seguintes opções em Configurações de PNG:
   • Qualidade: defina a qualidade das planilhas de entidades gráficas como 8 bits (padrão), 24 bits ou 32 bits.
   • Tamanho máximo: especifique o tamanho e a largura máxima da planilha de entidades gráficas em pixels.
   • Fundo: clique e defina a cor do fundo da planilha de entidades gráficas.   
4. Se você selecionou JPEG ou Ambos, especifique as seguintes opções em Configurações de JPEG:
   
   • Qualidade: defina a qualidade da planilha de entidades gráficas.
   • Tamanho máximo: especifique o tamanho e a largura máxima da planilha de entidades gráficas em pixels.
   • Fundo: clique e defina a cor do fundo da planilha de entidades gráficas.   

Como trabalhar com texto em documentos HTML5 Canvas

O HTML Canvas é compatível com textos estáticos e dinâmicos.

Texto estático

O texto estático é uma opção mais abrangente, na qual todos os ativos são convertidos em contornos durante a publicação e fornecem uma excelente experiência de usuário WSYWIG. Como o texto é publicado como contornos de vetor, não é possível editá-los durante a execução.

Observação: o uso excessivo de texto estático pode aumentar o tamanho do arquivo.

Texto dinâmico

O texto dinâmico permite modificações no texto durante a execução e não aumenta muito o tamanho do arquivo. Ele oferece suporte para menos opções do que o texto estático. Além disso, também é compatível com fontes da Web pelo Adobe Fonts.

Se você está usando textos dinâmicos com as fontes indisponíveis em máquinas de usuários finais, a saída usará a fonte padrão para a exibição e distorcerá a experiência do usuário. Esses problemas são resolvidos com as fontes da Web.

Adição de fontes da Web ao documento HTML5 Canvas

O Animate oferece fontes da Web do para tipos de Texto dinâmico em documentos HTML5 Canvas. O Adobe Fonts oferece acesso direto a milhares de fontes de alta qualidade de parceiros estratégicos. Você pode acessar e usar fontes do Adobe Fonts sem interrupções no arquivo HTML5 de saída para navegadores modernos e dispositivos móveis usando a assinatura da Creative Cloud.

Para obter mais informações sobre como usar fontes da Web do Adobe Fonts no Animate , consulte Uso de fontes da Web em documentos HTML5 Canvas

A versão 2015.2 do Animate aprimora a experiência visual para texto dinâmico em um documento de tela, de modo que o palco e as aparências publicadas fiquem sincronizadas.

Observação: as fontes do Adobe Fonts não estão disponíveis para o tipo de texto estático.

Compreender a saída HTML5 Canvas

A saída HTML5 publicada contém os seguintes arquivos:

Contém definições de todas as formas, objetos e ilustrações no elemento Canvas. Também chama o espaço para nomes CreateJS a fim de converter o Animate em HTML5 e o arquivo JavaScript correspondente que contém elementos interativos. 

Contém definições dedicadas e código para todos os elementos interativos da animação. Códigos para todos os tipos de interpolações também estão definidos no arquivo JavaScript.

Esses arquivos são copiados no mesmo local do FLA por padrão. Você pode alterar i local fornecendo o caminho de saída na caixa de diálogo Configurações de publicação (Arquivo > Configurações de publicação).

Migrar conteúdo existente a HTML5 Canvas

Você pode migrar o conteúdo existente no Animate para gerar uma saída HTML 5. Até o fim, o Animate permite que você migre conteúdos copiando ou importando manualmente camadas individuais, símbolos e outros itens da biblioteca. Como alternativa, você pode executar o Convert AS3 ao comando do documento HTML5 Canvas para direcionar automaticamente o conteúdo ActionScript existente para um novo documento HTML5 Canvas. Para obter mais informações, consulte este link.

Entretanto, ao trabalhar com o tipo de documento HTML5 no Animate, você pode notar que alguns recursos do Animate não são compatíveis. Isso acontece porque os recursos no Animate não têm correspondentes na API Canvas. Portanto, esses recursos não podem ser usados no tipo de documento HTML5 Canvas. Isso pode o afetar durante a migração de conteúdo, ao tentar:

conteúdo (camadas ou símbolos da biblioteca) de um tipo de documento Animate tradicional (como ActionScript 3.0, AIR para Android, AIR para desktop e assim por diante) em um documento HTML5. Neste caso, um tipo de conteúdo não suportado é removido ou convertido para padrões suportados.

Por exemplo, copiar animação 3D removerá todas as transformações 3D aplicadas a objetos no palco.

um arquivo PSD ou AI que contenha conteúdo não suportado. Neste caso, o conteúdo é removido ou convertido para padrões suportados.

Por exemplo, importe um arquivo PSD com efeitos de desfoque Gradient Bevel aplicados. O Animate remove o efeito.

com vários tipos de documento (por exemplo, ActionScript 3.0 e HTML5 Canvas) simultaneamente, você alterna documentos com uma ferramenta ou opção não suportada selecionada. Neste caso, o Animate indica visualmente que o recurso não é compatível.

Por exemplo, você criou uma linha pontilhada em um documento ActionScript 3.0 e alterna para HTML5 Canvas com a ferramenta Linha ainda selecionada. Observe o ponteiro e o Inspetor de propriedades, eles exibem ícones para indicar que a linha pontilhada não é suportada no HTML5 Canvas.

Os componentes do ActionScript são removidos e o código é comentado. E, além disso, se você tem JavaScript gravado no bloco de comentários (para kit de ferramentas para CreateJS com Animate 13.0), lembre-se de excluir os comentários manualmente do código.

Por exemplo, se você copiar camadas que contém botões, eles são removidos.

Alterações aplicadas ao conteúdo após a migração

Estes são os tipos de alterações que são aplicadas quando você migra conteúdo de legado a um documento HTML5 Canvas.

Os tipos de conteúdo que não são suportados em HTML5 Canvas são removidos. Por exemplo:

• As transformações 3D são removidas
• O código ActionScript é comentado
• Os vídeos são removidos

O tipo de conteúdo ou recurso é suportado, mas uma propriedade do recurso, não. Por exemplo:

• Blendmode de superposição mão é suportado; é modificado para Normal.
• Linha pontilhada não é suportada; é modificada para Sólida.

Para obter a lista completa de recursos que não são suportados e seus valores de emergência durante a migração, consulte este artigo.

Conversão de outros tipos de documento para HTML5 Canvas

O conversor de tipo de documento universal permite a conversão dos seus projetos FLA atuais (de qualquer tipo) em qualquer outro tipo de documento, como HTML5 Canvas, ActionScript/AIR, WebGL ou outro tipo de documento personalizado. Ao converter em um formato, você aproveita os recursos de autoria que o Animate oferece para esse tipo de documento. 

Para obter mais informações, consulte Converter em outros formatos de documentos

Converter ActionScript 3 para documento HTML5 Canvas usando script JSFL

O Animate fornece um script JSFL para converter um documento AS3 em um documento HTML5 Canvas. Ao ser executado, o script JSFL faz o seguinte:

• Cria um novo documento HTML5 Canvas.
• Copia todas as camadas, símbolos e itens da biblioteca no novo documento HTML5 Canvas.
• Aplica os padrões aos recursos não suportados, sub-recursos ou propriedades de recurso.
• Cria arquivos FLA separados para cada cena, pois o documento HTML5 não suporta cenas múltiplas.

1. Abra o documento ActionScript 3 no Animate.
2. Selecione Comandos > Converter AS3 em documento HTML5 Canvas.

 Isso é aplicável somente quando a opção Combinar imagens na planilha de entidades gráficas está desmarcada.