Mentre molti possono discutere circa la rilevanza dei rich media in ebook, è senza dubbio che le animazioni di qualsiasi tipo sono più attraente per i lettori di immagini statiche. L’idea di creare animazioni può essere intimidatorio per gli autori. Non si tratta dei risultati-si tratta di ciò che è necessario per farlo accadere. Può diventare brutto. O peggio: costoso.
Nel nostro percorso di sviluppo di ebook interattivi per gli altri, abbiamo realizzato il potere delle animazioni e sfruttato in più ebook. Tale aggiunta molto minore di un’immagine può davvero dare un enorme impatto al tuo ebook, e farlo risaltare dal resto senza dubbio.
La vera sfida è trovare un modo semplice ed efficiente per produrre animazioni. In questo articolo avremo qualche background sulle tecnologie di animazione in ebook, e poi guardare una serie di relativamente facile da produrre tecniche di animazione con esempi chiari.
Tipi di animazione
Per dare una rapida introduzione, le animazioni possono essere create in diversi modi. Possono essere complessi (e dispendiosi in termini di tempo) come le animazioni fotogramma per fotogramma. Cioè, disegnando un’immagine separata per ogni frazione di secondo. Siamo più interessati a tweening (abbreviazione di in-betweening). Con il tweening, si specificano gli stati di inizio e fine dell’animazione e il resto viene generato automaticamente dal computer. È inoltre possibile specificare una funzione di facilitazione da utilizzare, al fine di applicare alcuni effetti di velocità, come accelerazione, elasticità, rimbalzo, ecc. Ecco un elenco completo delle funzioni di facilitazione.
Quindi, come sono incorporate le animazioni all’interno di un ebook? Poiché la tecnologia sottostante di un EPUB è HTML, ecco le tue opzioni:
- Animated GIF image
- SVG animations
- Flash movie
- CSS animation
- Page widget
Questa lista non è per spaventarti, ma per esplorare le possibilità tecniche disponibili per te. Ma semplifichiamo questa lista. Le immagini GIF animate richiedono un software speciale (ad esempio Photoshop) e le dimensioni dei file di animazione di solito sono molto grandi. Le animazioni SVG supportano solo la grafica vettoriale e richiedono uno sfondo di sviluppo per la creazione. Flash è obsoleto e non sarà supportato su lettori come Apple iBooks, per non parlare dei dispositivi mobili. Questo ci lascia giù per animazioni CSS e widget di pagina. Sono entrambi fondamentalmente fratello e sorella. Invece di applicare animazioni CSS direttamente nella pagina, i widget pagina applicano CSS attraverso un iframe (finestra). Preferiamo utilizzare i widget di pagina poiché è meglio organizzato per avere l’intera animazione in un unico file.
Software di animazione
Per quanto riguarda il software è coinvolto, Google Web Designer è un software semplice e gratuito per creare le animazioni. Google Web Designer si concentra sulla creazione di banner HTML5 animati e annunci per web e mobile. Abbiamo scoperto che non hai bisogno di nulla di più avanzato per creare animazioni rapide.
Il flusso di lavoro di base in Google Web Designer è il seguente:
- Importare tutte le immagini, che rientrano in strati separati
- Per ogni strato, specificare i fotogrammi chiave e scegli il tuo di allentamento funzioni
- Esporta come un pacchetto zip
Il file esportato è una pagina widget pronto per essere aggiunto nella pagina Per ulteriori informazioni sull’aggiunta di pagina widget per il tuo ebook, fare riferimento al nostro articolo su libro widget.
Tecniche di animazione
Il know-how non è sufficiente per creare animazioni efficaci. Come si sta andando ad usarlo è ciò che conta. Proprio come imparare a usare una stufa, non significa necessariamente che presto cucinerai qualsiasi Blanquette de Veau. Devi prima imparare alcune ricette. Quindi diamo un’occhiata a diverse (e facili) ricette per applicare animazioni.
Floating image
Questa è la forma più semplice di animazione. Un’immagine che si muove in direzioni diverse (può ruotare pure). E anche se penseresti che non porterebbe nulla di nuovo al tavolo, ti sbagli. A seconda di come naturale i movimenti sono, sareste sorpresi di quanta vita può portare al tuo ebook e corteggiare i tuoi lettori. La cosa migliore di questo tipo di animazione è che può essere applicato a qualsiasi delle immagini attuali, senza risorse extra. Raccomandiamo che l’immagine abbia uno sfondo bianco, per far sì che l’animazione si unisca allo sfondo (supponendo che lo sfondo sia bianco). Ecco un esempio da un ebook interattivo che abbiamo creato sugli uccelli.
Ecco altri esempi con solo una rotazione di base. L’applicazione di tempi corretti può dare un effetto molto credibile.
Troverete questi tipi di animazioni in tutto il web. Ad esempio, a questo link troverai un altro esempio di immagine fluttuante che ci è piaciuta (vai alla sezione intitolata EVOKING MEMORIES per vedere i rospi galleggianti degli astronauti). Per aggiungere un po ‘ di complessità, puoi avere un’altra immagine che è seduta nella parte posteriore, fissata in posizione. In questo modo:
Trasformazione dell’immagine
Simile a quest’ultimo, ma invece di spostare un’immagine, la stai trasformando. Le trasformazioni supportate in CSS3 sono scala, inclinazione e rotazione 3D. Dovrai essere molto selettivo su quali immagini applicare le trasformazioni. Una trasformazione sbagliata può far sembrare le cose piuttosto strane. Ecco una combinazione di skew e 3D ruotare trasformazioni applicate a un uccello nel nostro ebook interattivo.
Componenti di transizione
Facciamo un ulteriore passo avanti. Con questo tipo di animazione, l’immagine è divisa in sotto-immagini. Da una schermata vuota, ogni sotto-immagine fa il suo ingresso da diverse direzioni, finendo infine per completare l’immagine originale. Qualunque cosa tu faccia, questo non sarà mai guardare male. Sarà sicuramente guardare bene, ma può guardare meglio. La vostra scelta di sotto-immagini e le loro transizioni di controllo come attraente l’animazione sarà per i lettori. È possibile eseguire il ciclo di questa animazione rendendo la transizione sub-immagini di nuovo fuori dallo schermo.
Grafici e grafici
Se stai creando ebook con report o statistiche, forse questo sarà utile. Probabilmente stai pensando che stai per vedere qualcosa di estremamente complesso. E ‘ tutto il contrario. Con il minimo sforzo e semplice know-how, è possibile animare i grafici con un tocco di magia, e rendere i vostri lettori pensano che fosse una tonnellata di lavoro. Molte animazioni esistono in realtà in questo modo: i tuoi occhi ingannano la tua mente per comprendere qualcosa, dove in realtà è molto più semplice.
Quindi l’idea di animare grafici e grafici è la seguente. Potrai importare il grafico / grafico come immagine in Google Web Designer. Su un livello sopra, creerai una scatola bianca. Questo sarà usato per dare un effetto di mascheramento. Inizialmente la casella bianca verrà in cima al grafico / grafico, ad eccezione dell’asse verticale orizzontale &. Passerai la scatola bianca verticalmente verso l’alto per rivelare ciò che è nascosto sotto. Gli occhi del lettore lo indurranno a credere che le barre siano ciò che cresce verso l’alto dal basso, dove in realtà vengono solo rivelate. Se si desidera eseguire il loop dell’animazione, è possibile ripristinare la casella bianca per nascondere nuovamente il grafico. Con il tempismo corretto, questo sedurrà solo i tuoi lettori. Saltiamo ad alcuni esempi, che ne dici? Ecco un esempio più complesso in cui sono state animate immagini aggiuntive insieme alla scatola bianca, come il tappo per le barre.
Conclusione
In questo articolo abbiamo preso un’idea generale di come le animazioni funzionano in ebook, e le tecnologie dietro di loro. Abbiamo visto quattro semplici tecniche / trucchi che possono essere applicati rapidamente alle immagini ebook, senza prendere troppo tempo dal flusso di lavoro. Tutto si riduce a un po ‘ di tempo di installazione per investire nell’avere le basi di Google Web Designer. In un altro post, ci sarà uno sguardo più da vicino a Google Web Designer e piccoli passi da seguire lì, per creare la tua prima animazione.
Nel frattempo, inizia ad animare!
Si potrebbe anche godere di:
5 Hack per la Creazione di un Più Coinvolgente Ebook
Trucco: Creazione Dinamica Nomi dei personaggi in Ebook
Come creare un interactive ebook: A step-by-step guide
Come Ottimizzare i Video e aggiungerli al Tuo Ebook
L’Ebook dell’Autore Guida Per Immagini