Aller au contenu principal
Web - DigitalEnvironnement numérique interactif

Formation Hype Pro niveau 1 : Animation HTML5

Cette formation Hype Pro vous apprendra à utiliser le logiciel pour réaliser des animations HTML5 et vidéo qui respectent le DOM (référençables, accessibles). Plus concrètement, grâce à ce cours, vous saurez: Réaliser…

Objectifs de la formation Hype Pro

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

Plus concrètement, grâce à ce cours, vous saurez:

  • 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.

À qui s’adresse cette formation ?

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.

Contenu du cours Hype Pro

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).

Travaux Pratiques

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

Mise à jour : 29 octobre 2026

Formation Hype Pro niveau 1 : Animation HTML5

Une question sur cette formation ?

Programme détaillé, dates, tarif, financement : notre équipe vous répond, en général sous un jour ouvré.

Dates souhaitées, nombre de participants, financement…

  • Web - Digital

    Formation Aquafadas niveau 1 : Edition Numérique

    Cette formation Aquafadas vous enseignera comment réaliser, avec le plugin Aquafadas et dans l’environnement de InDesign, un projet simple de publication interactive et animée pour périphériques mobiles, au format…

    4 jours

  • Web - Digital

    Formation Aquafadas niveau 2 : Interactivité Avancée

    Cette formation Aquafadas Avancé vous apprendra à déployer des enrichissements interactifs élaborés tout en restant dans l’environnement de publication de InDesign. Plus concrètement, ce cours vous apportera les…

    3 jours

  • Web - Digital

    Formation Greensock GSAP : Design Interactif

    Cette formation Greensock vous apprendra à utiliser la librairie Greensock GSAP pour étendre les propriétés d’animation et d’interactivité du logiciel Hype Pro. Hype pro est utilisé pour la création d’animation…

  • Web - Digital

    Formation Hype Pro niveau 2 : Interactivité HTML5

    Ce cours vous permettra de maîtriser l’utilisation d’Hype Pro pour développer de l’interactivité à partir de commandes JavaScript et d’instructions de l’API de Hype Pro. Concrètement, à l’issue de ce cours vous aurez…

    3 jours