A l'issue de cette formation, vous serez capable de :

• Réaliser des animations au format Web HTML 5 sans avoir à connaître un langage de programmation
• Créer des présentations interactives
• Exporter les animations Motion Design au format vidéo.

Jour 1 - Matin

Introduction

• Hype, le HTML 5 et ses composants (CSS, JavaScript, SVG...)
• Comprendre l'interface
• La fenêtre principale
• L'inspecteur de propriétés
• La Timeline
• Les scènes
• La bibliothèque de ressources
• Terminologie
• Paramétrage d'un nouveau document
• Formats et résolutions (gestion du Retina)
• Les outils de formes et de textes

Créer des animations

• Comprendre la Timeline principale
• Modifier le timing et les images-clés
• Le bouton d'enregistrement
• Les vitesses et trajectoires d'animations
• Imports et gestion des ressources
• Le texte
• Travailler avec le Capo
• Les différents copier / coller
• Animer les filtres CSS

Exemples de travaux pratiques (à titre indicatif)

• Prise en main de l'interface et des outils de base
• Création d'une première animation simple avec formes et texte
• Manipulation de la Timeline pour gérer le timing

Jour 1 - Après-midi

Interactivités et Timelines multiples

• Boutons et actions de souris
• Timelines multiples
• Actions de Timelines et Timelines relatives
• Chaîner des actions
• Intégrer des widgets HTML
• Audio
• Vidéo
• Intégrer du code JavaScript

Principe des scènes

• Créer et gérer les scènes
• Ajouter des transitions
• Equilibre Timelines / scènes

Exemples de travaux pratiques (à titre indicatif)

• Ajout d'interactivité (boutons, actions de souris) dans une animation
• Création de Timelines multiples et gestion de leurs interactions
• Organisation d'une animation en plusieurs scènes avec transitions

Jour 2 - Matin

Exports

• Prévisualisation sur un périphérique (par Hype Reflect ou Dropbox)
• Exporter en HTML (JavaScript inclus)
• Intégrer une publication numérique dans une page Web
• Exporter en widget (pour iBooks Author...)
• Exporter en GIF animé
• Exporter en vidéo (MPEG 4)
• Intégration à WebFlow

Exemples de travaux pratiques (à titre indicatif)

• Test d'une animation sur périphérique mobile via Hype Reflect
• Export d'une animation au format HTML pour intégration Web
• Export d'une animation au format vidéo pour diffusion

Jour 2 - Après-midi

Exemples de travaux pratiques (à titre indicatif)

• Réalisation d'un projet d'animation avec interactions :
• Animation d'objets et gestion des Timelines
• Ajout d'interactivités
• Intégration de médias externes (image, icône, logo, son, vidéo...)
• Export aux formats adaptés (HTML, vidéo, GIF...)