article(s) dans votre panier VOIR

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

  • 8h13 de formation
  • 157 leçons
  • 4.5 5 0 0
    0
    5 avis

Un contenu flash devrait s'afficher ici. Votre navigateur ne comporte pas de plugin flash, ou il ne s'est pas correctement initialisé.

Vous pouvez télécharger le plugin flash depuis le site d'Adobe à l'adresse suivante : http://get.adobe.com/flashplayer/.

Pour accéder à la suite de cette formation, vous devez vous abonner.
previous
summary
resume
next
play
Présentation de la formation
00:00 / 01:35
HD
fullscreen
Je m’abonne
à partir de 16,6 € / mois
  • Visionnage en ligne
  • Accès illimité à toutes nos formations
OU
J'achète uniquement
la formation
49,90€
  • Téléchargement + VOD à vie
  • Exercice / Validation des acquis
  • Accès uniquement à cette formation

À propos de cette formation

Objectifs
Apprendre Adobe Edge CC pour construire aisément des contenus riches en HTML5
Pre-requis
Débutant à intermédiaire, vous disposez de connaissances en création de sites web

Sommaire de la formation Edge

    • Introduction

      • 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
    • Mise en forme

      • 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
      • 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
      • 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
      • 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
      • 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
      • 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
      • 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
    • Animation

      • 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
      • 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
      • 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
      • 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
      • 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
      • 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
      • 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
      • 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
      • 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
      • 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
      • 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
    • Interactivité

      • 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
      • 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
      • 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
      • Appeler un URL

      • Intégration des hyperliens dans Edge Animate
        04:18
      • 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
      • 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
      • 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
      • 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
      • 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
      • 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
      • 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
      • 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
      • 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
      • Synchroniser les images d’une vidéo sur un effet parallaxe

      • Organisation des médias
        05:33
      • Introduction à la gestion parallaxe d’une séquence vidéo
        00:39
      • Relier la position du scroll aux images
        05:59
      • Intégrer de l’audio

      • Organisation des médias
        03:14
      • Introduction à la gestion audio en HTML 5
        01:05
      • 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
      • 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
      • 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
      • 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
      • 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
      • 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
    • Annexe

      • Conclusion

      • Mot de la fin
        01:26

Détails de la formation

Créez du contenu HTML5 animé, compatible Web et périphériques mobiles, sans coder. Ajoutez de l’interactivité à l’aide de commandes faciles à intégrer et réalisez : galeries d’images, cartes interactives, défilements parallaxes, chapitrages vidéo, interfaces responsives et mouvements 3D. Adobe Edge Animate est le nouvel outil d’animation standard HTML5, Javascript et CSS3, successeur pressenti de Flash Pro. C’est la solution incontournable pour tous les créatifs du web et du digital souhaitant publier dans un format ouvert adapté à tous les écrans (navigateur de bureau, iOS, Android, DPS, Aquafadas, iBooks, Dashboard). Arzhur Caouissin est formateur transmédia depuis 2001 chez Pyramyd, Gobelins, Ellipse, Ziggourat. Auteur aux éditions Eyrolles, Pearson et Elephormateur, il est aussi président de la société Swipe & Swipe, spécialisée dans le contenu digital pour périphériques mobiles.

Introduction aux animations Web et digitales

A l’aide de ce tuto Adobe Edge Animate CC, le formateur va vous parler des animations Web et digitales. Au fil de ce tutoriel Adobe Edge Animate CC, vous allez découvrir comment :

  • Définir le format HTML 5.
  • Réaliser des animations et des interactivités.
  • Publier des animations vers des navigateurs classiques.
  • Publier des animations pour des plateformes fixes et mobiles.
  • Créer des applications légères.

Placer une animation HTML5 sur le Web avec FileZilla

Vous serez en mesure de :

  • Mettre en ligne des pages sur des serveurs distants.
  • Créer un compte chez un hébergeur.
  • Renseigner les codes fournis par l’hébergeur sur FileZilla.
  • Accéder au serveur.
  • Créer une page index avec des médias personnalisés.
  • Créer un répertoire d’archives.
  • Réaliser un Glisser/déposer vers un serveur.

Placer une animation HTML5 sur le Web avec Dreamweaver

Grâce à cette formation Adobe Edge Animate CC, vous allez être capable de :

  • Réaliser le FTP.
  • Accéder au menu Site/Nouveau site.
  • Entrer les codes FTP obtenus par e-mail.
  • Indiquer le nom du serveur d’hébergement.
  • Sélectionner les fichiers à inclure sur le serveur.
  • Réaliser un Glisser/déposer sur le répertoire www.
  • Réaliser une mise à jour.
  • Ecraser les fichiers modifiés.

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

A l’issue de ce tutoriel Adobe Edge Animate CC, vous allez parvenir à :

  • Importer des images au sein d’Edge.
  • Exporter des images bitmap de Photoshop.
  • Exporter une image au format GIF animé.
  • Adapter les dimensions des images les unes par rapport aux autres.
  • Glisser un élément au premier plan.
  • Utiliser l’onglet Eléments.

Importation d’objets graphiques vectoriels d’Illustrator (SVG)

Par le biais de cette formation Adobe Edge Animate CC, vous allez savoir comment :

  • Importer des images vectorielles d’Illustrator (SVG) sur Edge.
  • Alléger ou augmenter le poids du fichier SVG.
  • Glisser un fichier SVG dans un navigateur.
  • Utiliser la commande Fichier/Enregistrer.
  • Publier une réalisation.

Copier, coller et dupliquer les objets

Dans ce tutoriel Adobe Edge Animate CC, vous allez être en mesure de :

  • Dupliquer un objet.
  • Sélectionner un objet.
  • Convertir une sélection en symbole.
  • Utiliser la commande Edition/Dupliquer.
  • Utiliser la fenêtre de la Bibliothèque.
  • Placer un élément dupliqué sur une scène.

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

Dans le cadre de cette formation Adobe Edge Animate CC, vous allez vous exercer à :

  • Utiliser les guides.
  • Utiliser les règles autour d’un document.
  • Afficher les guides magnétiques dans un sens vertical ou horizontal.
  • Transformer un document en document élastique.
  • Basculer en pourcentage dans les propriétés.
  • Convertir le repère en pourcentage.

Introduction aux Actions

Vous allez découvrir comment :

  • Ajouter de l’interactivité dans Edge.
  • Ajouter des comportements au scénario et aux objets graphiques du scénario.
  • Utiliser la fenêtre Action.
  • Lancer une interactivité.
  • Sélectionner un symbole.
  • Sélectionner individuellement des objets dans un symbole.
  • Utiliser un mode de codes avancés.

Exporter au format HTML5

Par l’intermédiaire de cette formation Adobe Edge Animate CC, le formateur va vous montrer comment exporter au format HTML5. A la fin de ce tutoriel Adobe Edge Animate CC, vous allez être apte à :

  • Exporter une animation pour le web.
  • Configurer les paramètres d’export.
  • Configurer la nature de publication statique ou dynamique.
  • Utiliser le bouton Publier.

Publier widget pour iBooks Author

Par l’intermédiaire de cette formation Adobe Edge Animate CC, le formateur va vous montrer comment publier widget pour iBooks Author. Tout au long de ce tuto Adobe Edge Animate CC, il va vous apprendre à :

  • Exporter une animation Edge à destination d’une publication digitale sur iBooks Author.
  • Utiliser la commande Fichier/Paramètres de publication.
  • Utiliser la commande Fichier/Publier.
  • Utiliser le bouton Insérer.
  • Redimensionner une animation sur iBooks Author.

Introduction aux rotations sur un compteur animé

A l’aide de ce tuto Adobe Edge Animate CC, l’auteur va vous parler des rotations sur un compteur animé. Tout au long de ce tutoriel Adobe Edge Animate CC, vous allez savoir comment :

  • Configurer une rotation à partir d’un axe précis.
  • Organiser l’espace de travail pour simplifier la gestion d’animations.
  • Créer des effets de rebond.

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

Par l’intermédiaire de cette formation Adobe Edge Animate CC, le formateur va vous apprendre à gérer l’axe de rotation et l’animation d’une aiguille. Au terme de ce tutoriel Adobe Edge Animate CC, vous allez être en mesure de :

  • Importer l’image d’un cadran sur une scène.
  • Utiliser l’onglet Transformation dans la fenêtre Propriétés.
  • Déplacer la tête de lecture.
  • Créer des clés supplémentaires.
  • Créer des effets d’animation et de rebond.

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

A travers ce tuto Adobe Edge Animate CC, le formateur va vous parler de l’animation d’échelle au sein d’une infographie. Dans cette formation Adobe Edge Animate CC, vous allez découvrir comment :

  • Animer l’échelle de forme élémentaire dans une infographie.
  • Automatiser une animation d’échelle.
  • Gérer les axes d’animation.

Animation du masque et de l’effet loupe

Au cours de ce tutoriel Edge Animate CC, l’auteur va vous apprendre à animer un masque d’écrêtage afin de produire un effet de loupe. A travers cette formation Adobe Edge Animate CC, vous allez comprendre comment :

  • Activer tous les automatismes.
  • Déplacer un masque d’écrêtage.
  • Agrandir un masque d’écrêtage.
  • Recentrer un objet d’une image.
  • Animer la position globale d’une image.
  • Animer un masque d’écrêtage dans un scénario.
  • Obtenir un effet loupe sans décalage avec l’objet original.

Animation de textes avec effets de torsion

Par l’intermédiaire de ce tutoriel Adobe Edge Animate CC, le formateur va vous montrer comment animer des textes avec des effets de torsion. A travers cette formation Adobe Edge Animate CC, vous allez découvrir comment :

  • Déplacer la tête de lecture.
  • Retrouver la fenêtre de propriétés.
  • Accéder aux propriétés de transformation.
  • Inverser la direction d’une transformation.
  • Accentuer un effet de torsion au centre.
  • Régler les problèmes de chevauchement de textes.
  • Animer les effets de torsion.

Appliquer des effets de rebond à un compteur animé

Dans le cadre de ce tutoriel Adobe Edge Animate CC, l’auteur va vous apprendre à appliquer des effets de rebond à un compteur animé. Au terme de cette formation Adobe Edge Animate CC, vous allez être capable de :

  • Entrer dans une animation isolée dans un symbole.
  • Retrouver les différentes étapes d’une animation.
  • Gérer les allers-retours à travers une rotation axiale dans une animation.
  • Sélectionner chaque séquence d’interpolation dans une animation.
  • Appliquer une accélération.
  • Appliquer une accélération de type rebond.
  • Appliquer un même effet de rebond sur plusieurs transitions.
  • Publier une animation.

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

A travers ce tuto Adobe Edge Animate CC, le formateur va vous montrer comment appliquer un effet d’accélération à une jauge animée. Dans cette formation Adobe Edge Animate CC, il va vous apprendre à :

  • Sélectionner un symbole.
  • Appliquer une animation de rebond à l’intérieur de l’animation d’une jauge.
  • Choisir un type de rebond.
  • Différencier l’effet élastique et l’effet rebond.
  • Placer une animation d’accélération sur plusieurs symboles.
  • Appliquer des accélérations sur les jauges d’une animation.
  • Appréhender la possibilité d’animation avec la taille d’une jauge.
  • Publier une animation.

Appliquer un effet élastique à une torsion animée

Tout au long de ce tutoriel Adobe Edge Animate CC, le formateur va vous apprendre à appliquer un effet élastique à une torsion animée. Au fil de cette formation Adobe Edge Animate CC, vous allez découvrir comment :

  • Appliquer une accélération sur les interpolations de déplacement d’une animation.
  • Appliquer une accélération sur les interpolations d’inclinaison d’une animation.
  • Sélectionner plusieurs interpolations à la fois.
  • Appliquer un effet élastique à une animation.
  • Appliquer un effet élastique sur d’autres interpolations d’une animation.
  • Appliquer une accélération sur une animation à effet de torsion.
  • Publier une animation.

Animation d’une bannière aux dimensions extensibles

Cette formation Adobe Edge Animate CC vous permet de découvrir l’animation d’une bannière aux dimensions extensibles. Au cours de ce tutoriel Adobe Edge Animate CC, vous allez comprendre comment :

  • Verrouiller les calques d’une animation.
  • Animer le calque du conteneur principal d’une animation.
  • Activer tous les automatismes.
  • Enregistrer une valeur de dimension.
  • Retrouver la valeur enregistrée dans le panneau stage.
  • Créer une clé supplémentaire dans une animation.
  • Enregistrer une nouvelle valeur de dimension.
  • Inverser une transition.
  • Animer les dimensions d’une bannière.
  • Appliquer une accélération à une animation avec bannière animée.

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

Tout au long de ce tuto Edge Animate CC, le formateur va vous enseigner comment déplacer un objet suivant un tracé personnalisé. A travers ce tutoriel Adobe Edge Animate CC, il va vous montrer comment :

  • Verrouiller un calque.
  • Glisser un objet au premier plan.
  • Activer les automatismes dans un scénario.
  • Activer l’option d’animation d’un objet à partir d’une trajectoire de mouvement.
  • Déplacer la tête de lecture.
  • Positionner un objet de manière tangente à la trajectoire.
  • Activer l’option d’orientation automatique d’un objet suivant une trajectoire.
  • Gérer l’orientation de l’objet suivant la trajectoire tracée.
  • Obtenir une trajectoire fluide.
  • Animer un objet à partir d’une trajectoire de mouvement.
  • Déplacer une interpolation dans le temps.
  • Générer des pauses intercalant le mouvement d’un objet.

Matérialisation du tracé par un trajet en pointillé animé

Par l’intermédiaire de cette formation Edge Animate CC, l’auteur va vous initier à la matérialisation du tracé par un trajet en pointillé animé. Tout au long de ce tuto Adobe Edge Animate CC, vous allez découvrir comment :

  • Distinguer des pauses intercalant les mouvements d’un objet suivant son trajet.
  • Tracer la trajectoire de l’objet dans Illustrator.
  • Supprimer un calque dans Illustrator.
  • Ouvrir la forme vectorielle dans Edge.
  • Désactiver les automatismes.
  • Placer un repère du point de départ de la trajectoire d’un objet dans la scène.
  • Sélectionner le tracé.
  • Activer l’option masque d’écrêtage.
  • Réactiver les automatismes.
  • Réduire un masque d’écrêtage jusqu’au point de départ d’une animation.
  • Etendre un masque d’écrêtage.
  • Ajouter une clé d’un nouveau départ.
  • Simuler la progression d’un objet sur la courbe.
  • Publier une animation.

Intégration HTML5 de la boucle spritesheet dans Edge Animate

Tout au long de ce tutoriel Edge Animate CC, le formateur va vous initier à l’intégration HTML5 de la boucle spritesheet dans Edge Animate. A l’issue de cette formation Adobe Edge Animate CC, vous allez être capable de :

  • Créer un nouveau document dans Edge.
  • Enregistrer un nouveau document dans un répertoire de destination.
  • Importer une image dans la bibliothèque image.
  • Retrouver une image importée dans la bibliothèque.
  • Désactiver les automatismes.
  • Activer l’option masque d’écrêtage.
  • Jouer sur la valeur du masque d’écrêtage.
  • Déplacer un masque d’écrêtage d’image en image.
  • Animer une position d’une image en X.
  • Garder une même position pour l’ensemble des images.
  • Intégrer une feuille sprite au sein d’une animation Edge.

Gestion de l’animation pour faire avancer le personnage

Au cours de ce tuto Adobe Edge Animate CC, l’auteur va vous montrer comment gérer une animation pour faire avancer un personnage. Au fil de ce tutoriel Adobe Edge Animate CC, vous allez comprendre comment :

  • Rendre fluide une animation de feuille sprite.
  • Rapprocher les clés d’une animation.
  • Publier une animation.
  • Activer la propriété X.
  • Activer les automatismes d’animation.
  • Déplacer un objet hors-champ.
  • Animer un objet sur X.
  • Enlever l’animation de la couleur d’arrière-plan.
  • Créer une illusion d’une scène.

Gestion d'une animation en boucle

Dans cette formation Adobe Edge Animate CC, le formateur va vous apprendre la gestion d’une animation en boucle. A la fin de ce tuto Adobe Edge Animate CC, vous allez parvenir à :

  • Placer une action à la fin d’un scénario.
  • Créer une clé d’action à la fin d’une animation.
  • Retrouver le bouton d’insertion de déclencheur.
  • Créer un déclencheur.
  • Maîtriser l’encodage d’une lecture en boucle.
  • Gérer une boucle d’animation.
  • Enregistrer une animation.

Intégration des hyperliens dans Edge Animate

Tout au long de cette formation Adobe Edge Animate CC, le formateur va vous initier à l’intégration des hyperliens dans Edge. Au fil de ce tuto Adobe Edge Animate CC, il va vous expliquer comment :

  • Sélectionner un objet sujet à une action.
  • Accéder à la fenêtre Action.
  • Associer un évènement à un objet.
  • Créer un hyperlien au sein d’une animation.
  • Permettre le lancement d’un lien à partir d’un objet.
  • Invoquer un numéro de téléphone.
  • Invoquer un sms à partir d’un objet.
  • Invoquer un lien vers une application sur apple store à partir d’un objet.

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

Durant ce tutoriel Adobe Edge Animate CC, le formateur va vous enseigner comment gérer la lecture en boucle d’un scénario. A l’issue de cette formation Adobe Edge Animate CC, vous allez être capable de :

  • Créer une étiquette.
  • Annuler une création d’étiquettes.
  • Accéder à la fenêtre code.
  • Utiliser une variable dans un encodage.
  • Gérer l’encodage d’une action de stop, de play et de play à l’envers.
  • Gérer l’encodage d’une condition.
  • Gérer l’encodage d’une condition avec une variable.
  • Gérer l’encodage d’une lecture en boucle.

Relier la position du scroll aux images

Tout au long de ce tutoriel Adobe Edge Animate CC, le formateur va vous expliquer comment relier la position du scroll aux images. Grâce à cette formation Adobe Edge Animate CC, vous allez découvrir comment :

  • Obtenir une structure de document.
  • Obtenir une scène avec un symbole contenant l’animation des images.
  • Balayer la tête de lecture.
  • Obtenir et présenter l’animation de l’ours.
  • Obtenir des images importées à partir de la bibliothèque.
  • Entrer à l’intérieur du symbole et enlever l’ours.
  • Voir l’arrière-plan avec le navigateur.
  • Aller sur la scène principale.
  • Obtenir un bloc gris.
  • Obtenir le contenu qui suit le défilement de la page.
  • Ajouter une commande CSS.
  • Synchroniser la position du scroll avec le défilement et l’illusion de naviguer à l’intérieur de la vidéo.

Création d’un bouton interrupteur play/pause

Dans ce tuto Adobe Edge Animate CC, le formateur va vous montrer comment créer un bouton interrupteur Play/Pause. Grâce à ce tutoriel Adobe Edge Animate CC, vous allez parvenir à :

  • Définir un symbole qui contient différentes formes graphiques.
  • Créer un bouton interrupteur Play/Pause nommé Console.
  • Obtenir une structure à partir des images.
  • Afficher un bouton Pause et un texte Audio On à gauche du scénario.
  • Activer la lecture du son.
  • Mettre une commande stop à la fin du scénario.
  • Placer deux étiquètes intitulées Sonore et Muet.
  • Afficher le code en utilisant un raccourci clavier.
  • Définir le code des deux consoles lecture et pause.
  • Ecouter ou arrêter le son.

Avertissement sur l’utilisation des iFrames avec Adobe Edge Animate CC

Par le biais de cette formation Adobe Edge Animate CC, le formateur va vous parler de l’avertissement sur l’utilisation des iFrames. Au cours de ce tutoriel Adobe Edge Animate CC, vous allez savoir comment :

  • Définir l’iFrame.
  • Obtenir deux exemples d’iFrame.
  • Gérer l’intégration de l’iframe au sein de la composition Edge.
  • Utiliser l’iframe.
  • Définir la fenêtre d’un iframe.

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

Par l’intermédiaire de ce tuto Photoshop éléments 5, le formateur va vous montrer comment téléchargement et l’installer le kit GSAP d’animation dans Edge Animate. A l’issue de cette formation Photoshop éléments 5, vous allez être capable de :

  • Visiter le site de GreenSock.
  • Télécharger le kit Greesock.
  • Obtenir un fichier téléchargé en zip.
  • Obtenir deux répertoires.
  • Définir les deux répertoires.
  • Copier le dossier SRC au sein du dossier de projet pour installer la classe.

Animer une galerie de photos dans un espace 3D

Par le biais de cette formation Adobe Edge Animate CC, le formateur va vous faire découvrir comment animer une galerie de photos dans un espace 3D. Durant ce tutoriel Adobe Edge Animate CC, vous allez parvenir à :

  • Combiner toutes les fonctionnalités de la formation.
  • Utiliser de l’animation de type Greensock.
  • Utiliser document.compositionReady.
  • Aller dans document.keydown.
  • Définir et présenter les codes dans le document.keydown.
  • Définir la méthode allTo.
  • Obtenir des animations de type 3D.

Présentation des possibilités étendues des librairies jQuery

Grâce à ce tutoriel Adobe Edge Animate CC, l’auteur va vous présenter des possibilités étendues des librairies JQuery. Au terme de cette formation Adobe Edge Animate CC, vous allez être en mesure de :

  • Utiliser la librairie Jquery pour la création des vidéos interactives.
  • Utiliser la librairie Edge Commons.
  • Aller dans le site Edge commons.
  • Obtenir une présentation vidéo de la librairie.
  • Replacer les boutons survols pour les périphériques mobiles.

Télécharger et installer une librairie jQuery Spotlight (Popup)

Ce tuto Adobe Edge Animate CC vous permet d’apprendre le téléchargement et l’installation d’une librairie JQuery Spotlight. Au cours de ce tutoriel Adobe Edge Animate CC, vous allez découvrir comment :

  • Télécharger la librairie Edge commons.
  • Taper l’url suivant github.com/simonwidjaja/Edgecommons.
  • Accéder à Download zip.
  • Utiliser la classe dans le serveur de la communauté Edge Commons à travers un lien.

Ajouter une action de popup sur des images cliquables

Par l’intermédiaire de cette formation Adobe Edge Animate CC, le formateur va vous enseigner comment ajouter une action de popup sur des images cliquables. Tout au long de ce tuto Adobe Edge Animate CC, vous allez savoir comment :

  • Associer la commande Popup à chacune des vignettes placées dans le document.
  • Obtenir des noms sur les vignettes.
  • Aller dans Code.
  • Présenter le code.
  • Exporter l’événement à partir d’un Url distant.
  • Ouvrir les liens cliquables.
  • Utiliser le même type de comportement.
  • Définir les variables du code.
  • Changer le nom des variables.
  • Référencer l’image à l’url.
  • Voir les différentes photos.

Nos derniers commentaires

Vous devez acheter cette formation pour écrire des commentaires

Donnez votre avis sur la formation

Votre note :
4 5 0 0
0
Jean-Marie Lenoel il y a 57 jours.

Bonne vidéo et explications

Souhaitant approfondir quelles connaissances sur ce produits, les vidéos proposées par Elephorm ont été très instructives. Parfais
Votre note :
5 5 0 0
0
arnaud gondouin il y a 892 jours.

Très bonne formation mais bug technique non résolu depuis 8 mois

Dans la formation « Apprendre Adobe Edge Animate CC - Créez des contenus animés et interactifs »

Chapitre : « Gérer l’affichage selon l’orientation des écrans mobiles »

Les vidéos :

- « Gestion des commandes d'orientation avec Apprendre Adobe Edge Animate CC »

et

-« Tester l'orientation sur les périphériques mobiles physique avec Apprendre Adobe Edge Animate CC »

sont les mêmes.

Bug signalé il y a 8 mois et toujours pas résolu.
Votre note :
5 5 0 0
0
gaelle dalmas il y a 1028 jours.

Bonne formation, et petite question

Bonjour,

très bonne formation, mais je me retrouve face à un léger problème de parallax en fonction du scroll qui n'a de cesse de scroller alors que l'animation est déja terminée.

Cest de ce code dont je parle.

var positionScrollVertical = $(e.target).scrollTop();

var pas = Math.floor(positionScrollVertical / 400 * 1000);
sym.getSymbol("malagaaa").stop(pas);

sym.$("malagaaa").css({"top": positionScrollVertical+"px"});
Or vous ne parlez pas du tout de ce soucis, peut être que vous ne l'avez pas et que c'est moi qui ait un problème dans la construction de ma banniere?
Votre note :
5 5 0 0
0
Mario Tremblay il y a 1545 jours.

Bravo et petite question

D'abord, félicitations pour votre tuto. Il est de loin le meilleur de tout ce que j'ai suivi à ce jour. 
J'ai suivi votre Tuto avec intérêt, mais voilà, j'utilise beaucoup Muse. D'abrod, est-il possible d'intégrer les différents segments que vous avez démontrer dans votre tuto et de les appliquer dans Muse et pas seulement dans Dream Weaver? Si oui, je crois que je serais le premier à me procurer votre prochaine formation qui ferait le mariage entre les deux logiciels Muse et Adobe Animate.
Car les tuto à ce sujet sont très rare.
Continez votre bon travail et félicitations encore.
 
merci  Mario de Montréal, Québec   marioconcepteur@videotron.ca
Zekayi Ercan il y a 668 jours.

intégration dans muse

Bonjour, oui tout s'intègre dans Muse, sans souci.