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

Télécharger le projet
Commenter

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.
Télécharger le projet

Codes Sources

A voir également

S'inscrire maintenant

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.