în timp ce mulți pot argumenta despre relevanța mass-media bogate în cărți electronice, este fără îndoială că animațiile de orice fel sunt mai atrăgătoare pentru cititori decât imaginile statice. Ideea de a crea animații poate fi intimidantă pentru autori. Nu este vorba despre rezultate – este vorba despre ceea ce este necesar pentru a face acest lucru. Se poate obține urât. Sau mai rău: scump.

în călătoria noastră de a dezvolta cărți electronice interactive pentru alții, am realizat puterea animațiilor și am folosit-o în mai multe cărți electronice. O astfel de adăugare foarte minoră la o imagine poate da într-adevăr un impact uriaș cărții dvs. electronice și o poate face să iasă în evidență de restul fără îndoială.

adevărata provocare este găsirea unui mod eficient și ușor de a produce animații. În acest articol vom avea unele fundal pe tehnologii de animație în ebooks, și apoi uita-te la un număr de relativ ușor de a produce tehnici de animație cu exemple clare.

tipuri de animație

Pentru a oferi o introducere rapidă, animațiile pot fi create în moduri diferite. Ele pot fi la fel de complexe (și consumatoare de timp) ca animații cadru cu cadru. Adică desenarea unei imagini separate pentru fiecare fracțiune de secundă. Suntem mai interesați de tweening (prescurtare pentru in-betweening). Prin tweening, specificați stările de început și de sfârșit ale animației dvs., iar restul este generat automat de computer. De asemenea, puteți specifica o funcție de relaxare de utilizat, pentru a aplica unele efecte de viteză, cum ar fi accelerația, elasticitatea, săriturile etc. Iată o listă completă a funcțiilor de relaxare.

Deci, cum sunt animațiile încorporate într-o carte electronică? Deoarece tehnologia de bază a unui EPUB este HTML, iată opțiunile dvs:

1. imagine GIF animată
2. animații SVG
3. film Flash
4. animație CSS
5. widget pagină

această listă nu este pentru a vă speria, ci pentru a explora posibilitățile tehnice disponibile pentru dvs. Dar să simplificăm această listă. Imaginile GIF animate necesită software special (de exemplu, Photoshop), iar dimensiunile fișierelor de animație sunt de obicei foarte mari. Animațiile SVG acceptă numai grafică vectorială și necesită un fundal de dezvoltare pentru a crea. Flash este învechit și nu va fi acceptat pe cititori precum Apple iBooks, să nu mai vorbim de mobil. Acest lucru ne lasă la animații CSS și widget-uri de pagină. Amândoi sunt practic frate și soră. În loc să aplice animații CSS direct în pagină, widgeturile de pagină aplică CSS printr-un iframe (fereastră). Preferăm să folosim widgeturi de pagină, deoarece este mai bine organizat să aveți întreaga animație într-un singur fișier.

software de animație

în ceea ce privește software-ul este implicat, Google Web Designer este un software simplu și gratuit pentru a crea animații. Google Web Designer este axat pe crearea de bannere HTML5 animate și anunțuri pentru web și mobil. Am constatat că nu aveți nevoie de nimic mai avansat pentru a crea animații rapide.

fluxul de lucru de bază în Google Web Designer este după cum urmează:

1. importați fiecare dintre imaginile dvs., care se încadrează în straturi separate
2. pentru fiecare strat, specificați cadrele cheie și alegeți funcțiile de relaxare
3. exportați ca pachet zip

fișierul exportat este un widget de pagină gata pentru a fi adăugat în pagina dvs. pentru mai multe informații despre adăugarea widgeturilor de pagină în cartea dvs. electronică, consultați articolul nostru despre widgeturile de carte.

tehnici de animație

know-how-ul nu este suficient pentru a crea animații eficiente. Cum ai de gând să-l folosească este ceea ce contează. La fel ca a învăța cum să folosești o sobă, nu înseamnă neapărat că vei găti orice Blanquette de Veau în curând. Trebuie să înveți mai întâi câteva rețete. Deci, să ne uităm la diferite (și ușor) rețete pentru a aplica animații.

imagine plutitoare

aceasta este cea mai simplă formă de animație. O imagine care se mișcă în direcții diferite (se poate roti, de asemenea). Și deși ai crede că nu va aduce nimic nou pe masă, te înșeli. În funcție de cât de natural mișcările sunt, ai fi surprins de cât de mult viața se poate aduce la ebook și woo cititorii. Cel mai bun lucru despre acest tip de animație este că poate fi aplicat oricăreia dintre imaginile dvs. actuale, fără resurse suplimentare. Vă recomandăm ca imaginea să aibă un fundal alb, pentru a face animația să se îmbine cu fundalul (presupunând că fundalul este alb). Iată un exemplu dintr-o carte electronică interactivă pe care am creat-o despre păsări.

Iată alte exemple cu doar o rotație de bază. Aplicarea sincronizării corecte poate da un efect foarte credibil.

veți găsi aceste tipuri de animații peste tot pe web. De exemplu, la acest link veți găsi un alt exemplu de imagine plutitoare care ne-a plăcut (accesați secțiunea intitulată evocarea amintirilor pentru a vedea broaștele astronautului plutitor). Pentru a adăuga un pic de complexitate, puteți avea o altă imagine care stă în spate, fixată în poziție. Așa:

transformarea imaginii

Similar cu acesta din urmă, dar în loc să mutați o imagine, o transformați. Transformările acceptate în CSS3 sunt scară, oblic, și 3D roti. Va trebui să fii foarte selectiv cu privire la imaginile la care aplici transformări. O transformare greșită poate face lucrurile să pară destul de ciudate. Iată o combinație de transformări de rotire oblică și 3D aplicate unei păsări în cartea noastră electronică interactivă.

componente tranzitorii

să facem un pas mai departe. Cu acest tip de animație, imaginea dvs. este împărțită în sub-imagini. Dintr-un ecran gol, fiecare sub-imagine își face propria intrare din direcții diferite, ajungând în cele din urmă să completeze imaginea originală. Orice ai face, asta nu va arăta niciodată rău. Cu siguranță va arăta bine, dar poate arăta mai bine. Alegerea dvs. de sub-imagini și tranzițiile lor controlează cât de atrăgătoare va fi animația pentru cititori. Puteți bucla această animație făcând tranziția sub-imaginilor înapoi din ecran.

grafice și diagrame

dacă creați cărți electronice cu rapoarte sau statistici, poate că acest lucru va fi util. Probabil te gândești că ești pe cale să vezi ceva extrem de complex. E exact opusul. Cu un efort minim și un know-how simplu, vă puteți anima graficele cu o notă de magie și îi puteți face pe cititorii dvs. să creadă că a fost o tonă de muncă. Multe animații există de fapt în acest fel – ochii tăi îți păcălesc mintea să înțeleagă ceva, unde în realitate este mult mai simplu.

deci, ideea de a anima grafice și diagrame este după cum urmează. Veți importa graficul / graficul ca imagine în Google Web Designer. Pe un strat de mai sus, veți crea o cutie albă. Acest lucru va fi folosit pentru a da un efect de mascare. Inițial caseta albă va veni pe partea de sus a graficului/graficului, cu excepția axei verticale orizontale &. Veți trece caseta albă vertical în sus pentru a dezvălui ce este ascuns dedesubt. Ochii cititorului îl vor păcăli să creadă că barele sunt ceea ce crește în sus de Jos, unde de fapt sunt doar dezvăluite. Dacă doriți să buclați animația, puteți trece caseta albă înapoi pentru a ascunde graficul încă o dată. Cu calendarul corect, acest lucru va seduce doar cititorii dvs. Să trecem la câteva exemple, bine? Iată un exemplu mai complex în care imaginile suplimentare au fost animate împreună cu cutia albă, ca capac pentru bare.

concluzie

în acest articol am luat o idee generală despre modul în care animațiile funcționează în cărți electronice și tehnologiile din spatele lor. Am văzut patru tehnici/trucuri simple care pot fi aplicate rapid imaginilor dvs. de carte electronică, fără a lua prea mult timp din fluxul de lucru. Totul se reduce la puțin timp de configurare pentru a investi în a avea elementele de bază ale Google Web Designer. Într-o altă postare, vom arunca o privire mai atentă la Google Web Designer și pașii pentru bebeluși de urmat acolo, pentru a crea prima dvs. animație.

între timp, începeți să animați!

s-ar putea bucura, de asemenea:

5 Hacks pentru crearea unui Ebook mai angajarea

truc rece: crearea de nume de caractere dinamice în Ebooks

cum de a crea un ebook interactiv: un ghid pas-cu-pas

Cum de a optimiza video și adăugați-le la Ebook dumneavoastră

Ghidul autorului Ebook imagini