CATALOGUE Code & Data Formation Edge Apprendre Adobe Edge Animate CC - Créez des contenus animés et interactifs Intégration de Pop-Up avec JavaScript et Edge Commons

Intégration de Pop-Up avec JavaScript et Edge Commons

Ajouter une action de popup sur des images cliquables

Vidéo non disponible ! Réessayez plus tard

8h 12min

157 leçons

Transcription

Cette leçon fait partie de la formation

Apprendre Adobe Edge Animate CC - Créez des contenus animés et interactifs

Formation incluse dans l'abonnement Elephorm

Je m'abonne à Elephorm

PRO : J'en fait profiter mon équipe

DescriptionProgrammeAvis

8h 12min

157 leçons

Cette leçon fait partie de la formation

Apprendre Adobe Edge Animate CC - Créez des contenus animés et interactifs

Formation incluse dans l'abonnement Elephorm

Je m'abonne à Elephorm

PRO : J'en fait profiter mon équipe

Association de Pop-Up à des Vignettes Cliquables

Objectifs

Les objectifs de cette vidéo sont :

Comprendre l'importation de librairies JavaScript depuis un serveur distant.
Savoir associer des événements de type clic à des éléments spécifiques.
Manipuler des variables pour configurer et afficher des pop-ups de manière dynamique.

Résumé

Apprenez à associer des pop-ups aux vignettes cliquables dans votre document en utilisant JavaScript et Edge Commons.

Description

Dans cette leçon, nous examinerons comment associer le comportement de la pop-up à chacune des vignettes placées dans un document. Nous couvrirons les étapes suivantes :

Importation de la classe JavaScript à partir du serveur Edge Commons.
Configuration des événements de type clic pour chaque vignette.
Déclaration et utilisation des variables pour structurer et afficher la pop-up.

Nous veillerons également à ce que la présentation soit responsive en ajustant les propriétés telles que Width et Height, et en sélectionnant le type de contenu approprié pour nos pop-ups, que ce soit une image ou une URL.

Questions fréquentes

Quelle classe JavaScript est importée dans cette leçon ?

La classe JavaScript importée est localisée sur le serveur de Edge Commons.

Quel type d'événement est associé aux vignettes ?

Un événement de type clic est associé à chaque vignette.

Quels types de contenu peuvent être affichés dans la pop-up ?

Le contenu de la pop-up peut être une image ou une URL.

Programme détaillé

Accueil de la formation

Module 1 - Présentation

Présentation de la formation 01:35

Introduction aux animations Web et digitales 01:52

Les formats standard d’animation pour le Web et les publications digitales 01:34

Identifier la structure organique d’une animation HTML5 02:07

Placer une animation HTML5 sur le Web avec FileZilla 03:37

Placer une animation HTML5 sur le Web avec Dreamweaver 03:04

Positionnement de Edge Animate 04:31

Module 2 - Découverte de Edge Animate

Création de document 03:44

Conventions de nommage pour le Web 02:38

Présentation de l’espace de travail 04:29

Personnalisation de l’espace de travail 02:05

Paramétrer la taille de la scène 02:50

Module 3 - Importer les éléments graphiques

Importation d’une page HTML existante 04:20

Importation d’objets graphiques bitmap de Photoshop (GIF, JPG, PNG) 07:34

Importation d’objets graphiques vectoriels d’Illustrator (SVG) 07:21

Création d’objets graphiques dans Edge 07:42

Module 4 - Utiliser la typographie

Utilisation de typographies Web safe 03:08

Utilisation de typographies gratuites et connectées Edge fonts/Google fonts 03:50

Utilisation de typographies par abonnement et connectées TypeKit 07:17

Utilisation de typographies par abonnement, disponibles localement et dans DPS 00:47

Module 5 - Placer et aligner les objets

Gérer l’empilement des objets 01:03

Copier, coller et dupliquer les objets 04:23

Aligner et répartir les objets 01:54

Module 6 - Gérer une interface fluide (responsive design)

Placer des repères magnétiques fixe et en pourcentage 02:30

Transformation de symbole: mode Échelle et Redimensionner 01:26

Centrer le document et son contenu 05:07

Cadrer l’élasticité de la scène 02:54

Aligner une image dans un bloc 04:27

Module 7 - Structurer un projet dans le scénario

Les éléments 02:10

Les groupes 01:37

Les symboles 02:49

Animer dans le scénario manuellement 07:12

Animer à l'aide des options automatiques 05:56

Ajouter des commandes de lecture dans le scénario 04:12

Introduction aux Actions dans Edge Animate 02:27

Ajouter des actions à l'aide de la méthode contextuelle 05:31

Ajouter des actions à l'aide de la méthode globale 02:58

Module 8 - Exporter le projet

Tester dans les navigateurs 01:32

Synchroniser l’affichage sur les périphériques mobiles via Edge Inspect 04:57

Exporter/Importer un symbole animé 05:16

Exporter/Importer un modèle 01:46

Exporter au format HTML5 04:20

Différencier l'export HTML5 avec et sans CDN 02:18

Publier pour Dreamweaver 07:41

Publier pour les publications digitales vers Adobe DPS 05:44

Publier pour les publications digitales vers plugin tiers 06:46

Publier un widget pour Dashboard OSX 03:44

Publier widget pour iBooks Author 02:54

Options d’accessibilité 03:03

Module 9 - Les filtres

Introduction à l’animation de filtres 00:36

Gérer des valeurs de filtres dans le temps 07:52

Animer les propriétés par lot 04:54

Module 10 - Les rotations

Introduction aux rotations sur un compteur animé 00:38

Gérer l’axe de rotation et animation d’une aiguille 02:22

Simplifier la manipulation des objets complexes à l’aide de symboles 02:10

Module 11 - L’échelle, fixe et en pourcentage

Introduction à l’animation d’échelle au sein d’une infographie 00:43

Organisation d'échelle à valeur fixe 04:09

Animation axiale de l’échelle à partir de valeurs en pourcentage 08:18

Module 12 - Les masques

Introduction à un effet de loupe en mouvement sur une photographie 00:39

Organisation des médias et du masque avec effet loupe 02:07

Animation du masque et de l’effet loupe 03:59

Module 13 - Les torsions d’objets

Introduction aux effets de torsion 00:33

Animer à l'envers avec l'option de verrouillage 02:12

Animation de textes avec effets de torsion 02:56

Module 14 - Les accélérations

Présentation d’animations avec accélérations 01:36

Appliquer de l’amortissement à des translations d'images 04:49

Appliquer des effets de rebond à un compteur animé 03:02

Appliquer un effet d’accélération à une jauge animée 01:53

Adoucir un effet aller et retour à un masque animé 01:45

Appliquer un effet élastique à une torsion animée 01:20

Module 15 - Les dimensions extensibles de la scène avec fond transparent

Introduction aux paramètres extensibles de la scène 00:52

Animation d’une bannière aux dimensions extensibles 03:34

Export pour Dreamweaver avec intégration en premier plan d’une composition 02:53

Module 16 - Les trajectoires

Introduction aux trajectoires de mouvement (Bézier) 00:52

Déplacement d’un avion à l’aide d’un tracé Bézier 06:29

Matérialisation du tracé par un trajet en pointillé animé 08:50

Module 17 - Le lip sync (mouvement de bouche synchronisé)

Introduction à l’animation par temporisation sur un mouvement de lèvres (lip sync) 00:44

Organisation de l’animation dans le scénario à l’aide d’étiquettes 06:03

Gestion du sens de la lecture selon la diction 06:43

Module 18 - Le spritesheet (animation sous forme de pellicule)

Introduction au spritesheet à travers un personnage animé 01:39

Exportation de l’animation spritesheet depuis Flash Pro 03:32

Intégration HTML5 de la boucle spritesheet dans Edge Animate 04:57

Gestion de l’animation pour faire avancer le personnage 04:54

Gestion d'une animation en boucle 01:20

Module 19 - Placer un contenu alternatif pour anciens navigateurs

Présentation du contenu animé dans le navigateur 00:25

Création du contenu alternatif à partir d’une animation existante 03:01

Module 20 - Introduction à l’interactivité

Définition de l’interactivité (objet, événement, fonction) 02:02

Nommer les objets 02:24

Gérer les événements 04:55

Invoquer une fonction (la console du développeur) 06:22

Commandes de la fenêtre actions 02:17

Module 21 - Cibler un objet sur la scène

Présentation du principe du ciblage 00:34

Cibler un élément dans le scénario et régler ses propriétés CSS 04:04

Adapter le ciblage d’un élément et d’un symbole selon le contexte (ciblage relatif) 01:58

Cibler un objet depuis la racine du document (ciblage absolu) 01:49

Module 22 - Importer un style CSS

Introduction à l’intégration de CSS externe dans Edge Animate 00:33

Hiérarchiser le texte à l’aide de balises HTML 01:25

Lier la feuille de style CSS au document 02:24

Module 23 - Appeler un URL

Intégration des hyperliens dans Edge Animate 04:18

Module 24 - Afficher/Masquer les objets

Introduction à la gestion des actions afficher/masquer 00:48

Gestion de l’affichage au clic 01:24

Gestion du masquage au chargement de la page 00:42

Module 25 - Gérer les variables et les textes dynamiques

Introduction à la gestion de variables 00:57

Affichage d’une valeur dans un champ de texte 03:06

Afficher une valeur incrémentielle dans le scénario sur action utilisateur 04:01

Module 26 - Piloter le scénario au clic et à l’aide de conditions

Introduction à la navigation au clic 00:46

Activer la lecture d’animations de symboles au sein d’une infographie 02:21

Lire en avant/arrière et arrêter la lecture du scénario au sein d’une galerie 03:17

Gérer une boucle d’animation au sein d’une galerie à l’aide de conditions 05:52

Utiliser les étiquettes pour atteindre directement l’image souhaitée 01:16

Module 27 - Piloter le scénario à l’aide de commandes de clavier

Introduction à l’utilisation des commandes de clavier 00:58

Détecter l’activation d’une touche de clavier, enfoncée puis relâchée 01:34

Distinguer le type de touche enfoncée 01:39

Module 28 - Gérer l’affichage selon l’orientation des écrans mobiles

Introduction à la conception d’une interface mobile 00:57

Organisation des médias pour un affichage Responsive 00:41

Gestion des commandes d'orientation 02:56

Tester l'orientation sur les périphériques mobiles physique 02:56

Module 29 - Animer un effet parallaxe à l’aide du pointeur en mouvement

Introduction aux effets parallaxes 01:45

Gestion du mouvement du pointeur 04:11

Déplacer dynamiquement les éléments de la scène selon la position du pointeur 06:53

Déplacer la tête de lecture dans le scénario selon la position du pointeur 06:00

Module 30 - Animer un effet parallaxe à l’aide du scroll (défilement de l’ascenseur)

Introduction à la gestion du scroll 01:26

Avancer la lecture du scénario proportionnellement à la position du scroll 05:48

Gérer la lecture d’animations isolées étendues selon la position précise du scroll 04:06

Module 31 - Insérer une vidéo

Introduction à la vidéo pour le Web et le digital (dimensions, formats) 04:47

Intégration des commandes HTML5 d’affichage vidéo pour tous les navigateurs 05:15

Gestion d’actions à la fin de la vidéo 01:51

Module 32 - Réaliser un chapitrage vidéo

Introduction à la vidéo pour un dispositif de chapitrage 00:54

Réalisation d’un système de chapitrage intégré à Edge et sans iFrame 03:22

Distinction entre ajout de code et remplacement de code 00:47

Module 33 - Synchroniser les images d’une vidéo sur un effet parallaxe

Introduction à la gestion parallaxe d’une séquence vidéo 00:39

Organisation des médias 05:33

Relier la position du scroll aux images 05:59

Module 34 - Intégrer de l’audio

Introduction à la gestion audio en HTML 5 01:05

Organisation des médias 03:14

Gestion du son à l’aide de commande de lecture dans le scénario 01:02

Création d’un bouton interrupteur play/pause 03:37

Module 35 - Personnaliser le curseur de la souris

Introduction à la gestion de l’aspect du pointeur 00:42

Forcer un style prédéfini de pointeur selon le contexte 01:08

Personnaliser l’image du pointeur à partir d’une image Gif ou Png 02:50

Module 36 - Insérer un iFrame

Avertissement sur l’utilisation des iFrames 01:19

Insérer une page Web dans Edge 03:46

Ajuster la taille de l’iFrame aux dimensions du bloc dans le scénario 01:18

Module 37 - Personnaliser le chargeur (preloader)

Introduction à la gestion des chargeurs 00:36

Utilisation d’un chargeur standard 02:32

Personnalisation d’un chargeur à l’aide d’un gif animé 02:45

Module 38 - Introduction aux classes HTML5 de GreenSock (2D et 3D)

Présentation des possibilités étendues des classes HTML5 de GreenSock 03:27

Test de performance des classes GreenSock versus jQuery 02:23

Télécharger et installer le kit GSAP d’animation dans Edge Animate 01:29

Animer les propriétés d’un symbole (position, torsion, échelle, rotations 3D, opacité) 07:58

Ajouter des effets d’accélération à l’aide de la classe easing 04:57

Placer une action à la fin d’une animation GreenSock ou au début 01:55

Animer une galerie de photos dans un espace 3D 06:28

Module 39 - Introduction aux librairies JQuery Edge Commons

Présentation des possibilités étendues des librairies JQuery 02:00

Télécharger et installer une librairie JQuery Spotlight (Popup) 01:04

Ajouter une action de popup sur des images cliquables 02:25

Module 40 - Conclusion

Mot de la fin 01:26