Bien que beaucoup puissent discuter de la pertinence des médias enrichis dans les livres électroniques, il ne fait aucun doute que les animations de toute sorte sont plus attrayantes pour les lecteurs que les images statiques. L’idée de créer des animations peut être intimidante pour les auteurs. Il ne s’agit pas des résultats, mais de ce qui est nécessaire pour y arriver. Ça peut devenir moche. Ou pire: cher.

Dans notre parcours de développement de livres électroniques interactifs pour les autres, nous avons réalisé la puissance des animations et l’avons exploitée dans plusieurs livres électroniques. Un ajout aussi mineur à une image peut vraiment donner un impact énorme à votre ebook et le faire ressortir du reste sans aucun doute.

Le vrai défi est de trouver un moyen efficace et facile de produire des animations. Dans cet article, nous aurons quelques informations sur les technologies d’animation dans les livres électroniques, puis examinerons un certain nombre de techniques d’animation relativement faciles à produire avec des exemples clairs.

Types d’animation

Pour donner une introduction rapide, les animations peuvent être créées de différentes manières. Elles peuvent être aussi complexes (et chronophages) que les animations image par image. C’est-à-dire dessiner une image séparée pour chaque fraction de seconde. Nous sommes plus intéressés par l’interpolation (abréviation d’entre-deux). En interpolant, vous spécifiez les états de début et de fin de votre animation, et le reste est généré automatiquement par l’ordinateur. Vous pouvez également spécifier une fonction d’assouplissement à utiliser, afin d’appliquer certains effets de vitesse, comme l’accélération, l’élasticité, le rebond, etc. Voici une liste complète des fonctions d’assouplissement.

Alors, comment les animations sont-elles intégrées dans un ebook? Étant donné que la technologie sous-jacente d’un EPUB est le HTML, voici vos options:

1. Image GIF animée
2. Animations SVG
3. Film flash
4. Animation CSS
5. Widget de page

Cette liste n’est pas pour vous faire peur, mais pour explorer les possibilités techniques qui s’offrent à vous. Mais simplifions cette liste. Les images GIF animées nécessitent un logiciel spécial (par exemple Photoshop) et les tailles de fichiers d’animation sont généralement très grandes. Les animations SVG ne prennent en charge que les graphiques vectoriels et nécessitent un arrière-plan de développement pour créer. Flash est obsolète et ne sera pas pris en charge sur des lecteurs comme Apple iBooks, et encore moins sur les mobiles. Cela nous laisse aux animations CSS et aux widgets de page. Ils sont tous les deux fondamentalement frère et sœur. Au lieu d’appliquer des animations CSS directement dans la page, les widgets de page appliquent CSS via une iframe (fenêtre). Nous préférons utiliser des widgets de page car il est mieux organisé d’avoir toute votre animation dans un seul fichier.

Logiciel d’animation

En ce qui concerne les logiciels, Google Web Designer est un logiciel simple et gratuit pour créer vos animations. Google Web Designer se concentre sur la création de bannières et d’annonces HTML5 animées pour le Web et les mobiles. Nous avons constaté que vous n’avez besoin de rien de plus avancé pour créer des animations rapides.

Le flux de travail de base dans Google Web Designer est le suivant:

1. Importez chacune de vos images, qui se répartissent en calques distincts
2. Pour chaque calque, spécifiez vos images-clés et choisissez vos fonctions d’assouplissement
3. Exportez sous forme de package zip

Le fichier exporté est un widget de page prêt à être ajouté dans votre page Pour plus d’informations sur l’ajout de widgets de page à votre ebook, reportez-vous à notre article sur les widgets de livre.

Techniques d’animation

Le savoir-faire n’est pas suffisant pour créer des animations efficaces. La façon dont vous allez l’utiliser est ce qui compte. Tout comme apprendre à utiliser un poêle, cela ne signifie pas nécessairement que vous cuisinerez bientôt une Blanquette de Veau. Vous devez d’abord apprendre quelques recettes. Regardons donc différentes recettes (et faciles) pour appliquer des animations.

Image flottante

C’est la forme d’animation la plus simple. Une image qui se déplace dans des directions différentes (peut également pivoter). Et bien que vous pensiez que cela n’apporterait rien de nouveau à la table, vous avez tort. Selon la nature des mouvements, vous seriez surpris de la vie que cela peut apporter à votre ebook et courtiser vos lecteurs. La meilleure chose à propos de ce type d’animation est qu’elle peut être appliquée à n’importe laquelle de vos images actuelles, sans ressources supplémentaires. Nous recommandons que l’image ait un fond blanc, pour que l’animation fusionne avec l’arrière-plan (en supposant que l’arrière-plan soit blanc). Voici un exemple tiré d’un livre électronique interactif que nous avons créé sur les oiseaux.

Voici d’autres exemples avec seulement une rotation de base. Appliquer un timing correct peut donner un effet très crédible.

Vous trouverez ces types d’animations partout sur le Web. Par exemple, sur ce lien, vous trouverez un autre exemple d’image flottante qui nous a plu (allez dans la section intitulée ÉVOQUER DES SOUVENIRS pour voir les crapauds astronautes flottants). Pour ajouter un tout petit peu de complexité, vous pouvez avoir une autre image assise à l’arrière, fixe en position. Comme ceci:

Image transformante

Similaire à cette dernière, mais au lieu de déplacer une image, vous la transformez. Les transformations prises en charge dans CSS3 sont l’échelle, l’inclinaison et la rotation 3D. Vous devrez être très sélectif quant aux images auxquelles vous appliquez des transformations. Une mauvaise transformation peut rendre les choses assez étranges. Voici une combinaison de transformations d’inclinaison et de rotation 3D appliquées à un oiseau dans notre ebook interactif.

Composants de transition

Allons plus loin. Avec ce type d’animation, votre image est divisée en sous-images. À partir d’un écran vierge, chaque sous-image fait sa propre entrée dans des directions différentes, finissant finalement par compléter l’image originale. Quoi que tu fasses, ça n’aura jamais l’air mauvais. Cela aura certainement l’air bien, mais cela peut paraître mieux. Votre choix de sous-images et leurs transitions contrôlent l’attrait de l’animation pour les lecteurs. Vous pouvez boucler cette animation en faisant la transition des sous-images hors de l’écran.

Graphiques et tableaux

Si vous créez des livres électroniques avec des rapports ou des statistiques, cela vous sera peut-être utile. Vous pensez probablement que vous êtes sur le point de voir quelque chose d’extrêmement complexe. C’est tout le contraire. Avec un minimum d’effort et un savoir-faire simple, vous pouvez animer vos graphiques avec une touche de magie et faire croire à vos lecteurs que c’était une tonne de travail. De nombreuses animations existent réellement de cette façon – vos yeux trompent votre esprit pour qu’il comprenne quelque chose, alors qu’en réalité c’est beaucoup plus simple.

L’idée d’animer des graphiques et des tableaux est donc la suivante. Vous importerez le graphique / graphique sous forme d’image dans Google Web Designer. Sur un calque ci-dessus, vous allez créer une boîte blanche. Cela sera utilisé pour donner un effet de masquage. Initialement, la boîte blanche viendra au-dessus du graphique / graphique, à l’exception de l’axe vertical horizontal &. Vous ferez la transition de la boîte blanche verticalement vers le haut pour révéler ce qui est caché en dessous. Les yeux du lecteur lui feront croire que les barres sont ce qui monte d’en bas, là où elles ne font que se révéler. Si vous souhaitez boucler l’animation, vous pouvez faire la transition vers le bas de la boîte blanche pour masquer à nouveau le graphique. Avec le bon timing, cela séduira simplement vos lecteurs. Passons à quelques exemples, d’accord ? Voici un exemple plus complexe où des images supplémentaires ont été animées avec la boîte blanche, comme le capuchon des barres.

Conclusion

Dans cet article, nous avons une idée générale du fonctionnement des animations dans les livres électroniques et des technologies qui les sous-tendent. Nous avons vu quatre techniques / astuces simples qui peuvent être appliquées rapidement à vos images de livres électroniques, sans prendre trop de temps dans votre flux de travail. Tout se résume à un peu de temps de configuration pour investir dans les bases de Google Web Designer. Dans un autre article, nous examinerons de plus près Google Web Designer et les étapes à suivre pour créer votre première animation.

En attendant, commencez à animer!

Vous pouvez également profiter de:

5 Hacks pour Créer un Ebook Plus attrayant

Astuce cool: Créer des Noms de Personnages dynamiques dans des Ebooks

Comment créer un ebook interactif: Un guide étape par étape

Comment Optimiser les Vidéos et Les Ajouter à Votre Ebook

L’Ebook Guide De L’Auteur Des Images