Erstellen einer interaktiven Animation mit der WebGL-Laufzeit-API   

Im Folgenden finden Sie eine detaillierte Anleitung für die ersten Schritte in der Flash WebGL-Laufzeit-API und das Hinzufügen von Interaktivität zu Ihrer Animation. In diesem Lernprogramm beginnen Sie mit einer einfachen FLA-Datei und nutzen die API, um auf der Bühne Movieclip-Instanzen hinzuzufügen.

  1. Laden Sie die Datei night_webgl.fla herunter und öffnen Sie sie in Adobe Flash Professional CC 2014. Sie sehen, dass die Datei ein Bitmap-Bild eines nächtlichen Himmels auf der Bühne enthält.

  2. Testen Sie den Film, indem Sie STRG+Eingabetaste (Windows) bzw. Befehls- + Eingabetaste (Mac) drücken. Das Bitmap wird in einem Browserfenster angezeigt.

  3. Navigieren Sie zu dem Ordner, der die .fla-Datei enthält. Nach der Veröffentlichung sind die folgenden Dateien und Ordner vorhanden:

    • Die Datei night_webgl.html
    • Der Ordner „lib“, der die WebGL-Laufzeit-JavaScript-Bibliothek enthält
    • Der Ordner „assets“, der die für das Rendern der Animation erforderlichen Elemente enthält
  4. Kehren Sie zu Flash Professional zurück. Im Bedienfeld „Bibliothek“ sehen Sie den Movieclip „Star“, der eine einfache Animation eines Sterns mit modulierter Transparenz enthält.  

  5. Doppelklicken Sie im Bedienfeld „Bibliothek“ auf die Spalte „Verknüpfung“ neben dem Movieclip „Star“ und geben Sie „star“ ein. In diesem Schritt wird der Verknüpfungsname angegeben, mit dem über die API zur Laufzeit Instanzen dieses Movieclips erstellt werden können. Zusätzlich wird sichergestellt, dass dieser Movieclip veröffentlicht wird, auch wenn er nicht auf der Bühne verwendet wird.

  6. Öffnen Sie die HTML-Datei und fügen Sie die folgenden Zeilen nach der Zeile mit dem Tag <Canvas> hinzu. Dadurch wird der HTML-Datei eine Schaltfläche hinzugefügt und ein Platzhalter für die Anzeige der erstellten Sterne erstellt.

    <button onclick="onAdd();">Add</button>
    <p id="count"></p>
  7. Fügen Sie den folgenden Code nach der Funktion handleComplete() ein:

    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 passieren mehrere Dinge:

    • Die Variable „player“ referenziert eine Instanz des WebGL-Players und ist die Fassade der API.
    • Ein Verweis auf die SceneGraphFactory wird abgerufen. Er wird dazu verwendet, Instanzen des Movieclips zu erstellen.
    • Movieclip-Instanzen werden mit der Funktion createMovieClipInstance() und durch Weitergabe des in Flash angegebenen Verknüpfungsnamens erstellt.
    • Ein Verweis auf die Bühne (root timeline) wird vom Player abgerufen.
    • Die neue Movieclip-Instanz wird mit der Funktion addChildAt() als untergeordnetes Element der Bühne hinzugefügt. Durch die Weiterleitung von 0 an diese Funktion wird das untergeordnete Element über allen anderen untergeordneten Elementen auf der Bühne hinzugefügt (über dem Bitmap).
    • Die Position und Größe des Sterns werden mit der Matrix-Klasse festgelegt. 
  8. Speichern Sie Ihre Änderungen an der HTML-Datei.

  9. Um zu verhindern, dass Flash die während der Veröffentlichung an der HTML vorgenommenen Änderungen überschreibt, deaktivieren Sie im Dialogfeld „Veröffentlichungseinstellungen“ das Kontrollkästchen „HTML überschreiben“.

  10. Testen Sie den Film erneut. Dieses Mal wird im Browser die Schaltfläche „Add“ (Hinzufügen) unter dem Hintergrundbild angezeigt. Klicken Sie mehrmals auf Add, um der Bühne Sterne hinzuzufügen.

Hinweis:

Sie können das fertige Beispiel hier herunterladen.

Herunterladen

night_webgl

Hinweis:

  • Da Sie die WebGL-Animation auf einem Canvas in der HTML rendern, können Sie die Umgebungs-HTML nach Belieben anpassen. In diesem Beispiel zählen wir mit, wie viele Sterne erstellt wurden.
  • Das obige Beispiel soll Sie in die ersten Schritte bei der Erstellung interaktiver Animationen und Spiele einführen. Auf der Seite mit der Dokumentation zur WebGL-Laufzeit-API erfahren Sie mehr über andere Möglichkeiten, die Elemente in der Szene zu steuern.
  • Wenn Sie Inhalte veröffentlichen, konvertiert Flash das Bildmaterial in ein GPU-freundliches Format. Da dieser Vorgang ressourcenintensiv ist, kann er einige Minuten dauern. Idealerweise beschränken Sie die Anzahl der Linien und Kurven im Bildmaterial. Sie können Ihr Bildmaterial einfach halten, indem Sie es mit den Optionen unter „ Modifizieren > Form“ optimieren, glätten und begradigen. Dadurch erhöhen Sie die Rendering-Geschwindigkeit und reduzieren die für die Veröffentlichung nötige Zeit.

Dieses Werk unterliegt den Bedingungen der Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.  Twitter™- und Facebook-Beiträge fallen nicht unter die Bedingungen der Creative Commons-Lizenz.

Rechtliche Hinweise   |   Online-Datenschutzrichtlinie