:::::: mxPrototypes ::::::

Retour à l'accueil (site en flash) :::: Retour à l'accueil (site en html ) :::: ajouter aux favoris

fonction bump() pour déformer un movieclip en déplaçant ses éléments

Le but de ce tutorial est de concevoir une fonction qui déplaçe les éléments d'un movieclip.
Si celui-ci est composé de beaucoup d'éléments, on peut avoir l'illusion d'une déformation de la surface.
Regardez d'abord l'exemple, disponible ici.

L'effet ne s'applique qu'aux objets qui se trouvent à l'intérieur d'un périmêtre que l'on determinera par le centre(x,y), et le rayon.
Un dernier paramêtre sera l'intensité de l'effet de déformation.
On a donc en tout quatre paramêtres:
'x', 'y', 'rayon', et 'force'



movieClip.prototype.bump = function(x,y,radius,force){
	/** on fait une boucle pour appliquer l'effet sur tous les elements de cet objet **/
	for(z in this){
		/** on calcule la distance du sous-objet courant au centre de l'effet **/
		var distx = this[z]._x - x;
		var disty = this[z]._y - y;
		var distance=Math.sqrt(distx*distx + disty*disty);

		/** on va diviser par 'distance' donc on ne veut pas que sa valeur soit 0, d'où: **/
		if(distance==0) distance=1;
		/** on calcule le cosinus et le sinus de l'angle en divisant les cotés adjacent et opposé par l'hypothénuse **/ 
		var cos = distx/distance;
		var sin = disty/distance;
		/** si l'objet est dans le périmêtre, alors on applique l'effet **/
		if(distance < radius)
		{
			/** l'effet consiste à éloigner le sous-objet du centre, en fonction de son éloignement du centre **/
			/** il sera très dévié s'il en est près, peu dévié s'il en est loin **/
			this[z]._x += force*cos*(radius-distance);
			this[z]._y += force*sin*(radius-distance);
		}
	}
}
.

.Commentaires:

max:
l'anim rame un peu chez moi, mais c vraiment bien
damien:
c'est vrai, j'ai mis beaucoup d'éléments, et transparents en plus... mais on peut faire plus simple, ça fait toujours de l'effet.
Malko:
C'est tres classe, bravo pour l'idée
damien:
merci :)
damien:
En construction: un prototype sur les ondulations !!
damien:
hey !
Metos_rd:
Effet visuel vraiment sympa
siper:
ce qui serait encore mieux, c de pouvoir telecharger le .fla
CaBBaLe:
bon moi je touche po encore au proto, dc grde admiration ;)mais je trouve domage ke les objets ne revienne po a leurs place apres le passage de la souris.Ainsi le proto serait vraiment top du top(je pense ke ca dois etre balaise qd meme ce ke je dis la, comment faire une memoire de position de tt les objet->une table peut etre?)
rottviler:
Pas mal
tartine:
trop fort la gestion de l'ombrage 3D...
tartine:
c'est re-moi, j'ai fait un tit' tuto dans le genre de ton bump sur mon site la différence c'est que les objets reviennent à leur place lorsque la souris s'éloigne http://dreammania.net
dandepalma:
votre messagevraiement sympa ton anim , peut-on remplacer les carreaux bleux par une photo ?
whitemagus:
ça rend plutôt bien. Rien à dire au niveau du code. C'est puissant
marguerite:
comment faire pour le faire dans flashya des trucs que j'ai pas du comprendrele nom du clip? parce qu'elle est bien cett anim, j'aurais voulu changer des trucs mais avec le meme principeqqn veut pas m'aider??
gh:
j'arrive pas a le faire fctionner est ce il faut nommer tous les clip coment faire???
axelle:
votre messageSympa sur IE ne marche pas sur Firefoxdommage...
snikers02:
wawwwwwwwwwwwwwww jé jamé vue kelke chose comme ça c vraiment génial
jean-michel :
magnifique
jean-michel:
malgré ton explication je n arrive pas a faire fonctionner faut dire que je suis sur linux et debutant en flash j utilise mtaschttp://jmg.redarmor.net
jean-michel:
est ce que cela se compile avec mtasc