tutorial rotation souris [cours]

 

aujourd’hui 3 septembre/08 nous allons comprendre comment tourner des objets avec la souris, de façon bien particulière.

[cours 1]

commençons par comprendre comment faire pour que la rotation d’un objet suive la souris uniquement. ce petit shema illustre les mesures que nous avons besoin :

 

car._x & car._y = les coordonnées du carré

dx = _xmouse – car._x

dy = _ymouse – car._y

angle = _rotation

 

 

 

 

 

 

 

 

nous nous devons trouver l’angle qui equivant à la _rotation

-créez sur votre scène un miniclip ( ex un carré )

-donnez lui l’instance car ( pour définir une instance il suffit d’appuyer une fois sur le movieclip puis le champ se situe en bas à gauche dans la barre propriétés )

-puis dans la première frame de votre scène tapez votre script ( F9 )

1
onEnterFrame = function(){

 dx = _xmouse - car._x
 dy = _ymouse - car._y
 angle = Math.atan2(dy,dx)/(Math.PI/180);
 car._rotation = angle
}

 

vous pourrez retrouvez le .fla à la fin de ce cours ( en bas de page )

examinons ce script

ligne 1  : chaque fois qu’on lance l’image (frame) = a une fonction()

ligne 2 et 3 : on calcul dx et dy

ligne 4 : on calcul l’angle, en calculant la tangente avec Math.atan2, qui consiste à mettre deux ordonnées une X et une Y pour trouver notre tangente. Et ensuite les convertir en radians à l’aide de /(Math.PI/180) 

ligne 5 : la rotation de car = l’angle ( tangente entre car et la souris ) 

essayez votre script

 

[cours2]

dans ce cours-ci on va faire tourner un objet à l’aide de la souris un peu comme des platines de DJ avec nos mains

tout dabord essayons de comprendre ce que nous allons faire ( sous forme de pseudoscript ):

si je m’accroche à l’objet ( startDrag )

et que ma souris bouge la rotation suit la souris

si la souris est levé ( onMouseUp )

j’arrête de m’accrocher à l’objet ( stopDrag )  

 

cela permet de mieux comprendre ce que nous cherchons à faire pour ainsi le retranscrir sous forme de code script

-commencez par créer un movieclip rectangulaire puis mettez lui l’instance car

-ouvrez votre éditeur de script ( F9 ) et entrez le code ci-dessous :

l 
car.onEnterFrame = function(){
 dx = _xmouse-car._x;
 dy = _ymouse-car._y;
 angle = Math.atan2(dy, dx)/(Math.PI/180);
 this.onPress = function(){
  drag = true;
  this.startDrag(false,this._x,this._y,this._x,this._y);
 }
 onMouseUp = function(){
  drag = false;
  this.stopDrag();
 }
 if(drag == true){
 car._rotation = angle;
 }
}
 

tentons de mieux comprendre ce que nous avons écrit ici :

ligne 1 à 4 : c’est les variables et formules qui nous permettent de tourner en suivant la souris

ligne 5 : quand onPress le movieclip car ( this ) = fonction()

ligne 6 : notre drag est true

ligne 7 : car.startDrag et tout ce qui nous permet que notre clip reste en place durant sa rotation

ligne 9 : quand on lève la souris = fonction()

ligne 10 et 11 : drag est false et car.stopDrag lache le movieclip car

ligne 13 : si drag est true alors

ligne 14 : car._rotation suit notre variable angle

-essayez votre script

voilà le cours sur les rotation avec la souris est terminer. vous pouvez essayer d’autres formes de rotation avec la souris et les inclures dans les applications souhaités.

[ télécharger les .fla ]

suite à un problème avec mon hébergeur de fichier les fichiers seront momentanément indisponibles

 

tutorial écrit par Nonitt

poster un commentaire

 pour donner votre avis