Lebendige Webseiten mit Adobe Edge Animate

Simon Widjaja ist Creative Coder, Autor und IT-Trainer aus purer Leidenschaft. Als erfahrener Flash-Entwickler und Edge-Designer 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 Sound- und CMS-Integration oder Adaptive Layouts. Auf edgedocks.com, Adobe TV sowie im Magazin weave veröffentlicht er regel-mäßig News, Tutorials und Videos rund um Adobe Edge Tools & Services.

Simon Widjaja

Lebendige Webseiten mit Adobe Edge Animate

Mit Webstandards plattformübergreifend entwickeln und gestalten

Lektorat: Gabriel A. NeumannCopy-Editing: Alexander Reischert, Redaktionsbüro Aluan, KölnHerstellung: Friederike Diefenbacher-KeitaUmschlaggestaltung: Helmut Kraus, www.exclam.deDruck und Bindung: M.P. Media-Print Informationstechnologie GmbH, 33100 Paderborn

Bibliografische Information der Deutschen Nationalbibliothek Die Deutsche Nationalbibliothek verzeichnet diese Publikation in der Deutschen Nationalbibliografie; detaillierte bibliografische Daten sind im Internet über http://dnb.d-nb.de abrufbar.

ISBN 978-3-86490-025-9

1. Auflage 2013Copyright © 2013 dpunkt.verlag GmbHRingstraße 19B69115 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 inelektronischen Systemen.Es wird darauf hingewiesen, dass die im Buch verwendeten Soft- und Hardware- Bezeichnungen 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 4 3 2 1 0

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 Ent-wicklungstempo, 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 of-fengelegt. 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 reali-sieren 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 2013Simon widjaja

1Einführung

1 EinführungStatische 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-Biblio-theken 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 Start-löchern. Das will der Kreativ-riese Adobe mit dem neuen werkzeug »Edge Animate« für interaktive Animationen ändern, das bei der Ausgabe aus-schließ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 mitzutei-len. 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ög-licht die finale Version bereits komplexe und verschachtelte Animationen dank Symbolen, zahlreiche Interaktionsmöglichkeiten und sogar das Ein-binden von webfonts. Allerhöchste Zeit also, mal einen genaueren Blick auf das vielversprechende Autorenwerkzeug zu werfen.

. Adobe sagt DankeFür das wichtige Feedback der Com-munity bedankt sich Adobe. So ist die erste Version von Edge Animate kostenlos erhältlich. Erst für das zweite release werden voraussicht-lich Lizenzgebühren fällig.

2

1.1 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 Pu-blishing Suite oder von Apple iBooks Author zum Einsatz kommen. Um Sie während der Konzeption und Animation mit Edge Animate zu unterstüt-zen 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 Informa-tionen 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 Funk-tionen kennen. Außerdem wird hier auf die verschiedenen Zielgruppen und Einsatzgebiete eingegangen.

�Schritt 3: Kreation • Im dritten Schritt werden Sie die Funktionen zur Erstellung von visuellen Elementen innerhalb von Edge Animate ken-nenlernen 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 Kom-positionen 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.

. Digital Publishing SuiteDie DPS ist eine InDesign-Funktion zur Erstellung von digitalen Publika-tionen 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 AuthorMit iBooks Author hat Apple eine Konkurrenz zur DPS von Adobe ins rennen geschickt. Hiermit können Publikationen im iBookstore erstellt werden.

Worum es in diesem Buch geht 3

1 Einführung4

�Schritt 6: Publikation • Dieser Schritt beschäftigt sich mit den ver-schiedenen 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 inner-halb 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 Kernfunkti-onen 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 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 neues-ten 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 wis-sen 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 implementie-ren.

. HTML5: StandDen aktuellen Stand der HtML5-Spezifikation können Sie auf der offiziellen Seite des w3C einsehen: http://www.w3.org/standards/techs/html

1.3 Web-Animationen: Status quo

Einige der in HtML5 und CSS3 neu eingeführten Funktionen bringen ge-rade auf dem Feld der web-Animationen neue Möglichkeiten mit sich. So weisen die entsprechenden Vorgängerversionen genau hier sehr große De-fizite auf. Mit dem bereits erwähnten Canvas-tag und den CSS-regeln tran-sitions und Animations lassen sich bereits viele Effekte erstellen, die vorher nur zusätzlichen Plug-Ins wie dem Flash Player vorbehalten waren. Mittler-weile existieren bereits zahlreiche Grafik- und Animations-Bibliotheken in Form von JavaScript-Erweiterungen für Creative Coder:

�CreateJS (http://createjs.com) �raphaelJS (http://raphaeljs.com) �GSAP JS (http://www.greensock.com/gsap-js)

Diese Bibliotheken haben jedoch alle eines gemeinsam: Sie verfolgen einen codegetriebenen Ansatz und setzen somit mehr oder weniger umfangrei-che 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ön-nen besonders komplexe Animationschoreografien direkt, ohne das ständi-ge Umdenken in Code, erstellt werden. weitere tools dieser Gattung sind:

�Hype (http://tumult.com/hype) �Sencha Animator (http://www.sencha.com/products/animator)

Web-Animationen: Status quo 5

4Animation

4 AnimationNachdem Sie nun die wichtigsten Funktionen und techniken der Kreation kennengelernt haben, werden Sie in diesem Kapitel die Animationsmög-lichkeiten mit Zeitleiste, Pin und Schlüsselbildern kennenlernen.

4.1 Die Zeitleiste

während die Bühne in Edge Animate die räumliche Anordnung der einzel-nen 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.

4.1.1 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 expli-zit 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 ani-mieren, werden die notwendigen Zwischenschritte automatisch berech-net. Grundsätzlich können Sie in Edge Animate fast alle Eigenschaften über Schlüsselbilder animieren. Zu den wenigen Eigenschaften, die nicht ani-miert 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 Eigen-schaft wie beispielsweise einer Koordinate, der Schriftgröße oder der Füll-farbe für einen bestimmten Zeitpunkt zu setzen, ziehen Sie einfach den Abspielkopf an die gewünschte Stelle und klicken dann im Eigenschaftsin-spektor 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 Eigen-schaft 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.

92

Keyframes in der Zeitleiste auf Spurebene setzen • Sobald eine Anima-tionsspur 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.

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 akti-ve Modus setzt automatisch Schlüsselbilder, sobald ein Element verscho-ben 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ünsch-te 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 Über-gänge zwischen zwei Zuständen abschalten wollen, so ist diese option die richtige wahl. Ein beispielhaftes Szenario für diesen Modus ist eine Sprite-sheet-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 Cha-rakteranimationen mit Spritesheets Abschnitt 4.5.4).

Abbildung 4.1Schlüsselbilder über das Diamanten-symbol im Eigenschaftsinspektor setzen

Abbildung 4.2Schlüsselbilder auf Spurebene in der Zeitleiste setzen

Die Zeitleiste 93

4 Animation94

Keyframes mit dem Pin setzen • Der so genannte Pin (Stecknadel) ist ein zweiter imaginärer Abspielkopf, der eine Animation zwischen zwei ge-wü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ön-nen. 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 Abspiel-kopf 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 da-bei an der Stelle des Pins festgehalten, so dass letztlich ein Übergang zwischen beiden Zuständen hinzugefügt wird (4).

Abbildung 4.3(1) Automatischer Schlüsselbildmodus

(2) Automatischer Übergangsmodus

Der Pin kann natürlich auch vor den primären Abspielkopf gezogen wer-den. In diesem Fall erscheint der richtungsbalken gelb. während sich also der Pin im blauen Zustand hinter dem Abspielkopf befindet und wir ent-sprechend vom neu gesetzten Zustand zum ursprünglichen Zustand hin animieren, verhält sich die Animation im gelben Zustand genau andersher-um: wir animieren vom Ursprungszustand zum neuen Zustand hin.

Abbildung 4.4Der Pin (Stecknadel) ist ein zweiter imaginärer Abspielkopf, der das Animieren zwischen zwei Zeit- punkten stark vereinfacht.

Abbildung 4.5Befindet sich der Pin (Stecknadel) vor dem Abspielkopf, so wird die Animati-onsrichtung entsprechend umgedreht.

Die Zeitleiste 95

4 Animation96

4.1.2 Zusatzfunktionen in der ZeitleisteFür ein genaueres Arbeiten in komplexen Kompositionen und umfangrei-chen Animationssequenzen stehen noch weitere Funktionen innerhalb der Zeitleiste zur Verfügung:

�Spuren ein-/ausblenden: Mit dieser Funktion lassen sich sämtliche Ani-mationsspuren 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ön-nen, 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än-dert. Der Doppelpfeil links daneben passt das dargestellte Zeitfenster an die tatsächliche Länge der Animation automatisch an.

4.1.3 AbspielenHaben 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 Zeitleis-te ebenfalls starten.

Abbildung 4.6Die Zeitleiste in Edge Animate bietet

zahlreiche Zusatzfunktionen wie etwa die Ebenenfilterung oder das raster.

Non-lineare Animationen (Easings) 97

4.1.4 Animationssequenzen im Nachhinein verändernNatü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 Positi-on und ändern den wert entweder im Eigenschaftsinspektor, auf der Spur-ebene 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 an-deren 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 be-rechnet.

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 Anima-tionen häufig etwas leblos bzw. unnatürlich wirken. Dies liegt daran, dass standardmäßig eine lineare Interpolation angewandt wird, die die Animati-onen 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 ha-ben wir es mit deutlich komplexeren Bewegungsabläufen zu tun, bei de-nen 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 wie-der in den Stillstand zurück, sondern verringert seine Geschwindigkeit so

. Auswahl von Schlüssel-bildern

Um das gewünschte Schlüsselbild si-cher 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 Animations-sequenz.

Abbildung 4.7Die Dauer einer Animation kann über verschiedene Anfasser direkt in der Zeitleiste verändert werden.

4 Animation98

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.

Linear

Abbremsen

Beschleunigen

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 (http://www.robertpenner.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 Um-gang mit Easings enorm, so dass unnötiges Ausprobieren zahlreicher Kom-binationsmöglichkeiten in den meisten Fällen umgangen werden kann.

Grundsätzlich gibt es drei zentrale Gruppen innerhalb der Easings: Die ei-nen verursachen eine Beschleunigung, während die anderen das Abbrem-sen 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 Ani-mate verfügbaren Easing-Funktionen und deren Beschleunigungsverlauf als Graph.

Abbildung 4.8während lineare Bewegungsabläufe

mechanisch wirken, vermitteln Be-schleunigung und Abbremsung einen

natürlichen Look.

Non-lineare Animationen (Easings) 99

Abbildung 4.9Übersicht über Easings für natürlichere nonlineare Animationen