Tutoriels - Flash - Programmation fichier source



Drag'n Drop en arc de cercle (écrit par Jérémie )

comment contraindre un drag'n drop à un arc de cercle ?



j'ai déjà vu sur internet des methodes bien compliquées. avec flash5, c'est plutôt facile. cette methode est simple, et il y en a d'autres. le tutoriel parait long, mais comporte très peu de code.

prérequis

pour commencer, il vaudrait mieux savoir utiliser le drag'n drop. voir pour cela le tutoriel à ce sujet .
c'est également mieux d'avoir des connaissances en mathématiques, sur les formules de trigonométries les plus simples, juste pour comprendre comment ça marche.


étape 1 - symboles

créez un nouveau clip 'balle', dessinez la balle et convertissez la en symbole : un bouton que vous appellerez 'drag'. placez 'balle' sur la scène (nom d'instance 'balle'). deux symboles sont imbriqués : un bouton dans un movie clip.

pour simplifier les calculs, on crée également un clip 'centre' (dessinez un petit cercle), qui sera le centre de l'arc de cercle. placez le sur la scène. (nom d'instance 'cercle')

étape 2 - bouton

double cliquez sur 'balle', selectionnez 'deplacement' editez les actions et insérez le code suivant.

// pour savoir si l'objet doit se déplacer (si l'on clique dessus)
on (press) {
_root.deplacement = true;
}
on (release, releaseOutside) {
_root.deplacement = false;
}


on ne deplacera la balle qui si 'deplacement' est vraie, donc quand on cliquera sur la balle. dès que l'on relache le bouton de la souris, 'deplacement' sera fausse et le deplacement s'arretera.

étape 3 - variables

sur la scène, selectionnez balle, bouton droite > actions. on recupère au chargement du clip les variables qui serviront par la suite, puis on place la balle à sa position initiale. inserez le code suivant onClipEvent (load) {
// variables
rayon = 80;
// les coordonnées du centre
x0 = _root.centre._x;
y0 = _root.centre._y;
// premier placement de la balle
this._x = x0;
this._y = y0+rayon;
}


étape 4 - théorie

on a besoin de l'angle A formé par le pointeur et la verticale. on pourra ainsi connaitre les coordonnées du point P et placer la balle dessus.
tan(A) = EF/DF.

les formules de trigonométrie à connaître :

dans un triangle rectangle, on appelle
O le côté opposé à l'angle
A le côté adjacent à l'angle
H l'hypoténuse

cos(angle) = A/H;
son(angle) = O/H;
tan(angle) = O/A;



étape 5 - trouver l'angle

toujours dans les actions de 'balle', passez en mode expert. commencez par ecrire, sous le code de l'étape 3:

onClipEvent (enterFrame) {
if (_root.deplacement) {
// on n'execute le code que si 'deplacement' est vraie
// *** la suite du code s'ecrira ici
// if (deplacement) équivaut à if (deplacement = true)
}
}


completer le code ci-dessus par :

// trouver l'angle
// on exprime les coordonnées du pointeur en fonction
// de x0 et y0 et on utilise la fonction Math.atan
x1 = x0-_root._xmouse;
y1 = _root._ymouse-y0;
angle = Math.atan(x1/y1);
// ne pas oublier que dans flash,
// le repère de coordonnées est inversé :


étape 6 - placer la balle


h : hypothenuse
cette fois on a A, et on cherche x et y.
encore de la trigonométrie :
: cos(A) = y/h donc y = h*cos(A)
: sin(A) = x/h donc x = h*sin(A)
continuez le code précedent

//placement de la balle
this._x = x0-(rayon*Math.sin(angle));
this._y = y0+(rayon*Math.cos(angle));


étape 7 - contraindre le deplacement

il ne reste plus qu'à contraindre le déplacement à un arc de cercle.
toujours à la suite :
// contrainte du mouvement
if (_root._xmouse>x0) {
this._x = 2*x0-x;
}
if (_root._ymouse<y0) {
this._y = y0;
this._x = x0-rayon;
}


ce code changera si vous voulez un arc plus petit, c'est à vous de voir, c'est pas bien compliqué. c'est terminé. le tutoriel est long, mais il y a très peu de code, une fois qu'on a compris le principe, c'est rapide et efficace.

étape 8 - après propos

il existe d'autres méthodes mais celle-ci me parait être la plus pratique, on peut changer rapidement et simplement ses paramètres : son rayon & son centre.



Tous droits réservés 2003 Jérémie Cook