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
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.