picto Web - Digital

Formation Hype Pro niveau 1 : Animation HTML5

Créer des animations HTML5 sans coder

Référence

IHPI

Durée

5 JOURS

Tarif

2250 € HT

NIVEAU

Débutant

Cours à distance

Oui

Objectifs de la 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 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.

Pré-Requis

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.

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.

Contenu du cours Hype Pro niveau 1 : Animation HTML5

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