Observação:

  O Typekit foi renomeado para Adobe Fonts e está incluído na Creative Cloud e em outras assinaturas. Saiba mais.

O que é HTML5 Canvas?

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 CC 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 CC está integrado ao CreateJS, o que permite conteúdos interativos ricos em tecnologias de rede aberta pelo HTML5. O Animate CC 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.
Novo documento
Novo documento

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 CC 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 CC 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:

Preenchimento de código

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:

Destaque de sintaxe

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.

Atribuição de cores a códigos

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

Colchete

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

Code_Aspects
(A) Destaque de sintaxe (B) Atribuição de cores a códigos (C) Colchetes

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 CC. 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

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

publish-settings-basics

Saída

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 "...".

Repetir linha do tempo

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

Incluir camadas ocultas

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

Centro do palco

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.

Permitir adequação

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.

Ativar a opção Dimensionar para preencher a área visível

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.

Incluir pré-carregador:

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.

Publish settings
Configurações de publicação

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.

Publish_settings_root
Publicação dos ativos de tela na pasta raiz

Exportar ativos de imagem

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

Exportar ativos de som

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

Exportação de ativos do CreateJS

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

Observação:

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

Configurações avançadas

publish_settings_output

Opções de exportação de recurso

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.

JSEmbed23
Export-spritesheets
Publish_Settings_JavaScript_Namespaces

Modelo de publicação do HTML:

 

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.

Bibliotecas hospedadas:

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.

Incluir camadas ocultas:

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

Formas compactas:

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).

Limites de multiquadro:

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.

Substituir arquivo HTML na publicação e incluir Javascript no HTML:

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.

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

Observação:

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:

Parâmetro do atributo Variável de modelo
Título do documento HTML  $TITLE
Espaço reservado para a inclusão de scripts do CreateJS $CREATEJS_LIBRARY_SCRIPTS
Espaço reservado para inclusão dos scripts gerados (inclusive scripts de fontes da Web) $ANIMATE_CC_SCRIPTS
Tag HTML para iniciar um script do cliente                                                                                                               $SCRIPT_START
Espaço reservado para o código que cria o carregador (CreateJS LoadQueue) $CREATE_LOADER
Espaço reservado para o código que carrega os ativos presentes no manifesto $LOAD_MANIFEST
Espaço reservado para o código que define o método de carregamento dos arquivos $HANDLE_FILE_LOAD_START
Espaço reservado para o código que lida com o evento de carregamento dos arquivos $HANDLE_FILE_LOAD_BODY
Espaço reservado para o código que finaliza o método de carregamento dos arquivos $HANDLE_FILE_LOAD_END
Espaço reservado para o código que define o método de resolução concluída, chamado após os ativos serem carregados $HANDLE_COMPLETE_START
Espaço reservado para o código que cria o palco $CREATE_STAGE
Espaço reservado para o código que registra um evento tick, após o qual a animação é iniciada $START_ANIMATION
Espaço reservado para que o código seja compatível com dimensionamentos e exibições hidpi ágeis $RESP_HIDPI
Espaço reservado para o código que finaliza o método de resolução Concluído $HANDLE_COMPLETE_END
Espaço reservado para uma função que lida com conteúdos que possuem áudio
                                                                           
$PLAYSOUND
Espaço reservado para estilizar a seção e oferecer suporte à centralização de tela $CENTER_STYLE
Espaço reservado para a propriedade de estilo de exibição da tela e para oferecer suporte ao Pré-carregador $CANVAS_DISP
Espaço reservado para o código que exibe o Pré-carregador $PRELOADER_DIV
Tag HTML para o final do script do cliente                                                                                                                $SCRIPT_END
ID do elemento de tela                                                                                                                                                  $CANVAS_ID
Largura do palco ou do elemento de tela                                                                                                              $WT
Altura do palco ou do elemento de tela                                                                                                                 $HT
Cor do fundo do palco ou do elemento de tela                                                                                          $BG
Versão do Animate CC usada para gerar conteúdo
                                                                                    
$VERSÃO

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

Parâmetro do atributo Variável de modelo
Espaço reservado para incluir scripts (CreateJS e Javascript gerado) $CREATEJS_SCRIPTS
Espaço reservado para o código que inicializará as bibliotecas CreateJS, carregará mídias, criará e atualizará o palco $CJS_INIT*

Observação:

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. 

Observação:

Se não quiser que o HTML seja substituído, as opções Substituir arquivo HTML na publicação Embutir JS no HTML não poderão existir ao mesmo tempo.

Mering Json
Mesclagem do Js com HTML

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: 

  1. Selecione Janela > Ações

    actions-add-script
  2. No painel Ações, selecione Script na hierarquia Global.

    A seção Script global permite que você grave os scripts aplicáveis em documentos com o Animate ou como um script externo.

    Como um script externo:  na tela Incluir, selecione o script específico para inclusão, conforme descrito na próxima seção.

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 CC. 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: 

  1. Selecione Janela > Ações.

  2. No painel Ações, selecione Incluir na hierarquia Global.

  3. Clique no botão + para adicionar um script de um URL hospedado externamente ou adicione um arquivo de uma biblioteca local.

    actions-include

    Também é possível reordenar os scripts com base nas suas interdependências, já que alguns objetos são dependentes de outras bibliotecas preexistentes.

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.

 

canvas tranperancy_final
Transparência da tela

advanced_settings
Transparência da tela: Configurações avançadas

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.   
sprite-sheet
Export-spritesheets-1

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.

Static-text

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 CC 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 associação à Creative Cloud.

Para obter mais informações sobre como usar fontes da Web do Adobe Fonts no Animate CC, 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:

Arquivo HTML

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. 

Arquivo JavaScript

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 CC, 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:

Copiar

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.

Importar

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.

Ao trabalhar

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 CC 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.

Scripts

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 CC 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.

O conteúdo é removido

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 conteúdo é modificado para um valor padrão

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 CC 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.
Para converter um documento AS3 em um documento HTML5 Canvas, faça o seguinte:
  1. Abra o documento ActionScript 3 no Animate CC.
  2. Selecione Comandos > Converter AS3 em documento HTML5 Canvas.

Esta obra está licenciada sob uma licença não adaptada da Creative Commons Attribution-Noncommercial-Share Alike 3.0  As publicações do Twitter™ e do Facebook não são cobertas pelos termos do Creative Commons.

Avisos legais   |   Política de privacidade online