hoewel velen kunnen argumenteren over de relevantie van rijke media in ebooks, is het zonder twijfel dat animaties van welke aard dan ook aantrekkelijker zijn voor lezers dan statische beelden. Het idee om animaties te maken kan intimiderend zijn voor auteurs. Het gaat niet om de resultaten – het gaat om wat er nodig is om het te laten gebeuren. Het kan lelijk worden. Of erger: duur.

in onze reis van het ontwikkelen van interactieve ebooks voor anderen, hebben we de kracht van animaties gerealiseerd en benut in meerdere ebooks. Zo ‘ n kleine toevoeging aan een afbeelding kan echt een enorme impact geven aan uw ebook, en maken het zonder vragen te onderscheiden van de rest.

de echte uitdaging is het vinden van een efficiënte en gemakkelijke manier om animaties te produceren. In dit artikel zullen we wat achtergrond over animatietechnologieën in ebooks hebben, en dan kijken naar een aantal relatief eenvoudig te produceren animatietechnieken met duidelijke voorbeelden.

soorten animaties

om een snelle introductie te geven, kunnen animaties op verschillende manieren worden gemaakt. Ze kunnen zo complex (en tijdrovend) zijn als frame voor frame animaties. Dat wil zeggen, het tekenen van een aparte afbeelding voor elke fractie van een seconde. We zijn meer geïnteresseerd in tweening (kort voor in-betweening). Door tweening geeft u de begin-en eindtoestand van uw animatie op en de rest wordt automatisch door de computer gegenereerd. U kunt ook een easing-functie opgeven om een aantal snelheidseffecten toe te passen, zoals acceleratie, elasticiteit, stuiteren, enz. Hier is een volledige lijst van easing functies.

dus hoe worden animaties ingebed in een ebook? Aangezien de onderliggende technologie van een EPUB HTML is, zijn hier uw opties:

1. geanimeerde GIF-afbeelding
2. SVG-animaties
3. Flash-film
4. CSS-animatie
5. Paginawidget

deze lijst is niet bedoeld om u bang te maken, maar om de technische mogelijkheden te verkennen die voor u beschikbaar zijn. Maar laten we deze lijst vereenvoudigen. Geanimeerde GIF-afbeeldingen vereisen speciale software (bijvoorbeeld Photoshop) en de animatiebestanden zijn meestal erg groot. SVG-animaties ondersteunen alleen vectorafbeeldingen en vereisen een ontwikkelingsachtergrond om te maken. Flash is verouderd en wordt niet ondersteund op lezers zoals Apple iBooks, laat staan mobiel. Dit laat ons neer op CSS animaties en pagina widgets. Ze zijn allebei broer en zus. In plaats van CSS-animaties direct op de pagina toe te passen, passen pagina-widgets CSS toe via een iframe (venster). We geven er de voorkeur aan om pagina-widgets te gebruiken omdat het beter georganiseerd is om je hele animatie in één bestand te hebben.

animatiesoftware

Voor zover het software betreft, is Google Web Designer een eenvoudige en vrije software om uw animaties te maken. Google Web Designer is gericht op het maken van geanimeerde HTML5 banners en advertenties voor web en mobiel. We hebben ontdekt dat je niets meer geavanceerd nodig hebt om snelle animaties te maken.

de basisworkflow in Google Web Designer is als volgt:

1. Importeer elk van uw afbeeldingen, die in afzonderlijke lagen vallen
2. geef voor elke laag uw keyframes op en kies uw easing-functies
3. Exporteer als zip-pakket

het geëxporteerde bestand is een pagina-widget die klaar is om aan uw pagina toegevoegd te worden voor meer informatie over het toevoegen van pagina-widgets aan uw ebook, zie ons artikel over Boek-widgets.

animatietechnieken

de knowhow is niet voldoende om effectieve animaties te maken. Hoe je het gaat gebruiken is wat telt. Net als het leren hoe je een kachel moet gebruiken, betekent dat niet per se dat je binnenkort een Blanquette de Veau gaat koken. Je moet eerst wat recepten leren. Dus laten we eens kijken naar verschillende (en eenvoudige) recepten om animaties toe te passen.

Zwevende afbeelding

dit is de eenvoudigste vorm van animatie. Een afbeelding die in verschillende richtingen beweegt (kan ook roteren). En hoewel je zou denken dat het niets nieuws zou brengen, heb je het mis. Afhankelijk van hoe natuurlijk de bewegingen zijn, je zou verbaasd zijn van hoeveel leven het kan brengen om uw ebook en woo uw lezers. Het beste ding over dit type animatie is dat het kan worden toegepast op een van uw huidige afbeeldingen, zonder extra middelen. We raden aan dat de afbeelding een witte achtergrond heeft, om de animatie samen te voegen met de achtergrond (aangenomen dat de achtergrond wit is). Hier is een voorbeeld uit een interactief ebook dat we hebben gemaakt over vogels.

hier zijn andere voorbeelden met slechts enkele basisrotatie. Het toepassen van de juiste timing kan een zeer geloofwaardig effect geven.

u vindt deze soorten animaties overal op het web. Bijvoorbeeld, op deze link vind je een ander voorbeeld van een zwevende afbeelding die we leuk vonden (ga naar de sectie EVOKING MEMORIES om de drijvende astronaut padden te zien). Om een klein beetje complexiteit toe te voegen, kun je een ander beeld hebben dat achterin zit, gefixeerd in positie. Op deze manier:

transformeer afbeelding

vergelijkbaar met de laatste, maar in plaats van een afbeelding te verplaatsen, transformeer je deze. De ondersteunde transformaties in CSS3 zijn schaal, schuin en 3D draaien. U zult zeer selectief moeten zijn op welke beelden u transformaties toepast. Een verkeerde transformatie kan dingen er raar laten uitzien. Hier is een combinatie van schuine en 3D-rotatie transformaties toegepast op een vogel in ons interactieve ebook.

Overgangscomponenten

laten we een stap verder gaan. Met dit type animatie, is uw afbeelding verdeeld in sub-images. Vanuit een leeg scherm maakt elke subafbeelding zijn eigen ingang vanuit verschillende richtingen, waardoor uiteindelijk het originele beeld wordt voltooid. Wat je ook doet, dit zal er nooit slecht uitzien. Het zal er zeker goed uitzien, maar het kan er beter uitzien. Uw keuze van sub-images en hun overgangen bepalen hoe aantrekkelijk de animatie zal zijn voor de lezers. U kunt deze animatie lus door het maken van de sub-images overgang terug uit het scherm.

grafieken en grafieken

als u ebooks maakt met rapporten of statistieken, is dit misschien handig. Je denkt waarschijnlijk dat je iets heel complex gaat zien. Het is het tegenovergestelde. Met minimale inspanning en eenvoudige knowhow kunt u uw grafieken animeren met een vleugje magie en uw lezers laten denken dat het een ton werk was. Veel animaties bestaan eigenlijk op die manier – je ogen truc je geest in het begrijpen van iets, waar in werkelijkheid is het veel eenvoudiger.

dus het idee om grafieken en grafieken te animeren is als volgt. U importeert de grafiek/grafiek als een afbeelding in Google Web Designer. Op een laag erboven maak je een wit kader aan. Dit zal worden gebruikt om een maskerend effect te geven. Aanvankelijk zal het witte kader bovenop de grafiek/grafiek komen, behalve de horizontale & verticale as. U zult de overgang van de witte doos verticaal naar boven om te onthullen wat er onder verborgen. De ogen van de lezer zullen hem laten geloven dat de tralies zijn wat van onderen naar boven groeit, waar ze eigenlijk gewoon worden onthuld. Als u de animatie wilt herhalen, kunt u het witte kader weer naar beneden omzetten om de grafiek opnieuw te verbergen. Met de juiste timing zal dit alleen maar uw lezers verleiden. Laten we naar enkele voorbeelden gaan, zullen we? Hier is een complexer voorbeeld waar extra beelden werden geanimeerd samen met de witte doos, als de dop voor de bars.

conclusie

In dit artikel hebben we een algemeen idee genomen van hoe animaties werken in ebooks, en de technologieën erachter. We hebben vier eenvoudige technieken/trucs gezien die snel kunnen worden toegepast op uw ebook-afbeeldingen, zonder te veel tijd te nemen van uw workflow. Het komt allemaal neer op een beetje setup tijd om te investeren in het hebben van de basisprincipes van Google Web Designer. In een andere post, we zullen het nemen van een meer kijkje op Google Web Designer en baby stappen te volgen daar, om uw eerste animatie te maken.

begin ondertussen met animeren!

u kunt ook genieten van:

5 Hacks voor het maken van een boeiender Ebook

Cool Trick: dynamische Tekennamen maken in Ebooks

Hoe maak je een interactief ebook: een stap-voor-stap handleiding

hoe optimaliseer je video ’s en voeg ze toe aan je Ebook

the ebook Author’ s Guide To Images