CATALOGUE Code & Data Formation Animate CC Maîtriser Adobe Animate CC 2017 - Atelier Gestion du Drag & Drop

Détails de la leçon

Description de la leçon

Dans ce tutoriel, nous allons examiner comment implémenter une fonction draggable réutilisable en Create.js qui s'ajuste de manière responsive. Nous commencerons par référencer la largeur effective du stage pour faciliter les calculs lors de l'adaptation aux différentes tailles de fenêtre. Ensuite, nous ajouterons des variables de conversion pour ajuster les coordonnées des éléments en fonction de la taille de la fenêtre du navigateur. Nous terminerons par tester la fonctionnalité pour garantir que le comportement de drag & drop fonctionne correctement dans différents modes d'affichage.

Ce processus implique la déclaration de plusieurs variables et l'utilisation de fonctions mathématiques pour convertir les valeurs de position en pourcentage. En suivant ce guide, vous serez capable de réutiliser ces morceaux de code dans vos propres applications pour une gestion efficace du drag & drop dans un environnement responsive.

Objectifs de cette leçon

Les objectifs sont d'apprendre à :
- Référencer la largeur effective du stage
- Ajouter des variables de conversion pour le responsive design
- Implémenter et tester une fonction draggable compatible avec différentes tailles d'écran.

Prérequis pour cette leçon

Pour suivre ce tutoriel, vous devez avoir :
- Une compréhension de base de JavaScript
- Une connaissance préalable de Create.js
- Des notions de design responsive.

Métiers concernés

Les compétences acquises dans ce tutoriel sont applicables à plusieurs métiers :
- Développeur Front-End
- Intégrateur Web
- Concepteur d'interfaces utilisateur (UI/UX designer).

Alternatives et ressources

Si vous cherchez des alternatives à Create.js, vous pouvez considérer :
- GreenSock (GSAP) pour des animations complexes
- jQuery UI pour des opérations de drag & drop plus simples
- Fabric.js pour la manipulation de canevas HTML plus fluide.

Questions & Réponses

La variable Stage With est utilisée pour référencer la largeur effective du stage afin de pouvoir effectuer des calculs de conversion pour le responsive design.
Les variables de conversion sont nécessaires pour ajuster les positions des éléments draggés en fonction de la taille de la fenêtre du navigateur, assurant ainsi un comportement responsif.
Vous pouvez tester en rendant l'objet draggable, en le déplaçant et en observant si le comportement de drag & drop reste cohérent lorsque la fenêtre du navigateur est redimensionnée.