mens mange kan argumentere for relevansen av rike medier i ebøker, er det uten tvil at animasjoner av noe slag er mer tiltalende for leserne enn statiske bilder. Ideen om å lage animasjoner kan være skremmende for forfattere. Det handler ikke om resultatene-det handler om hva som kreves for å få det til å skje. Det kan bli stygt. Eller verre: dyrt.
I vår reise for å utvikle interaktive ebøker for andre, har vi innsett kraften i animasjoner og utnyttet det i flere ebøker. Slik en svært liten tillegg til et bilde kan virkelig gi en stor innvirkning på din ebok, og gjøre det skiller seg ut fra resten uten spørsmål.
den virkelige utfordringen er å finne en effektiv og enkel måte å produsere animasjoner på. I denne artikkelen vil vi ha litt bakgrunn på animasjonsteknologi i ebøker, og deretter se på en rekke relativt enkle å produsere animasjonsteknikker med klare eksempler.
typer animasjon
for å gi en rask intro kan animasjoner opprettes på forskjellige måter. De kan være så komplekse (og tidkrevende) som ramme for ramme animasjoner. Det vil si å tegne et eget bilde for hver brøkdel av et sekund. Vi er mer interessert i tweening (kort for in-betweening). Ved tweening angir du start-og sluttstatusene for animasjonen din, og resten genereres automatisk av datamaskinen. Du kan også angi en lettelser funksjon å bruke, for å bruke noen hastighet effekter, som akselerasjon, elastisitet, spretter, etc. Her er en fullstendig liste over lettelser funksjoner.
så Hvordan er animasjoner innebygd i en ebok? Siden EN epub underliggende teknologi ER HTML, her er alternativene:
- Animert GIF bilde
- SVG animasjoner
- Flash movie
- CSS animasjon
- side widget
denne listen er ikke å skremme deg, Men å utforske de tekniske mulighetene som er tilgjengelige for deg. Men la oss forenkle denne listen. Animerte GIF-bilder krever spesiell programvare (F. Eks Photoshop) og animasjonsfilstørrelsene er vanligvis svært store. SVG-animasjoner støtter bare vektorgrafikk og krever en utviklingsbakgrunn for å skape. Flash er utdatert og vil ikke bli støttet på lesere Som Apple iBooks, enn si mobil. Dette etterlater OSS NED TIL CSS animasjoner og side widgets. De er begge i utgangspunktet bror og søster. I stedet for Å bruke CSS animasjoner direkte på siden, side widgets bruke CSS gjennom en iframe (vindu). Vi foretrekker å bruke side widgets siden det er bedre organisert å ha hele animasjonen i en enkelt fil.
Animasjonsprogramvare
Så langt som programvare er involvert, Er Google Web Designer en enkel og gratis programvare for å lage animasjonene dine. Google Web Designer er fokusert på å lage animerte HTML5 bannere og annonser for web og mobil. Vi har funnet ut at du ikke trenger noe mer avansert for å lage raske animasjoner.
den grunnleggende arbeidsflyten I Google Web Designer er som følger:
- Importer hvert av bildene dine, som faller i separate lag
- for hvert lag angir du nøkkelrammer og velger lettelsesfunksjoner
- Eksporter som en zip-pakke
filen som eksporteres, er en sidewidget som er klar til å legges til på siden Din Hvis du vil ha mer informasjon om hvordan du legger til sidewidgeter i e-boken din, kan du se vår artikkel om bokwidgeter.
Animasjonsteknikker
kunnskapen er ikke nok til å skape effektive animasjoner. Hvordan du skal bruke det er det som teller. Akkurat som å lære å bruke en komfyr, betyr ikke nødvendigvis at du skal lage Mat Noen Blanquette de Veau snart. Du må lære noen oppskrifter først. Så la oss se på forskjellige (og enkle) oppskrifter for å bruke animasjoner.
Flytende bilde
dette er den enkleste formen for animasjon. Et bilde som beveger seg i forskjellige retninger(kan rotere også). Og selv om du tror det ville bringe noe nytt til bordet, du tar feil. Avhengig av hvor naturlig bevegelsene er, vil du bli overrasket over hvor mye liv det kan bringe til din ebok og woo leserne. Det beste med denne typen animasjon er at den kan brukes på noen av dine nåværende bilder, uten ekstra ressurser. Vi anbefaler at bildet har en hvit bakgrunn, for å gjøre animasjonen fusjonere med bakgrunnen (forutsatt at bakgrunnen er hvit som er). Her er et eksempel fra en interaktiv ebok vi opprettet om fugler.
her er andre eksempler med bare noen grunnleggende rotasjon. Bruk av riktig timing kan gi en svært troverdig effekt.
du finner disse typer animasjoner over hele nettet. For eksempel, på denne linken finner du et annet eksempel på et flytende bilde vi likte(gå til AVSNITTET EVOKING MEMORIES for å se de flytende astronautpaddene). For å legge til en liten bit av kompleksitet, kan du ha et annet bilde som sitter i ryggen, fast i posisjon. Som så:
Transformere bilde
Ligner på sistnevnte, Men i stedet for å flytte et bilde, transformerer du det. De støttede transformasjoner I CSS3 er skala, skew, OG 3d rotere. Du må være veldig selektiv om hvilke bilder du bruker transformasjoner til. En feil transformasjon kan få ting til å se ganske rart ut. Her er en kombinasjon av skew og 3d rotere transformasjoner brukes på en fugl i vår interaktive ebok.
Overgangskomponenter
La oss ta et skritt videre. Med denne typen animasjon er bildet ditt delt inn i underbilder. Fra en tom skjerm, gjør hver sub-bilde sin egen inngang fra forskjellige retninger, til slutt ender opp med å fullføre det opprinnelige bildet. Uansett hva du gjør, vil dette aldri se dårlig ut. Det vil definitivt se bra ut, men det kan se bedre ut. Ditt valg av underbilder og deres overganger styrer hvor tiltalende animasjonen vil være for leserne. Du kan sløyfe denne animasjonen ved å gjøre sub-bilder overgangen tilbake ut av skjermen.
Grafer og diagrammer
hvis du lager ebøker med rapporter eller statistikk, vil dette kanskje komme til nytte. Du tenker nok at du er i ferd med å se noe ekstremt komplekst. Det er totalt motsatt. Med minimal innsats og enkel kunnskap kan du animere diagrammene dine med et snev av magi, og få leserne til å tro at det var et tonn arbeid. Mange animasjoner eksisterer faktisk på den måten-øynene dine lurer tankene dine til å forstå noe, hvor det i virkeligheten er mye enklere.
så ideen om å animere grafer og diagrammer er som følger. Du vil importere grafen / diagrammet som et bilde Til Google Web Designer. På et lag over, vil du opprette en hvit boks. Dette vil bli brukt til å gi en maskeringseffekt. I utgangspunktet vil den hvite boksen komme på toppen av grafen / diagrammet, bortsett fra den horisontale & vertikale aksen. Du vil overføre den hvite boksen vertikalt oppover for å avsløre hva som er skjult under. Leserens øyne vil lure ham til å tro at stolpene er det som vokser oppover fra under, hvor de faktisk bare blir avslørt. Hvis du vil sløyfe animasjonen, kan du overføre den hvite boksen ned igjen for å skjule grafen igjen. Med riktig timing vil dette bare forføre leserne dine. La oss hoppe til noen eksempler, skal vi? Her er et mer komplekst eksempel hvor flere bilder ble animert sammen med den hvite boksen, som hetten for stolpene.
Konklusjon
i denne artikkelen har vi tatt en generell ide om hvordan animasjoner fungerer i ebøker, og teknologiene bak dem. Vi har sett fire enkle teknikker / triks som kan brukes raskt til ebok bilder, uten å ta for mye tid fra arbeidsflyten. Alt kommer ned til litt lite oppsett tid til å investere i å ha grunnleggende Om Google Web Designer. I et annet innlegg vil vi ta en nærmere titt På Google Web Designer og baby trinn for å følge der, for å lage din første animasjon.
i mellomtiden begynner du å animere!
Du kan også nyte:
5 Hacks For Å Lage En Mer Engasjerende Ebok
Kult Triks: Opprette Dynamiske Tegnnavn I Ebøker
Hvordan lage en interaktiv ebok: en steg-for-steg guide
Hvordan Optimalisere Videoer Og Legge Dem Til Din Ebok
Ebok Forfatterens Guide Til Bilder