[Aide] Flash carrousel AVEC rotation par controle de bouton

Question

Bonjour bonjour,

Voilà j'ai récupéré ces 2 codes-ci :
http://www.flashkod.com/codes/CARROUSEL-VRAI-3D-SOUS-CS4_48562.aspx
http://www.flashkod.com/codes/MENU-CARROUSSEL-3D_46489.aspx

Et en fait je voudrais reproduire l'effet comme sur ce prochain site : 
http://www.one.com/fr/  (en haut du contenu)

Comme vous pouvez le constater, il y a un effet de flou de direction et une bonne dynamique pour une impression de vitesse.
Ce qui compte surtout pour moi aussi est le contrôle par bouton gauche droite pour faire les rotations (et pas avec les simples mouvements de souris).

Voilà merci d'avance pour votre aide.

docodoc · Answer

salut
et c'est quoi la question ??
tu bloques sur quel point precis ?? 
tu en es ou avec ton code ??
on peut voir ??
a+

pegase31 · Answer

Bonsoir,

Déjà flash ne peut pas gérer le bouton de droite en Natif (hors AIR), ensuite tu as tout ce qu'il te faut pour faire cet Effet, si ce n'est l'ajout du filtre Blur (dont je doute de la réelle utilisation dans ton exemple) qui est trés simple à faire ...

Quel est effectivement le problème ?

Peg'

stunty6 · Answer

Bonjour et désolé pour la mauvaise formulation. Je vai essayer de faire au plus simple. Voici le code (en AS2) que je voudrais modifier : //Rayon de rotation (en pixels) autour de l'axe y var Rx:Number=120; //Nombre d'icones (pas plus que 10, quoique...) var N:Number=10; //Attachement des icones var i:Number; for(i=0;i2*Math.PI) { angle=0; } else { for(i=0;ipremier plan, 40%->arriere plan) _root['ID'+i]._xscale=60/2*(Math.sin(angle+2*Math.PI*i/N)+ 1)+40; _root['ID'+i]._yscale=_root['ID'+i]._xscale; //mise a jour de z (profondeur en pixels); _root['ID'+i].swapDepths(Rx*Math.sin(angle+2*Math.PI*i/N)); } //rotation normale sans souris //0.1 correspond a la vitesse (-0.1 selon le sens) //angle=angle+0.1; //rotation commandée par la position de la souris //conditions sur x if(_root._xmouse<(480/2+Rx) && _root._xmouse>(480/2-Rx)) { //conditions sur y if(_root._ymouse<80 && _root._ymouse>0) { //0.7 correspond a la vitesse angle=angle+(_root._xmouse-480/2)/480*0.7; } } } } Alors je comprend quasiment tout à part les calculs de mouvements (pas très fort en math avec les cossinus-sinus, ...) Mon premier objectif à atteindre : - créer deux boutons (une bouton flèche gauche et un bouton flèche droite) - sur chaque bouton, appliquer une fonction 'onRelease' qui permet de faire une rotation des éléments dans le sens de chaque flèche - modifier le calcul du mouvement pour donner un effet plus dynamique (accélération au départ et ralentissement à la fin) Je pense que dans un premier temps, ce sera suffisant. Avant de finir, voici un screen d'une maquette faites en photoshop sur ce que je voudrais appliquer. Merci d'avance

gremlins7 · Answer

Salut, Pour l'effet de flou, Pegase31, a deja repondu a ton problème. Par contre pour le contrôle du déplacement avec les boutons, c'est assez simple : - tu n'as pas besoin de toucher au code de la rotation (cosinus, sinus) - tu modifie juste le contrôle de la rotation en jouant sur la variable angle, qui est une variable d'incrementation. Donc tu supprime ça (c'est le code pour l'incrementation de angle) : //rotation commandée par la position de la souris //conditions sur x if(_root._xmouse<(480/2+Rx) && _root._xmouse>(480/2-Rx)) { //conditions sur y if(_root._ymouse<80 && _root._ymouse>0) { //0.7 correspond a la vitesse angle=angle+(_root._xmouse-480/2)/480*0.7; } } Et tu le remplace par ton code d'acceleration/deceleration dans ton boutons. L'acceleration se traduisant par une incrementation plus rapide de la variable angle, la deceleration une incrementation plus lente. Et pour stopper le carrousel, ben ... angle+=0;

stunty6 · Answer

J'ai un peu chipoté mais je dois mal m'y prendre car quand je clique sur un bouton, ça fait une rotation (très bien jusque là) mais ça le fait par un seul petit 'accoup' donc sans animation (difficile à expliquer par écrit alors voici le lien vers mon fla ICI), je n'arrive pas du tout à faire "l'animation" de rotation... Je voudrais que ce soit fluide. sinon voici le code pour les faignasses (mais c'est une toute autre scène que celle du tuto). Un autre petit objectif que j'ai essayé de faire, mais en vain, est de disposé la première vignette en face de la caméra lors de l'ouverture du swf. //Rayon de rotation (en pixels) autour de l'axe y var Rx:Number=300; //Nombre d'icones (pas plus que 10, quoique...) var N:Number=5; //Attachement des icones var i:Number; for(i=0;i2*Math.PI) { angle=0; } else { for(i=0;ipremier plan, 40%->arriere plan) _root['ID'+i]._xscale=60/2*(Math.sin(angle+2*Math.PI*i/N)+ 1)+40; _root['ID'+i]._yscale=_root['ID'+i]._xscale; //mise a jour de z (profondeur en pixels); _root['ID'+i].swapDepths(Rx*Math.sin(angle+2*Math.PI*i/N)); } //rotation normale sans souris //0.1 correspond a la vitesse (-0.1 selon le sens) //angle=angle+0.01; //rotation commandée par la position de la souris //conditions sur x /*if(_root._xmouse<(900/2+Rx) && _root._xmouse>(900/2-Rx)) { //conditions sur y if(_root._ymouse<280 && _root._ymouse>0) { //0.7 correspond a la vitesse angle=angle+(_root._xmouse-900/2)/900*0.7; } }*/ } } //rotation commandée par le clic sur les boutons _root.bouton_rotation_1.onRelease=function() { angle = angle+0.01; } _root.bouton_rotation_2.onRelease=function() { angle = angle-0.01; }

gremlins7 · Answer

Re, ben oui c'est normal que ca n'avance que "d'un petit coup" puisque tu as mis
_root.bouton_rotation_1.onRelease=function() {
    angle = angle+0.01;
}
le petit coup vaut exactement 0.01 radians.

Il faut que tu programme une loi d'acceleration et/ou de deceleration. C'est a dire que lorsque tu cliques sur le bouton. Ca provoque plusieurs fois l'incrementation et pas seulement une fois.
Pour le faire plusiseurs fois une seule solution : comme la fonction onenterframe est appellée a chaque affichage, il faut incrementer la variable sur plusieur appels successive de la fonction enterframe. Pour cela tu utilise une variable intermediaire ex Nombre_de_petit_coup=10. Puis dans le code du bouton: tant qu'il reste des petits coups a faire, avancer d'un petit coup, decrementer le Nombre_de_petit_coup.
Enfin, pour positioner le clips au bon endroit cad au milieu, il y a un nombre de coups exact a faire.

Pour le placement au debut (ton autre objectif), si tu avait pris le temps de regarder les autres codes que j'ai mis avec le menu carrousel 3D que tu a downloader, tu aurais vu qu'il y a la réponse.

Voila tu as tout pour t'en sortir. 


Grems

sbringer · Answer

bonjour, 

ce petit problème m'intéresse aussi. Mais étant encore qu'un amateur je galère à mort sur la dernière partie de ton explication. Je voudrais reprendre le même principe du bouton (sauf que moi j'utilise onRollOver, mais là n'est pas le problème). 
Sa serait sympa de poster une solution concrète au problème pour tous les "galériens de la vie" comme moi.^^

merci d'avance pour votre aide.

gremlins7 · Answer

Salut,
poster une solution "concrète" (entendez plutot toute faite) me prendrais du temps que je n'ai pas et il me faudrait egalement une motivation que je n'ai pas non plus. Personne sur ce site n'est là pour reflechir à votre place...
En revanche, si toi tu poste une solution, une idée de solution, un debut de code ...enfin quelquechose qui montre que tu à reflechi et que tu n'est pas la juste à attendre que ça tombe tout cuit dans le bec, alors oui, je corrigerai volontier ce que tu propose, et je t'apporterai mon aide.
Encore une fois, on est pas la pour le faire a votre place, mais juste pour vous aiguiller dans votre demarche.

Salutations
Grems

sbringer · Answer

re grems,

je ne voulais absolument pas te manquer de respect c'est juste que je galère à mort. je voudrais juste un peu d'aide et quelques conseils pour faire des boutons qui gère la rotation du carrousel qui marche avec onRollOver. j'ai essayé de reprendre l'idée du onPress mais j'ai quelque problème au niveau de la syntaxe. le système d'incrémentation est-il incontournable ou peut-on avoir une autre technique étant donner qu'avec onrollover on est pas obliger d'avoir une image qui s'arette pile poils au milieu de la scène.

j'ai un autre probleme que je ne comprend pas et qui vient surment aussi de mon probleme de syntaxe. j'ai sur l'image une de la scene principale le code qui créer le carrousel à partir de la biblioteque. quand je clique sur un clip du carrousel je vau que sa m'envoye sur l'image 2 ou un lecteur vidéo est présent. sa m'y envoi bien mais i reste toujours les clip du carrousel qui se balade devant mon lecteur vidéo. comment fait-on pour supprimer le carrousel de l'image 2?
j'ai essayé diverse combinaison avec attachMovie et delete ou false mais comme je disais i doit i avoir un probleme de syntaxe dans mon code.

si tu pouvais me filer un coup de main Grems sa serait simpa

gremlins7 · Answer

Salut, le système d'incrementation est incontournable, même si tu ne souhaite pas que le clip s'arrette pile poil au milieu et qu'elle que soit la loi (linéaire, acceleration, deceleration...). Car c'est le principe même de deplacement du carroussel (incrementation d'angle). Dans ce cas (pas au milieu) autant utiliser la première version .
Pour faire en sorte de "supprimer" le carroussel au moment du passage à l'image 2, le plus propre, à mon avis est d'en faire une classe. Comme ça tu attache l'objet carrousel sur l'image 1 et tu le detache sur l'image 2.
Pour te répondre plus précisement, il faudrait que je sache sur quelle version tu travail (as2 ou as3)
a+
grems

sbringer · Answer

re,

je suis en as2

j'ai une autre erreur que je ne comprend pas. en message de sorti sa m'affiche :

L’instruction doit apparaître dans le gestionnaire on 

c'est en rapport avec un de mes boutons. la source étant : bouton0.onPress=function( ){ 
mais pourtant mon bouton fonctionne bien Oo 

merci pour avoir pris le temps de me répondre
a+

sbringer · Answer

serait-il possible que tu m'expliques plus en détails ce que tu voulais dire par :

" il faut incrementer la
variable sur plusieur appels successive de la fonction enterframe. Pour
cela tu utilise une variable intermediaire ex Nombre_de_petit_coup=10.
Puis dans le code du bouton: tant qu'il reste des petits coups a faire,
avancer d'un petit coup, decrementer le Nombre_de_petit_coup."

après peut-être que je finirais par y arriver 
a+

gremlins7 · Answer

he bien...lorsque l'on entre dans la frame, c'est à dire "on enterframe", ou plus simplement a chaque fois que l'on demande d'afficher l'image1, alors on appelle la fonction enterframe. Dans cette fonction on recalcul la position des elements du carrousel en fonction de la position de la souris. Pour recalculer la position on utilise la variable d'angle : on in crement ou on decrement cette variable suivant que la souris bouge.
On pourrait, au lieu de mettre ce code dans enterframe, le mettre dans un bouton, mais du coup il faudrait cliquer sur le bouton pour faire tourner le carroussel qui bougerait par accoup.
Donc on laisse l'incrementation dans enterframe, et on commande l'incrementation par le bouton.
ex: si le bouton a été cliqué alors on autorise l'incrementation d'angle dans enterframe, ou dans ton cas : si le bouton est survolé alors autoriser l'incrementation. Pour faire ça tu utilise une variable intermediaire, nommons la "isauthorized" qui est à vrai(true) si on survole et à faut (false) si on survole pas.
Si "isautorized" est à true alors on incremente l'angle, sinon on ne fait rien
Voila
j'espère que c'est plus clair, je peux pas faire plus
grems

sbringer · Answer

merci c'est plus clair pour l'histoire des boutons.

et pour ce qui est de mon autre problème aurais-tu une solution?
j'ai regardé sur le net comment se gérer les class. en gros il faut que je mette le code du carrousel dans un fichier .as si j'ai bien compris et que je l'importe sur mon image une c'est bien sa?

cf ( 
Pour faire en sorte de "supprimer" le carroussel au moment du passage à
l'image 2, le plus propre, à mon avis est d'en faire une classe. Comme
ça tu attache l'objet carrousel sur l'image 1 et tu le detache sur
l'image 2.
Pour te répondre plus précisement, il faudrait que je sache sur quelle version tu travail (as2 ou as3)

je suis en as2

j'ai une autre erreur que je ne comprend pas. en message de sorti sa m'affiche :

L'instruction doit apparaître dans le gestionnaire on 

c'est en rapport avec un de mes boutons. la source étant : bouton0.onPress=function( ){ 
mais pourtant mon bouton fonctionne bien Oo 

merci pour avoir pris le temps de me répondre )
a+

gremlins7 · Answer

Salut, 
oui, c'est bien ça...
une fois ta classe Carrousel crée,
tu cree un objet carrousel dans l'image 1 en tapant  :
var toto:Carrousel = new Carroussel();
puis tu l'ajoute à l'affichage
addchild(toto);

dans l'image 2, tu le remove de l'affichage
removechild(toto);

bref, un truc du style...

grems

sbringer · Answer

re 
à part la méthode avec les classes tu vois quoi d'autre comme solution parcequ'en faite en message de sorti on me dis qu'il y a des instructions interdites dans les fonctions du carrousel comme onEnterFrame et for (i=0;i<N,i++)
j'ai même essayé de mettre le carrousel dans new Object mais on me dis la même chose "instructions interdites....."

gremlins7 · Answer

essaye de faire un heritage de ta classe vers movieclip
puis fait une fonction dans la classe que tu appellera dans enterframe...
poste ton code, ce sera plus facil de répondre

sbringer · Answer

voici le code sur l'image une stop(); import carrousel; var test:carrousel = new carroussel(); addChild(test); celui de l'image 2 stop(); _root.attachMovie(); video0.contentPath="videos/parcours_produit.mp4"; retour0.onPress=function(){ gotoAndPlay(1); } removeChild(test); et celui dans le fichier .as class carrousel { //Rayon de rotation (en pixels) autour de l'axe y var Rx:Number=300; //Nombre d'icones var N:Number=10; //Attachement des icones var i:Number; for(i=0;i2*Math.PI) { angle=0; } else { for(i=0;ipremier plan, 40%->arriere plan) _root['ID'+i]._xscale=60/2*(Math.sin(angle+2*Math.PI*i/N)+ 1)+40; _root['ID'+i]._yscale=_root['ID'+i]._xscale; //mise a jour de z (profondeur en pixels); _root['ID'+i].swapDepths(Rx*Math.sin(angle+2*Math.PI*i/N)); } } //rotation normale sans souris //0.1 correspond a la vitesse (-0.1 selon le sens) //angle=angle+0.1; //rotation commandée par la souris //conditions sur x if(_xmouse<(1100/2+Rx) && _root._xmouse>(1100/2-Rx)) { //conditions sur y if(_root._ymouse<800 && _root._ymouse>0) { //0.7 correspond a la vitesse angle=angle+(_root._xmouse-800/2)/800*0.1; } } } } sinon au pire je pensais mettre mon lecteur vidéo dans un autre fichier au lieu de le mettre sur l'image 2 et puis les liés entre. mais bon sa fait pas trés propre tous sa après et sa va vite devenir un foutoire.

gremlins7 · Answer

ok,
donc essaye en rajoutant : 
class carrousel extends movieclip
(je sais pas si ça passe en as2)
cela veut dire que ta classe herite des proprietés d'un movieclip

puis dans la classe remplace tout les _root par this, puisque _root c'est la racine et la t'es dans une classe

ça devrait être ok, tu es sur la bonne voie

[Aide] Flash carrousel AVEC rotation par controle de bouton

19 réponses

Votre réponse

Discussions similaires