Während viele über die Relevanz von Rich Media in eBooks streiten, ist es ohne Frage, dass Animationen jeglicher Art für Leser attraktiver sind als statische Bilder. Die Idee, Animationen zu erstellen, kann für Autoren einschüchternd sein. Es geht nicht um die Ergebnisse – es geht darum, was erforderlich ist, um dies zu erreichen. Es kann hässlich werden. Oder noch schlimmer: teuer.

Auf unserer Reise, interaktive E-Books für andere zu entwickeln, haben wir die Kraft von Animationen erkannt und in mehreren E-Books genutzt. Solch eine sehr kleine Ergänzung zu einem Bild kann wirklich einen großen Einfluss auf Ihr eBook haben und es ohne Frage von den anderen abheben.

Die eigentliche Herausforderung besteht darin, eine effiziente und einfache Möglichkeit zu finden, Animationen zu erstellen. In diesem Artikel werden wir einige Hintergrundinformationen zu Animationstechnologien in E-Books haben und dann eine Reihe relativ einfach zu produzierender Animationstechniken mit klaren Beispielen betrachten.

Animationstypen

Um eine schnelle Einführung zu geben, können Animationen auf verschiedene Arten erstellt werden. Sie können so komplex (und zeitaufwendig) sein wie Frame-für-Frame-Animationen. Das heißt, für jeden Sekundenbruchteil ein separates Bild zeichnen. Wir interessieren uns mehr für Tweening (kurz für In-Betweening). Durch Tweening geben Sie den Start- und Endstatus Ihrer Animation an, und der Rest wird automatisch vom Computer generiert. Sie können auch eine zu verwendende Lockerungsfunktion angeben, um einige Geschwindigkeitseffekte wie Beschleunigung, Elastizität, Hüpfen usw. anzuwenden. Hier ist eine vollständige Liste der Lockerungsfunktionen.

Wie werden Animationen in ein eBook eingebettet? Da die zugrunde liegende Technologie eines EPUB HTML ist, haben Sie folgende Möglichkeiten:

1. Animiertes GIF-Bild
2. SVG-Animationen
3. Flash-Film
4. CSS-Animation
5. Seiten-Widget

Diese Liste soll Sie nicht erschrecken, sondern die technischen Möglichkeiten ausloten, die Ihnen zur Verfügung stehen. Aber lassen Sie uns diese Liste vereinfachen. Animierte GIF-Bilder erfordern eine spezielle Software (z. B. Photoshop) und die Animationsdateigrößen sind normalerweise sehr groß. SVG-Animationen unterstützen nur Vektorgrafiken und erfordern zum Erstellen einen Entwicklungshintergrund. Flash ist veraltet und wird von Readern wie Apple iBooks nicht unterstützt, geschweige denn von Mobilgeräten. Dies überlässt uns CSS-Animationen und Seiten-Widgets. Sie sind beide im Grunde Bruder und Schwester. Anstatt CSS-Animationen direkt auf der Seite anzuwenden, wenden Seiten-Widgets CSS über einen Iframe (Fenster) an. Wir bevorzugen die Verwendung von Seiten-Widgets, da es besser organisiert ist, Ihre gesamte Animation in einer einzigen Datei zu haben.

Animationssoftware

Soweit es um Software geht, ist Google Web Designer eine einfache und kostenlose Software zum Erstellen Ihrer Animationen. Google Web Designer konzentriert sich auf die Erstellung animierter HTML5-Banner und -Anzeigen für Web und Mobilgeräte. Wir haben festgestellt, dass Sie nichts Fortgeschritteneres benötigen, um schnelle Animationen zu erstellen.

Der grundlegende Workflow in Google Web Designer lautet wie folgt:

1. Importieren Sie jedes Ihrer Bilder, die in separate Ebenen fallen
2. Geben Sie für jede Ebene Ihre Keyframes an und wählen Sie Ihre Easing-Funktionen
3. Als Zip-Paket exportieren

Die exportierte Datei ist ein Seiten-Widget, das Ihrer Seite hinzugefügt werden kann Weitere Informationen zum Hinzufügen von Seiten-Widgets zu Ihrem E-Book finden Sie in unserem Artikel über Buch-Widgets.

Animationstechniken

Das Know-how reicht nicht aus, um effektive Animationen zu erstellen. Wie Sie es verwenden, ist das, was zählt. Genau wie das Erlernen der Verwendung eines Ofens bedeutet dies nicht unbedingt, dass Sie bald Blanquette de Veau kochen werden. Sie müssen zuerst einige Rezepte lernen. Schauen wir uns also verschiedene (und einfache) Rezepte an, um Animationen anzuwenden.

Schwebendes Bild

Dies ist die einfachste Form der Animation. Ein Bild, das sich in verschiedene Richtungen bewegt (kann sich auch drehen). Und obwohl Sie denken würden, dass es nichts Neues auf den Tisch bringen würde, liegen Sie falsch. Je nachdem, wie natürlich die Bewegungen sind, werden Sie überrascht sein, wie viel Leben es Ihrem eBook bringen und Ihre Leser umwerben kann. Das Beste an dieser Art von Animation ist, dass sie ohne zusätzliche Ressourcen auf jedes Ihrer aktuellen Bilder angewendet werden kann. Wir empfehlen, dass das Bild einen weißen Hintergrund hat, damit die Animation mit dem Hintergrund verschmilzt (vorausgesetzt, der Hintergrund ist weiß). Hier ist ein Beispiel aus einem interaktiven eBook, das wir über Vögel erstellt haben.

Hier sind weitere Beispiele mit nur einigen grundlegenden Funktionen. Die Anwendung des richtigen Timings kann einen sehr glaubwürdigen Effekt erzielen.

Sie finden diese Art von Animationen im gesamten Web. Unter diesem Link finden Sie beispielsweise ein weiteres Beispiel für ein schwebendes Bild, das uns gefallen hat (gehen Sie zum Abschnitt ERINNERUNGEN HERVORRUFEN, um die schwebenden Astronautenkröten zu sehen). Um ein kleines bisschen Komplexität hinzuzufügen, können Sie ein anderes Bild haben, das hinten sitzt und in Position fixiert ist. So:

Bild transformieren

Ähnlich wie bei letzterem, aber anstatt ein Bild zu verschieben, transformieren Sie es. Die unterstützten Transformationen in CSS3 sind Skalieren, Neigen und 3D-Drehen. Sie müssen sehr selektiv sein, auf welche Bilder Sie Transformationen anwenden. Eine falsche Transformation kann die Dinge ziemlich seltsam aussehen lassen. Hier ist eine Kombination aus Skew- und 3D-Rotationstransformationen, die in unserem interaktiven eBook auf einen Vogel angewendet werden.

Übergangskomponenten

Gehen wir noch einen Schritt weiter. Bei dieser Art von Animation wird Ihr Bild in Unterbilder unterteilt. Von einem leeren Bildschirm aus tritt jedes Unterbild aus verschiedenen Richtungen ein und vervollständigt letztendlich das Originalbild. Was auch immer Sie tun, das wird nie schlecht aussehen. Es wird definitiv gut aussehen, aber es kann besser aussehen. Ihre Wahl der Unterbilder und deren Übergänge steuern, wie ansprechend die Animation für die Leser sein wird. Sie können diese Animation in einer Schleife ausführen, indem Sie die Unterbilder wieder aus dem Bildschirm herausführen.

Grafiken und Diagramme

Wenn Sie E-Books mit Berichten oder Statistiken erstellen, ist dies möglicherweise nützlich. Sie denken wahrscheinlich, dass Sie etwas extrem Komplexes sehen werden. Es ist das genaue Gegenteil. Mit minimalem Aufwand und einfachem Know-how können Sie Ihre Diagramme mit einem Hauch von Magie animieren und Ihre Leser denken lassen, dass es eine Menge Arbeit war. Viele Animationen existieren tatsächlich auf diese Weise – Ihre Augen bringen Ihren Verstand dazu, etwas zu verstehen, wo es in Wirklichkeit viel einfacher ist.

Die Idee, Grafiken und Diagramme zu animieren, lautet also wie folgt. Sie importieren das Diagramm als Bild in Google Web Designer. Auf einer Ebene darüber erstellen Sie ein weißes Feld. Dies wird verwendet, um einen Maskierungseffekt zu erzielen. Anfangs wird das weiße Feld oben auf dem Diagramm angezeigt, mit Ausnahme der horizontalen vertikalen Achse &. Sie werden das weiße Feld vertikal nach oben bewegen, um zu enthüllen, was darunter verborgen ist. Die Augen des Lesers werden ihn dazu bringen zu glauben, dass die Balken das sind, was von unten nach oben wächst, wo sie tatsächlich gerade enthüllt werden. Wenn Sie die Animation in einer Schleife ausführen möchten, können Sie das weiße Feld wieder nach unten verschieben, um das Diagramm erneut auszublenden. Mit dem richtigen Timing wird dies Ihre Leser verführen. Lassen Sie uns zu einigen Beispielen springen, sollen wir? Hier ist ein komplexeres Beispiel, in dem zusätzliche Bilder zusammen mit dem weißen Feld animiert wurden, als Kappe für die Balken.

Fazit

In diesem Artikel haben wir eine allgemeine Vorstellung davon bekommen, wie Animationen in eBooks funktionieren und welche Technologien dahinter stecken. Wir haben vier einfache Techniken / Tricks gesehen, die schnell auf Ihre eBook-Bilder angewendet werden können, ohne dass Ihr Workflow zu viel Zeit in Anspruch nimmt. Es kommt alles auf ein wenig Einrichtungszeit an, um in die Grundlagen von Google Web Designer zu investieren. In einem anderen Beitrag werden wir uns den Google Web Designer und die Babyschritte, die Sie dort ausführen müssen, genauer ansehen, um Ihre erste Animation zu erstellen.

Beginnen Sie in der Zwischenzeit mit der Animation!

Das könnte Ihnen auch gefallen:

5 Hacks zum Erstellen eines ansprechenderen Ebooks

Cooler Trick: Erstellen dynamischer Charakternamen in Ebooks

So erstellen Sie ein interaktives eBook: Eine Schritt-für-Schritt-Anleitung

So optimieren Sie Videos und fügen Sie sie Ihrem Ebook hinzu

Der Ebook-Autorenleitfaden Bilder