Criação de uma animação interativa usando a API Runtime do WebGL   

A seguir, um tutorial passo-a-passo para ajudá-lo a iniciar o uso da API do tempo de execução da WebGL em Flash, para adicionar interatividade a sua animação. Neste tutorial, você começa com um arquivo FLA simples e usa a API para adicionar instâncias do MovieClip no palco.

  1. Faça o download do arquivo night_webgl.fla e abra-o no Adobe Flash Professional CC 2014. É possível visualizar que o arquivo contém uma imagem de mapa de bits de um céu noturno no palco.

  2. Teste o filme pressionando CTRL+Enter (no Windows) ou Cmd+Enter (no Mac). Uma janela do navegador exibe o mapa de bits.

  3. Vá até a pasta que contém o arquivo .fla. Você encontrará os seguintes arquivos e pastas após publicar:

    • O arquivo night_webgl.html  
    • A pasta ‘bibliotecas' que contém a biblioteca JavaScript com o tempo de execução para WebGL
    • A pasta 'ativos' que contém os ativos necessários para renderizar a animação
  4. Volte para o Flash Professional. No painel Biblioteca, é possível visualizar uma "Estrela" do MovieClip que contém a animação de uma estrela simples, com transparência modulada.  

  5. No painel da biblioteca, clique duas vezes na coluna “vincular" ao lado do Star MovieClip e digite "star". Este passo especifica o nome de vinculação com o qual as instâncias deste MovieClip podem ser criadas no runtime usando a API. Também garante que este MovieClip será publicado, mesmo que não seja usado no palco.

  6. Abra o arquivo HTML e adicione estas três linhas após a linha que contém a tag . Isso adiciona um botão para o código HTML e cria um espaço reservado para exibir o número de estrelas criadas.





  7. Adicione o seguinte código após a função handleComplete() :

    var count = 0; function onAdd() { var sgf = player.getScenegraphFactory(); var star = sgf.createMovieClipInstance("star"); player.getStage().addChildAt(star, 0); var x = Math.random() * 540; var y = Math.random() * 180; var s = Math.random(); var mat = new flwebgl.geom.Matrix([s, 0, 0, s, x, y]); star.setLocalTransform(mat); count++; document.getElementById("count").innerHTML = count + (count > 1 ? " stars" : "star"); }

    Diversas coisas acontecem aqui:

    • A variável ‘player’ faz referência a uma instância do player da WebGL e é a fachada da API.
    • Uma referência ao SceneGraphFactory foi obtida. É usada para criar instâncias do MovieClip.
    • As instâncias do MovieClip são criadas usando a função createMovieClipInstance(), passando o nome de vinculação especificada no Flash. 
    • Uma referência ao palco (cronograma de raiz) é obtido do player.
    • A nova instância do MovieClip foi adicionada como um elemento subordinado do palco usando a função addChildAt(). A passagem do 0 para essa função, adiciona o elemento subordinado acima de todos os outros elementos subordinados do palco (acima do mapa de bits)
    • A posição e o tamanho da estrela são definidos usando a classe de matriz. 
  8. Salve as alterações no arquivo HTML.

  9. Para evitar que o Flash substitua as alterações feitas no HTML durante a publicação, desmarque a caixa de verificação 'Substituir HTML' na caixa de diálogo Configurações de publicação.

  10. Teste o filme novamente. Desta vez, o navegador exibe o botão Adicionar abaixo da imagem de fundo. Clique em Adicionar diversas vezes para adicionar estrelas no palco.

Observação:

É possível fazer o download do exemplo finalizado aqui.

Download

night_webgl

Observação:

  • Como você renderizou a animação da WebGL em uma tela dentro do HTML, é possível modificar o HTML adjacente. Neste exemplo nós mantivemos uma contagem do número de estrelas criadas.
  • O exemplo acima foi destinado para introduzir a criação de animações e jogos interativos. Visite a página de Documentação da API de runtime do WebGL para saber mais sobre as outras formas de controlar os elementos da sua cena.
  • Ao publicar qualquer conteúdo, o Flash converte a obra em um formato compatível com o GPU. Por ser uma tarefa intensiva, ela pode alguns minutos para ser concluída. Recomendamos que você minimize o número de linhas e curvas em sua obra. Otimize, suavize, arrume e simplifique sua obra usando as opções do menu Modificar > Formato. Isso ajuda a aumentar o desempenho da interpretação e reduz o tempo de publicação.

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