Canvas, créer des animations dynamiques en HTML5

ORSYS, La Grande Arche, Paroi Nord, 92044 Paris La Défense cedex. Tél : [phone]. Fax : [phone] page 1
Stage pratique de 2 jour(s)
Réf : NYD
Participants
Développeurs de contenus
Web riches, toutes les
personnes souhaitant
découvrir ou opérer une
migration vers HTML 5.
Pré-requis
Bonnes connaissances du
HTML et des technologies
du Web. Connaissance du
langage de programmation
JavaScript.
Prix 2016 : 1410€ HT
Dates des sessions
Paris
8 sep. 2016, 3 nov. 2016
Canvas, créer des animations dynamiques en HTML5
HTML 5 apporte des solutions puissantes et indépendantes pour la création de contenus riches. Au cours
de cette formation, vous apprendrez à développer des jeux et des éléments Rich Media en HTML 5 avec
JavaScript. Vous découvrirez également les possibilités d'animation 2D et 3D.
OBJECTIFS PEDAGOGIQUES
Dessiner, animer, créer des graphiques et des images
Créer des bannières interactives et des jeux
Créer des animations 3D
1) HTML 5 rappels
2) L'API Canvas avec JavaScript
3) Création d'un concept Rich Media
4) Faciliter la création avec les frameworks
5) 3D avec Three.js
Méthodes pédagogiques
Développement, présentation et mise en oeuvre d'applications existantes.
Travaux pratiques
En alternant programmation, pratique et théorie, vous apprendrez à concevoir et réaliser des contenus riches
et connectés en HTML5.
1) HTML 5 rappels
- Composants d'une application Web.
- Tour d'horizon des frameworks HTML 5.
- Les nouvelles API orientées médias.
- Perspectives et conséquences pour les développeurs.
- Le langage JavaScript : mise à niveau.
Travaux pratiques
Programmation autour des nouvelles API JavaScript.
2) L'API Canvas avec JavaScript
- L'élément Canvas. Présentation de L'API.
- Dessiner : gestion du remplissage.
- Création des formes.
- Importer, utiliser des images et manipuler les pixels.
- Gestion du texte. Création des effets (ombres...).
- Première animation et principes pratiques.
- Optimiser le canvas.
Travaux pratiques
Révision et programmation JavaScript. Utilisation avec l'élément canvas pour réaliser des graphiques.
3) Création d'un concept Rich Media
- Motivation utilisateur : "feedback", "fish bait", émotionnelle...
- Gameplay : règles et ergonomie.
- Structurer les écrans essentiels : ouverture, interstice, "packshot".
- Intégrer un processus de conception partagée.
- Intégrer une dimension sociale par les réseaux : Facebook.
- Préparation et organisation des ressources.
Réflexion collective
Création inversée du plan conceptuel à partir d'une étude de cas concrète. Définition d'un concept
personnalisé de contenu Rich Media promotionnel selon les ressources fournies.
4) Faciliter la création avec les frameworks
- Quelle solution choisir ? KineticJS, PaperJS, FabricJS ...
- KineticJS, présentation et concepts. Tour d'horizon de l'API.
- Organisation des ressources : stage, layers, groups.
- Création de tracés et importation de bitmap.
- Gestion des événements.
- Animation et interpolation. Drag and Drop.
Travaux pratiques
Création de bannières interactives et de jeux connectés.
5) 3D avec Three.js

ORSYS, La Grande Arche, Paroi Nord, 92044 Paris La Défense cedex. Tél : [phone]. Fax : [phone] page 2
- 3D en Javascript, présentation et théorie.
- Notion de scène : création.
- Mise en œuvre des caméras.
- Concepts clés du framework.
- Gestion des lumières.
- Définition et animation d'objets.
- Application de textures.
Travaux pratiques
Création d'une animation HTML 5 en 3D avec Three.js