Aan de slag

Aan de slag

Zoeken
Flash Professional Handboek
Is van toepassing op: Flash Professional

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

Een interactieve animatie maken met de WebGL runtime-API   

Dit is een zelfstudie waarin u stap voor stap leert om interactiviteit toe te voegen aan uw animaties met de Flash WebGL runtime-API. In deze zelfstudie begint u met een eenvoudig FLA-bestand en gebruikt u de API om MovieClip-instanties toe te voegen aan de stage.

  1. Download het bestand night_webgl.fla en open het in Adobe Flash Professional CC 2014. U ziet dat het bestand een bitmapafbeelding bevat van een sterrenhemel.

  2. Test het filmpje door te drukken op CTRL+Enter (Windows) of Cmd+Enter (Mac). De bitmap wordt in een browservenster weergegeven.

  3. Navigeer naar de map met het .fla-bestand. Na publicatie ziet u de volgende bestanden en mappen:

    • Het bestand night_webgl.html
    • De map ‘libs’ met de WebGL runtime JavaScript-bibliotheek
    • De map ‘assets’ met alle assets die nodig zijn voor de weergave van de animatie

  4. Ga terug naar Flash Professional. In het venster Bibliotheek wordt een MovieClip-'ster' weergeven die een animatie van een ster met gemoduleerde transparantie bevat.  

  5. Dubbelklik in dit venster op de 'koppelingskolom' naast de MovieClip-ster en typ 'star'. Hiermee geeft u de koppelingsnaam aan waarmee tijdens de runtime de instanties van deze MovieClip kunnen worden gemaakt met de API. Deze stap zorgt er ook voor dat deze MovieClip wordt gepubliceerd, ook als deze niet op de stage wordt gebruikt.

  6. Open het HTML-bestand en voeg de volgende drie regels toe na de regel met de -tag. Zo voegt u een knop toe aan het HTML-bestand en creëert u een tijdelijke aanduiding voor de weergave van het aantal sterren dat u hebt gemaakt.





  7. Voeg de volgende code toe na de functie 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"); }

    Hier gebeuren meerdere dingen:

    • De variabele ‘player’ verwijst naar een instantie van de WebGL-player en vormt de façade van de API.
    • Er wordt een verwijzing naar SceneGraphFactory verkregen. Hiermee worden instanties van de MovieClip gemaakt.
    • MovieClip-instanties worden gemaakt met de functie createMovieClipInstance() en geven de koppelingsnaam door die u hebt opgegeven in Flash. 
    • Er wordt een verwijzing naar de stage (basistijdlijn) verkregen van de Player.
    • Met de addChildAt()-functie wordt de nieuwe MovieClip-instantie toegevoegd als onderliggend object van de stage. Door de waarde 0 door te geven aan deze functie wordt het onderliggende object boven alle andere onderliggende objecten op de stage toegevoegd (boven de bitmap).
    • De positie en grootte van de ster worden ingesteld met behulp van de Matrix-klasse. 

  8. Sla de wijzigingen op in het HTML-bestand.

  9. Om te voorkomen dat de wijzigingen in het HTML-bestand tijdens de publicatie worden overschreven door Flash, moet u het selectievakje 'HTML overschrijven' in het dialoogvenster Publicatie-instellingen uitschakelen.

  10. Test de film nogmaals. Dit keer wordt de knop Toevoegen weergegeven in de browser, onder de achtergrondafbeelding. Klik meerdere keren op Toevoegen om sterren toe te voegen aan de stage.

Opmerking:

U kunt het voltooide voorbeeld hier downloaden.

Downloaden

Bestand ophalen
night_webgl.zip
night_webgl

Opmerking:

  • Aangezien u de WebGL-animatie rendert op een canvas binnen het HTML-bestand, kunt u de omgevende HTML probleemloos wijzigen. In dit voorbeeld wordt bijgehouden hoeveel sterren u hebt gemaakt.
  • Het bovenstaande voorbeeld is bedoeld om een begin te maken met interactieve animaties en games. Ga naar de pagina WebGL runtime API-documentatie voor meer informatie over andere manieren om de scène-elementen in te stellen.
  • Wanneer u inhoud publiceert, worden de illustraties in Flash geconverteerd naar een GPU-gebruiksvriendelijke indeling. Deze taak vergt veel van de computer en neemt een aantal minuten in beslag. Een goede tactiek is om het aantal lijnen en curves in uw illustratie te beperken. Gebruik de opties voor optimaliseren, vereffenen en rechttrekken van de illustraties in het menu Wijzigen> Vorm om uw illustratie te vereenvoudigen. Dit vereenvoudigt het renderen en verkort de publicatietijd.