Formation Canvas, créer des animations dynamiques en HTML5


Objectifs
  • Découvrir et utiliser les capacités de HTML5 et JavaScript en matière de création de contenus Rich Media avec Canvas
  • Apprendre à concevoir du contenu depuis le simple dessin jusqu’à la conception 3D en passant par l’animation
Participants
  • Développeur
  • Toute personne souhaitant découvrir ou opérer une migration vers HTML 5
Approche Pédagogique
  • Cas pratiques
  • Remise d’outils
  • Echanges d’expériences
  • Durée : 2 jours
  • Réf. : WEB42

Dates de Formations

15 et 16 Mai 2019

11 et 12 Juil. 2019

26 et 27 Sept. 2019

12 et 13 Nov. 2019

Programme
  • 1/ Introduction et rappels
    • • Les frameworks HTML5 : quels outils et quels avantages ?
    • • Retours sur les bases d’une application Web
    • • Les APIs disponibles
    • • Rappels sur le langage de script
    • • La différence entre canvas et SVG
  • 2/ Les bases du dessin avec l’API Canvas
    • • La balise canvas et son API
    • • Remplir la zone du canvas
    • • Créer des formes primitives
    • • Ajouter et personnaliser du texte
    • • Animer les éléments
    • • Utiliser les techniques de tracés avancées : Béziers, courbes…
    • • Dessiner une texture
  • 3/ Techniques de dessin avancées
    • • Transformer les objets avec Translate
    • • Gérer le mouvement des formes : scaling, rotation…
    • • Appliquer une transformation customisée
    • • Gérer les ombres et les dégradés
    • • Détourer un élément
    • • Utiliser des masques
    • • Optimiser le canvas
    • • Utiliser la propriété globalAlpha
    • • Manipulation de pixels
  • 4/ Exemples de mise en application
    • • Construire un diaporama d’images
    • • Créer des animations, utiliser des spritesheets
    • • Utiliser le double buffering
    • • Intégrer le canvas dans des pages
  • 5/ Concevoir avec des frameworks
    • • Exemple : utiliser KineticJS
    • • Organiser les ressources
    • • Gérer les événements
    • • Gérer les interactions : interpolation, drag & drop, animation
  • 6/ Aperçu des applications 3D de canvas
    • • Support 3D du JavaScript
    • • Les notions de base
    • • Gérer les caméras et l’éclairage
    • • Animer les objets
    • • Gérer les textures