Formation Hype Pro niveau 1 : Animation HTML5 Créer des animations HTML5 sans coder

Cette formation Hype Pro Animation HTML 5 vous apprendra à utiliser le logiciel pour réaliser des animations HTML5 et vidéo qui respectent le DOM (référençables, accessibles).

Objectif opérationnel : 

Savoir utiliser le logiciel pour réaliser des animations HTML 5 et vidéos respectant DOM.

• Réaliser un site responsive
• Animer à l’aide du scénario les propriétés 2D/3D
• Exporter l’animation dans les standards audiovisuels et HTML5
• Comprendre pourquoi Hype Pro est plus adapté à la réalisation d'une interface Web respectueuse du DOM plutôt que pour de l’animation cartoon.

Public :

Ce stage Hype Pro s'adresse aux maquettistes, graphistes, webdesigners, community managers, utilisateurs de PandaSuite ou de Klynt, ex-flasheurs ou ex-utilisateurs de Edge Animate.

Prérequis :

Pour suivre ce cours, il est demandé de savoir utiliser un logiciel graphique tel que Photoshop ou Illustrator. Il n’est pas nécessaire de connaître le code HTML.

Introduction à Hype Pro

Gérer un projet Hype
Connaître la terminologie du logiciel
La fenêtre principale
Utiliser l’inspecteur de propriétés
Le scénario
Les scènes
La bibliothèque
Paramétrer le document
Gérer le texte
Utiliser les outils de formes
L’affichage responsive
La gestion du Viewport (mise à l’échelle sur navigateur mobile)

Gérer les médias avec Hype Pro

Importer des images (png, jpg, SVG)
Importer des fichiers audio
Importation vidéo intégrée et Youtube
Placer un iFrame

Créer une animation avec Hype Pro

Gestion du scénario (images-clés)
Le bouton d’enregistrement
Les trajectoires
Le texte
Les symboles
Les symboles persistants
Animer les propriétés CSS (position, échelle, rotation, opacité…)
Animer des propriétés de plans 3D (position, rotation)
Gérer la physique de mouvement (accélérations, amortissements, rebonds et courbes personnalisées)

Les actions

Placer une action prédéfinie
Piloter le scénario
Glisser-déposer un élément
Gérer une animation parallaxe
Utiliser le scénario relatif

Exportation

Exporter en HTML5Exporter en widget (iBooks Author, Dashboard)
Exporter en GIF animé
Exporter en vidéo (MPEG-4).

Ce cours alterne pratique et théorie pour une meilleure validation des acquis.