mens mange måske argumenterer for relevansen af rige medier i e-bøger, er det uden tvivl, at animationer af nogen art er mere tiltalende for læsere end statiske billeder. Ideen om at skabe animationer kan være skræmmende for forfattere. Det handler ikke om resultaterne – det handler om, hvad der kræves for at få det til at ske. Det kan blive grimt. Eller værre: dyrt.
i vores rejse med at udvikle interaktive e-bøger til andre, vi har indset kraften i animationer og udnyttet den i flere e-bøger. En sådan meget mindre tilføjelse til et billede kan virkelig give en enorm indflydelse på din e-bog og få den til at skille sig ud fra resten uden spørgsmål.
den virkelige udfordring er at finde en effektiv og nem måde at producere animationer på. I denne artikel vil vi have nogle baggrund på animation teknologier i ebooks, og derefter se på en række relativt let at producere animation teknikker med klare eksempler.
typer af animation
for at give en hurtig introduktion kan animationer oprettes på forskellige måder. De kan være så komplekse (og tidskrævende) som ramme for ramme animationer. Det vil sige at tegne et separat billede for hver brøkdel af et sekund. Vi er mere interesserede i at justere (forkortelse for mellem). Ved at justere angiver du Start-og sluttilstandene for din animation, og resten genereres automatisk af computeren. Du kan også angive en lempelse funktion til at bruge, for at anvende nogle hastighed effekter, ligesom acceleration, elasticitet, hoppende, etc. Her er en komplet liste over lette funktioner.
så hvordan er animationer indlejret i en e-bog? Da en ePubs underliggende teknologi er HTML, her er dine muligheder:
- Animeret GIF-billede
- SVG animationer
- Flash movie
- CSS animation
- sidekontrol
denne liste er ikke for at skræmme dig, men for at udforske de tekniske muligheder, der er tilgængelige for dig. Men lad os forenkle denne liste. Animerede GIF-billeder kræver specielle programmer (f. eks. Photoshop), og animationsfilstørrelserne er normalt meget store. SVG-animationer understøtter kun vektorgrafik og kræver en udviklingsbaggrund for at oprette. Flash er forældet og understøttes ikke på læsere som Apple iBooks, endsige mobil. Dette overlader os til CSS-animationer og sidekontroller. De er begge dybest set bror og søster. I stedet for at anvende CSS-animationer direkte på siden, anvender sidekontroller CSS gennem et iFrame (vindue). Vi foretrækker at bruge sidekontroller, da det er bedre organiseret at have hele din animation i en enkelt fil.
animationsprogram
for så vidt angår programmel er Google Designer et simpelt og gratis program til at oprette dine animationer. Google er fokuseret på at skabe animerede HTML5 bannere og annoncer til internettet og mobil. Vi har fundet ud af, at du ikke har brug for noget mere avanceret for at oprette hurtige animationer.
den grundlæggende arbejdsgang i Google Designer er som følger:
- Importer hvert af dine billeder, der falder i separate lag
- for hvert lag skal du angive dine nøglerammer og vælge dine lempelsesfunktioner
- Eksporter som en lynlåspakke
den eksporterede fil er en sidekontrol, der er klar til at blive tilføjet til din side for mere information om tilføjelse af sidekontroller til din e-bog, se vores artikel om bogkontroller.
animationsteknikker
viden er ikke nok til at skabe effektive animationer. Hvordan du vil bruge det er det, der tæller. Ligesom at lære at bruge en komfur, betyder det ikke nødvendigvis, at du snart laver mad. Du skal først lære nogle opskrifter. Så lad os se på forskellige (og nemme) opskrifter til at anvende animationer.
flydende billede
dette er den enkleste form for animation. Et billede, der bevæger sig i forskellige retninger (kan rotere så godt). Og selvom du tror, det ville bringe noget nyt til bordet, du tager fejl. Afhængigt af hvor naturlige bevægelserne er, vil du blive overrasket over, hvor meget liv det kan bringe til din e-bog og bejle dine læsere. Det bedste ved denne type animation er, at den kan anvendes på ethvert af dine nuværende billeder uden ekstra ressourcer. Vi anbefaler, at billedet har en hvid baggrund for at få animationen til at smelte sammen med baggrunden (forudsat at baggrunden er hvid, der er). Her er et eksempel fra en interaktiv e-bog, vi oprettede om fugle.
her er andre eksempler med kun nogle grundlæggende rotation. Anvendelse af korrekt timing kan give en meget troværdig effekt.
du finder disse typer animationer overalt på nettet. For eksempel på dette link finder du et andet eksempel på et flydende billede, vi kunne lide (gå til afsnittet med titlen EVOKING MEMORIES for at se de flydende astronaut padder). For at tilføje en lille smule kompleksitet kan du have et andet billede, der sidder i ryggen, fast i position. Ligesom så:
transformerende billede
svarende til sidstnævnte, men i stedet for at flytte et billede, transformerer du det. De understøttede transformationer i CSS3 er skala, skævhed og 3D-rotation. Du bliver nødt til at være meget selektiv med hensyn til hvilke billeder du anvender transformationer til. En forkert transformation kan få tingene til at se ret underlige ud. Her er en kombination af skævhed og 3D-rotationstransformationer anvendt på en fugl i vores interaktive e-bog.
Overgangskomponenter
lad os tage et skridt videre. Med denne type animation er dit billede opdelt i underbilleder. Fra en tom skærm gør hvert underbillede sin egen indgang fra forskellige retninger, hvilket i sidste ende ender med at fuldføre det originale billede. Uanset hvad du gør, vil det aldrig se dårligt ud. Det vil helt sikkert se godt ud, men det kan se bedre ud. Dit valg af underbilleder og deres overgange styrer, hvor tiltalende animationen vil være for læserne. Du kan sløjfe denne animation ved at gøre underbillederne overgang tilbage ud af skærmen.
grafer og diagrammer
hvis du opretter e-bøger med rapporter eller statistikker, vil det måske komme til nytte. Du tænker sandsynligvis, at du er ved at se noget ekstremt komplekst. Det er det modsatte. Med minimal indsats og enkel viden kan du animere dine diagrammer med et strejf af magi og få dine læsere til at tro, at det var et ton arbejde. Mange animationer eksisterer faktisk på den måde-dine øjne narrer dit sind til at forstå noget, hvor det i virkeligheden er meget enklere.
så ideen om at animere grafer og diagrammer er som følger. Du importerer grafen / diagrammet som et billede til Google-Designer. På et lag ovenfor opretter du en hvid boks. Dette vil blive brugt til at give en maskeringseffekt. Oprindeligt kommer den hvide boks oven på grafen/diagrammet undtagen den vandrette & lodrette akse. Du skifter den hvide boks lodret opad for at afsløre, hvad der er skjult nedenunder. Læserens øjne vil narre ham til at tro, at søjlerne er det, der vokser opad nedenfra, hvor de faktisk bare afsløres. Hvis du gerne vil sløjfe animationen, kan du overføre den hvide boks tilbage ned for at skjule grafen igen. Med den korrekte timing vil dette bare forføre dine læsere. Lad os springe til nogle eksempler, skal vi? Her er et mere komplekst eksempel, hvor yderligere billeder blev animeret sammen med den hvide boks, som hætten til søjlerne.
konklusion
i denne artikel har vi taget en generel ide om, hvordan animationer fungerer i e-bøger og teknologierne bag dem. Vi har set fire enkle teknikker / tricks, der hurtigt kan anvendes på dine e-bog-billeder uden at tage for meget tid fra din arbejdsgang. Det hele kommer ned til nogle lidt setup tid til at investere i at have det grundlæggende i Google Designer. I et andet indlæg vil vi se nærmere på Google-Designer og baby-trin, der skal følges der, for at oprette din første animation.
i mellemtiden skal du begynde at animere!
du kan også nyde:
5 Hacks til oprettelse af en mere engagerende e-bog
Cool Trick: oprettelse af dynamiske Karakternavne i E-bøger
Sådan oprettes en interaktiv e-bog: en trinvis vejledning
Sådan optimeres videoer og føjes dem til din e-bog
e-bogens Forfatterguide til billeder