Blogbeitrag | Interaktivere Webgestaltung mit CreateJS

Blogbeitrag | Interaktivere Webgestaltung mit CreateJS

Von Andreas Kaiser am 31.03.2025

Interaktivität macht digitale Erlebnisse lebendig. Ob Animationen, Spiele oder dynamische Webinhalte – wir erwarten heute mehr als statische Seiten. Eine elegante Lösung, um genau solche interaktiven Inhalte mit HTML5 zu erstellen, bietet CreateJS. Dieser Beitrag gibt einen ersten Einblick in die JavaScript-basierte Suite und beleuchtet einige technische Aspekte.

Was steckt hinter CreateJS?

CreateJS ist vorwiegend eine Suite modularer Bibliotheken und Tools, die Entwickler:innen dabei unterstützen soll für Open-Web-Technologien mithilfe von HTML5 attraktive interaktive Inhalte zu erstellen. Zu den Hauptzielen von CreateJS gehören die einfache Handhabung von Animationen, die Optimierung von Sound- und Grafikmanagement sowie eine effiziente Möglichkeit, interaktive Webanwendungen zu gestalten. Die zentralen Bibliotheken der Suite sind EaselJS, TweenJS, SoundJS und PreloadJS. Ergänzt werden sie durch einige mitgelieferte Tools (das eigenständige Tool Zo, etc.).

Aufbau von CreateJS

Die 4-Säulen von CreateJS

Jede Bibliothek der Suite erfüllt eine spezielle Funktion in der Entwicklung interaktiver Webanwendungen. Hier ein Überblick:

EaselJS
- Diese Bibliothek erleichtert das Arbeiten mit dem HTML5-Canvas-Element. Sie bietet eine objektorientierte API, die das Rendern und Animieren von Grafiken vereinfacht. Besonders für Spiele, Animationen und visuelle Effekte ist EaselJS eine wertvolle Unterstützung.
TweenJS
- Mit TweenJS lassen sich Animationen und Übergänge flüssig gestalten. Die Bibliothek ermöglicht es, Eigenschaften von Objekten über eine bestimmte Zeit hinweg zu verändern, was für interaktive Interfaces und Effekte entscheidend ist.
SoundJS
- Diese Bibliothek kümmert sich um die Audiowiedergabe im Web. Sie stellt sicher, dass Sounds unabhängig vom jeweiligen Browser und dessen unterstützten Formaten zuverlässig abgespielt werden.
PreloadJS
- Da interaktive Inhalte oft viele Ressourcen benötigen (Bilder, Sounds, Daten), sorgt PreloadJS für effizientes Laden und Verwalten dieser Dateien, bevor sie in einer Anwendung genutzt werden.

Bereitgestellte Tools

Zusätzlich zu den Kernbibliotheken bietet CreateJS eine Reihe von Tools, die den Entwicklungsprozess erleichtern:

CreateJS Sandbox: Eine Sammlung von Code-Snippets und Demos, die nicht direkt in die Bibliotheks-Repositories passen. Sie dient als Ressource für Entwickler, um Beispiele und Klassen zu teilen und zu nutzen
Adobe Animate Exporter: Mit dieser Funktion von Adobe Animate können Sie Animationen und Benutzeroberflächen direkt nach CreateJS exportieren. Der generierte Code ist kompakt, lesbar und performant.
Zoë: Dieses Tool konvertiert Flash-Animationen (MovieClips) in das Sprite-Sheet-Format, was die Nutzung von Animationen in CreateJS-Projekten effizienter macht und die Performance verbessert.

Das ist eine Auswahl, die vollständige Liste ist hier aufzufinden: https://createjs.com/tools

Technische Funktionsweise der Bibliotheken

Auf der offiziellen CreateJS-Website (https://createjs.com) findet sich eine ausführliche Dokumentation zu jeder Bibliothek. Die Einbindung der Suite in ein HTML-Dokument erfolgt mit folgendem Code:

<script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>

EaselJS (https://createjs.com/docs/easeljs/modules/EaselJS.html)

<body>
    <canvas id="myCanvas" width="500" height="300"></canvas>

    <script>
        var stage = new createjs.Stage("myCanvas");

        var circle = new createjs.Shape();
        circle.graphics.beginFill("red").drawCircle(0, 0, 30);
        circle.x = 50;
        circle.y = 150;
        stage.addChild(circle);

        createjs.Tween.get(circle, { loop: true })
            .to({ x: 450 }, 1000, createjs.Ease.getPowInOut(4))
            .to({ x: 50 }, 1000, createjs.Ease.getPowInOut(4));

        createjs.Ticker.framerate = 60;
        createjs.Ticker.addEventListener("tick", stage);
    </script>
</body>

Zuerst wird eine neue Stage (Bühne) erstellt, die auf einem <canvas>-Element basiert. Danach können verschiedene grafische Elemente wie Formen, Bilder oder Texte hinzugefügt werden. Mithilfe von TweenJS lassen sich Animationen einfach umsetzen, indem Eigenschaften von Objekten über eine bestimmte Zeit verändert werden. Die Ticker-Funktion sorgt schlussendlich dafür, dass die zuvor erstelle Bühne kontinuierlich aktualisiert wird.

TweenJS (https://createjs.com/docs/tweenjs/modules/TweenJS.html)

target.alpha = 0;
createjs.Tween.get(target)
    .to({ alpha: 1 }, 1000)
    .call(handleComplete);

function handleComplete() {
    console.log("Tween abgeschlossen!");
}

Mit target.alpha wird zuerst die Transparenz des Objekts eingestellt. Über createjs.Tween.get wird dann ein Tween erstellt, das die alpha-Eigenschaft innerhalb von 1000 ms auf 1 animiert, wodurch das Objekt sichtbar wird. Nach Abschluss der Animation wird mit .call(handleComplete) die Funktion handleComplete() aufgerufen.

SoundJS (https://createjs.com/docs/soundjs/modules/SoundJS.html)

createjs.Sound.alternateExtensions = ["mp3"];
 createjs.Sound.on("fileload", this.loadHandler, this);
 createjs.Sound.registerSound("path/to/mySound.ogg", "sound");
 function loadHandler(event) {
     var instance = createjs.Sound.play("sound");
     instance.on("complete", this.handleComplete, this);
     instance.volume = 0.5;
 }

Eine alternative Dateiendung wird festgelegt, um unterschiedliche Audioformate zu unterstützen. Danach wird eine Sounddatei registriert, und eine Funktion wird ausgeführt, sobald der Sound geladen ist. Mit createjs.Sound.play() kann die Wiedergabe gestartet werden, während Einstellungen wie Lautstärke angepasst und Ereignisse wie das Ende der Wiedergabe überwacht werden.

PreloadJS (https://createjs.com/docs/preloadjs/modules/PreloadJS.html)

 var queue = new createjs.LoadQueue();
 queue.installPlugin(createjs.Sound);
 queue.on("complete", handleComplete, this);
 queue.loadFile({id:"sound", src:"http://path/to/sound.mp3"});
 queue.loadManifest([
     {id: "myImage", src:"path/to/myImage.jpg"}
 ]);
 function handleComplete() {
     createjs.Sound.play("sound");
     var image = queue.getResult("myImage");
     document.body.appendChild(image);
 }

Um Ressourcen mit PreloadJS zu laden, wird eine Instanz von createjs.LoadQueue erstellt. Dateien können entweder einzeln mit loadFile() oder gebündelt mit loadManifest() zur Warteschlange hinzugefügt werden. Sobald alle Ressourcen geladen sind, wird die angegebene Callback-Funktion durch das complete-Event ausgelöst. Wenn nötig, können mit queue.installPlugin Plugins integriert werden, um spezifische Dateiformate wie Audiodateien zu verarbeiten.

Fazit

An CreateJS schätze ich besonders, dass es eine kompakte und dennoch leistungsstarke Lösung für interaktive Webinhalte bietet. Die einfache Handhabung und die gut strukturierte API machen die Arbeit mit Animationen, Sounds und dem HTML5-Canvas besonders angenehm. Dank Tools wie Zoë oder dem Adobe Animate Exporter lassen sich Inhalte schnell integrieren, ohne komplizierte Workflows.