Lebendige Webseiten mit Adobe Edge Animate

Transkript

1 Lebendige Webseiten mit Adobe Edge Animate

2 Simon Widjaja ist Creative Coder, Autor und IT-Trainer aus purer Leidenschaft. Als erfahrener Flash-Entwickler und EdgeDesigner der ersten Stunde führt er den Leser anhand vieler praxisnaher Beispiele in das neue Kreativwerkzeug ein. Als Wahlkölner lebt, schreibt und bastelt er mit seinem Team an zahlreichen Erweiterungen für Edge Animate wie der Soundund CMS-Integration oder Adaptive Layouts. Auf edgedocks. com, Adobe TV sowie im Magazin weave veröffentlicht er regelmäßig News, Tutorials und Videos rund um Adobe Edge Tools & Services.

3 Simon Widjaja Lebendige Webseiten mit Adobe Edge Animate Mit Webstandards plattformübergreifend entwickeln und gestalten

4 Lektorat: Gabriel A. Neumann Copy-Editing: Alexander Reischert, Redaktionsbüro Aluan, Köln Herstellung: Friederike Diefenbacher-Keita Umschlaggestaltung: Helmut Kraus, Druck und Bindung: M.P. Media-Print Informationstechnologie GmbH, Paderborn Bibliografische Information der Deutschen Nationalbibliothek Die Deutsche Nationalbibliothek verzeichnet diese Publikation in der Deutschen Nationalbibliografie; detaillierte bibliografische Daten sind im Internet über abrufbar. ISBN Auflage 2013 Copyright 2013 dpunkt.verlag GmbH Ringstraße 19B Heidelberg Die vorliegende Publikation ist urheberrechtlich geschützt. Alle Rechte vorbehalten. Die Verwendung der Texte und Abbildungen, auch auszugsweise, ist ohne die schriftliche Zustimmung des Verlags urheberrechtswidrig und daher strafbar. Dies gilt insbesondere für die Vervielfältigung, Übersetzung oder die Verwendung in elektronischen Systemen. Es wird darauf hingewiesen, dass die im Buch verwendeten Soft- und HardwareBezeichnungen sowie Markennamen und Produktbezeichnungen der jeweiligen Firmen im Allgemeinen warenzeichen-, marken- oder patentrechtlichem Schutz unterliegen. Alle Angaben und Programme in diesem Buch wurden mit größter Sorgfalt kontrolliert. Weder Autor noch Verlag können jedoch für Schäden haftbar gemacht werden, die im Zusammenhang mit der Verwendung dieses Buches stehen

5 V Vorwort»WTF? Noch ein weiteres Banner-Werkzeug?«so in etwa lautete die erste Reaktion vieler Webdesigner, als Adobe das neue Animationswerkzeug im August 2011 vorstellte. Im ersten öffentlichen Preview fühlte man sich in die Zeiten des Web-Animations-Klassikers Flash 4 zurückversetzt. Doch das Entwicklungstempo, das Adobe vorgelegt hat, war und ist enorm. Spätestens die Einführung von Symbolen und Interaktionsmöglichkeiten in Preview 3 und 4 haben die eigentlichen Potenziale dann zumindest in Ansätzen offengelegt. So spuckt Edge Animate nicht nur 100 Prozent Webstandards aus, sondern basiert auch noch auf der populären JavaScript-Library jquery. Gerade die Wahl von jquery öffnet Edge Animate in Sachen Erweiterbarkeit viele Türen. Aufgebautes Wissen und vorhandene jquery-plug-ins können so ohne Weiteres direkt in Edge Animate wiederverwendet werden, so dass man als Designer bzw. Coder auch über die vorhandenen Kernfunktionen von Edge Animate hinaus mit gewissen Workarounds eigentlich alles realisieren kann, was die Webstandards zu bieten haben. Mit diesem Wissen im Gepäck habe ich mich in zahlreiche Experimente gestürzt, Edge Animate aufgebohrt und mit zahlreichen Bibliotheken und Frameworks erweitert. Diese Erkenntnisse möchte ich in diesem Buch mit Ihnen teilen. Köln, im Frühjahr 2013 Simon Widjaja

6 Einführung

7 2 1 Einführung. Adobe sagt Danke Für das wichtige Feedback der Community bedankt sich Adobe. So ist die erste Version von Edge Animate kostenlos erhältlich. Erst für das zweite Release werden voraussichtlich Lizenzgebühren fällig. Statische Webseiten und langweilige Bleiwüsten gehören im Web schon lange der Vergangenheit an. Längst erwarten Auftraggeber sexy Interfaces und Wow-Effekte, bei denen einfache Transitions, komplexe Animationen, aber auch einfache Interaktionsmöglichkeiten eine zentrale Rollen spielen. Auf dieser Spielwiese haben sich Webdesigner in der letzten Dekade dank der Adobe-Flash-Technologie austoben können. Doch mit der Einführung von HTML5 und CSS3 und den damit verfügbaren neuen Funktionen wie etwa dem Canvas oder CSS3-Transitions bieten mittlerweile auch die guten alten Webstandards einfache Möglichkeiten für interaktive Animationen. Während die kreative Coder-Szene bereits fleißig mit Animations-Bibliotheken und -Frameworks experimentiert und sich mit beeindruckenden Werken zu Wort meldet, stehen die visuell orientierten Webdesigner und Animationskünstler mangels professioneller Werkzeuge noch in den Startlöchern. Das will der Kreativ-Riese Adobe mit dem neuen Werkzeug»Edge Animate«für interaktive Animationen ändern, das bei der Ausgabe ausschließlich auf offene Webstandards setzt. Wie man es von Adobe gewohnt ist, wurde die kreative Community sehr früh in den Entstehungsprozess einbezogen. So konnte Adobe auf der einen Seite sicherstellen, dass sich Edge Animate so nah wie möglich an der zukünftigen Zielgruppe orientiert. Auf der anderen Seite hatten Benutzer Gelegenheit, das Tool frühzeitig in Workflows zu integrieren und Adobe Bugs oder Feature Requests mitzuteilen. Eine Win-win-Situation par excellence, die aufgrund einer sehr agilen Entwicklungsstrategie seitens Adobe bewusst etabliert wurde. So gewährte Adobe in sieben öffentlichen Previews vorab tiefe Einblicke. Während die ersten Previews noch auf simple Animationen beschränkt waren, ermöglicht die finale Version bereits komplexe und verschachtelte Animationen dank Symbolen, zahlreiche Interaktionsmöglichkeiten und sogar das Einbinden von Webfonts. Allerhöchste Zeit also, mal einen genaueren Blick auf das vielversprechende Autorenwerkzeug zu werfen.

8 Worum es in diesem Buch geht Worum es in diesem Buch geht Das Autorenwerkzeug Edge Animate setzt auf offene Webstandards. Und diese sind mittlerweile sehr verbreitet und beschränken sich längst nicht mehr ausschließlich auf den Browser. So können Kreationen, die mit Edge Animate erstellt wurden, im Browser sowie in Apps auf mobilen Endgeräten, aber auch in digitalen Publikationen im Rahmen der Adobe Digital Publishing Suite oder von Apple ibooks Author zum Einsatz kommen. Um Sie während der Konzeption und Animation mit Edge Animate zu unterstützen und Ihnen Lösungsansätze über die Bordmittel des Autorenwerkzeugs hinaus aufzuzeigen, entsprechen die Kapitel dieses Buches dem gängigen Arbeitsablauf. Schritt 1: Einführung Zunächst erhalten Sie grundlegende Informationen zum Status quo der Webstandards, die für das Verständnis von Edge Animate und dessen Einsatzgebieten relevant sind. Schritt 2: Das Autorenwerkzeug kennenlernen Im zweiten Schritt lernen Sie die Oberfläche von Edge Animate mit ihren zahlreichen Funktionen kennen. Außerdem wird hier auf die verschiedenen Zielgruppen und Einsatzgebiete eingegangen.. Digital Publishing Suite Die DPS ist eine InDesign-Funktion zur Erstellung von digitalen Publikationen für Tablets wie etwa das ipad. Hier kommt unter anderem HTML5 bei der Erstellung von Artikeln zum Einsatz, was auch die Türen für Edge- Animate-Kompositionen öffnet.. ibooks Author Mit ibooks Author hat Apple eine Konkurrenz zur DPS von Adobe ins Rennen geschickt. Hiermit können Publikationen im ibookstore erstellt werden. Schritt 3: Kreation Im dritten Schritt werden Sie die Funktionen zur Erstellung von visuellen Elementen innerhalb von Edge Animate kennenlernen und erfahren, wie Sie verschiedene Assets (Bilder und Fonts) verwenden und komplexere Layouts erstellen können. Schritt 4: Animation Neben der Zeitleiste und dem Pin werden Sie hier alles kennenlernen, was benötigt wird, um die zuvor kreierten Kompositionen mittels Schlüssbildern zum Leben zu erwecken. Schritt 5: Interaktion Im fünften Schritt werden Sie den Befehlssatz für Interaktionen, die»edge Animate API«, kennenlernen und in die Lage versetzt, verschiedene Aktionen zu implementieren.

9 4 1 Einführung Schritt 6: Publikation Dieser Schritt beschäftigt sich mit den verschiedenen Veröffentlichungsmöglichkeiten, die Ihnen in Edge Animate zur Verfügung stehen, und zeigt, welche Vorbereitungen (z.b. Preloader) notwendig sind, um eine Komposition erfolgreich im Web oder innerhalb einer digitalen Publikation zu veröffentlichen. Außerdem erfahren Sie, wie Ihre kreative Arbeit in Content-Management-Systeme integriert werden kann. Schritt 7: Tipps für Fortgeschrittene Nachdem Sie die Kernfunktionen von Edge Animate kennengelernt haben, möchte ich Ihnen noch verschiedene Erweiterungsmöglichkeiten mit auf den Weg geben, ohne die viele reale Projekte nicht auskommen. 1.2 Moving Target: Offene Webstandards. HTML5: Stand Den aktuellen Stand der HTML5- Spezifikation können Sie auf der offiziellen Seite des W3C einsehen: html HTML5 ist eines der zahlreichen Buzzwords, die aktuell die produzierende Webzunft beherrschen. Doch mit HTML5 ist eigentlich mehr gemeint als nur die nächste Generation der offenen Markup-Sprache. HTML5 meint nicht selten den gesamten Stack der offenen Webstandards, also HTML, CSS und JavaScript. Der Schein trügt: Auch wenn das Dreigestirn bereits als Webstandard bezeichnet wird, sind alle drei Technologien in ihrer neuesten Version noch gar nicht als Standard verabschiedet worden. Somit sind diese Technologien so genannte Moving Targets. HTML5 soll beispielsweise erst voraussichtlich 2014»Recommendation«-Status vom W3C (World Wide Web Consortium) erhalten. Auch wenn es noch Moving Targets sind, wird ein Großteil der neuen Funktionen bereits in den modernen Browsern wie Firefox, Chrome, Safari oder Internet Explorer 9/10 unterstützt. Dieses Wissen ist wichtig, um nachvollziehen zu können, wieso Edge Animate die eine oder andere Funktion noch nicht vollständig oder gar nicht unterstützt. Die Audio-Wiedergabe ist ein sehr gutes Beispiel hierfür. Mit HTML5 lassen sich zwar grundsätzlich Sound-Files abspielen, die Diskrepanz zwischen den verschiedenen Browsern ist jedoch noch so groß, dass eine simple Sound- Integration nicht ohne Weiteres möglich ist. Bevor hier eine unvollständige Lösung angeboten wird, die im Alltag zahlreiche Probleme mit sich bringen würde, hat Adobe offenbar vorerst bewusst auf diese Funktion verzichtet. Sobald die Browser-Problematiken geringer werden, ist sicherlich mit einer Sound-Unterstützung zu rechnen. Bis dahin können Sie jedoch auch jetzt schon auf zusätzliche Bibliotheken wie etwa SoundJS oder Edge Commons zurückgreifen, um fehlende Funktionen auf eigene Faust zu implementieren.

10 Web-Animationen: Status quo Web-Animationen: Status quo Einige der in HTML5 und CSS3 neu eingeführten Funktionen bringen gerade auf dem Feld der Web-Animationen neue Möglichkeiten mit sich. So weisen die entsprechenden Vorgängerversionen genau hier sehr große Defizite auf. Mit dem bereits erwähnten Canvas-Tag und den CSS-Regeln Transitions und Animations lassen sich bereits viele Effekte erstellen, die vorher nur zusätzlichen Plug-Ins wie dem Flash Player vorbehalten waren. Mittlerweile existieren bereits zahlreiche Grafik- und Animations-Bibliotheken in Form von JavaScript-Erweiterungen für Creative Coder: CreateJS ( RaphaelJS ( GSAP JS ( Diese Bibliotheken haben jedoch alle eines gemeinsam: Sie verfolgen einen codegetriebenen Ansatz und setzen somit mehr oder weniger umfangreiche Kenntnisse in der JavaScript-Programmierung voraus. Edge Animate dagegen gehört zu einer neuen Gattung und verfolgt einen rein visuellen Ansatz. Gemäß dem Motto»What you see is what you get«(wysiwyg) können besonders komplexe Animationschoreografien direkt, ohne das ständige Umdenken in Code, erstellt werden. Weitere Tools dieser Gattung sind: Hype ( Sencha Animator (

11 Animation

12 92 4 Animation Nachdem Sie nun die wichtigsten Funktionen und Techniken der Kreation kennengelernt haben, werden Sie in diesem Kapitel die Animationsmöglichkeiten mit Zeitleiste, Pin und Schlüsselbildern kennenlernen. 4.1 Die Zeitleiste Während die Bühne in Edge Animate die räumliche Anordnung der einzelnen grafischen Elemente zeigt, können Sie in der Zeitleiste die Veränderung verschiedenster Eigenschaften über einen definierten Zeitraum hinweg sichtbar machen. Dazu spielen Sie, wie Adobe es nennt, die Zeitleiste ab Schlüsselbilder (Keyframes) In der Zeitleiste können mit der Hilfe von Schlüsselbildern Zustände von Elementen an bestimmte Zeitpunkte gekoppelt werden. Wenn nicht explizit abgeschaltet, werden die Übergänge, also die Einzelbilder zwischen den Schlüsselbildern, durch Interpolationstechniken automatisch berechnet, dies nennt man auch Tweening. Wenn Sie also beispielsweise ein Element auf der x-achse mittels zweier Schlüsselbilder von 100 px auf 200 px animieren, werden die notwendigen Zwischenschritte automatisch berechnet. Grundsätzlich können Sie in Edge Animate fast alle Eigenschaften über Schlüsselbilder animieren. Zu den wenigen Eigenschaften, die nicht animiert werden können, gehören z.b. die Schriftstärke, Textausrichtung und der darzustellende Mauszeiger. Schlüsselbilder können auf verschiedene Weise der Zeitleiste hinzugefügt werden: Keyframes im Eigenschaftsinspektor setzen Um den Wert einer Eigenschaft wie beispielsweise einer Koordinate, der Schriftgröße oder der Füllfarbe für einen bestimmten Zeitpunkt zu setzen, ziehen Sie einfach den Abspielkopf an die gewünschte Stelle und klicken dann im Eigenschaftsinspektor auf den kleinen Diamanten (s. Abbildungen) neben der jeweiligen Eigenschaft. Haben Sie auf diese Weise ein Schlüsselbild gesetzt, erscheint dieses als weiße Raute auf der Zeitleiste. Wenn für die entsprechende Eigenschaft noch keine Schlüsselbilder gesetzt wurden, wird eine neue Spur für die Eigenschaft hinzugefügt. Besteht diese Spur dagegen bereits, wird das Schlüsselbild dieser hinzugefügt.

13 Die Zeitleiste 93 Abbildung 4.1 Schlüsselbilder über das Diamantensymbol im Eigenschaftsinspektor setzen Keyframes in der Zeitleiste auf Spurebene setzen Sobald eine Animationsspur für eine Eigenschaft existiert, können weitere Schlüsselbilder direkt in der Zeitleiste hinzugefügt werden. Auch hier steht Ihnen der kleine Diamant rechts neben der entsprechenden Eigenschaft zur Verfügung. Abbildung 4.2 Schlüsselbilder auf Spurebene in der Zeitleiste setzen Keyframes automatisch setzen Häufig werden Animationssequenzen in der tatsächlichen Reihenfolge erstellt. Hierfür bietet Edge Animate die Funktion»Automatischer Schlüsselbildmodus«. Dieser standardmäßig aktive Modus setzt automatisch Schlüsselbilder, sobald ein Element verschoben oder eine Eigenschaft verändert wird. Dieses Verhalten ist jedoch erst dann aktiv, wenn für die betroffene Eigenschaft bereits eine Animationsspur existiert, also mindestens ein Schlüsselbild gesetzt wurde. Auf diese Weise können Sie neue Elemente zunächst beliebig auf der Bühne verschieben und in die gewünschte Position rücken, ohne dass direkt ggf. unerwünschte Schlüsselbilder entstehen. In diesem Modus kann sehr schnell animiert werden, man muss jedoch stets mit Bedacht Änderungen vornehmen, um nicht ungewollte Animationssequenzen zu erzeugen. Einen Sonderfall stellt die Option»Automatischer Übergangsmodus«dar. Diese Option wird im Alltag eher selten gebraucht. Sollten Sie jedoch einmal ein unmittelbares Setzen der Eigenschaften wünschen, also die automatische Berechnung der Übergänge zwischen zwei Zuständen abschalten wollen, so ist diese Option die richtige Wahl. Ein beispielhaftes Szenario für diesen Modus ist eine Spritesheet-Animation (Daumenkinoeffekt), bei der in schnellem Rhythmus der Ausschnitt eines Bildes verändert werden soll, ohne dass das Bild über einen längeren Zeitraum sichtbar bewegt werden soll (siehe Praxisbeispiel Charakteranimationen mit Spritesheets Abschnitt 4.5.4).

14 94 4 Animation Abbildung 4.3 (1) Automatischer Schlüsselbildmodus (2) Automatischer Übergangsmodus Keyframes mit dem Pin setzen Der so genannte Pin (Stecknadel) ist ein zweiter imaginärer Abspielkopf, der eine Animation zwischen zwei gewünschten Zeitpunkten erleichtert. Immer wenn Sie zu einem Punkt hin oder von einem Punkt weg animieren möchten, ist der Pin das richtige Werkzeug. Es gibt drei Möglichkeiten, den Pin zu aktivieren. Zum einen gibt es im Menü der Zeitleiste eine Schaltfläche für den Pin. Außerdem können Sie den Pin noch mit einem Doppelklick auf den primären Abspielkopf sowie über die P-Taste aktivieren bzw. deaktivieren. Achten Sie darauf, nach dem Animieren den Pin wieder zu deaktivieren, da sonst sehr schnell aus Versehen ungewollte Schlüsselbilder gesetzt werden können. Die nachstehenden Abbildungen verdeutlichen die Arbeitsweise mit dem Pin. (1) zeigt den Normalzustand mit ausgeschaltetem Pin. Sobald der Pin aktiviert wird (2), erscheint unmittelbar über dem gelben Abspielkopf der unscheinbare blaue Pin. Nun kann der Pin beliebig auf der Zeitleiste verschoben werden (3), so dass ein mit Pfeilen schraffierter Balken sichtbar wird. Der Balken ist in diesem Beispiel blau, da sich der Pin hinter dem eigentlichen Abspielkopf befindet. Wenn Sie nun ein Element verschieben bzw. dessen Eigenschaften verändern, werden die Werte an der Stelle gesetzt, wo sich die rote Linie samt gelbem Abspielkopf befindet. Der ursprüngliche Zustand wird dabei an der Stelle des Pins festgehalten, so dass letztlich ein Übergang zwischen beiden Zuständen hinzugefügt wird (4).

15 Die Zeitleiste 95 Der Pin kann natürlich auch vor den primären Abspielkopf gezogen werden. In diesem Fall erscheint der Richtungsbalken gelb. Während sich also der Pin im blauen Zustand hinter dem Abspielkopf befindet und wir entsprechend vom neu gesetzten Zustand zum ursprünglichen Zustand hin animieren, verhält sich die Animation im gelben Zustand genau andersherum: Wir animieren vom Ursprungszustand zum neuen Zustand hin. Abbildung 4.4 Der Pin (Stecknadel) ist ein zweiter imaginärer Abspielkopf, der das Animieren zwischen zwei Zeitpunkten stark vereinfacht. Abbildung 4.5 Befindet sich der Pin (Stecknadel) vor dem Abspielkopf, so wird die Animationsrichtung entsprechend umgedreht.

16 96 4 Animation Zusatzfunktionen in der Zeitleiste Für ein genaueres Arbeiten in komplexen Kompositionen und umfangreichen Animationssequenzen stehen noch weitere Funktionen innerhalb der Zeitleiste zur Verfügung: Abbildung 4.6 Die Zeitleiste in Edge Animate bietet zahlreiche Zusatzfunktionen wie etwa die Ebenenfilterung oder das Raster. Spuren ein-/ausblenden: Mit dieser Funktion lassen sich sämtliche Animationsspuren temporär ausblenden, so dass nur noch die eigentlichen Ebenen sichtbar sind. Filtern: Im linken unteren Bereich der Zeitleiste befindet sich ein kleines Filter-Icon, mit dem alle Elemente temporär ausgeblendet werden können, die noch keine Animationsspur bzw. Schlüsselbilder besitzen. Einrasten/Ausrichten: Direkt neben dem Filter-Icon befindet sich das standardmäßig aktivierte Magnet-Icon, das das so genannte»snapping«, also das Einrasten des Abspielkopfes auf vorhandenen Schlüsselbildern, aktiviert bzw. deaktiviert. Raster/Rastergröße: Für komplexe Animationschoreografien kann ein Raster als Hilfsmittel innerhalb der Zeitleiste eingeblendet werden. Zum Aktivieren des Rasters klicken Sie einfach auf das Icon mit den drei Rechtecken. Die Abstände des Rasters können Sie über den weißen Pfeil daneben anpassen. Hier stehen verschiedene Voreinstellungen mit den Maßeinheiten Sekunden oder fps (frames per second) zur Verfügung. Die zuvor beschriebene Einrast-Funktion gilt ebenfalls für das Raster. Zoomen: In der rechten unteren Ecke der Zeitleiste befindet sich der Zoom-Slider, der die Größe des aktuell dargestellten Zeitfensters verändert. Der Doppelpfeil links daneben passt das dargestellte Zeitfenster an die tatsächliche Länge der Animation automatisch an Abspielen Haben Sie erste Animationen mit der Hilfe von Schlüsselbildern erzeugt, können Sie diese natürlich direkt innerhalb von Edge Animate anschauen. Dazu steht Ihnen die Play-Taste im linken oberen Bereich der Zeitleiste zur Verfügung. Mit der Space-Taste lässt sich die Animation der aktuellen Zeitleiste ebenfalls starten.

17 Non-lineare Animationen (Easings) Animationssequenzen im Nachhinein verändern Natürlich haben Sie die Möglichkeit, sämtliche erzeugte Animationen im Nachhinein noch zu verändern. Um den Wert eines Schlüsselbildes zu verändern, bewegen Sie einfach den Abspielkopf an die entsprechende Position und ändern den Wert entweder im Eigenschaftsinspektor, auf der Spurebene innerhalb der Zeitleiste oder direkt auf der Bühne. Auch die Dauer einer Animationssequenz kann direkt in der Zeitleiste verändert werden. Hierzu können Sie zum einen die Schlüsselbilder einer einzelnen Animationsspur über den Handzeiger verschieben. Dabei wird nur das jeweils ausgewählte Schlüsselbild verschoben, während alle anderen an Ort und Stelle bleiben. Möchten Sie dagegen eine Sequenz mit mehreren Spuren und Schlüsselbildern als Ganzes strecken oder stauchen, so können Sie den Animationsbalken oberhalb der Schlüsselbilder über den Anfasser mit den zwei Pfeilen verkleinern bzw. vergrößern. Bei diesem Vorgang werden alle untergeordneten Animationen entsprechend neu berechnet.. Auswahl von Schlüsselbildern Um das gewünschte Schlüsselbild sicher auszuwählen, sollten Sie darauf achten, dass das zuvor vorgestellte Einrasten bzw. Snapping aktiviert ist. Ansonsten passiert es schnell, dass gerade bei einer herausgezoomten Zeitleiste ein Zeitpunkt kurz vor bzw. nach dem eigentlichen Schlüsselbild ausgewählt und so ein zusätzliches Schlüsselbild erzeugt wird. Dies führt nicht selten zu unerwünschten Sprüngen innerhalb der Animationssequenz. Abbildung 4.7 Die Dauer einer Animation kann über verschiedene Anfasser direkt in der Zeitleiste verändert werden. 4.2 Non-lineare Animationen (Easings) Mit den zuvor beschriebenen Techniken lassen sich bereits aufwändigere Animationen erzeugen. Sie werden jedoch schnell merken, dass die Animationen häufig etwas leblos bzw. unnatürlich wirken. Dies liegt daran, dass standardmäßig eine lineare Interpolation angewandt wird, die die Animationen sehr mechanisch wirken lässt. Eine lineare Interpolation berechnet die Zwischenwerte, die innerhalb von zwei Schlüsselbildern liegen, gleichmäßig. Dabei fängt eine Animation unmittelbar mit voller Geschwindigkeit an, behält die Anfangsgeschwindigkeit bei, um dann wieder abrupt zu enden. Die Animationen wirken so unnatürlich, weil lineare Bewegungsabläufe so gut wie gar nicht im realen Leben vorkommen. In den meisten Fällen haben wir es mit deutlich komplexeren Bewegungsabläufen zu tun, bei denen Beschleunigung und Abbremsen eine Rolle spielen. In diesem Bereich findet eine positive oder negative Steigerung der Zustandsänderungen statt man bezeichnet dies als Easing. Jegliches mobile Gefährt steigert seine Geschwindigkeit aus der Ruhephase und fällt dann nicht sofort wieder in den Stillstand zurück, sondern verringert seine Geschwindigkeit so

18 98 4 Animation lange, bis sie gleich null ist. In dem folgenden Abschnitt beschäftigen wir uns mit der Simulation dieser Prozesse. Um die Schrittweite innerhalb einer Animationssequenz zu verändern, kommen so genannte Easing Equations»Abbremsgleichungen«) zum Einsatz, die die Grundlage zur Berechnung der Zwischenwerte bilden. Abbildung 4.8 Während lineare Bewegungsabläufe mechanisch wirken, vermitteln Beschleunigung und Abbremsung einen natürlichen Look. Linear Beschleunigen Abbremsen Beschleunigen und Abbremsen Während die Creative Coder in den frühen Phasen von Flash noch selbst mit Formeln experimentierten, um zu den gewünschten Ergebnissen zu gelangen, haben kluge Köpfe wie Robert Penner ( com/easing) Bibliotheken mit zahlreichen vorgefertigten Easing-Funktionen entwickelt und der Community bereitgestellt. Auf diese Basis können wir in Edge Animate direkt zugreifen. In der nachstehenden Abbildung sehen Sie sämtliche Easing-Funktionen in der Darstellung, wie sie uns auch in Edge Animate präsentiert werden. Die grafische Vorschau vereinfacht den Umgang mit Easings enorm, so dass unnötiges Ausprobieren zahlreicher Kombinationsmöglichkeiten in den meisten Fällen umgangen werden kann. Grundsätzlich gibt es drei zentrale Gruppen innerhalb der Easings: Die einen verursachen eine Beschleunigung, während die anderen das Abbremsen erzielen. Die dritte Gruppe kombiniert beide Verhalten schließlich, so dass die Animation langsam beginnt und zum Ende hin wieder schwächer wird. Die folgende Abbildung gibt einen Überblick über alle in Edge Animate verfügbaren Easing-Funktionen und deren Beschleunigungsverlauf als Graph.

19 Non-lineare Animationen (Easings) 99 Abbildung 4.9 Übersicht über Easings für natürlichere nonlineare Animationen