Formation Animation Web SVG et les animations

Partager cette formation Télécharger au format pdf Ajouter à mes favoris

Objectifs pédagogiques / Compétences visées

• Créer des fichiers SVG, les optimiser et les modifier
• Animer des images SVG grâce à la SMIL, aux CSS et à JavaScript
• Rendre ces animations interactives
• Intégrer ces animations dans des pages HTML.

Niveau requis

Avoir une bonne connaissance de la création de page Web (HTML et CSS). Avoir des notions de base JavaScript. Maîtriser un logiciel de dessin vectoriel (Illustrator, Inkscape...) est un plus.

Public concerné

Webmasters, maquettistes, infographistes, responsables de communication, chefs de projets et directeurs artistiques.

Programme

Formats d'image

• Matriciel
• Vectoriel
• Insertion classique et data URI

Dessiner dans une page HTML

• SVG VS Canvas
• Déclaration VS programmation
• Intérêt du DOM SVG
• Les modes d'insertion dans la page HTML

Dessiner avec SVG

• Les outils : Illustrator, Inkscape...
• Optimiser les exports
• Déclaration XML
• ViewBox
• Les formes simples : lignes, rectangles, ellipses
• Les formes complexes : polygones et lignes polygonales
• Filtres SVG

Texte

• Texte en ligne
• L'élément
• Propriétés CSS
• Alignement
• Décalage et rotation

Animation SMIL

• Compatibilité des navigateurs
• Eléments animables
• Balises d'animation
• Attributs des balises
• Interactions

Utiliser JavaScript

• Scripts internes : balise <script>
• Scripts externes
• Evènements
• Fonctions

Styles CSS

• Appliquer un style CSS
• Attributs de présentation et CSS
• Propriétés CSS de SVG
• Attribut "style"
• Balise <script> : dans le <svg> ou dans la page
• Ordre d'application des styles

Animations CSS

• Points d'origine des éléments
• Le module de propriétés "transition"
• Le module de propriétés "animation"
• La fonction translate
• Définir les étapes avec keyframes
• Pseudo-classes de déclenchement
• Ecouter les évènements d'animation avec JavaScript

Finaliser l'animation

• Rendre les SVG responsive
• Utiliser les Media Queries
• Créer une bannière cliquable

Modalités d’évaluation des acquis

• En cours de formation, par des productions
• Et, en fin de formation, par un questionnaire d'auto-évaluation ou une certification (M2i ou éditeur)

Partager cette formation Télécharger au format pdf Ajouter à mes favoris