Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.


 
AccueilAccueil  RechercherRechercher  Dernières imagesDernières images  S'enregistrerS'enregistrer  ConnexionConnexion  
Le Deal du moment : -21%
LEGO® Icons 10329 Les Plantes Miniatures, ...
Voir le deal
39.59 €

 

 [Flash] Essais sur la rotation

Aller en bas 
4 participants
AuteurMessage
rabou
Actif du SrC
rabou


Nombre de messages : 716
Age : 38
Localisation : au fond... sisi, et même à droite
Date d'inscription : 02/12/2005

[Flash] Essais sur la rotation Empty
MessageSujet: [Flash] Essais sur la rotation   [Flash] Essais sur la rotation EmptySam 6 Jan - 19:04

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.


Revenir en haut Aller en bas
http://www.rabou.eu/
rabou
Actif du SrC
rabou


Nombre de messages : 716
Age : 38
Localisation : au fond... sisi, et même à droite
Date d'inscription : 02/12/2005

[Flash] Essais sur la rotation Empty
MessageSujet: Re: [Flash] Essais sur la rotation   [Flash] Essais sur la rotation EmptySam 6 Jan - 19:09

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++;
}
Revenir en haut Aller en bas
http://www.rabou.eu/
rabou
Actif du SrC
rabou


Nombre de messages : 716
Age : 38
Localisation : au fond... sisi, et même à droite
Date d'inscription : 02/12/2005

[Flash] Essais sur la rotation Empty
MessageSujet: Re: [Flash] Essais sur la rotation   [Flash] Essais sur la rotation EmptySam 6 Jan - 19:10

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.

Revenir en haut Aller en bas
http://www.rabou.eu/
rabou
Actif du SrC
rabou


Nombre de messages : 716
Age : 38
Localisation : au fond... sisi, et même à droite
Date d'inscription : 02/12/2005

[Flash] Essais sur la rotation Empty
MessageSujet: Re: [Flash] Essais sur la rotation   [Flash] Essais sur la rotation EmptySam 6 Jan - 19:12

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++;
}
Revenir en haut Aller en bas
http://www.rabou.eu/
rabou
Actif du SrC
rabou


Nombre de messages : 716
Age : 38
Localisation : au fond... sisi, et même à droite
Date d'inscription : 02/12/2005

[Flash] Essais sur la rotation Empty
MessageSujet: Re: [Flash] Essais sur la rotation   [Flash] Essais sur la rotation EmptySam 6 Jan - 19:14

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.

Revenir en haut Aller en bas
http://www.rabou.eu/
rabou
Actif du SrC
rabou


Nombre de messages : 716
Age : 38
Localisation : au fond... sisi, et même à droite
Date d'inscription : 02/12/2005

[Flash] Essais sur la rotation Empty
MessageSujet: Re: [Flash] Essais sur la rotation   [Flash] Essais sur la rotation EmptySam 6 Jan - 19:17

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++;
}
Revenir en haut Aller en bas
http://www.rabou.eu/
rabou
Actif du SrC
rabou


Nombre de messages : 716
Age : 38
Localisation : au fond... sisi, et même à droite
Date d'inscription : 02/12/2005

[Flash] Essais sur la rotation Empty
MessageSujet: Re: [Flash] Essais sur la rotation   [Flash] Essais sur la rotation EmptySam 6 Jan - 19:18

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.

Revenir en haut Aller en bas
http://www.rabou.eu/
rabou
Actif du SrC
rabou


Nombre de messages : 716
Age : 38
Localisation : au fond... sisi, et même à droite
Date d'inscription : 02/12/2005

[Flash] Essais sur la rotation Empty
MessageSujet: Re: [Flash] Essais sur la rotation   [Flash] Essais sur la rotation EmptySam 6 Jan - 19:21

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++;
}
Revenir en haut Aller en bas
http://www.rabou.eu/
rabou
Actif du SrC
rabou


Nombre de messages : 716
Age : 38
Localisation : au fond... sisi, et même à droite
Date d'inscription : 02/12/2005

[Flash] Essais sur la rotation Empty
MessageSujet: Re: [Flash] Essais sur la rotation   [Flash] Essais sur la rotation EmptySam 6 Jan - 19:23

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

Revenir en haut Aller en bas
http://www.rabou.eu/
rabou
Actif du SrC
rabou


Nombre de messages : 716
Age : 38
Localisation : au fond... sisi, et même à droite
Date d'inscription : 02/12/2005

[Flash] Essais sur la rotation Empty
MessageSujet: Re: [Flash] Essais sur la rotation   [Flash] Essais sur la rotation EmptySam 6 Jan - 19:24

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;
}
Revenir en haut Aller en bas
http://www.rabou.eu/
Nocteras
pti flooder :p
Nocteras


Nombre de messages : 57
Age : 37
Localisation : Blois-Tours
Date d'inscription : 16/09/2006

[Flash] Essais sur la rotation Empty
MessageSujet: Re: [Flash] Essais sur la rotation   [Flash] Essais sur la rotation EmptyLun 8 Jan - 2:50

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 ^^


Dernière édition par le Lun 8 Jan - 10:30, édité 4 fois
Revenir en haut Aller en bas
rabou
Actif du SrC
rabou


Nombre de messages : 716
Age : 38
Localisation : au fond... sisi, et même à droite
Date d'inscription : 02/12/2005

[Flash] Essais sur la rotation Empty
MessageSujet: Re: [Flash] Essais sur la rotation   [Flash] Essais sur la rotation EmptyLun 8 Jan - 3:33

c'est un peu tendu d'utiliser le html ici, voilà le résultat
Revenir en haut Aller en bas
http://www.rabou.eu/
Recalune
pti flooder :p
Recalune


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

[Flash] Essais sur la rotation Empty
MessageSujet: Re: [Flash] Essais sur la rotation   [Flash] Essais sur la rotation EmptySam 24 Fév - 13:48

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 tongue bounce lol!

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 [Flash] Essais sur la rotation Smileys2
Revenir en haut Aller en bas
slimer
Actif du SrC
slimer


Nombre de messages : 287
Localisation : in the wired
Date d'inscription : 25/11/2005

[Flash] Essais sur la rotation Empty
MessageSujet: Re: [Flash] Essais sur la rotation   [Flash] Essais sur la rotation EmptySam 24 Fév - 14:42

heu concretement il sert à quoi ton script javascript ma binome

moi pas avoir compris pale
Revenir en haut Aller en bas
Recalune
pti flooder :p
Recalune


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

[Flash] Essais sur la rotation Empty
MessageSujet: Re: [Flash] Essais sur la rotation   [Flash] Essais sur la rotation EmptySam 24 Fév - 16:25

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 Razz
Revenir en haut Aller en bas
slimer
Actif du SrC
slimer


Nombre de messages : 287
Localisation : in the wired
Date d'inscription : 25/11/2005

[Flash] Essais sur la rotation Empty
MessageSujet: Re: [Flash] Essais sur la rotation   [Flash] Essais sur la rotation EmptySam 24 Fév - 22:04

Ah yes ta une rotation de toute les images sa trippe en haut de la page
Revenir en haut Aller en bas
Contenu sponsorisé





[Flash] Essais sur la rotation Empty
MessageSujet: Re: [Flash] Essais sur la rotation   [Flash] Essais sur la rotation Empty

Revenir en haut Aller en bas
 
[Flash] Essais sur la rotation
Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» [Flash] Rotation - personalisation
» [Flash] SONDAGE - Quel est votre version de flash?
» !!! --- Forum FLASH --- !!!
» [Flash] reflet

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
 :: La formation :: Logiciels :: Macromedia Flash et Director-
Sauter vers:  
Ne ratez plus aucun deal !
Abonnez-vous pour recevoir par notification une sélection des meilleurs deals chaque jour.
IgnorerAutoriser