Animationen

movingposters.com ermöglicht die Animation von Medien-Elementen einer (Multimedia-)Szene.

Zu diesem Zweck verwendet der Benutzer die Web-Applikation "Szenen-/Animations-Editor" auf unserer Webseite.

Animation von Multimedia-Szenen

Auswahl des Szenen-/Animations-Editors

Nach einer erfolgreichen Anmeldung kann der Benutzer durch Klick auf "Editoren" im linksseitigen Hauptmenü die Webseite öffnen, auf der man den Szenen-/Animations-Editor über einen Button am oberen Rand auswählen kann. Nach Klick auf diesen Button wird der Szenen-/Animations-Editor als "ausgewählt" markiert.

Aktivierung der Animationsunterstützung

Unterhalb der Leinwand befindet sich der Button "Animation". Nach Klick auf diesen Button wird die Zeitlinie der aktuellen Szene angezeigt. Die Zeitlinie zeigt zunächst den Status zu Beginn der Szene. Dieser obligatorische Startzustand wird zu Beginn der Zeitlinie als senkrechter Balken angezeigt. Die Länge der Zeitlinie in Sekunden ergibt sich aus dem angezeigten Wert des Feldes, das rechts am Ende der Zeitlinie angezeigt wird. Die voreingestellte Standardlänge einer Szene ist 15 Sekunden. Das heißt, eine Szene würde gemäß der Voreinstellung 15 Sekunden lang abgespielt werden.

Einstellung der Präsentationsdauer

Der Nutzer kann direkt einen neuen Sekunden-Wert für die Dauer der Ausspielung einer Szene eingeben.

Eine Animation bezieht sich auf die Änderung einer Eigenschaft eines Medienelementes im zeitliche Ablauf der Präsentation einer Szene. Zur Definition einer Animation müssen mindestens zwei verschiedene Zustände (Start- und End-Zustand) der Szene definiert werden. Explizit definierte Zustände einer Szene, nennen wir im Weiteren "Keyframe". Auf Basis einer Folge von zeitlich sortierten "Keyframes" kann der Benutzer die Animation(en) einer Szene modellieren.

Hinzufügen von Key-Frames zur Zeitlinie

Im einfachsten Fall fügt der Anwender, durch einen Doppel-Klick mit der Maus, einen Key-Frame am Ende der Zeitlinie ein. Nun besitzt die Szene Keyframes für den Start und das Ende ihrer Präsentationszeit. Der hinzugefügte Keyframe wird durch einen senkrechten interaktiven Balken zunächst in blauer Farbe auf der Zeitlinie angezeigt. In eine Zeitlinie können natürlich weitere Keyframes per Doppel-Klick eingefügt werden.

Hatte die Szene im Start-Keyframe genau ein Medien-Element, dann besitzt sie auch im End-Keyframe genau dieses eine Element. War dieses Element im Start-Keyframe im Fokus (roter Interaktionsrahmen), dann wird dieses Element nach dem Einfügen des Keyframes, innerhalb eines blauen Interaktionsrahmens und leicht transparent dargestellt.

Wechselnde Ansichten einer Szene im zeitlichen Verlauf

Durch einfachen Klick auf das Start-Keyframe kann sich der Anwender die Szene zum Zeitpunkt "0"-Sekunden anzeigen lassen. Durch Klick auf den interaktiven senkrechten Balken des End-Keyframes sieht der Nutzer die Szene am Ende ihrer Präsentationszeit.

Animationsdefinition durch Änderung von Elementeigenschaften in verschiedenen Keyframes

Da bisher keine Eigenschaft eines Elements geändert wurde, wurde auch noch keine Animation definiert. Wird die Szene für 15 Sekunden (durch Klick auf den Button "Vorschau") abgespielt, dann wird lediglich das einzelne Element aus dem Start-Keyframe konstant angezeigt.

Nun selektieren wir den blauen End-Keyframe und verschieben anschließend das auf der Leinwand dargestellte Element mit der Maus. Durch diese Interaktion wird dieses Element fokussiert (roter Interaktionsrahmen), und als "explizit-animations-definierend" und damit für dieses Keyframe als "aktiv" markiert. Daher wird es nun im End-Key-Frame mit seiner geplanten Deckkraft dargestellt. Spielt man die Szene ab, dann sieht man, dass das Element animiert wird und während 15 Sekunden von seiner Start- zur End-Position wandert. Keyframes mit aktivem Element werden bei Anwahl auf der Zeitlinie rot dargestellt.

Animationen werden also auf Basis der Berechnung von Zwischenwerten von "explizit-animations-definierenden" Elementeigenschaften beim Übergang von Keyframe zu Keyframe definiert. Die von movingposters.com unterstützten Medienspieler (Webbrowser bzw. Android App) animieren Szenen während des Abspielens auf Basis dieser animationsdefinierenden Keyframe-Daten.

"Zombie" versus "aktives" Element eines Keyframes

Solange keine Eigenschaft eines Elementes zum Zeitpunkt des Keyframes explizit-animations-definierend wirkt wird dieses Element als "Zombie", das heißt leicht transparent und sobald es selektiert (fokussiert) wurde, mit blauem Interaktionsrahmen dargestellt. Wird allerdings auch nur eine Eigenschaft des Elementes geändert, dann gilt es als "aktiviert" für diesen Keyframe und wird im weiteren "normal" dargestellt.

Der Grund für die Unterscheidung zwischen aktiven und "Zombie" Elementen eines Keyframes liegt in der von movingposters.com angestrebten einfachen Bedienbarkeit des Animations-Editors. Typischerweise wird man mit movingposters.com nur einige wenige Elemente pro Szene animieren. Aus Gründen der Übersichtlichkeit interagieren unsere Nutzer deshalb mit nur einer Zeitlinie. Zum Zeitpunkt des ausgewählten Keyframes werden alle Szenen-Elemente auf der Leinwand dargestellt.

Zombie-Elemente eines Keyframes werden nur implizit oder gar nicht animiert, das heißt sie sind an den Animationsänderungen eines Keyframes nicht beteiligt. Die transparente Darstellung der Zombie Elemente lenkt deshalb die Aufmerksamkeit des Nutzers auf die relevanten Elemente eines Keyframes.

Hinweis: Komplexe Animations-Editoren verwenden typischerweise eine Zeitlinie pro animierter Eigenschaft und Element. Bei Auswahl einer solchen Sub-Zeitlinie wird die Szenen-Darstellung auf die ausgewählte Elementeigenschaft reduziert. Dies erschwert einem Nutzer jedoch den Überblick über die gesamte Szene zu behalten.

Verschieben eines Keyframes entlang der Zeitlinie

Keyframes können entlang der Zeitlinie zwischen ihren jeweils benachbarten Keyframes verschoben werden. Das heißt der Zeitpunkt, aber nicht die Reihenfolge der Keyframes, kann durch Verschieben geändert werden. Alternativ kann über den Button "Edit Keyframe" ein Dialog zur Eingabe des Zeitpunktes des ausgewählten Keyframes in Sekunden aufgerufen werden.

Löschen eines Keyframes

Unterhalb der Zeitlinie befindet sich der Button "Keyframe löschen". Nach Auswahl eines Keyframes, kann dieser durch Klick auf diesen Button aus der Zeitlinie herausgelöscht werden.

Anzeige der Keyframe-Werte

Unterhalb der Reihe von Edit- bzw. Lösch-Buttons des Editors, wird der genaue Zeitpunkt des aktuell ausgewählten Keyframes angezeigt.

 

Animierbare Eigenschaften

Der Szenen-/Animations-Editor ermöglicht die Animation folgender Eigenschaften von Elementen einer (Multimedia-)Szene:

  • xy-Position
  • Deckkraft/Transparenz
  • Farbwerte (nicht bei Bildern und Videos)
  • xy-Größe (nicht bei Texten)
  • Größe der Schrifttype (nur bei Texten)
  • z-Wert
  • Rotation (Funktion nocht nicht freigegeben)

Bei der Animation dieser Eigenschaften werden die Differenzen unterschiedlicher Werte eines Elementes bei aufeinanderfolgenden Keyframes interpoliert.

Zusätzlich zu den interpolierten Eigenschaftswerten ermöglicht der Szenen-/Animations-Editor die keyframe-gesteuerte Schaltung der Sichtbarkeit/Unsichtbarkeit eines Elementes ab dem schaltenden Keyframe. Ist ein Element ab oder während des Keyframes nicht sichtbar, dann wird entsprechend ein leerer Interaktionsrahmen auf die Leinwand gezeichnet.