Detta är en steg-för-steg-självstudie som hjälper dig att komma igång med att använda API:t för WebGL-miljön i Flash för att lägga till interaktivitet i animeringar. I den här självstudien börjar du med en enkel FLA-fil och använder API:t för att lägga till MovieClip-instanser på scenen.
-
Ladda ned filen night_webgl.fla och öppna den med Adobe Flash Professional CC 2014. Som du ser innehåller filen en bitmappbild av natthimlen på scenen.
-
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"); }Det händer flera saker här:
- Variabeln 'player' refererar till en instans av WebGL-spelaren och är API:ts ”fasad”.
- En referens till SceneGraphFactory hämtas. Den används för att skapa MovieClip-instanser.
- MovieClip-instanser skapas med funktionen createMovieClipInstance() och genom att skicka de länkningsnamn som angetts i Flash.
- En referens till scenen (rottidslinje) hämtas från spelaren.
- Den nya MovieClip-instansen läggs till som ett underordnat objekt på scenen med funktionen addChildAt(). Genom att skicka 0 till den här funktionen läggs det underordnade objektet ovanpå alla andra underordnade objekt på scenen (ovanpå bitmappen).
- Stjärnans position och storlek anges med hjälp av klassen Matrix.
Obs!
Du kan ladda ned det färdiga exemplet här.
Hämta
Obs!
- Eftersom du återger WebGL-animeringen på en arbetsyta i HTML-koden kan du utan problem ändra den omkringliggande HTML-koden. I det här exemplet håller du reda på antalet stjärnor som skapas.
- Ovanstående exempel är till för att du ska komma igång med att skapa interaktiva animeringar och spel. Besök sidan med API-dokumentationen för WebGL-miljön om du vill veta mer om andra sätt att styra elementen på scenen.
- När du publicerar innehåll konverteras teckningen till ett GPU-anpassat format i Flash. Eftersom åtgärderna är resurskrävande kan det ta några minuter innan de har slutförts. Det är en god idé att alltid minimera antalet linjer och kurvor i teckningar. Genom att optimera, utjämna och räta ut teckningen med alternativen på menyn Ändra > Form kan du förenkla teckningen. Detta förbättrar återgivningsprestanda och minskar publiceringstiden.
Twitter™- och Facebook-inlägg omfattas inte av villkoren i Creative Commons-licensen.