Erstellen von Zeitachsen

Ein wichtiger Aspekt von Ebenen ist der, dass Sie an beliebiger Stelle auf einer Seite positioniert werden können. Unter Verwendung von JavaScript ist es sogar möglich, die Position einer Ebene zu ändern, nachdem die Seite in einem Browser geöffnet wurde. Zeitachsen machen sich diese Tatsache zu Nutze. Durch die Erstellung einer Zeitachse beschreiben Sie eine Sequenz positionsbezognener Änderungen bezüglich einer oder mehrerer Ebenen, die der Browser zu einem bestimmten Zeitpunkt nach dem Laden der Seite ausführt. Sie können eine Zeitachse so konfigurieren, dass sie automatisch gestartet wird, wenn der Browser das Laden der Seite abgeschlossen hat, oder die Zeitachse wird durch eine Skriptaktion gestartet, die mit einem Ereignis verknüpft wurde (z.B. das Klicken auf ein spezifisches Bild).

Eine Zeitachse besteht aus einer Folge von sogenannten Frames, vergleichbar den Einzelbildern eines Films. Wenn ein Browser eine Zeitachse wiedergibt, durchläuft er der Reihenfolge nach und mit einer bestimmten Geschwindigkeit jeden einzelnen Frame der Zeitachse. Jeder Frame beschreibt den Status einer oder mehrerer Ebenen zu einem bestimmten Zeitpunkt. Der Status einer Ebene umfasst deren Position, Größe, Sichtbarkeit und Z-Index.

Eine Zeitachse enthält einen oder mehrere Sprites, die zu unterschiedlichen Zeitpunkten wiedergegeben werden, ähnlich wie die Noten in einer Partitur. Jeder Sprite steuert den Bewegungs- und/oder Änderungsstatus einer Ebene über eine bestimmte Anzahl von Frames hinweg.

Namo Web Editor 5.script.timeline.1.2 Erstellen von Zeitlinien

Beispiel einer Zeitachse mit vier Sprites

Die oben abgebildete Beispielzeitachse umfasst vier Sprites (die lavendelfarbenen Leisten). Diese sind nach den Ebenen benannt, die sie steuern. Wie ersichtlich ist, können Sprites sich überschneiden – d.h. es können gleichzeitig zwei oder mehr Ebenen in Bewegung sein oder den Status ändern. Zwei Sprites können dieselbe Ebene steuern, in diesem Fall dürfen sich die Sprites jedoch nicht überschneiden.

Jeder Sprite verfügt über mindestens zwei Hauptframes – Frames, an denen die Position bzw. der Status der verknüpften Ebene explizit durch den Benutzer festgelegt wird. Hauptframes werden durch große weiße Punkte auf dem Sprite gekennzeichnet. Bei dem ersten und dem letzten Frame eines Sprite muss es sich um Hauptframes handeln. Sie können einem Sprite an beliebiger Stelle weitere Hauptframes hinzufügen. In den Frames zwischen den Hauptframes wird die Position bzw. der Status der Ebene durch Namo WebEditor interpoliert. Diese Tatsache führt dazu, dass Sie lediglich für zwei Punkte innerhalb der Zeitachse die Position oder den Status einer Ebene festlegen müssen, um eine flüssige Animation zu erzeugen; Namo WebEditor kümmert sich um die weiteren, zwischen den zwei festgelegten Punkten befindlichen Frames.

Zusätzlich zu der Tatsache, dass Sie die Position oder den Status einer oder mehrerer Ebenen über eine Zeitachse hinweg steuern können, ist es möglich, über spezifische Frames einer Zeitachse Aktionen auszulösen. Wenn eine Zeitachse beispielsweise den zwanzigsten Frame erreicht, können Sie eine Aktion auslösen, durch die der Browser eine weitere Zeitachse startet oder ein ausgeblendetes Element anzeigt.

In diesem Abschnitt

Erstellen und Bearbeiten von Zeitachsen

Starten und Stoppen von Zeitachsen

Verknüpfen von Aktionen mit einer Zeitachse

Verwandte Themen

Verwenden von Ebenen

Arbeiten mit Aktionen und Ereignissen

Erstellen von Zeitlinien