Komma igång

Sök
Flash Professional Användarhandbok
Gäller för: Flash Professional

某些 Creative Cloud 应用程序、服务和功能在中国不可用。

Skapa en interaktiv animering med API:t för WebGL-miljön   

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.

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

  2. Testa filmen genom att trycka på CTRL+Retur (Windows) eller Cmd+Retur (Mac). Bitmappen visas i ett webbläsarfönster.

  3. Navigera till den mapp som innehåller .fla-filen. Följande filer och mappar finns efter publiceringen:

    • Filen night_webgl.html 
    • Mappen ’libs’ som innehåller JavaScript-biblioteket för WebGL-miljön
    • Mappen ’assets’ som innehåller de resurser som krävs för att återge animeringen

  4. Gå tillbaka till Flash Professional. På panelen Bibliotek visas ett filmklipp som innehåller en animerad stjärna med modulerad genomskinlighet.  

  5. Dubbelklicka på kolumnen 'linkage' bredvid filmklippet med stjärnan och skriv ”star”. I det här steget anges det länkningsnamn med vilket instanser av det här filmklippet kan skapas vid körning med API:t. Det garanterar också att det här filmklippet publiceras, även om det inte används på scenen.

  6. Öppna HTML-filen och lägg till följande tre rader efter raden med taggen . Detta lägger till en knapp i HTML-koden och skapar en platshållare som visar hur många stjärnor som skapats.





  7. Lägg till följande kod efter handleComplete()-funktionen:

    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. 

  8. Spara ändringarna i HTML-filen.

  9. För att hindra att ändringarna av HTML-koden skrivs över vid publiceringen avmarkerar du kryssrutan 'Skriv över HTML' i dialogrutan Publiceringsinställningar.

  10. Testa filmen igen. Nu visas knappen Lägg till nedanför bakgrundsbilden i webbläsaren. Klicka på Lägg till flera gånger för att lägga till flera stjärnor på scenen.

Obs!

Du kan ladda ned det färdiga exemplet här.

Hämta

Hämta fil
night_webgl.zip
night_webgl

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.