Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Suivre les mouvements de la souris

Compatible Flash Catalyst CS5. Cliquer pour en savoir plus sur les compatibilités.Par BEtrained (Laurent BRIERE), le 12 octobre 2010

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

Objectif: permettre à un objet (ici un cercle…) de bouger dynamiquement dans la même direction que votre pointeur de souris (Tester l'animation ci-dessus)

Astuce de cet exercice: nous allons utiliser des formes vectorielles (Ici un carré…) que nous allons masquer dans la scène en leur affectant une couleur de remplissage identique à celle utilisée par votre projet. Ces formes seront ensuite transformées en COMPOSANTS Flash Catalyst ce qui aura pour avantage de nous permettre de les rendre DECLENCHEUR (Exemple: effet de survol ou Rollover) d'une INTERACTION appliquée à l'objet en mouvement (Le cercle…)

Etape N°1

Créons un projet de départ de 100 x 100 pixels dans Flash Catalyst CS5. Dessiner à l'aide de la palette d'outils vectoriel un cercle avec une couleur de fond de votre choix et masquez-le dans la palette des calques pour qu'il ne vous gène pas pour la suite. La taille importe peu ici.

Créez 4 carrés de 50×50 pixels positionnés les uns à côté des autres comme indiqué ci-dessous:

Déposons à l'aide de la règle des repères horizontaux et verticaux au centre des carrés par un cliqué/glissé (Lignes vertes de la figure ci-dessous).

Transformons maintenant tous ces carrés tour à tour en COMPOSANT de type BOUTON:

Etape N°2

Une fois terminé, pensez à renommer vos objets de manière explicite pour vous y retrouver et vous faciliter ainsi la tâche lors de la conception des INTERACTIONS.

Pensez également à replacer votre cercle au 1er plan en le remontant tout en haut dans la liste des objets du calque 1.

Sélectionnez le 1er carré en haut à gauche et dans le panneau INTERACTION, choisissez Lorsque le curseur survole (Rollover), Lire la séquence d'actions et cliquez enfin sur OK.

Cliquez sur le cercle pour le désigner comme étant l'objet sur lequel l'interaction va être réalisée et Ajouter une action dans le panneau SCENARIOS de type Déplacer comme indiqué si dessous en précisant le Type de déplacement et les coordonnées de votre déplacement (Ici celles qui correspondent au centre du carré -

Astuce: pour trouver les coordonnées du cercle, déplacez-le avec l'outil Sélection (Touche “V” de votre clavier) au jugé au centre du carré qui les est associé et notez l'emplacement en X et Y de cet objet sur un papier libre en vous référant aux valeurs affichées dans le panneau Propriété) :

Sélectionnez cette fois-ci le carré en haut à droite et dans le panneau INTERACTION renouvelez cette opération:

Pour vous aider à vous y retrouver voici la liste des coordonnées de déplacement du cercle que j'ai dessiné et déplacé en notant les coordonnées qu'il avait au centre des carrés. Les valeurs en X et Y de ces déplacements correspondent aux valeurs répertoriées. Le signe ”-” correspondra alors à un déplacement vers la gauche de la scène et inversement à droite pour une valeur positive.

Coin supérieur gauche:

Explication: le cercle alors au centre du carré en haut à gauche à une position X=10, Y=10. Chacun des carrés faisant 50 pixels de large (et de haut!),

- le cercle au centre du carré en haut à droite aura les coordonnées suivantes: X=10+50 (60) et Y=10.

- le cercle au centre du carré en bas à gauche aura les coordonnées suivantes: X=10 et Y=10+50 (60).

- le cercle au centre du carré en bas à droite aura les coordonnées suivantes: X=10+50 (60) et Y=10+50 (60).

Coin supérieur droit:

Coin inférieur gauche:

Coin inférieur droit:

Il ne vous reste plus qu'à tester votre projet dans votre navigateur avec la commande Fichier/Exécuter le projet ou le raccourci clavier Command/CTRL + ENTREE et à publier votre travail.

Bonne formation !!

Lien: cette astuce est également disponible à la vente au format vidéo sur Weecast.fr (Tuto.com) - http://fr.tuto.com/flash-catalyst/hack-flash-catalyst-tracker-un-objet-sur-la-souris-flash-catalyst,12315.html