[Flash] Essais sur la rotation

Je me suis mis a essayer de faire des effets de rotation d'un clip dans l'espace et d'essayer de trouver tout ça sans chercher sur le net. Voici les différentes étapes pour ce faire:
Pour l'instant, voici simplement la mise en place d'un clip sur la scène, et la rotation de celui ci.

Code:: var hor,ver; // variables pour la position horizontal et vertical
var mvt=0; // variable de mouvement

/* Création d'un clip vide sur la scène, puis on attache a ce clip
un clip qui se trouve dans la bibliothèque et qui a comme nom
de liaison "rond"
*/
_root.createEmptyMovieClip("rond_mc",1);
rond_mc.attachMovie("rond","rond",1);

onEnterFrame=function(){
// On donne des valeurs pour le positionnement en x et y
hor=200+200*Math.cos(mvt/16);
ver=200+200*Math.sin(mvt/16);
// Positionement du clip sur la scène via les variables prévu
//a cet effet
rond_mc._x=hor;
rond_mc._y=ver;
// Incrémentation de la variable de mouvement
mvt++;
}

Maintenant on donne a ce clip un mouvement d'élipse, plutôt que de cercle. On le fait en donnant une amplitude du sinus inférieur à celle du cosinus.

Code:: var hor,ver,prof;
var mvt=0;

_root.createEmptyMovieClip("rond_mc",1);
rond_mc.attachMovie("rond","rond",1);

onEnterFrame=function(){
hor=200+200*Math.cos(mvt/16);
// l'amplitude verticale est de 100 pixel, et non de 200
//donc c'est réduit de moitié en hauteur.
ver=200+100*Math.sin(mvt/16);
rond_mc._x=hor;
rond_mc._y=ver;
mvt++;
}

Ensuite, on donne un effet de profondeur en jouant sur la taille du clip. On a l'impression qu'il séloigne puis qu'il se rapproche de nous. On jou là dessus avec la propriété _xscale et _yscale du clip.

Code:: var hor,ver,prof; // création d'une variable de profondeur en plus
//des anciennes
var mvt=0;

_root.createEmptyMovieClip("rond_mc",1);
rond_mc.attachMovie("rond","rond",1);

onEnterFrame=function(){
hor=200+200*Math.cos(mvt/16);
ver=200+100*Math.sin(mvt/16);
// Cette fois ci on donne comme variation à la variable de
//profondeur les même que celles de la hauteur.
prof=80+30*Math.sin(mvt/16);
rond_mc._x=hor;
rond_mc._y=ver;
// Maintenant on utilise l'effet de profondeur sur les propriétés
//_xscale et _yscale.
rond_mc._xscale=prof;
rond_mc._yscale=prof;
mvt++;
}

Puis, à ce niveau, pour donner plus de réalisme à l'éloignement du clip, on a plus qu'a jouer sur l'alpha de celui ci.

Code:: var hor,ver,prof,alpha;// création d'une variable alpha
var mvt=0;

_root.createEmptyMovieClip("rond_mc",1);
rond_mc.attachMovie("rond","rond",1);

onEnterFrame=function(){
hor=200+200*Math.cos(mvt/16);
ver=200+100*Math.sin(mvt/16);
prof=80+30*Math.sin(mvt/16);
// variations de l'alpha sont les mêmes que la profondeur.
//60 correspond à l'apha moyen, et 40 est la moitié de l'amplitude
//ce qui donne une amplitude de 80 pour l'alpha.
alpha=60+40*Math.sin(mvt/16);
rond_mc._x=hor;
rond_mc._y=ver;
rond_mc._xscale=prof;
rond_mc._yscale=prof;
// Ici on applique les variations d'alpha au clip
rond_mc._alpha=alpha;
mvt++;
}

Maintenant que l'effet est réussi, il ne nous reste plus qu'à faire varier la rotation par rapport à la position de la souris.

Code:: var hor,ver,prof,alpha;
var mvt=0;

_root.createEmptyMovieClip("rond_mc",1);
rond_mc.attachMovie("rond","rond",1);

onEnterFrame=function(){
// variation de la variable mvt par rapport à la position de la souris
mvt+=(_xmouse-250)/100;
hor=200+200*Math.cos(mvt/16);
ver=200+100*Math.sin(mvt/16);
prof=80+30*Math.sin(mvt/16);
alpha=60+40*Math.sin(mvt/16);
rond_mc._x=hor;
rond_mc._y=ver;
rond_mc._xscale=prof;
rond_mc._yscale=prof;
rond_mc._alpha=alpha;
}

J'ai un peu changer ton code pour rajouter deux effet supplémentaire.

Le premier joue sur la couche que l'occurrence utilise.
Pour cela on utilise les deux fonction getDepth() et swapDepths qui permettent de retourner la couche utilisée par l'occurrence et d'échanger les couches entre deux objets.

Code:: X.getDepth()
X.swapDepths(Y);

Le deuxième joue avec un effet Blur et permet de rendre une occurrence floue.
Pour cela, il faut reprendre le code type donné dans l'aide de Flash.

Code:: import flash.filters.BlurFilter;
var filter:BlurFilter = new BlurFilter(blurX, blurY, quality);
var filterArray:Array = new Array();
filterArray.push(filter);
X.filters = filterArray;

Ensuite, on fou la pagaille dans le beau code de Rabou Very Happy

(Aussi pour voir l'effet on rajoute une occurence sur la scène.)

Code:: //Rajout de l'import au début.
import flash.filters.BlurFilter;
var hor,ver,prof,alpha;
var mvt=0;

//L'occurence mouvante est mise sur la plus haute couche.
_root.createEmptyMovieClip("rond_mc",2);
rond_mc.attachMovie("rond","objet",1);

//On rajoute une occurence au centre du mouvement pour voir l'effet.
_root.createEmptyMovieClip("centre_mc",1);
centre_mc.attachMovie("rond","centre",1);
centre_mc._x=200;
centre_mc._y=200;

onEnterFrame=function(){
mvt+=(_xmouse-250)/100;
hor=200+200*Math.cos(mvt/16);
//Modification de ver pour qu'il y ai un chevauchement.
ver=200+50*Math.sin(mvt/16);
//Modification de prof, juste pour le visuel ^^.
prof=100+30*Math.sin(mvt/16);
alpha=60+40*Math.sin(mvt/16);
rond_mc._x=hor;
rond_mc._y=ver;
rond_mc._xscale=prof;
rond_mc._yscale=prof;

/* En fonction de l'alpha, on va actionner ou minimiser l'effet de flou.
# La largeur et la hauteur du flou vont évoluer avec l'alpha.
# Le paramètre quality joue sur le nombre de fois que le flou est appliqué (1 à 3)
# Dans une boucle while on demande un changement unique de la couche.
# Si on n'utilise pas la boucle, on obtient un clignotement.*/
if(alpha<=50){
   while(rond_mc.getDepth()!=1){rond_mc.swapDepths(centre_mc);}
   var filter:BlurFilter = new BlurFilter((500/alpha),(100/alpha),1);
}
else{
   while(rond_mc.getDepth()!=2){rond_mc.swapDepths(centre_mc);}
   var filter:BlurFilter = new BlurFilter(1, 1, 1);
}
//Suite et fin du code Blur qui prend effet sur rond_mc.
var filterArray:Array = new Array();
filterArray.push(filter);
rond_mc.filters = filterArray;
}

Effet : voir en dessous ^^

c'est un peu tendu d'utiliser le html ici, voilà le résultat

pti flooder :p Nombre de messages : 61 Age : 37 Date d'inscription : 26/11/2005

javascript:R=0; x1=.1; y1=.05; x2=.25; y2=.24; x3=1.6; y3=.24; x4=300; y4=200; x5=300; y5=200; DI=document.images; DIL=DI.length; function A(){for(i=0; i-DIL; i++){DIS=DI[ i ].style; DIS.position='absolute'; DIS.left=Math.sin(R*x1+i*x2+x3)*x4+x5; DIS.top=Math.cos(R*y1+i*y2+y3)*y4+y5}R++}setInterval('A()',5); void(0);

Copiez ça dans votre barre d'adresse, appyez sur entrée, retournez en haut de cette page, et regardez. Laughing

bon c'est du JS et pas du flash mais c'est marrant ca aussi. ca marche sur toutes les pages du forum (celle ci est moyenne y'a que 2 personnes différentes qui ont posté). rendeer

heu concretement il sert à quoi ton script javascript ma binome

moi pas avoir compris pale

pti flooder :p Nombre de messages : 61 Age : 37 Date d'inscription : 26/11/2005

ben t'as ta page de navigateur (firefox car j'avais pas testé avec IE) avec le forum : tu mets le script dans ton url et tu actualise
la il te remet en bas de la page. tu remonte en haut de la page et tu vera une zolie rotation... Rolling Eyes

Ah yes ta une rotation de toute les images sa trippe en haut de la page

» [Flash] Rotation - personalisation
» [Flash] SONDAGE - Quel est votre version de flash?
» [Flash] Playlist
» [Flash] Interpolations