CATALOGUE Design et Infographie Formation Photoshop Apprendre Photoshop CC pour le Web - Photoshop orienté Web et mobile

Intégration et Animation d'Images dans Edge Animate

Retour à la formation
Chapitre 10 Leçon 3
Précédent
Suivant

Apprenez à intégrer et animer des images dans Edge Animate en utilisant des techniques de Javascript, CSS3 et jQuery.

Détails de la leçon

Description de la leçon

Dans cette leçon, nous allons explorer comment intégrer et animer des images dans Edge Animate. Nous commencerons par glisser et déposer les images dans le répertoire approprié, puis nous créerons un nouveau document Edge Animate. Ce document, enregistré au format HTML, prendra en compte automatiquement les images disponibles dans le répertoire.

Ensuite, nous détaillerons les étapes pour animer les images en utilisant le masque (clip) dans Edge Animate. Cela inclut la création de clés d'animation et la manipulation des propriétés de position et de masque de l'image pour obtenir une animation fluide.

Enfin, nous expliquerons comment ajuster l'arrière-plan du document pour qu'il corresponde à notre animation et nous terminerons par la publication de l'animation. Pour ceux qui souhaitent approfondir leurs connaissances, une formation complète sur Edge Animate est recommandée.

Objectifs de cette leçon

Les objectifs de cette vidéo sont :

  • Apprendre à intégrer des images dans un document Edge Animate.
  • Comprendre les bases de l'animation d'images avec des masques (clip).
  • Savoir ajuster et publier une animation.

Prérequis pour cette leçon

Pour suivre cette vidéo, il est recommandé d'avoir des connaissances de base en HTML5, CSS3 et Javascript.

Métiers concernés

Les compétences abordées dans cette vidéo sont particulièrement utiles pour les métiers de développeur frontend, designer web et animateur multimédia.

Alternatives et ressources

Comme alternatives à Edge Animate, vous pouvez utiliser des outils tels que Adobe Animate, GSAP (GreenSock Animation Platform) ou même CSS animations.

Questions & Réponses

Edge Animate repose principalement sur Javascript, CSS3 et jQuery.
Les images peuvent être intégrées dans un document Edge Animate en les glissant et déposant dans le répertoire approprié du projet ou directement dans l'interface de documentation.
Le masque (clip) dans Edge Animate permet d'animer une portion spécifique de l'image, en définissant des seuils de masque pour cropper l'image à différentes étapes de l'animation.