Réaliser des infographies animées en HTML5 et ajouter de l’interactivité
-
Objectives
Scénariser de nombreuses données dans un format plus adapté
Structurer les animations pour ajouter de l’interactivité
Développer une méthode de travail efficace
Ajouter de l’interactivité avancée
Concerned public
Prerequisite
- E-quiz amont
- Présentiel
- Modules vidéos
- E-quiz aval
Program
Animate : niveau 2
Définir les caractéristiques d’une infographie interactive
• Distinguer les différents types de navigation utilisateur
• Définir les avantages et les limites de la création d’infographies interactives
• Apporter des solutions ergonomiques
• Transformer une infographie de presse en une infographie animée et interactive
Exercice : concevoir un storyboard adapté et justifier ses choix
Scénariser de nombreuses données dans un format plus adapté
• Dimensionner son projet
• Optimiser le contenu en répondant à un mode de consommation de l’information
• Créer des modèles d’infographies interactives facilement réutilisables
• Gérer l’affichage des infographies selon la taille de l’écran
• Définir le design graphique des parties interactives
Structurer les animations pour ajouter de l’interactivité
• Différencier les symboles : clip, graphique, bouton
• Structurer son fichier pour gagner du temps en production
• Transposer le storyboard en scénario technique
• Comprendre la différence entre une programmation séquentielle et objet
• Créer des boutons
Exercices : créer des infographies de A à Z
Développer une méthode de travail efficace
• Découvrir l'API CreateJS
• Organiser son code au sein d'une animation
• Structurer les occurences pour mieux organiser le code
• Gérer les écouteurs et gestionnaires d'événements
• Contrôler une animation avec des actions de base
• Affecter un lien URL
• Naviguer sur le scénario principal
Exercices : apporter des modifications (rythme, mise à jour d’éléments) sur des animations conçues pendant la formation
Ajouter de l’interactivité avancée
• Cibler le scénario d’une occurrence
• Créer un bouton à bascule
• Afficher et masquer des éléments
• Manipuler les propriétés de symboles
• Utiliser des variables
• Exécuter des conditions
• Publier l'animation