transitions dynamique entre les pages....(HELP)Résolu

Question

Bonjour, je me décide a poster sur le forum car après mes recherches dans la banque de sources je n'ai pas trouver quelque chose qui corespond a ce que je veux faire.
Je pense ne pas avoir chercher au bons endroits.
Je cherche a faire quelque chose de relativement simple, je pense, mais qui reste pour moi très compliquer héhé!

Voilà, pour le menu de mon site j'ai 5 boutons representés par 5 rectangles.
Dans chaques rebriques (ou pages) de mon site la disposition des rectagles change.
Je voudrais que la transition de la position des rectangles entre les rebrique soit dynamique.

En gros lorsque l'on clique sur un bouton (un rectangle quoi), il va se déplacer ainsi que les autres rectangles MAIS LA TRANSLATION DOIS ETRE VISIBLE, et si possible avec une accélération pour que ce soit plus fluide.

J'ai taper dans le moteur de recherche "coordonés, slide, déplacement etc..." mais les sources n'étaient jamais en accord avec ce que je cherche a faire.

Je ne demande pas le code sur un plateau (quoi que si c'est pas trop compliquer ne vous génez pas hein) mais au moin que l'on m'aiguille sur la fonction à utiliser, ou vers quel type de source chercher.
Ha, et aussi, si ca peut aider, les rectangles peuvent suivrent des guides.

Je vous remercie.
C0ltaire

cs_Girou · Accepted Answer

Bonsoir, me revoila 

j'ai regarde ta source et je l'ai un tout petit peu adapté... cette fois-ci, j'ai pu tester directement dans flash, c'est plus facile !!!

Alors, voici le visuelpour prouver que ca marche ,
et la source, pour que tu puisses travailler dessus ! 

le tout en pur action script.

PS, dans ton script, chaque bouton faisait un _root.gotoAndPlay(1) ce qui réinitialisait a chaque fois les mouvements...
Il te restera a changer le _root.gotoAndPlay(xxx) dans tes 4 clips (que j'ai renommés et ou j'ai placé le point d'insertion en haut à gauche)

@+

cs_Girou · Answer

Salut,

une piste à suivre (en pur script  ). 
Je te la propose sans aucune garantie, car pas moyen de tester, je fait tout à l'aveugle quoi...

On suppose que tu as 5 clips et qu'ils sont nommés monclip0, monclip1,...

// Definition de la position des différents états des clips



Positions=new Array()
Positions[0]=new Array({x:100,y:0},{x:200,y:0},{x:300,y:0},{x:400,y:0},{x:500,y:0});
Positions[1]=new Array({x:400,y:0},{x:100,y:50},{x:300,y:0},{x:100,y:0},{x:200,y:0});
//....

// Fonction qui modifie les parametres de position des clips



function mouvementMenu(choixPosition) {
 for (i=0;i<5;i++){
  _root["monclip"+i].positionX=Positions[choixPosition][i].x;
  _root["monclip"+i].positionY=Positions[choixPosition][i].y;
 }
}



// initialisation de la routine de mouvement des clips du menu



for (i=0;i<5;i++){
   _root["monclip"+i].onEnterFrame= function{
   // pour 'ralenti', choisissez une valeur entre 0 et 1, par exemple 0.5
      ralenti=0.5;
      this._x += (positionX-this._x)*ralenti; 
      this._y += (positionY-this._y)*ralenti;
   }

}


//definition du choix de positions selon le clip sur lequel on clique


_root.monclip0.onMouseDown=function() {
   mouvementMenu(1);
}
_root.monclip1.onMouseDown=function() {
   mouvementMenu(0);
}
//...


mouvementMenu(0) // mise en place initiale  des clips

Je serais étonné que ca marche du premier coup mais on ne sait jamais !!!

@+

C0ltaire · Answer

Déjà je dois te remercier d'avoir utiliser un peut de ton temps pour moi, merci.

Mais j'ai quelques petites questions...héhé.

Déjà je t'explique ce que j'ai devant les yeux (enfin j'ai fais un truc simple sur un nouveau doc pour que ce soit plus claire):

-sur la scéne principale, j'ai mes 4 clips (mes rectangles, oui il n'y en a plus que 4, ca sera plus simple) sur le même calque.
-à l'intérieur d'un clip, il y a une petite anime et un code sur la premiére image pour transformer ce clip en jolie bouton:
stop();                 
this.onEnterFrame = function(){
    if(rewind == true){
        prevFrame();
    }
}
this.onRollOver = function(){
    rewind = false;
    play();
}
this.onRollOut = function(){
    rewind = true;
}
this.onReleaseOutside = function() {
rewind = true;
}
this.onRelease = function(){
_root.gotoAndPlay(61);
}

Seul le "_root.gotoAndPlay(61);" change sur les 4 clips bien sur.

Voilà, c'est en gros ce que j'ai.

DONC, maintenant je ne suis pas trop sûre d'un truc, c'est ou est ce que je dois rentrer le code, par exemple tout le début du code semble devoir être mis sur le _root, sur une image au même nivau que mes clips, et la derniére partie dois être placer a l'interieur de mes clips?
Une érreur ce produit sur cette fonction " _root["monclip"+i].onEnterFrame=function{"
sur la ligne:
Positions[0]=new Array({x:100,y:0},{x:200,y:0},{x:300,y:0},{x:400,y:0},{x:500,y:0});
je ne comprend pas comment les positions peuvent s'apliquées sur leurs clips respectif, puisque tu les notes "en vrac"...

Enfin tout ça n'est pas trés claire...
Désolé hein, mais certaines choses que toi trouve simple sont pour moi pas claire du tout 

Déjà si tu pouvais juste m'indiquer ou je dois placer mon code en tenant conte de ce a quoi resemble ma scéne, ca serait vraiment sympas

Merci beaucoup.

C0ltaire

cs_Girou · Answer

OK...
pour l'erreur, c'est juste qu'il faut rajouter
_root["monclip"+i].onEnterFrame= function () (comme tu le fait très bien dans tes fonctions à toi )

tout mon script doit se trouver sur la scene principale (en frame 1 par exemple...)

Positions[0] =new Array({x:100,y:0},{x:200,y:0},{x:300,y:0},{x:400,y:0},{x:500,y:0});
dans le tableau Positions, je crée un permier enregistrement Position[0] 
Enregistrement qui est lui même un tableau contenant 5 objets (car 5 clips dans l'exemple). Chaqu'un de ces objets a une valeur x et une valeur y qui sont défini


DONC pour définir la position X vers laquelle le clip, disons 3, doit aller si on veut la configuration 0, on oblient ces valeur en cherchant dans
Position[configuration choisie (0 ici)][3 (car c'est le clip 3 qui nous intérresse)].x 

Ensuite, petite remarque, si mon script defini un onEnterFrame pour les clips et que toi aussi tu en défini un dans le clip même (avec le rewind) va y avoir conflit entre les deux..
J'essaye de résumé le script en mixant le tout :

sur la scene principale

// Definition de la position des différents états des clips



Positions=new Array()
Positions[0]=new Array({x:100,y:0},{x:200,y:0},{x:300,y:0},{x:400,y:0},{x:500,y:0});
Positions[1]=new Array({x:400,y:0},{x:100,y:50},{x:300,y:0},{x:100,y:0},{x:200,y:0});
//....

// Fonction qui modifie les parametres de position des clips



function mouvementMenu(choixPosition) {
 for (i=0;i<5;i++){
  _root["monclip"+i].positionX=Positions[choixPosition][i].x;
  _root["monclip"+i].positionY=Positions[choixPosition][i].y;
 }
}



// initialisation de la routine de mouvement des clips du menu



for (i=0;i<5;i++){
   _root["monclip"+i].onEnterFrame= function(){
   // pour 'ralenti', choisissez une valeur entre 0 et 1, par exemple 0.5
      ralenti=0.5;
      this._x += (positionX-this._x)*ralenti; 
      this._y += (positionY-this._y)*ralenti;
   // ta partie
   if(rewind == true){
        prevFrame();
    }
   }

}


mouvementMenu(0) // mise en place initiale  des clips

DANS TES CLIPS
this.onRollOver = function(){
    rewind = false;
    play();
}
this.onRollOut = function(){
    rewind = true;
}
this.onReleaseOutside = function() {
   rewind = true;
}
this.onRelease = function(){
   _root.mouvementMenu(1); // 1 varie selon le clip
   _root.gotoAndPlay(61);  // 61 varie selon le clip
}

Voili voila... j'attend de tes nouvelles pour savoir quel est le bug suivant le script 

@+

C0ltaire · Answer

hum escuse moi mais je ne comprens pas ça:
"Position[configuration choisie (0 ici)][3 (car c'est le clip 3 qui nous intérresse)].x" 
Moi là je comprend ça  : "Position[0][3].x"
Ce qui me semble carément faux.
C'est là que je coince en fait.
Et je ne dois pas remplacer les choses par ce qu'il faut, vraiment là je coince bétement.
Si tu veux jeter un coup d'oeil...
LE .FLA ICI

En te remeriant,
C0ltaire

scara 51 · Answer

Ouai, bon ya un truc qui parfois (et même souvent lol) bug mais qu'est bien pratique c les tween. Alors la solution : chercher sur google : tutorial flash tween.
Et voilà ! Magique :)

C0ltaire · Answer

que viennet faire les tweens ici?
soit plus clair...

C0ltaire

cs_Girou · Answer

Je regarde ton fla se soir...

L'utilisation des tweens impliquerait que pour chaque clip, on définit une animation d'un point initial à un point d'arrivée (avec un guide de mouvement si on le souhaite), mais cela va représenter beaucoup de boulot, puisque chaque bouton peut partir de 4 positions initiale et peut arriver vers 4 positions finales ce qui donne au total 16 tweens à définir par bouton... ca me semble un peu galère comme travaille, surtout si on veux modifier quoique ce soit par après.

@+

C0ltaire · Answer

oui surtout que c'est en gros ce que j'avais commencer a faire, mais si jamais je dois modifier un seul bouton, ca me faisais décaler le tout.

C0ltaire

zen_laden · Answer

girou et C0ltaire tout d'abord un grd merci en effet ta methode me parait simple et efficace :) 
Je vais tester dans faire quelque petites variantes...
Je vais partir de ce code comme base  afin d'en faire unee mini gallerie vitrine genre ca pour etre precis =>...http://www.samsung.com/fr/
Je vous tiens au jus quand à la suite...

Je vais deja commencer par regarder la source de plus pret...
A bientot
Zen

C0ltaire · Answer

je me trompe peut être mais si tu parles des 3 boutons qui font monter des rectangles ce sont de simple clip dans lequels
on y a placer un code du genre:

this.onRollOver = function(){
    rewind = false;
    play();
}
this.onRollOut = function(){
    rewind = true;
}
this.onReleaseOutside = function() {
   rewind = true;
}
sur la premiere image.

C0ltaire

zen_laden · Answer

oui c exactement ca que je vais utiliser :)...me tarde de voir votre version ou les carré bouge grace a l'as.... :)

C0ltaire · Answer

Un grand merci!!
C'est vraiment ce que je voulais faire.
Ca me permet de mieu comprendre certain côtés de l'AS qui restaient pas mal obscure pour moi.
Merci encore.

C0ltaire

Transitions dynamique entre les pages....(HELP)

13 réponses

Votre réponse

Discussions similaires