CATALOGUE Code & Data Formation Edge Apprendre Adobe Edge Animate CC - Créez des contenus animés et interactifs Comment Animer des Jauges avec une Carte en Arrière-Plan

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

Organisation d'échelle à valeur fixe

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

59,90€ Je commande

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

59,90€ Je commande

Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

PRO : J'en fait profiter mon équipe

Introduction à l'Animation de Jauges

Objectifs

Les objectifs de cette vidéo sont de :

Comprendre comment intégrer une carte en arrière-plan pour alléger le document.
Apprendre à dessiner des puces et y ajouter des valeurs en pourcentage.
Savoir animer des jauges efficacement avec les bons outils.

Résumé

Apprenez à animer des jauges en utilisant une carte en arrière-plan, tout en maintenant une interface légère et élégante.

Description

Dans cette leçon, nous allons découvrir comment animer des jauges tout en utilisant une carte en arrière-plan. Vous apprendrez d'abord à créer une forme de puce, à ajuster les propriétés des angles et à y ajouter du texte pour indiquer des valeurs en pourcentage. Ensuite, nous aborderons l'animation d'une jauge en utilisant des outils de conversion en symbole et l'activation des automatismes pour animer les objets. Enfin, une astuce pratique vous sera partagée pour simplifier le processus lorsque vous devez répéter l'animation sur plusieurs symboles. Cette technique vous permettra de créer des indicateurs visuels dynamiques et intégrés de manière fluide à votre composition graphique.

Questions fréquentes

Pourquoi utiliser une couleur de scène qui reprend la couleur de fond de la carte?

Utiliser une couleur de scène similaire permet de donner l'impression d'une carte plus grande sans alourdir le poids du document.

Comment créer une puce circulaire avec des propriétés d'angle?

Pour créer une puce circulaire, dessinez un rectangle et ajustez les propriétés d'angle en augmentant la valeur d'un seul angle.

Que permet l'activation des automatismes dans le scénario?

L'activation des automatismes dans le scénario permet d'animer les objets de manière fluide et précise, facilitant ainsi le processus d'animation.

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