rotaion d'un movie clip en perspective avec rollover

Question

bonjour,
je souhaite réaliser une script assez simple d'un movie clip en rotation sur les x et y mais en perspective et ce suivant le pointeur de la souris.
je bosse sur CS4. 
j'en suis là c'est à dire à rien.
En plus je souhaite le faire en roll over mais je pense que c'est la deuxième étape et qu'elle ne sear pas forcément compliquée.
il me manque l'axe des z et la déformation du clip je galère pas mal.
il paraît qu'en 3 lignes de code c'est torché, mais pour le coup... c'est moi qui l'ai dans le ...

si quelq'un pouvait m'aider ca serait bien cool merci à tous d'avance. 



menu.addEventListener(Event.ENTER_FRAME, Moving);
function Moving(e:Event):void 
{
  menu.rotation = ((mouseX - menu.x)/25) + ((mouseY - menu.y)/25) ;
}

pegase31 · Answer

bonjour,

Si tu veux faire une "rotation sur les x et y mais en perspective", pourquoi ne modifies-tu que la rotation ?

Il faut modifier la rotationX et rotationY si tu veux obtenir un résultat.
Sans parler du fait que ça ne te donnera vraiment pas grand choses sans utiliser la classe Matrix3D.

Peg'

vincentduceau · Answer

salut peg,
même avec la CS4 qui gère de la 3D (enfin presque) on est obligé de passer par cette classe.
Je connais pas, j'en ai juste entendu parlé; mais je me suis un peu renseigné et j'ai trouvé ca que j'ai adapté. erreur: 

"TypeError: Error #1009: Il est impossible d'accéder à la propriété ou à la méthode d'une référence d'objet nul."







menu.addEventListener(Event.ENTER_FRAME, Moving);

function Moving(e:Event):void{  
 
  menu.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
 
function mouseMoveHandler(e:MouseEvent):void {
            var y:int;
            var x:int;
            
            if(e.localX > menu.x) {
                y = (Math.round(e.localX) / 100);   
            menu.transform.matrix3D.prependRotation(y, Vector3D.Y_AXIS);
} 

else {
                y = -(Math.round(e.localX) / 10);   
            menu.transform.matrix3D.prependRotation(y, Vector3D.Y_AXIS);
}
            
            if(e.localY > menu.y) {
                x = (Math.round(e.localY) / 100);
            menu.transform.matrix3D.prependRotation(y, Vector3D.X_AXIS);
} 

else {
                x = -(Math.round(e.localY) / 100);
            menu.transform.matrix3D.prependRotation(y, Vector3D.X_AXIS);
}
 
 
 }
}

vincentduceau · Answer

voilà pardon j'ai posté sans dire merki.

donc je ne sais pas si c'est la bonne méthode et j'ai vraiment besoin d'un petit coup de pouce ou un gros.

pegase31 · Answer

c'est effectivement la meilleure, mais il faudrait extérioriser ta matrix 3D oiur éviter de modifier les transform constamment :

var mtx:Matrix3D = new Matrix3D();
menu.transform.matrix3D = mtx;

et tu fais tes prepends directement sur mtx.

Par contre, je ne comprends pas tes "if", un simple calcul suffirait pour définir la rotation.

Peg'

vincentduceau · Answer

salut peg,
c'est à dire pour les "if" je ne comprend pas ce que tu veux dire, le calcul tu le fais comment et surtout mon erreur est du à quoi en fait.
merci d'avance

pegase31 · Answer

si tu regardes ton code, les conditions servent juste à mettre un "-" dans ton calcul des x/y ..
Alors que la valeur est déjà définie dans condition ...

tu dois jouer sur la distance entre le x/y de ta souris et le x/y de ton objet.

tu veux juste savoir le décalage de clip/souris.
Une simple soustraction (souris-clip) suffit à te donner le résultat.

Teste dans ta fonction Moving :
trace ("Decalage X:", e.localX-menu.x);
trace ("Decalage Y:", e.localY-menu.y);

Peg'

vincentduceau · Answer

ca marche pas j'ai accès non définie à la propriété non définie quand "j'extériorise".
Je comprend pas tout ce que tu veux me dire. Si tu pouvais être un peu plus à ma portée ca serait cool. 
j'ai fais ca après tes conseils mais quedal..
je ne sais pas si c'est ce que tu voulais dire... 

merci




menu.addEventListener(Event.ENTER_FRAME, Moving); 
var mtx:Matrix3D = new Matrix3D();

menu.transform.matrix3D = mtx;
mtx.transform.matrix3D.prependRotation(y, Vector3D.Y_AXIS); 
mtx.transform.matrix3D.prependRotation(x, Vector3D.X_AXIS); 

function Moving(e:Event):void{ 

menu.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler); 

function mouseMoveHandler(e:MouseEvent):void { 
var y:int; 
var x:int; 





if(e.localX > menu.x) { 
y = (Math.round(e.localX) / 100); 
}

else { 
y = -(Math.round(e.localX) / 10); 
 
} 

if(e.localY > menu.y) { 
x = (Math.round(e.localY) / 100); 

} 

else { 
x = -(Math.round(e.localY) / 100); 

} 


} 
}

pegase31 · Answer

J'ai comme l'impression que tu ne comprends pas ce que tu fais ...

Regarde ce qu'il faut faire :

- mtx étant Matrix3D
- appliquer mtx à ta transformation matrix3D du clip
- à chaque mouvement de souris :
=> calculer le décalage X de la souris par rapport au centre du clip
=> calculer le décalage Y de la souris par rapport au centre du clip
=> modifier la rotation de mtx en X en fonction du décalage X
=> modifier la rotation de mtx en Y en fonction du décalage Y

Tu as, là, les lignes de codes essentiels (pas une de plus) dont tu as besoin pour ce script.
A toi de les convertir avec les infos que je t'ai données plus haut.

Peg'

ps: je ne ferais pas le code à ta place, mais tu vas y arriver.

vincentduceau · Answer

ouais ouais, je souhaite pas que tu me pondes un srcipt mais bon tu vous que je sèche un peu et que je me démène, pour que j'avance il faut que je puisse savoir où je me trompe.
Je te remercie de me répondre mais j'ai encore pas mal de galère en perspective (sans jeux de mots), je débute alors si tu pouvais abréger mes souffrances.

Bon j'ai simplifié le code, là où je coince c'est sur la méthode pour modifier la rotation en fonction du décalage. car si je fais ca à la fin:

menu.transform.matrix3D.prependRotation(y, Vector3D.Y_AXIS)= decalageX;


ou ce qui revient au même


menu.transform.matrix3D.prependRotation(y, Vector3D.Y_AXIS)= (e.localX-menu.x);




on est bien d'accord que je me retrouve avec un problème de valeur avec le début de mon script.

Donc je me retrouve avec le script ci-dessous mais ca coince. Mon prepend aussi je suis pas sur de moi... Merci encore à toi. 









menu.addEventListener(Event.ENTER_FRAME, Moving); 

var mtx:Matrix3D = new Matrix3D(); 
menu.transform.matrix3D = mtx; 

function Moving(e:Event):void{ 

menu.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler); 

function mouseMoveHandler(e:MouseEvent):void { 

 var decalageX =(e.localX-menu.x);
 var decalageY =(e.localY-menu.y);

menu.transform.matrix3D.prependRotation(y, Vector3D.Y_AXIS); 
menu.transform.matrix3D.prependRotation(x, Vector3D.X_AXIS);

menu.y += decalageY;
menu.x += decalageX;
 }
}

vincentduceau · Answer

je reposte car j'ai vu ma grosse connerie. Donc ca y est il se passe un truc mon problème maintenant c'est que je voudrais que mon clip qui est un plan ne bouge pas et reste fixe en son centre et aussi que ses mouvements soient limités. en fait je souhaite réaliser ce genre
de site. Mon clip doit avoir le même mouvement. Là je n'y suis pas encore.

http://www.bestradio.gr/#/Home
[
code=as]


menu.addEventListener(Event.ENTER_FRAME, Moving); 

var mtx:Matrix3D = new Matrix3D(); 
menu.transform.matrix3D = mtx; 

function Moving(e:Event):void{ 

menu.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler); 

function mouseMoveHandler(e:MouseEvent):void { 

 var decalageX =(e.localX-menu.x);
 var decalageY =(e.localY-menu.y);

menu.transform.matrix3D.prependRotation(decalageY, Vector3D.Y_AXIS); 
menu.transform.matrix3D.prependRotation(decalageX, Vector3D.X_AXIS);


 }
}

/code

vincentduceau · Answer

bon j'avance, me reste plus qu'à limiter sa rotation car pour l'instant mon clip tourne sur 360 degré, je voudrais le limiter à un angle de 45°admettons sur l'axe des y et un peu moins sur les x. Si t'as une idée ? Dois je sortir une valeur qui me donne l'angle de mon clip quand il tourne et surtout quoi utiliser?
j'ai un autre soucis et pas des moindres si je veux optimiser. Pour réduire la vitesse de rotation qui est calée sur mon enterframe je suis obligé de diviser par 100000 ma valeur de décalage (dans l'exemple en dessous c'est 50000) ce qui fait pas mal galérer flash qui calcul à fond aurais tu aussi une astuce pour ca? Merci encore car j'ai bien avancé et appris pas mal de trucs grâce à toi.  






var decalageX =(mouseX - menu.x)/50000;
var decalageY =(mouseY- menu.y)/50000;

menu.transform.matrix3D.prependRotation(decalageX, Vector3D.Y_AXIS); 
menu.transform.matrix3D.prependRotation(decalageY, Vector3D.X_AXIS);

vincentduceau · Answer

juste pour finir j'ai trouvé un code 10 fois plus simple avec CS4.
merci 'peg' de m'avoir bien envoyé sur pluton pour chercher un code qui se révèle obsolète et dépassé sous CS4, en me creusant la tête avec les matrix 3D. 

Comme quoi ils existent sur les forums souvent du bon comme du mauvais!!!!

pegase31 · Answer

Sachant que Matrix3D est une nouveauté CS4 je me demande en quoi c'est obsolète ...
Et quel est ce code "10 fois plus simple" ?

Peg'

vincentduceau · Answer

je ne disais pas ca pour te vexer mais quand même tu avoueras que c'est déjà plus fluide
et carrément plus simple.
maintenant me reste à lier dessus une tweenmax pour que lorsques la souris s'arrête il y ait un décalage avec le clip qui tourne encore. je sais passi je suis claire. j'ai pas mal galéré.






stage.addEventListener(Event.ENTER_FRAME, Moving); 

function Moving(e:Event):void{ 
stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler); 
function mouseMoveHandler(e:Event) {

menu_mc.rotationY =(mouseX - menu_mc.x)/5;
menu_mc.rotationX =(mouseY - menu_mc.y)/5;






import gs.TweenMax;
import gs.easing.*;
TweenMax.to(menu_mc, 1.25, {menu_mc.rotationY =(mouseX - menu_mc.x)/5, ease:Elastic.easeOut});

pegase31 · Answer

En modifiant la rotation des axes tu modifies le matrix3D de ton objet, la route est différente, mais le résultat est le même ...

Peg'

vincentduceau · Answer

on est d'accord, pas d'idée alors pour ma tweenmax ?

pegase31 · Answer

Non, désolé, je n'utilise jamais de tweens externes à celui de flash ...

Peg'

vincentduceau · Answer

et avec celle de flash alors car je sèche toujours.......

Rotaion d'un movie clip en perspective avec rollover

18 réponses

Votre réponse

Discussions similaires