CATALOGUE Code & Data Formation Edge Apprendre Adobe Edge Animate CC - Créez des contenus animés et interactifs

Contenu premium

Comment réaliser une animation lip-sync

Chapitre 17 Leçon 2

Découvrez les étapes essentielles pour animer un lip-sync en utilisant des formes de bouches prédéfinies, et apprenez à organiser leur affichage dans une scène d'animation.

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

8h12 157 leçons

Formation Edge Animate : Création de sites web responsifs 01:35

Introduction au Format HTML5 pour les Animations Web 01:52

Exploration des Spécifications du HTML5 01:34

Comment créer une animation HTML5 parallaxe avec JavaScript 02:07

Mise en Ligne de Pages Web et Hébergement 03:37

Comment Utiliser Dreamweaver pour le FTP 03:04

Adobe Edge Animate : Présentation et Intégration 04:31

Utilisation d'Adobe Edge Animate pour la Création de Documents HTML 03:44

Bonnes Pratiques de Nommage de Fichiers pour le Web 02:38

Guide de l'Espace de Travail dans Edge 04:29

Personnalisation et Gestion de l'Espace de Travail 02:05

Configuration des Dimensions de la Scène 02:50

Importer et Animer une Page HTML dans Edge 04:20

Guide d'Importation d'Images dans Edge Animate 07:34

Exportation de Graphiques depuis Illustrator vers Edge 07:21

Apprenez à Animer avec Edge 07:42

Gestion de la Typographie Web avec les Polices WebSafe 03:08

Utilisation des Polices Google Fonts pour le Web 03:50

Utilisation de Typekit pour des Polices Professionnelles 07:17

Gestion des typos dans les publications digitales 00:47

Gestion de l'Ordre d'Empilement des Médias 01:03

Comment dupliquer des objets dans Edge 04:23

Guide Pratique pour l'Alignement et la Réorganisation des Objets 01:54

Utilisation des Guides pour l'Alignement des Objets 02:30

Comment Mettre à l'Échelle et Redimensionner des Objets 01:26

Comment centrer un objet dans un document 05:07

Comment rendre un document élastique et gérer ses redimensionnements 02:54

Affiner l'Alignement d'Images dans un Bloc Div 04:27

Animer des Objets dans Edge 02:10

Utilisation des Groupes comme Conteneurs dans Edge 01:37

Guide sur les Symboles dans l'Animation 02:49

Tutoriel d'animation avec Edge Animate 07:12

Maîtriser les Automatismes dans Edge Animate 05:56

Gestion de la Lecture Automatique des Animations 04:12

Ajouter de l'interactivité dans Edge avec JavaScript et CSS 02:27

Guide Complet pour Ajouter des Actions Contextuelles dans un Scénario 05:31

Utilisation de la Méthode Globale dans Edge 02:58

Tester et Publier des Animations Web 01:32

Synchronisation de publications mobiles avec Adobe Edge Inspect 04:57

Création et Exportation des Animations sur Edge Animate 05:16

Exporter des modèles sous Adobe Animate 01:46

Exporter une Animation pour le Web 04:20

Comparaison de l'Export avec et sans CDN 02:18

Importation d'Animations dans Dreamweaver 07:41

Exportation et intégration d'animations Edge avec Adobe DPS 05:44

Intégration d'Animations Edge dans InDesign avec Aquafadas 06:46

Création d'Applications de Bureau sur Mac OS X avec Edge 03:44

Exporter une Animation Edge vers iBooks Author 02:54

Guide sur l'Accessibilité dans Edge Animate 03:03

Guide Complet sur l'Animation de Filtres en CSS 00:36

Créer des animations avec des filtres dans Adobe Edge 07:52

Animer Plusieurs Objets Simultanément avec Edge Animate 04:54

Comprendre et Maîtriser les Rotations en Animation 00:38

Tutoriel : Animation de la Rotation d'une Aiguille sur un Cadran 02:22

Maîtriser l'Animation dans Adobe Edge 02:10

Comment Animer l'Échelle de Forme Élémentaire 00:43

Comment Animer des Jauges avec une Carte en Arrière-Plan 04:09

Optimisation des Animations CSS pour les Jauges 08:18

Tutoriel sur la Création d'un Masque Animé avec CSS 00:39

Création d'effets de masque animé dans Edge 02:07

Animation d'un Masque d'Écretage : Guide Complet 03:59

Comment Animer des Effets de Torsion avec CSS 00:33

Créer des Animations de Texte avec des Automatismes 02:12

Maîtriser l'animation des effets de torsion en CSS 02:56

Optimisez vos Animations grâce aux Effets de Vélocité et d'Amortissement 01:36

Appliquer des Effets d'Accélération sur des Animations 04:49

Ajout d'effets de rebond dans une animation Edge Animate 03:02

Comment Appliquer une Accélération sur une Animation de Carte 01:53

Maîtriser les Interpolations pour des Animations Fluides 01:45

Créer une Animation de Texte avec Effet Cartoon 01:20

Créer et Animer une Bannière avec Dreamweaver 00:52

Guide pour Animer les Dimensions de Bannière dans Edge 03:34

Intégrer une bannière animée dans Dreamweaver 02:53

Gestion du Déplacement d'un Objet sur un Tracé Baisier 00:52

Guide sur l'Animation d'un Objet avec une Trajectoire de Mouvement 06:29

Animer le Tracé d'un Avion avec un Masque d'Écretage dans Adobe Edge 08:50

Technique de Lip-Sync avec Edge Animate 00:44

Comment réaliser une animation lip-sync 06:03

Mise en place de la synchronisation labiale 06:43

Utilisation des Sprite Sheets pour des Animations Fluides 01:39

Tutoriel d'Exportation d'Animation Flash en Feuille de Sprite 03:32

Comment intégrer une feuille Sprite dans une animation Edge 04:57

Tutoriel Edge Animate : Intégration et Animation d'une Feuille Sprite 04:54

Maîtriser la Boucle d'Animation avec Clé d'Action 01:20

Animation CSS et JavaScript dans HTML5 00:25

Comment Capturer une Image d'Animation dans Edge 03:01

Comprendre les Fondements de l'Interactivité 02:02

Comprendre et Utiliser les Conventions de Nommage en Programmation 02:24

Gestion des événements et actions dans Edge 04:55

Utilisation de la console dans l'environnement de Edge 06:22

Interactivité dans Edge : La Fenêtre d'Action et les Événements 02:17

Comment Cibler un Objet dans un Document Edge 00:34

Manipulation Dynamique du DOM avec JavaScript 04:04

Comment Cibler un Objet à l'Intérieur d'un Symbole 01:58

Maîtrisez le ciblage dans vos animations 01:49

Importation de Feuilles de Style dans Edge 00:33

Appliquer une feuille de style avec Dreamweaver 01:25

Comment Importer une Feuille de Style CSS dans un Document Edge 02:24

Comment Ajouter des Hyperliens dans vos Animations 04:18

Techniques d'Interactivité pour Documents Web 00:48

Manipuler des Objets avec jQuery 01:24

Gestion de l'Affichage des Symboles dans un Navigateur 00:42

Utilisation des Variables pour Interagir avec des Objets 00:57

Manipulation et Affichage Dynamique des Jauges 03:06

Introduction à l'incrémentation des variables en JavaScript 04:01

Lecture d'Animation et Interactions Utilisateurs 00:46

Contrôler des Animations dans des Symboles 02:21

Maîtrise de la Navigation dans un Scénario d'Animation 03:17

Maîtriser la Structure et la Boucle d'Animation 05:52

Utilisation des Étiquettes pour la Navigation dans les Scénarios d'Animation 01:16

Navigation par Commande de Clavier: Guide Pratique 00:58

Activation des commandes de clavier pour la navigation 01:34

Gestion des Actions selon les Touches en JavaScript 01:39

Adapter des Interfaces Responsives : Orientation et Affichage 00:57

Configurer un Espace de Travail Élastique 00:41

Gestion des événements pour un site web responsive 02:56

Gérer les changements d'orientation et de taille de fenêtre 02:56

Comprendre et Maîtriser les Animations Parallaxes 01:45

Détection et Utilisation de la Position du Pointeur à l'Écran 04:11

Guide d'Animation Parallaxe 06:53

Maîtriser l'Animation de Calques avec Parallaxe dans un Scénario 06:00

Gestion des Effets Parallaxe par la Position de la Barre d'Ascenseur 01:26

Gérez l'Animation de Votre Scène avec le Scroll 05:48

Maîtrise des Animations Parallaxe en Défilement 04:06

Intégration de la vidéo dans Edge Animate 04:47

Intégration de Vidéos en HTML5 avec jQuery dans Edge Animate 05:15

Contrôler les actions à la fin d'une vidéo 01:51

Système de Chapitrage Vidéo avec Edge 00:54

Système de Chapitrage pour Vidéos Pédagogiques 03:22

Comprendre le Chapitrage Vidéo avec la Méthode .html 00:47

Création d'animations avec systèmes de navigation et vidéos 00:39

Optimisation de l'Animation Vidéo avec Adobe Media Encoder 05:33

Guide de création d'animations dans Edge Animate 05:59

Intégration et Gestion du Son dans Edge Animate 01:05

Intégration de Son dans Edge à l'aide de Balises HTML5 03:14

Utilisation des Commandes de Lecture Automatiques dans un Scénario 01:02

Création d'un Bouton Interrupteur Play-Pause dans Edge 03:37

Personnalisation du Pointeur de Souris dans Edge 00:42

Comment ajouter des curseurs interactifs dans Edge 01:08

Intégration d'un Pointeur Personnalisé dans Edge Animate 02:50

Comment Intégrer un Iframe dans une Composition Edge 01:19

Intégration d'un iframe dans une composition Edge 03:46

Intégration et Automatisation des E-Frames 01:18

Création d'Animations avec Edge Animate 00:36

Comment insérer un chargeur standard dans Edge Animate 02:32

Personnalisation d'un Chargeur Animé 02:45

Intégration de GreenSock avec Edge Animate 03:27

Comparaison des Performances des Librairies d'Animation JavaScript 02:23

Guide Téléchargement et Intégration de Greensock pour Animations CSS3 01:29

Animation des Propriétés d'un Objet avec Edge et JavaScript 07:58

Ajouter des Effets d'Accélération avec GreenSock 04:57

Maîtriser les Classes d'Animation en Programmation 01:55

Combinaison d'Animations Green Sock et de Commandes Clavier dans Edge 06:28

Utiliser Edge Commons avec jQuery pour des Effets Interactifs dans Edge Animate 02:00

Guide de Téléchargement et Utilisation de Edge Commons 01:04

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

Création d'Animations Web avec Edge Animate 01:26

Détails de la leçon

Description de la leçon

Pour réaliser une animation du lip-sync, l'auteur utilise un document simple comportant une image en arrière-plan. L'animation est réalisée par-dessus, en transparence, grâce à des formes de bouches importées au format PNG. Ces formes sont isolées dans un symbole, et leur affichage est organisé à l'aide d'étiquettes pour automatiser leur apparition en fonction des événements de la scène principale. Une propriété de visibilité est utilisée pour contrôler l'affichage des objets au fil du temps et ainsi éviter de recréer chaque forme à plusieurs reprises. L'ensemble des bouches est placé dans un symbole nommé 'Lipsync', et chaque forme est associée à une étiquette, comme 'rien', 'A', 'E', etc. Enfin, ces étiquettes sont invoquées depuis la scène principale pour synchroniser l'animation avec les sons correspondants.

Étapes suivies :

Verrouillage du calque d'arrière-plan
Glisser-déposer des formes de bouches sur la scène
Conversion des formes en symbole unique
Organisation de l'affichage à l'intérieur du symbole
Utilisation d'étiquettes pour gérer la visibilité
Vérification de l'absence de superpositions

Objectifs de cette leçon

Les objectifs de cette vidéo sont de permettre aux spectateurs de :

Maîtriser l'utilisation des formes de bouches prédéfinies
Organiser et synchroniser les formes de manière optimale
Automatiser l'affichage des bouches en fonction du scénario

Prérequis pour cette leçon

Avant de suivre cette vidéo, il est recommandé d'avoir :

Des connaissances de base en animation numérique
Une expérience préalable avec des logiciels comme Photoshop
Une compréhension élémentaire des concepts de synchronisation labiale

Métiers concernés

Les professionnels concernés par ce sujet sont :

Animateurs 2D et 3D
Graphistes spécialisés en animation
Concepteurs de jeux vidéo
Réalisateurs de films d'animation

Alternatives et ressources

Des alternatives possibles aux logiciels mentionnés incluent :

Toon Boom Harmony
Adobe Animate
Moho Anime Studio

Questions & Réponses

Le but est de faciliter la gestion de l'affichage des différentes bouches et de pouvoir les invoquer automatiquement grâce à des étiquettes sans avoir à recréer chaque forme.

Utiliser une propriété de visibilité permet de s'assurer qu'aucune forme de bouche ne reste visible par erreur lors de la publication de l'animation, ce qui peut arriver avec le masquage des calques.

Les étiquettes sont utilisées pour identifier et organiser l'affichage des différentes formes de bouches, permettant ainsi de synchroniser précisément les mouvements des lèvres avec les sons correspondants dans l'animation.

Acheter maintenant

Je m'abonne

Comment réaliser une animation lip-sync

Présentation

Découverte de Edge Animate

Importer les éléments graphiques

Utiliser la typographie

Placer et aligner les objets

Gérer une interface fluide (responsive design)

Structurer un projet dans le scénario

Exporter le projet

Les filtres

Les rotations

L’échelle, fixe et en pourcentage

Les masques

Les torsions d’objets

Les accélérations

Les dimensions extensibles de la scène avec fond transparent

Les trajectoires

Le lip sync (mouvement de bouche synchronisé)

Le spritesheet (animation sous forme de pellicule)

Placer un contenu alternatif pour anciens navigateurs

Introduction à l’interactivité

Cibler un objet sur la scène

Importer un style CSS

Appeler un URL

Afficher/Masquer les objets

Gérer les variables et les textes dynamiques

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

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

Gérer l’affichage selon l’orientation des écrans mobiles

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

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

Insérer une vidéo

Réaliser un chapitrage vidéo

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

Intégrer de l’audio

Personnaliser le curseur de la souris

Insérer un iFrame

Personnaliser le chargeur (preloader)

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

Introduction aux librairies JQuery Edge Commons

Conclusion

Introduction

Mise en forme

Animation

Interactivité

Annexe