Criação e publicação de um documento WebGL

O WebGL é um padrão de rede aberta para renderizar gráficos em qualquer navegador compatível, sem a necessidade de plug-ins adicionais. O WebGL é integrado completamente em todos os padrões da Web do navegado, permitindo o uso acelerado de processamento de imagens e efeitos do GPU como parte da tela da página da web. Os elementos do WebGL podem ser incorporados a outros elementos HTML e compostos com outras partes da página.

Apesar de a maioria dos navegadores atuais suportarem o WebGL, acesse este link para saber mais detalhes sobre as outras versões que são suportadas.

Alguns navegadores não têm WebGL ativado por padrão. Para ativar o WebGL em seu navegador, consulte este artigo.

 Certifique-se de ativar WebGL em seu navegador, pois alguns navegadores desativam WebGL por padrão.

Uso do tipo de documento WebGL-glTF (Beta)

O Animate agora tem dois tipos de documento WebGL-glTF. Você pode usar o tipo de documento WebGL-glTF Standard para habilitar a integração com qualquer um dos pacotes de WebGL-glTF Standard. Ele tem total conformidade com os padrões.

Publicação de um arquivo WebGL-glTF

Converter animações nos formatos GLTF e GLB

WebGL-glTF e GLB reduzem o tamanho do arquivo e o processamento do tempo de execução. No Animate, você pode usar os documentos nos dois formatos. Deseja usar seus vídeos nos dois os formatos? Assista ao tutorial no fim deste exemplo e siga estas etapas.

Como criar animações avançadas usando o WebGL GLTF Export no Animate

Assista ao vídeo para saber qual é a aparência de uma animação nos formatos WebGL GLTF, GLB.

Animate 18.0 e versões anteriores

Consulte o seguinte conteúdo se você estiver usando o Animate 18.0 ou uma versão anterior.

O tipo de documento WebGL

O Animate permite criar e publicar conteúdos interativos avançados no formato Web Graphics Library (WebGL). Por ser totalmente integrado aos navegadores, o WebGL permite que o Animate utilize o uso acelerado do GPU de processamento e renderização de gráficos, como parte da tela da página da Web.

Esse novo tipo de documento permite que você crie conteúdo e publique rapidamente em uma saída WebGL. Você pode utilizar ferramentas eficientes no Animate para criar conteúdos ricos, exceto renderizar a saída WebGL que pode ser executada em qualquer navegador compatível. Isso significa que você pode usar a linha do tempo, a área de trabalho e as ferramentas de desenho tradicionais do Animate para criar e produzir nativamente conteúdo WebGL. Os navegadores mais usados suportam WebGL, desta forma permitindo que o Animate renderize o conteúdo na maioria das plataformas da Web.

 O suporte para WebGL só está disponível como visualização. Esta atualização do Animate inclui suporte para animações básicas com som e scripts, além de um grande conjunto de recursos de interatividade. Com os lançamentos futuros do Animate, você verá mais recursos sendo ativados para o tipo de documento WebGL. Para obter uma lista completa com os recursos do Animate compatíveis com WebGL, consulte este artigo da KB.

Criação de um documento WebGL

No Animate, o documento WebGL permite que você crie e publique rapidamente conteúdo para o formato WebGL. Para criar um documento WebGL:

1. Inicie o Animate.
2. Na tela de boas vindas, clique na opção WebGL(Pré-visualização). Como alternativa, selecione a opção no menu Arquivo > Novopara exibir a caixa de diálogo Novo documento. Clique na opção WebGL(Pré-visualização). 

Visualização de conteúdo WebGL em navegadores

Você pode usar o recurso Testar filme no Animate para visualizar o resto de seu conteúdo. Para visualizar, faça o seguinte:

1. No Animate, pressione Ctrl+Enter no Windows e CMD+ Enter no MAC. Isso inicia seu navegador padrão e renderiza o conteúdo WebGL.

O Animate requer um servidor da Web que execute o conteúdo WebGL. O Animate tem um servidor da Web incorporado que está configurado para executar conteúdo WebGL na Porta nº 8090. Se um servidor já estiver usando esta porta, o Animate automaticamente detecta e resolve o conflito.

Publicação de conteúdo no formato WebGL

O Animate permite que você crie e publique conteúdo WebGL nativamente de dentro do sistema.

Para publicar seu documento WebGL, faça o seguinte:

1. Selecione Arquivo > Configurações de publicação para exibir a caixa de diálogo de Configurações de publicação. Como alternativa, selecione Arquivo > Publicar. se você já especificou as Configurações de publicação para WebGL.
2. Na caixa de diálogo Configurações de publicação, especifique os valores de:

Forneça um nome significativo para a saída. Além disso, navegue até ou insira o local em que você deseja publicar a saída WebGL.

Permite que você especifique se deve substituir o HTML Wrapper todas as vezes que publicar seu projeto WebGL. Você pode desmarcar esta opção caso tenha feito alterações externas ao seu arquivo HTML publicado e deseja retê-lo enquanto atualiza todas as alterações feitas à animação ou aos recursos no Animate.

Inclui todas as camadas ocultas na saída WebGL. Desmarcar Incluir camadas ocultas impede que todas as camadas (inclusive as aninhadas em clipes de filmes) marcadas como ocultas sejam exportadas para o WebGL resultante. Isso permite que você teste facilmente diferentes versões de documentos WebGL tornando as camadas invisíveis.

Repete o conteúdo ao atingir o último quadro. Desmarque esta opção de forma a parar o conteúdo quando o último quadro for atingido.

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

 60FPS é o maior QPS que pode ser especificado para um conteúdo WebGl compatível com os navegadores.

Compreensão da saída WebGL

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

Inclui o runtime, chamadas de ativos e também inicializa o renderizador de WebGL. O nome do arquivo é <FLA_name>.html por padrão. Você pode fornecer um nome diferente ao arquivo HTML na caixa de diálogo Configurações de publicação (Arquivo > Configurações de publicação).

O arquivo HTML é colocado no mesmo diretório que o FLA por padrão. Você pode fornecer um local diferente na caixa de diálogo Configurações de publicação.

Renderiza o conteúdo publicado em WebGL. É publicado na biblioteca/pasta do documento WebGL. O nome do arquivo é: flwebgl-<version>.min.js

O invólucro HTML utiliza este arquivo JS para renderizar o conteúdo WebGL.

Armazena todo o valor de cor ( de formas ), incluindo as ocorrências de bitmap no palco.

Adição de áudio ao documento WebGL

Você pode importar e embutir áudios no documento WebGL, controlar a reprodução usando as configurações de sincronização (evento, iniciar e pausar) e reproduzir áudio da linha do tempo de execução. O WebGL atualmente só é compatível com os formatos .wav e .mp3.

Para obter mais informações sobre como trabalhar com áudio, consulte Uso de sons no Animate.

Migração de conteúdo existente para um documento WebGL

Você pode migrar conteúdos existentes no Animate para um documento WebGL. Até o fim, o Animate permite que você migre copiando ou importando o conteúdo manualmente. Além disso, ao trabalhar com vários documentos no Animate, é uma prática comum copiar o conteúdo em documentos como Camadas ou ativos na Biblioteca. Apesar de a maioria dos recursos do Animate serem compatíveis, alguns tipos de conteúdo são modificados para acomodar melhor o formato WebGL.

O Animate contém vários recursos poderosos que ajudam a produzir conteúdos visualmente ricos. Contudo, considerando que alguns desses recursos são nativos do Animate, eles não serão suportados em um documento WebGL. O Animate foi projetado para modificar esse conteúdo para um formato suportado e indicar visualmente quando uma ferramenta ou um recurso não for suportado.

conteúdo (camadas ou símbolos da biblioteca) de um tipo de documento do Animate tradicional (como ActionScript 3.0, AIR para Android, AIR para desktop, e assim por diante) em um documento WebGL. 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 aplicados. O Animate remove o efeito.

com vários tipos de documento (por exemplo, ActionScript 3.0 e WebGL) 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 WebGL com a ferramenta Linha ainda selecionada. Observe o ponteiro e o Inspetor de propriedades, pois eles indicam visualmente que a linha pontilhada não é suportada dentro da WebGL.

Você pode escrever um código Javascript no painel de Ações, o qual será executado depois que os participantes entrarem no quadro. A variável "this" no contexto dos scripts de quadro refere-se à instância do MovieClip à qual ela pertence. Além disso, scripts de quadro podem acessar as funções do Javascript e as variáveis declaradas no arquivo recipiente HTML. Ao copiar um quadro ou camada de um documento ActionScript e colá-lo em um documento WebGL, os scripts, caso haja algum, receberão comentários.

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 legado a um documento WebGL.

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

não são suportados. O efeito será removido e a forma passará a ter um preenchimento sólido.

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

 

é modificado para ter preenchimento sólido usando a cor principal.

Melhoria da renderização com a cache de bitmap

O cache de bitmap em tempo de execução permite otimizar o desempenho da interpretação, especificando se o clipe do filme estático (por exemplo, uma imagem de plano de fundo) ou símbolo de botão deve ser armazenado em cache como um bitmap em tempo de execução. Por padrão, itens de vetor são redesenhados em cada quadro. Armazenar em cache um clipe de filme ou um símbolo de botão como um bitmap impede que o navegador precise redesenhar o item continuamente, pois a imagem será um bitmap e sua posição não mudará. Isso oferece uma melhora significativa no desempenho da interpretação do conteúdo WebGL.

Por exemplo, quando você criar uma animação com um fundo complexo, crie um clipe filme que contenha todos os itens que fazem parte do fundo. Então, selecione “Cache como bitmap” para o clipe de filme de fundo no Inspetor de propriedades. Durante a reprodução, o plano de fundo é renderizado como um bitmap armazenado na profundidade de tela atual. O navegador desenha o bitmap no Palco rapidamente e somente uma vez, permitindo que a animação seja reproduzida com maior velocidade e com mais fluidez.

O cache de bitmap permite utilizar um clipe de filme e congelar automaticamente em um certo local. Se uma região for alterada, o cache do bitmap será atualizado vetorialmente. Este processo minimiza o número de desenhos que o navegador precisa fazer várias fazer e oferece um desempenho de interpretação mais rápido e sem problemas.

Para habilitar Cache como Bitmap da forma adequada, selecione a instância do clipe de filme e selecione Cache como Bitmap da lista suspensa Interpretação no Inspetor de propriedades (Janela > Propriedades).

Considerações ao usar o Cache como Bitmap

Ao usar a propriedade Cache como Bitmap no conteúdo WebGL, leve em consideração:

• O tamanho máximo do símbolo do clipe de filme é limitado a 2048x2048. Observe que os limites reais da instância do clipe de filme que podem ser armazenados são menores do que 2048x2048, o WebGL utiliza alguns pixels.
• Se existir mais espaço do que uma instância no mesmo clipe de vídeo, o Animate gera o cache com o tamanho da primeira instância encontrada. No entanto, o cache não é gerado novamente e a propriedade Cache como Bitmap não é ignorada, mesmo que a transformação do clipe de filme mude para uma extensão maior. E, consequentemente, se um símbolo do clipe de filme é escalado durante o curso da animação, ela poderá ficar granulada.