Adobe Edge (Html5/Css3) - Niveau 1

Adobe Edge (Html5/Css3) - Niveau 1

Public :

Graphistes, webmasters et développeurs d’applications Internet

Pré-requis :

Avoir une bonne connaissance de la création de sites Web

Durée :

21 heures (3 jours)

Logiciel manipulé :

Adobe Edge

Objectifs :

Utiliser Adobe Edge pour la conception d’animations utilisant les nouveaux standard en HTML5 et CSS3.

Installation

• Les concepts de bases de l’animation vectorielle
• Les plus de HTML5 dans la diffusion de contenus

multiplateformes (Iphone, Ipad ...)
• Présentation des logiques d’animation HTML5 (CSS,

JavaScript, SVG)
• Format de fichiers, poids de fichiers
• Edge et le HTML5 par rapport à Flash

Les fonctions

• Découverte de l’environnement de travail
• L’espace de travail et le panneau propriétés
• le panneau bibliothèque, actifs, symboles et polices
• Créer un nouveau document (taille, background ...)
• Pré-visualisation d’une animation
• Importer des images et autres médias
• Utiliser les outils de forme et de texte

L’animation

• Utiliser la ligne de temps
• Paramétrer la timeline (zoom, Auto-keyframe, Smooth

Transition)
• Animation d’objets avec les images clés et les transitions
• Copier/coller une transition d’un objet à un autre
• Animation avec trajectoires de mouvement
• Animation de masque d’écrêtage (clipping)
• Utilisation de commandes de lecture avec les symboles
• Créer des déplacements d’objets
• Modifier les apparences d’un objet (couleurs, formes ...)
• Animer les éléments d’une page web existante
• Intégrer une animation de preloading (gifs de

preloading par défaut / gif personnalisés)

• Exporter une animation en HTML5
• Publier vers indesign

L’interactivité dans Edge

• Le principe de l’interactivité
• Le balisage
• Le JavaScript et jQuery
• La gestion des événements
• Les comportements et boutons
• Insertion de code sur la timeline
• Actions sur les objets

Responsive Design - gérer la fluidité

• Redimensionnement / positionnement élastique d’objets

sur la scène
• Propriétés d’alignement et de centrage des images dans

un bloc div
• Taille de redimensionnement min et max
• Options de redimensionnement des symboles
• Centrer parfaitement un élement dans la scène
• Centrage global d’une animation EA dans la page html
• Utiliser un motif répété en background

Les options supplémentaires

• Propriété Curseur
• Code sur la time line
• Utiliser les fonctions de réorganisation d’objets
• Modifier l’opacité, les couleurs (contours, fond) d’un objet
• Redimensionner ou déformer un objet
• Utiliser la fonction de rotation ou d’inclinaison d’un objet