Cinématique inverse, déplacement dynamique, boucle for et linestyle

Soyez le premier à donner votre avis sur cette source.

Vue 8 042 fois - Téléchargée 520 fois

Description

Bonjour à tous.
Voici un document fait par mes soins, vous permettant d'en apprendre un peu plus sur la cinématique inverse, le déplacement de clips, les objets "lineStyle", et les boucles FOR.
Chacune de ces choses ont un niveau de difficulté différent, c'est pourquoi je pense que mon document peut être regardé par tous. En plus j'ai fait un effort de commentaires.
bref. A quoi sert mon document? A rien. Si ce n'est exploiter l'AS2 pour pratiquer de nouvelles choses.
Vous y trouverez juste un genre de serpent qu'on peut déplacer comme bon nous semble, suivi de sa queue qui est calculée grace a la cinématique inverse.

Je sais que ma façon de coder n'est pas conventionelle car rien n'est contenu dans les frames, et on ne trouve aucune function dans mon document. Tout l'ActionScript est contenu dans les clip via les fonctions "onClipEvent(load)" et "onClipEvent(enterFrame)" tellement plus pratique pour les éléments interactifs.

Sur la scène, on retouve 3 clips seulement.
L'élément Fleche, correspondant à la tete.
Un élément point qui seront positionnés pour former la queue du serpent.
Et un clip vide qui sera là seulement pour créer les traits entre les points pour donner un minimu de forme la queue de ce pauvre serpent déjà mal en point.

Source / Exemple :


Code du clip fleche (occurence sur la scène : pt1):

onClipEvent (load) {

	//Déclaration des variables
	//acc va servir pour le moteur de déplacement de l'élément en forme de fleche.
	var acc:Number = 0;

	//d correspond à la distance que l'on veut garder entre l'élément en forme de fleche et l'objet "pt2", départ de la ligne.
	var distance:Number = 30;

	//Créer 15 éléments nommés "pt"+i. ces objets sont les points d'articulation de la ligne.
	for (i=2; i<15; i++) {
		duplicateMovieClip(_root.pt, "pt"+i, i+1000);
		_root["pt"+i].i = i;
	}
}
onClipEvent (enterFrame) {
	//MOTEUR DE DÉPLACEMENT
	//Utilisation des touches fléchées du clavier
	//si la touche "droite" est enfoncée, rotation de l'élément vers la droite.
	if (Key.isDown(Key.RIGHT)) {
		this._rotation += 15;
	}
	//si la touche "gauche" est enfoncée, rotation de l'élément vers la gauche.      
	if (Key.isDown(Key.LEFT)) {
		this._rotation -= 15;
	}
	//si la touche "haut" est enfoncée, acc incrémente de 1      
	if (Key.isDown(Key.UP)) {
		acc += 1;
	}
	//si la touche "bas" est enfoncée, acc décrémente de 1      
	if (Key.isDown(Key.DOWN)) {
		acc -= 1;
	}
	//Si acc est différent de 0 (en clair si la fleche se déplace), acc est multiplié par 0.95 ce qui a pour effet de ralentir la fleche    
	//si on lache toute les touches, dans le but que notre fleche ne parte pas toute seule n'importe où.
	if (Math.abs(acc) != 0) {
		acc *= 0.95;
	}
	//Calcul des distances de déplacement en fonction de l'angle de la fleche.    
	vx = Math.cos(this._rotation*(Math.PI/180))*acc;
	vy = Math.sin(this._rotation*(Math.PI/180))*acc;

	//Applictation de ces distances sur la fleche
	this._x += vx;
	this._y += vy;

	//Bon là c'est le plus chaud à expliquer.
	//La fleche calcul et applique le déplacement de pt2 (premier point de la ligne qui suit la flèche).
	//Calcul de la différence entre l'abcisse de pt2 et du clip Fleche. IDEM pour l'ordonnée.
	//Ces chiffres vont servir pour le positionnement et la rotation de pt2  
	var dx = _root.pt2._x-this._x;
	var dy = _root.pt2._y-this._y;

	//Calcul de atan2. Correspond à, et je cite, "l'angle du point y/x en radians lorsqu'il est mesuré dans le sens inverse
	//des aiguilles d'une montre à partir de l'axe x d'un cercle".(texte de l'aide de Flash). Je trouve que c'est bien dit ^^, mais difficile de compréhension.
	var atan2 = Math.atan2(dy, dx);

	//Application du déplacementde pt2 en fonction de l'angle.
	_root.pt2._x = this._x+Math.cos(atan2)*distance;
	_root.pt2._y = this._y+Math.sin(atan2)*distance;
	
	//conversion de l'angle trouvé par atan2 (en radian) en degré.
	_root.pt2._rotation = (Math.PI+atan2)*180/Math.PI;
}
/*

  • /
Code du clip point (occurence : pt+i, i allant de 2 à 15) : onClipEvent (load) { var distance:Number = 30; } onClipEvent (enterFrame) { //IDEM que dans le clip fleche. //Chaque point applique le déplacement du point qui le suit. //pt2 applique le déplacement de pt3 //pt3 applique le déplacement de pt4 //pt4 applique le déplacement de pt5 //... // ["pt"+(i+1)] correspond au nom d'occurence du clip qui suit celui là. // i est envoyé grâce à la boucle for de la fonction "duplicateMovieClip", contenue dans la flèche. //C'est pourquoi chaque i est différent d'un clip à l'autre. var dx = _root["pt"+(i+1)]._x-this._x; var dy = _root["pt"+(i+1)]._y-this._y; var atan2 = Math.atan2(dy, dx); _root["pt"+(i+1)]._x = this._x+Math.cos(atan2)*distance; _root["pt"+(i+1)]._y = this._y+Math.sin(atan2)*distance; _root["pt"+(i+1)]._rotation = (Math.PI+atan2)*180/Math.PI; } /*
  • /
Code du clip ligne (qui crée la ligne): onClipEvent (enterFrame) { //Création du clip Vide contenant le chemin du trait this.createEmptyMovieClip("ligne",5000); //Création du Trait this.ligne.lineStyle(3,0xFFFFFF,50); //Point de Départ du trait this.ligne.moveTo(_root.pt1._x,_root.pt1._y); //Boucle for : s'il existe un élément dont le nom d'occurence correspond à ["pt"+i], tracer un vers vers ce dernier. for (i=2; _root["pt"+i] != undefined; i++) { this.ligne.lineTo(_root["pt"+i]._x,_root["pt"+i]._y); } //Fin de l'élément this.ligne.endFill(); }

Conclusion :


Voilà. En espérant vous avoir fait plaisir. N'hésitez pas a poser des questions, à réutiliser mon code, à l'exploser comme bon vous semble, à l'améliorer. L'union fait la force.

Utilisez les touches directionnelles du clavier pour faire bouger le serpent

et aussi...Bonnes Fêtes à toutes les mamans, particulierement à la mienne.

Codes Sources

A voir également

Ajouter un commentaire Commentaires
pegase31 Messages postés 6138 Date d'inscription dimanche 21 décembre 2003 Statut Modérateur Dernière intervention 4 septembre 2013 11
5 juin 2008 à 20:57
Je suis d'accord avec Top30 pour le côté AS1 avec le code sur chacun des clips .. il serait bon de créer une classe générale pour ce genre de chose (en as3, tu ne vas pas trop avoir le choix, d'ailleurs)

Peg'
Zeroune Messages postés 2 Date d'inscription mardi 25 mars 2008 Statut Membre Dernière intervention 31 mai 2008
31 mai 2008 à 17:59
Merci de ton attention Top30.
Peut être que personne n'a trouvé son interet dans ma contribution à ce site ^^.
top30 Messages postés 1158 Date d'inscription vendredi 21 février 2003 Statut Membre Dernière intervention 6 août 2010
31 mai 2008 à 17:24
C'est bien dommage qu'une source comme celle-ci ne soit pas plus...
commentée !
Zeroune Messages postés 2 Date d'inscription mardi 25 mars 2008 Statut Membre Dernière intervention 31 mai 2008
29 mai 2008 à 09:09
Je ne voit pas pourquoi l'AS1 est si gênant, puis a vrai dire... Je ne connais pas bien la différence entre l'as1 et 2. J'ai fait comme je connaissais ^^.
Passer tout celà en AS3 car, je n'ai jamais rien fait en AS3.
Je m'y pencherai quand j'aurais du temps...Exams oblige.
top30 Messages postés 1158 Date d'inscription vendredi 21 février 2003 Statut Membre Dernière intervention 6 août 2010
28 mai 2008 à 21:54
L'effet produit est super sympa... 8/10.
Mais c'est dommage que cela soit codé en "AS1"... 2/10

Je mettrais un 7/10.
A passer en AS3 si tu le peux.

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.