Creazione di un’animazione interattiva tramite l’API WebGL runtime   

Seguendo l’esercitazione guidata riportata di seguito, potrete iniziare a usare l’API Flash WebGL runtime per aggiungere interattività a un’animazione. Questa esercitazione inizia con un semplice file FLA e utilizza l’API per aggiungere istanze MovieClip sullo stage.

  1. Scaricate il file night_webgl.fla e apritelo in Adobe Flash Professional CC 2014. Il file contiene l’immagine bitmap di un cielo notturno sullo stage.

  2. Provate il filmato premendo CTRL+Invio (Windows) o Comando+Invio (Mac). L’immagine bitmap viene visualizzata in una finestra del browser.

  3. Individuate la cartella che contiene il file .fla. Dopo la pubblicazione potete trovare i file e le cartelle seguenti:

    • Il file night_webgl.html file 
    • La cartella “libs” contenente la libreria JavaScript di WebGL runtime
    • La cartella “assets” contenente le risorse necessarie per il rendering dell’animazione
  4. Tornate a Flash Professional. Nel pannello Libreria è presente l’elemento MovieClip “Star” contenente l’animazione di una stella con trasparenza modulata.  

  5. Nel pannello Libreria, fate doppio clic sulla colonna ‘linkage’ accanto al MovieClip Star e digitate “star”. Così facendo viene specificato il nome di concatenamento con cui le istanze di questo oggetto MovieClip possono essere in fase runtime create tramite l’API. Inoltre l’oggetto MovieClip verrà pubblicato anche se non viene utilizzato sullo stage.

  6. Aprite il file HTML e aggiungete queste tre righe dopo la riga che contiene il tag , per aggiungere un pulsante all’HTML e creare un segnaposto per visualizzare il numero di stelle create.





  7. Aggiungete il codice seguente dopo la funzione 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"); }

    Si verificano diversi eventi:

    • La variabile “player” fa riferimento a un’istanza del lettore WebGL ed è la facciata dell’API.
    • Viene ottenuto un riferimento a SceneGraphFactory, utilizzato per creare istanze dell’oggetto MovieClip.
    • Le istanze MovieClip vengono create mediante la funzione createMovieClipInstance e il passaggio del nome di concatenamento specificato in Flash. 
    • Dal lettore viene ottenuto un riferimento allo stage (linea temporale principale).
    • La nuova istanza MovieClip viene aggiunta come elemento secondario dello stage mediante la funzione addChildAt(). Quando si passa 0 a questa funzione, l'elemento secondario viene aggiunto sopra a tutti gli altri elementi secondari dello stage (sopra l’immagine bitmap).
    • La posizione e le dimensioni della stella sono impostate utilizzando la classe Matrix.
     
  8. Salvate le modifiche apportate al file HTML.

  9. Per impedire a Flash di sovrascrivere le modifiche apportate all’HTML durante la pubblicazione, deselezionate la casella “Sovrascrivi HTML” nella finestra di dialogo Impostazioni pubblicazione.

  10. Provate nuovamente il filmato. Questa volta, nel browser, sotto l’immagine di sfondo viene visualizzato il pulsante Aggiungi. Fate clic su Aggiungi più volte per aggiungere alcune stelle sullo stage.

Nota:

Potete scaricare l’esempio finito da qui.

Scarica

night_webgl

Nota:

  • Poiché effettuate il rendering dell’animazione WebGL su un canvas all’interno dell’HTML, potete continuare a modificare l’HTML circostante. In questo esempio, viene teneta traccia del numero di stelle create.
  • Questo esempio è stato progettato per mettervi in grado di iniziare a creare animazioni e giochi interattivi. Visitate la pagina Documentazione dell’API WebGL runtime per informazioni su altri metodi che consentono di controllare gli elementi della scena.
  • Quando pubblicate dei contenuti, Flash converte la grafica in un formato idoneo per la GPU. Questa attività utilizza molte risorse di elaborazione e il suo completamento potrebbe richiedere alcuni minuti. Per prestazioni ottimali, riducete al minimo il numero di linee e curve presenti nella grafica. Ottimizzate, smussate e raddrizzate la grafica utilizzando le opzioni disponibili nel menu Elabora > Forma. Ciò consente di aumentare le prestazioni di rendering e ridurre il tempo necessario per la pubblicazione.

Questo prodotto è concesso in licenza in base alla licenza di Attribuzione-Non commerciale-Condividi allo stesso modo 3.0 Unported di Creative Commons.  I post su Twitter™ e Facebook non sono coperti dai termini di Creative Commons.

Note legali   |   Informativa sulla privacy online