bár sokan vitatkozhatnak a gazdag média relevanciájáról az e-könyvekben, kétségtelen, hogy bármilyen animáció vonzóbb az olvasók számára, mint a statikus képek. Az animációk létrehozásának ötlete megfélemlítő lehet A szerzők számára. Nem az eredményekről van szó, hanem arról, hogy mi szükséges ahhoz, hogy ez megtörténjen. Csúnya lehet. Vagy ami még rosszabb: drága.
az interaktív e-könyvek mások számára történő fejlesztése során felismertük az animációk erejét, és több e-könyvben is felhasználtuk. Egy ilyen nagyon kis kiegészítés egy képhez valóban hatalmas hatást gyakorolhat az e-könyvére, és kérdés nélkül kitűnhet a többi közül.
az igazi kihívás az animációk készítésének hatékony és egyszerű módja. Ebben a cikkben lesz némi háttér animációs technológiák könyveket, majd nézd meg számos viszonylag könnyen előállítható animációs technikák egyértelmű példákat.
az animáció típusai
gyors bevezetéshez animációkat lehet létrehozni különböző módon. Ezek ugyanolyan összetettek (és időigényesek) lehetnek, mint a képkocka animációk. Ez azt jelenti, hogy külön képet rajzolunk a másodperc minden egyes töredékére. Minket jobban érdekel a tweening (az in-betweening rövidítése). A tweening segítségével megadhatja az animáció kezdő – és végállapotát, a többit pedig a számítógép automatikusan generálja. Megadhat egy lazítási funkciót is, hogy bizonyos sebességhatásokat, például gyorsulást, rugalmasságot, pattogást stb. Itt található a könnyítési funkciók teljes listája.
tehát hogyan vannak beágyazva az animációk egy e-könyvbe? Mivel az EPUB mögöttes technológiája HTML, itt vannak a lehetőségek:
- animált GIF kép
- SVG animációk
- Flash film
- CSS animáció
- oldal widget
ez a lista nem megijeszteni, hanem, hogy vizsgálja meg a technikai lehetőségek állnak az Ön számára. De egyszerűsítsük ezt a listát. Az animált GIF-képek speciális szoftvert igényelnek (például Photoshop), és az animációs fájlméretek általában nagyon nagyok. Az SVG animációk csak vektorgrafikát támogatnak,és fejlesztési hátteret igényelnek. A Flash elavult, és nem támogatja az olyan olvasók, mint az Apple iBooks, nem is beszélve a mobilról. Ez a CSS animációkra és az oldal widgetekre hagy minket. Alapvetően mindketten testvérek. Ahelyett, hogy CSS animációkat alkalmazna közvetlenül az oldalon, az oldal widgetek CSS-t alkalmaznak egy iframe (ablak) segítségével. Inkább oldal widgeteket használunk, mivel jobban szervezett, ha a teljes animáció egyetlen fájlban van.
animációs szoftver
ami a szoftvert illeti, a Google Web Designer egy egyszerű és ingyenes szoftver az animációk létrehozásához. A Google Web Designer arra összpontosít, hogy animált HTML5 bannereket és hirdetéseket hozzon létre webes és mobileszközökön. Azt találtuk, hogy nem kell semmi fejlettebb, hogy gyors animációk.
a Google Web Designer alapvető munkafolyamata a következő:
- importálja az egyes képeket, amelyek külön rétegekbe esnek
- minden réteghez adja meg a kulcskereteket, és válassza ki a könnyítési funkciókat
- Exportálás zip csomagként
az exportált fájl egy oldal widget, amely készen áll az oldalra való hozzáadásra.
animációs technikák
a know-how nem elegendő a hatékony animációk létrehozásához. Az számít, hogy hogyan fogod használni. Csakúgy, mint a tűzhely használatának megtanulása, nem feltétlenül jelenti azt, hogy hamarosan bármilyen Blanquette de Veau-t szakácsol. Először meg kell tanulnia néhány receptet. Tehát nézzük meg a különböző (és egyszerű) recepteket az animációk alkalmazásához.
lebegő kép
ez az animáció legegyszerűbb formája. Egy kép, amely mozog a különböző irányokba (lehet forgatni is). És bár azt gondolnád, hogy semmi újat nem hoz az asztalra, tévedsz. Attól függően, hogy milyen természetes a mozgások, meglepődne, hogy mennyi életet hozhat az e-könyvéhez és az olvasóihoz. A legjobb dolog az ilyen típusú animációkban az, hogy bármelyik aktuális képére alkalmazható, extra erőforrások nélkül. Javasoljuk, hogy a kép fehér háttérrel rendelkezzen, hogy az animáció összeolvadjon a háttérrel (feltételezve, hogy a háttér fehér). Íme egy példa egy interaktív e-könyvből, amelyet a madarakról készítettünk.
itt vannak más példák csak néhány alapvető forgatás. A helyes időzítés alkalmazása nagyon hihető hatást eredményezhet.
megtalálja az ilyen típusú animációk az egész interneten. Például ezen a linken talál egy másik példát egy lebegő képre, amely tetszett nekünk (menjen az emlékek felidézése című szakaszba, hogy megnézze az úszó űrhajós varangyokat). Ahhoz, hogy adjunk egy kis bonyolultság, akkor van egy másik kép, hogy ül a hátsó, rögzített helyzetben. Így:
kép átalakítása
hasonló az utóbbihoz, de a kép mozgatása helyett átalakítja. A CSS3 támogatott átalakításai a skála, a ferde és a 3D forgatás. Nagyon szelektívnek kell lennie abban, hogy mely képekre alkalmazza az átalakításokat. A rossz átalakulás elég furcsává teheti a dolgokat. Itt van egy kombinációja ferde és 3D forgatás transzformációk alkalmazott madár interaktív ebook.
Átmeneti komponensek
lépjünk tovább. Az ilyen típusú animációval a kép alképekre oszlik. Üres képernyőről minden alkép különböző irányokból teszi meg a saját bejáratát, végül az eredeti kép kitöltésével. Bármit is csinálsz, ez soha nem fog rosszul kinézni. Ez biztosan jól néz ki, de jobban néz ki. Az alképek kiválasztása és azok átmenetei szabályozzák, hogy az animáció mennyire vonzó lesz az olvasók számára. Ezt az animációt hurkolhatja úgy, hogy az alképek átmenetet visszaadja a képernyőről.
grafikonok és diagramok
ha jelentéseket vagy statisztikákat tartalmazó e-könyveket készít, talán ez jól jön. Valószínűleg azt gondolja, hogy valami rendkívül összetettet fog látni. Pont az ellenkezője. Minimális erőfeszítéssel és egyszerű know-how-val animálhatja a diagramjait egy kis varázslattal, és az olvasóit úgy gondolja, hogy ez egy tonna munka volt. Sok animáció valójában így létezik-a szemed becsapja az elmédet, hogy megértsen valamit, ahol a valóságban sokkal egyszerűbb.
tehát a grafikonok és diagramok animálásának ötlete a következő. A grafikont/diagramot képként importálja a Google Web Designerbe. A fenti rétegen fehér dobozt hoz létre. Ezt arra használják, hogy maszkoló hatást fejtsenek ki. Kezdetben a fehér doboz a grafikon/diagram tetejére kerül, kivéve a vízszintes & függőleges tengelyt. Lesz áttérés a fehér doboz függőlegesen felfelé, hogy felfedje, mi van elrejtve alatta. Az olvasó szeme becsapja őt abban a hitben, hogy a rudak alulról felfelé nőnek, ahol valójában csak feltárulnak. Ha hurkolni szeretné az animációt, akkor a fehér négyzetet visszahelyezheti, hogy ismét elrejtse a grafikont. A megfelelő időzítéssel ez csak elcsábítja olvasóit. Ugorjunk néhány példát, rendben? Itt van egy összetettebb példa, ahol további képeket animáltak a fehér mezővel együtt, mint a rudak kupakját.
következtetés
ebben a cikkben általános képet kaptunk arról, hogyan működnek az animációk az e-könyvekben, és a mögöttük álló technológiákról. Négy egyszerű technikát/trükköt láttunk, amelyek gyorsan alkalmazhatók az ebook képeire, anélkül, hogy túl sok időt vennének a munkafolyamatból. Minden jön le, hogy néhány kis beállítási idő, hogy fektessenek be, amelyek az alapokat a Google Web Designer. Egy másik bejegyzésben közelebbről megvizsgáljuk a Google webdesigner-t és az ott követendő lépéseket, hogy elkészítsük az első animációt.
addig is kezdje el az animációt!
Ön is élvezheti:
5 Hacks létrehozására egy vonzóbb Ebook
Cool trükk: létrehozása dinamikus karakter nevek könyveket
Hogyan hozzunk létre egy interaktív ebook: a lépésről-lépésre útmutató
hogyan lehet optimalizálni videókat, és Add hozzá őket a Ebook
az Ebook szerzői útmutató képek