CATALOGUE Code & Data Formation Animate CC Maîtriser Adobe Animate CC 2017 - Ateliers parallaxe

Pilotage d'une Animation via la Molette de la Souris

Retour à la formation
Chapitre 4 Leçon 2
Précédent
Suivant

Découvrez comment contrôler une animation de personnage en utilisant les événements de défilement de la souris. Ce tutoriel couvre les systèmes de détection de la molette, la lecture bidirectionnelle d'un scénario d'animation et l'optimisation des performances.

Détails de la leçon

Description de la leçon

Dans ce tutoriel, nous partons d'un fichier de départ intégrant une animation de personnage. Nous allons ajouter un script pour détecter les actions de défilement de la molette de la souris et piloter l'animation en conséquence.
La fonction JavaScript Moleting sera au cœur de ce processus et nous ferons en sorte qu'elle fonctionne aussi bien sur Chrome que sur Firefox. La vidéo explique comment utiliser des conditions pour déterminer le sens de défilement et adapter l'animation en conséquence. Nous verrons également comment éviter l'animation en boucle pour obtenir un comportement plus naturel.
Pour conclure, quelques astuces pour ajuster la vitesse de l'animation et optimiser l'expérience utilisateur seront partagées.

Objectifs de cette leçon

L'objectif de cette vidéo est de :

  • Apprendre à détecter les actions de défilement de la molette de la souris
  • Comprendre comment piloter un scénario d'animation en fonction du défilement
  • Optimiser l'expérience utilisateur en ajustant la vitesse et le comportement de l'animation

Prérequis pour cette leçon

Pour suivre ce tutoriel, il est recommandé d'avoir :

  • Une connaissance de base en JavaScript et en HTML
  • Des notions de développement front-end
  • Une expérience préalable avec les animations web

Métiers concernés

Les compétences acquises dans ce tutoriel sont précieuses pour :

  • Les développeurs front-end
  • Les web designers
  • Les animateurs numériques
  • Les intégrateurs web

Alternatives et ressources

Pour ceux qui recherchent une approche différente, des alternatives comme CSS animations ou l'utilisation de bibliothèques JavaScript spécialisées, telles que GreenSock (GSAP), peuvent être envisagées.

Questions & Réponses

La fonction Moleting est développée pour détecter les actions de défilement de la molette de la souris et piloter le scénario d'animation en fonction du sens de défilement.
Pour Chrome et IE, on utilise 'window.addEventListener' avec l'événement 'mousewheel'. Pour Firefox, on utilise 'window.addEventListener' avec l'événement 'DOMMouseScroll'.
La variable delta permet de déterminer le sens de défilement de la molette de la souris, donnant une valeur de 1 ou -1 selon que l'utilisateur scrolle vers le haut ou vers le bas.