zatímco mnozí mohou argumentovat o významu bohatých médií v e-knihách, je nepochybné, že animace jakéhokoli druhu jsou pro čtenáře přitažlivější než statické snímky. Myšlenka vytváření animací může být pro autory zastrašující. Není to o výsledcích – je to o tom, co je nutné, aby se to stalo. Může to být ošklivé. Nebo horší: drahé.

na naší cestě vývoje interaktivních e-knih pro ostatní jsme si uvědomili sílu animací a využili je ve více e-knihách. Takový velmi malý doplněk k obrázku může opravdu dát obrovský dopad na vaši ebook, a učinit z něj vyniknout od ostatních bez pochyb.

skutečnou výzvou je nalezení efektivního a snadného způsobu vytváření animací. V tomto článku budeme mít nějaké zázemí pro animační technologie v e-knihách a pak se podíváme na řadu relativně snadno vyrobitelných animačních technik s jasnými příklady.

typy animace

Chcete-li dát rychlé intro, animace mohou být vytvořeny různými způsoby. Mohou být stejně složité (a časově náročné) jako animace snímek po snímku. To znamená, že nakreslíte samostatný obrázek pro každý zlomek sekundy. Máme větší zájem o tweening (zkratka pro in-betweening). Tweeningem určíte počáteční a koncový stav animace a zbytek je automaticky generován počítačem. Můžete také určit funkci uvolňování, kterou chcete použít, abyste mohli použít některé efekty rychlosti, jako je zrychlení, pružnost, poskakování atd. Zde je úplný seznam funkcí uvolňování.

jak jsou tedy animace vloženy do e-knihy? Protože základní technologií EPUB je HTML, zde jsou vaše možnosti:

1. animovaný GIF obrázek
2. svg animace
3. Flash film
4. CSS animace
5. page widget

tento seznam není vás vyděsit, ale prozkoumat technické možnosti, které máte k dispozici. Ale pojďme zjednodušit tento seznam. Animované obrázky GIF vyžadují speciální software (např. Photoshop) a velikosti animačních souborů jsou obvykle velmi velké. Animace SVG podporují pouze vektorovou grafiku a pro vytvoření vyžadují vývojové pozadí. Flash je zastaralý a nebude podporován na čtečkách, jako jsou Apple iBooks, natož mobilní. To nás nechává na animacích CSS a widgetech stránek. Oba jsou v podstatě bratr a sestra. Namísto použití CSS animací přímo na stránce, page widgets použít CSS přes iframe (okno). Dáváme přednost použití widgetů stránky, protože je lépe organizováno mít celou animaci v jednom souboru.

animační software

pokud jde o software, Google Web Designer je jednoduchý a bezplatný software pro vytváření animací. Google Web Designer se zaměřuje na vytváření animovaných bannerů a reklam HTML5 pro web a mobilní zařízení. Zjistili jsme, že pro vytváření rychlých animací nepotřebujete nic pokročilejšího.

základní pracovní postup v aplikaci Google Web Designer je následující:

1. Importujte každý z vašich obrázků, které spadají do samostatných vrstev
2. pro každou vrstvu zadejte své klíčové snímky a vyberte funkce uvolňování
3. exportujte jako balíček zip

exportovaný soubor je widget stránky připravený k přidání na vaši stránku Další informace o přidání widgetů stránky do vaší e-knihy naleznete v našem článku o widgetech knihy.

animační techniky

know-how nestačí k vytvoření efektivních animací. Záleží na tom, jak ho využijete. Stejně jako učení, jak používat sporák, nemusí nutně znamenat, že brzy vaříte jakoukoli Blanquette de Veau. Nejprve se musíte naučit některé recepty. Podívejme se tedy na různé (a snadné) recepty, jak aplikovat animace.

plovoucí obraz

Toto je nejjednodušší forma animace. Obrázek, který se pohybuje v různých směrech(může také otáčet). A i když byste si mysleli, že to nepřinese nic nového, mýlíte se. V závislosti na tom, jak přirozené pohyby jsou, budete překvapeni, kolik života to může přinést do vašeho ebook a nalákat své čtenáře. Nejlepší věc, o tomto typu animace je, že může být použita na některý z vašich aktuálních snímků, bez dalších zdrojů. Doporučujeme, aby obrázek měl bílé pozadí, aby se animace sloučila s pozadím (za předpokladu, že pozadí je bílé). Zde je příklad z interaktivní e-knihy, kterou jsme vytvořili o ptácích.

zde jsou další příklady pouze s některými základními rotacemi. Použití správného načasování může mít velmi uvěřitelný účinek.

tyto typy animací najdete na celém webu. Například na tomto odkazu najdete další příklad plovoucího obrázku, který se nám líbil (přejděte do sekce evokující vzpomínky a podívejte se na plovoucí ropuchy astronautů). Chcete-li přidat trochu složitosti, můžete mít další obrázek, který sedí vzadu, upevněný na svém místě. Podobně:

transformuje obraz

podobně jako ten druhý, ale místo pohybu obrazu jej transformujete. Podporované transformace v CSS3 jsou měřítko, zkosení a 3D otočení. Budete muset být velmi selektivní, na které obrázky použijete transformace. Špatná transformace může způsobit, že věci vypadají docela divně. Zde je kombinace šikmých a 3D rotačních transformací aplikovaných na ptáka v naší interaktivní e-knize.

přechodné komponenty

pojďme o krok dále. U tohoto typu animace je váš obrázek rozdělen na dílčí obrázky. Z prázdné obrazovky, každý dílčí obraz dělá svůj vlastní vstup z různých směrů, nakonec skončí dokončením původního obrázku. Cokoliv uděláš, nikdy to nebude vypadat špatně. Určitě to bude vypadat dobře, ale může to vypadat lépe. Váš výběr dílčích obrázků a jejich přechody řídí, jak přitažlivá bude animace pro čtenáře. Můžete smyčky tuto animaci tím, že dílčí obrazy přechod zpět z obrazovky.

Grafy a grafy

pokud vytváříte e-knihy se zprávami nebo statistikami, možná to přijde vhod. Pravděpodobně si myslíte, že uvidíte něco nesmírně složitého. Je to úplný opak. S minimálním úsilím a jednoduchým know-how můžete animovat své grafy s nádechem magie a přimět čtenáře, aby si mysleli, že to byla Tuna práce. Mnoho animací skutečně existuje tímto způsobem-vaše oči přimějí vaši mysl k pochopení něčeho, kde je ve skutečnosti mnohem jednodušší.

takže myšlenka animace grafů a grafů je následující. Graf/graf importujete jako obrázek do Google Web Designer. Na vrstvě výše vytvoříte bílé pole. To bude použito k vytvoření maskovacího efektu. Zpočátku se bílý rámeček dostane na horní část grafu / grafu, s výjimkou vodorovné & svislé osy. Budete přecházet bílý rámeček svisle nahoru, abyste odhalili, co se skrývá pod ním. Čtenářovy oči ho přimějí věřit, že tyče jsou to, co roste zdola nahoru, kde se ve skutečnosti právě odhalují. Pokud chcete animaci smyčkovat, můžete bílý rámeček přesunout zpět dolů a graf znovu skrýt. Se správným načasováním to jen svede vaše čtenáře. Přejděme k několika příkladům, Ano? Zde je složitější příklad, kdy byly animovány další obrázky spolu s bílým rámečkem, jako víčko pro tyče.

závěr

v tomto článku jsme vzali obecnou představu o tom, jak animace fungují v e-knihách, a technologie za nimi. Viděli jsme čtyři jednoduché techniky / triky, které lze rychle aplikovat na vaše obrázky ebook, aniž byste museli věnovat příliš mnoho času pracovnímu postupu. To vše přijde na nějaké malé nastavení času investovat do mít základy Google Web Designer. V dalším příspěvku se podrobněji podíváme na Google Web Designer a dětské kroky, které je třeba následovat, abyste vytvořili svou první animaci.

mezitím začněte animovat!

můžete se také těšit:

5 hacků pro vytvoření poutavější e-knihy

skvělý trik: vytváření dynamických názvů znaků v e-knihách

jak vytvořit interaktivní e-knihu: podrobný průvodce

jak optimalizovat videa a přidat je do vaší e-knihy

příručka autora e-knihy k obrázkům