Adobe Edge  (Html5/Css3) - Niveau 2

45

Adobe Edge (Html5/Css3) - Niveau 2

Public :

Graphistes, webmasters et développeurs d’applications Internet

Pré-requis :

utiliser Edge Animate

Durée :

21 heures (3 jours)

Logiciel manipulé :

Adobe Edge

Objectifs :

Cette formation requiert impérativement de bonnes notions de html et CSS et idéalement les bases d’un

langage de script (AS ou JS)

Gestion du code et de l’interactivité

• Utilisation du panneau code
• Accès au code et gestion des évènements
• Indication des erreurs de code dans l’interface Edge
• Debuggage dans la console web navigateur
• Utilisation additionnelle d’Adobe Edge Code

Javascript (éléments de syntaxe de base)

• Opérateur (arithmétiques, logiques, conditionnels...)
• Variables, functions, boucle, conditions, tableaux, objets

Methodologie de programmation dans Edge

• Déclaration et utilisation de fonctions
• Ciblage d’éléments ou de symboles depuis un scénario
• Ciblage d’éléments ou de symboles depuis une fonction
• Charger une librairie JS externe

Instructions Jquery et JS pour manipuler les objets

• Modifier la variable d’un champ texte
• Temporiser une action
• Afficher / masquer un élément (hide() / show())
• Récupérer les positions du pointeur pour faire suivre un

objet ou créer une animation parallaxe
• Cibler un objet via son évènement (e.target)
• Supprimer une instance de symbole posée manuellement
• Créer ou supprimer dynamiquement une instance de

symbole et la placer sur la scène
• Fonctions d’animation Jquery courante (animate())

Gestion CSS

• Utiliser une feuille de style externe
• Récupérer les valeurs de propriétés CSS d’un objet
• Modifier les propriété d’affichage d’objets via des css

• Centrage global d’une animation EA dans la page html
• Modifier les dimensions de l’animation Edge (Stage)
• Utiliser un motif répété en background
• Utiliser des curseurs personnalisés via CSS

Les options supplémentaires

• Création d’une page adaptative via la bibliothèque

Jquery Edge commons
• 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

Les médias

• Formats vidéo et codecs
• Préparer 3 formats vidéo standards (méthodes/outils)
• Appel d’une fonction en fin de vidéo
• Réalisation d’un chapitrage vidéo
• Insertion d’une vidéo Youtube via une iframe
• Préparer les formats audio standards (méthodes/outils)
• Insérer du son via ia balise standard html5 audio
• Gestion du son via bibliothèque Jquery Edge commons

Evènement scroll

• Création d’une animation parallaxe basée sur la poistion

du scroll (horizontale ou verticale)

Les plus

• Création d’une Lightbox via jQuery Edge commons
• Test avec Adobe Edge Inspect