vaikka monet saattavat kiistellä rikkaiden medioiden merkityksestä e-kirjoissa, on selvää, että kaikenlaiset animaatiot vetoavat lukijoihin enemmän kuin staattiset kuvat. Ajatus animaatioiden tekemisestä voi olla tekijöille pelottava. Kyse ei ole tuloksista – vaan siitä, mitä tarvitaan, jotta se toteutuu. Siitä voi tulla rumaa. Tai pahempaa: kallis.

matkallamme kehittää interaktiivisia e-kirjoja muille, olemme ymmärtäneet voimaa animaatioita ja hyödyntää sitä useita e-kirjoja. Tällainen hyvin pieni lisä kuva voi todella antaa valtava vaikutus ebook, ja tehdä siitä erottuvat muusta ilman kysymyksiä.

todellinen haaste on löytää tehokas ja helppo tapa tuottaa animaatioita. Tässä artikkelissa meillä on jonkin verran taustaa animaatiotekniikoita e-kirjoja, ja sitten tarkastella useita suhteellisen helppo tuottaa animaatio tekniikoita selkeitä esimerkkejä.

Animaatiotyypit

nopean intron aikaansaamiseksi animaatioita voidaan luoda eri tavoin. Ne voivat olla yhtä monimutkaisia (ja aikaa vieviä) kuin frame by frame-animaatiot. Toisin sanoen piirretään erillinen kuva jokaista sekunnin murto-osaa varten. Olemme kiinnostuneempia tweeningistä (lyhenne sanoista in-betweening). Tviittaamalla määrität animaatiosi alku-ja lopputilan, ja tietokone luo loput automaattisesti. Voit myös määrittää helpottavan toiminnon käytettäväksi, jotta voidaan soveltaa joitakin nopeus vaikutuksia, kuten kiihtyvyys, kimmoisuus, terhakka, jne. Tässä on täydellinen luettelo helpottavia toimintoja.

Joten miten animaatiot on upotettu eBookin sisään? Koska EPUB: n taustalla oleva tekniikka on HTML, tässä ovat vaihtoehdot:

1. Animated GIF image
2. SVG animations
3. Flash movie
4. CSS animation
5. page widget

tämän listan tarkoituksena ei ole pelotella, vaan tutkia tarjolla olevia teknisiä mahdollisuuksia. Mutta yksinkertaistetaan tätä listaa. Animoidut GIF-kuvat vaativat erityistä ohjelmistoa (esim.Photoshop) ja animaatiotiedostojen koot ovat yleensä hyvin suuria. SVG-animaatiot tukevat vain vektorigrafiikkaa ja vaativat kehittämistaustaa luodakseen. Flash on vanhentunut ja ei tueta lukijoita kuten Apple iBooks, saati mobile. Tämä jättää meidät alas CSS animaatioita ja sivun widgetit. He ovat molemmat pohjimmiltaan veli ja sisko. Sen sijaan, että sovellettaisiin CSS animaatioita suoraan sivulla, page widgetit soveltaa CSS kautta iframe (ikkuna). Käytämme mieluummin sivun widgettejä, koska on parempi järjestää koko animaatio yhteen tiedostoon.

animaatio-ohjelmisto

sikäli kuin ohjelmisto on mukana, Google Web Designer on yksinkertainen ja ilmainen ohjelmisto animaatioiden luomiseen. Google Web Designer on keskittynyt luomaan animoituja HTML5 bannereita ja mainoksia web ja mobiili. Olemme huomanneet, että et tarvitse mitään kehittyneempää luoda nopeita animaatioita.

Google Web Designerin peruskäytäntö on seuraava:

1. tuo jokainen kuvistasi, jotka kuuluvat erillisiin kerroksiin
2. jokaiselle kerrokselle, määritä näppäinkehyksesi ja valitse helpottava toimintosi
3. vie zip-pakettina

tiedosto viety on sivuelementti, joka on valmis lisättäväksi sivullesi saadaksesi lisätietoa sivuelementtien lisäämisestä e-kirjaasi, katso artikkelimme kirjaelementeistä.

Animaatiotekniikat

osaaminen ei riitä tehokkaiden animaatioiden luomiseen. Tärkeintä on, miten käytät sitä. Aivan kuten lieden käytön opettelu, se ei välttämättä tarkoita, että tulet pian kokkaamaan mitään Blanquette de Veauta. Opettele ensin reseptejä. Joten katsotaanpa erilaisia (ja helppoja) reseptejä soveltaa animaatioita.

kelluva kuva

tämä on animaation yksinkertaisin muoto. Kuva, joka liikkuu eri suuntiin (voi myös pyöriä). Ja vaikka sen luulisi tuovan mitään uutta pöytään, olet väärässä. Riippuen siitä, kuinka luonnollisia liikkeet ovat, olisit yllättynyt siitä, kuinka paljon elämää se voi tuoda ebook ja kosia lukijoita. Parasta tämäntyyppisessä animaatiossa on se, että sitä voidaan soveltaa mihin tahansa nykyisiin kuviin ilman ylimääräisiä resursseja. Suosittelemme, että kuvassa on valkoinen tausta, jotta animaatio sulautuu taustaan (olettaen, että tausta on valkoinen). Tässä on esimerkki interaktiivinen ebook loimme linnuista.

tässä on muita esimerkkejä, joissa on vain jonkin verran peruskiertoa. Soveltamalla oikea ajoitus voi antaa hyvin uskottava vaikutus.

tällaisia animaatioita löytyy kaikkialta verkosta. Esimerkiksi tästä linkistä löydät toisen esimerkin kelluvasta kuvasta, josta pidimme (mene osioon, jonka otsikkona on muistojen herättäminen nähdäksesi kelluvat astronauttikonnat). Lisätä hieman monimutkaisuutta, voit olla toinen kuva, joka istuu takana, kiinteä asennossa. Näin:

Muuttokuva

samanlainen kuin viimeksi mainittu, mutta kuvan siirtämisen sijaan sitä muutetaan. Tuetut muunnokset CSS3: ssa ovat asteikko, vinoutuma ja 3D-kierto. Sinun täytyy olla hyvin valikoiva, mitä kuvia käytät muutoksia. Väärä muodonmuutos voi saada asiat näyttämään aika oudoilta. Tässä on yhdistelmä skew ja 3D kiertää muutoksia sovelletaan lintu Meidän interaktiivinen ebook.

Siirtymäkomponentit

Otetaanpa askel eteenpäin. Tämän tyyppisellä animaatiolla Kuva on jaettu alakuviin. Tyhjältä näytöltä jokainen alikuva tekee oman sisääntulonsa eri suunnista päätyen lopulta alkuperäisen kuvan täydentämiseen. Mitä ikinä teetkin, tämä ei koskaan näytä pahalta. Se näyttää varmasti hyvältä, mutta se voi näyttää paremmalta. Alikuvien valinta ja niiden siirtymät ohjaavat sitä, kuinka houkutteleva animaatio tulee olemaan lukijoille. Voit silmukka tämän animaation tekemällä alikuvat siirtyminen takaisin pois ruudusta.

kaaviot ja kaaviot

jos luot e-kirjoja raporteilla tai tilastoilla, ehkä tästä on hyötyä. Luulet varmaan näkeväsi jotain äärimmäisen monimutkaista. Se on täysin päinvastainen. Vähällä vaivalla ja yksinkertaisella tietotaidolla voit animoida karttasi ripauksella taikaa ja saada lukijasi luulemaan, että kyseessä oli tonni työtä. Monet animaatiot ovat olemassa niin – silmäsi huijaavat mielesi ymmärtämään jotain, missä todellisuudessa se on paljon yksinkertaisempaa.

kuvaajien ja kaavioiden animoinnin idea on siis seuraava. Voit tuoda kuvaajan / kaavion kuvana Google Web Designer. Yllä olevalla kerroksella luot valkoisen laatikon. Tätä käytetään antamaan rajauksella vaikutus. Aluksi valkoinen laatikko tulee kuvaajan/kaavion päälle, paitsi vaaka – & pystyakseli. Siirrät valkoista laatikkoa pystysuunnassa ylöspäin paljastaaksesi, mitä sen alla on piilossa. Lukijan silmät huijaavat hänet uskomaan, että kalterit ovat se, mikä kasvaa alhaalta ylöspäin, missä ne oikeastaan vasta paljastuvat. Jos haluat silmukka animaatio, voit siirtää valkoinen laatikko takaisin alas piilottaa kuvaajan jälleen. Oikea ajoitus, tämä vain vietellä lukijat. Siirrytäänpä muutamiin esimerkkeihin. Tässä on monimutkaisempi esimerkki, jossa ylimääräisiä kuvia animoitiin yhdessä valkoisen laatikon, kuten korkki baareja.

johtopäätös

tässä artikkelissa olemme ottaneet yleisen käsityksen siitä, miten animaatiot toimivat e-kirjoissa ja niiden taustalla olevista teknologioista. Olemme nähneet neljä yksinkertaista tekniikkaa / temppuja, joita voidaan soveltaa nopeasti ebook-kuviisi ottamatta liikaa aikaa työnkulustasi. Se kaikki tulee alas joitakin pieniä setup aikaa investoida ottaa perusasiat Google Web Designer. Toisessa postitse, otamme tarkemmin Google Web Designer ja baby steps seurata siellä, luoda ensimmäinen animaatio.

sillä välin, aloittakaa animointi!

you might also enjoy:

5 Hacks for Creating a More Engaging Ebook

Cool Trick: Creating Dynamic Character Names in eBook

How to create an interactive ebook: a step-by-step guide

How to Optimize Videos and Add Them to Your Ebook

the Ebook Author ’ s Guide To Images