medan många kan argumentera om relevansen av rich media i e-böcker, är det utan tvekan att animationer av något slag är mer tilltalande för läsare än statiska bilder. Tanken att skapa animationer kan vara skrämmande för författare. Det handlar inte om resultaten – det handlar om vad som krävs för att få det att hända. Det kan bli fult. Eller värre: dyrt.
i vår resa med att utveckla interaktiva e-böcker för andra har vi insett kraften i animationer och utnyttjat den i flera e-böcker. En sådan mycket liten tillägg till en bild kan verkligen ge en enorm inverkan på din ebook, och göra det sticker ut från resten utan tvekan.
den verkliga utmaningen är att hitta ett effektivt och enkelt sätt att producera animationer. I denna artikel kommer vi att ha lite bakgrund på animation teknik i e-böcker, och sedan titta på ett antal relativt lätt att producera animation tekniker med tydliga exempel.
typer av animering
för att ge ett snabbt intro kan animationer skapas på olika sätt. De kan vara så komplexa (och tidskrävande) som bildruta för bildruta animationer. Det vill säga att rita en separat bild för varje bråkdel av en sekund. Vi är mer intresserade av tweening (förkortning för in-betweening). Genom tweening anger du Start-och sluttillstånd för din animering, och resten genereras automatiskt av datorn. Du kan också ange en lättnadsfunktion som ska användas för att tillämpa vissa hastighetseffekter, som acceleration, elasticitet, studsning etc. Här är en fullständig lista över lättnadsfunktioner.
så hur är animationer inbäddade i en e-bok? Eftersom en ePubs underliggande teknik är HTML, här är dina alternativ:
- Animerad GIF-bild
- SVG-animationer
- Flash-film
- CSS-animering
- sidwidget
den här listan är inte för att skrämma dig, utan för att utforska de tekniska möjligheterna som finns tillgängliga för dig. Men låt oss förenkla denna lista. Animerade GIF-bilder kräver speciell programvara (t.ex. Photoshop) och animeringsfilstorlekarna är vanligtvis mycket stora. SVG-animationer stöder endast vektorgrafik och kräver en utvecklingsbakgrund för att skapa. Flash är föråldrad och stöds inte på läsare som Apple iBooks, än mindre mobil. Detta lämnar oss ner till CSS-animationer och sidwidgets. De är båda i grunden bror och syster. Istället för att tillämpa CSS-animeringar direkt på sidan tillämpar sidwidgets CSS via en Iframe (fönster). Vi föredrar att använda sidwidgets eftersom det är bättre organiserat att ha hela animationen i en enda fil.
animationsprogramvara
när det gäller programvara är Google Web Designer en enkel och fri programvara för att skapa dina animationer. Google Web Designer fokuserar på att skapa animerade HTML5 banners och annonser för webb och mobil. Vi har funnit att du inte behöver något mer avancerat för att skapa snabba animationer.
det grundläggande arbetsflödet i Google Web Designer är som följer:
- importera alla dina bilder, som faller i separata lager
- för varje lager, ange dina nyckelramar och välj dina lättnadsfunktioner
- Exportera som ett zip-paket
den exporterade filen är en sidwidget som är redo att läggas till på din sida för mer information om att lägga till sidwidgets i din e-bok, se vår artikel om bokwidgets.
animationstekniker
kunskapen räcker inte för att skapa effektiva animationer. Hur du ska använda det är det som räknas. Precis som att lära sig att använda en spis, betyder inte nödvändigtvis att du kommer att laga någon Blanquette de Veau snart. Du måste lära dig några recept först. Så låt oss titta på olika (och enkla) recept för att tillämpa animationer.
flytande bild
Detta är den enklaste formen av animering. En bild som rör sig i olika riktningar (kan också rotera). Och även om du skulle tro att det inte skulle ge något nytt till bordet, har du fel. Beroende på hur naturliga rörelserna är, skulle du bli förvånad över hur mycket liv det kan ge till din ebook och woo dina läsare. Det bästa med denna typ av animering är att den kan tillämpas på någon av dina nuvarande bilder, utan extra resurser. Vi rekommenderar att bilden har en vit bakgrund, för att göra animationen samman med bakgrunden (förutsatt att bakgrunden är vit som är). Här är ett exempel från en interaktiv e-bok som vi skapade om fåglar.
här är andra exempel med endast några grundläggande rotation. Att tillämpa rätt timing kan ge en mycket trovärdig effekt.
du hittar dessa typer av animationer över hela webben. På den här länken hittar du till exempel ett annat exempel på en flytande bild som vi gillade (gå till avsnittet framkalla minnen för att se de flytande astronautpaddorna). För att lägga till en liten bit av komplexitet kan du ha en annan bild som sitter i ryggen, fast i position. Som så:
transformera bild
liknar den senare, men istället för att flytta en bild omvandlar du den. De stödda transformationerna i CSS3 är skala, skev och 3D rotera. Du måste vara mycket selektiv om vilka bilder du tillämpar transformationer på. En felaktig omvandling kan få saker att se ganska konstiga ut. Här är en kombination av skev och 3D rotera transformationer tillämpas på en fågel i vår interaktiva ebook.
Övergångskomponenter
Låt oss ta ett steg längre. Med denna typ av animering är din bild uppdelad i underbilder. Från en tom skärm gör varje delbild sin egen ingång från olika riktningar och slutar slutligen slutföra originalbilden. Vad du än gör kommer det aldrig att se dåligt ut. Det kommer definitivt att se bra ut, men det kan se bättre ut. Ditt val av underbilder och deras övergångar styr hur tilltalande animationen kommer att vara för läsarna. Du kan slinga den här animationen genom att göra underbilderna övergång tillbaka från skärmen.
grafer och diagram
om du skapar e-böcker med rapporter eller statistik, kanske detta kommer väl till pass. Du tror förmodligen att du är på väg att se något extremt komplext. Det är den totala motsatsen. Med minimal ansträngning och enkel know-how kan du animera dina diagram med en touch av magi och få dina läsare att tro att det var ett ton arbete. Många animationer finns faktiskt på det sättet – dina ögon lurar ditt sinne för att förstå något, där det i verkligheten är mycket enklare.
så tanken på att animera grafer och diagram är som följer. Du importerar diagrammet / diagrammet som en bild till Google Web Designer. På ett lager ovanför skapar du en vit låda. Detta kommer att användas för att ge en maskeringseffekt. Ursprungligen kommer den vita rutan ovanpå diagrammet / diagrammet, förutom den horisontella & vertikala axeln. Du kommer att övergå den vita rutan vertikalt uppåt för att avslöja vad som är dolt under. Läsarens ögon kommer att lura honom att tro att staplarna är det som växer uppåt underifrån, där de faktiskt bara avslöjas. Om du vill slinga animeringen kan du övergå den vita rutan tillbaka för att dölja grafen igen. Med rätt tidpunkt kommer detta bara att förföra dina läsare. Låt oss hoppa till några exempel, ska vi? Här är ett mer komplext exempel där ytterligare bilder animerades tillsammans med den vita rutan, som locket för staplarna.
slutsats
i den här artikeln har vi tagit en allmän uppfattning om hur animationer fungerar i e-böcker och tekniken bakom dem. Vi har sett fyra enkla tekniker / tricks som kan tillämpas snabbt på dina ebook-bilder utan att ta för mycket tid från ditt arbetsflöde. Allt kommer ner till lite installationstid för att investera i att ha grunderna i Google Web Designer. I ett annat inlägg kommer vi att titta närmare på Google Web Designer och babysteg att följa där för att skapa din första animering.
under tiden, börja animera!
du kan också njuta av:
5 Hacks för att skapa en mer engagerande Ebook
Cool Trick: skapa dynamiska teckennamn i E-böcker
hur man skapar en interaktiv ebook: en steg-för-steg guide
hur man optimerar videor och lägger till dem i din Ebook
Ebook författarens Guide till bilder