Flash as2 slide diagonale (bas gauche-haut droite) avec btn qui diminuent et int

Signaler
Messages postés
3
Date d'inscription
mercredi 9 mai 2007
Statut
Membre
Dernière intervention
1 juin 2010
-
Messages postés
3
Date d'inscription
mercredi 9 mai 2007
Statut
Membre
Dernière intervention
1 juin 2010
-
Bonjour à tous,

Je suis débutante en flash, enfin surtout en as. Malgré tous les tutoriaux, je suis bloquée sur une animation.
J'aimerai avoir un défilement de produit (il y en a 12 en tout) en diagonale, commençant en bas à gauche de ma scène et terminant en haut à droite, en boucle.
Afin d'avoir un effet de perspective, je souhaiterai qu'ils diminuent au fur et à mesure de ce déplacement sur la scène.
De plus, ces produits sont des boutons actifs : lorsqu'on roll on dessus, on découvre la gamme, et lorsqu'on click, on est amené sur la page produit adaptée.
Enfin, (pour compliquer le tout) j'aimerai qu'il y ai une interaction avec la souris. En effet, que le déplacement ai une vitesse de base et que lorsqu'on passe au dessus d'un des produits, la vitesse ralentisse, voire se stoppe, pour repartir en roll over.
J'ai tenté un début de code (grace à un code existant mais que pour x) mais sans résultat car d'une part, je ne parviens pas à accumuler la vitesse x et la vitesse y et d'autre part mes boutons ne jouent plus, comme si le code du clip dans le quel ils sont annule l'effet btn...

Sais pas si suis claire... Ci-joint le code du clip dans lequel se trouverai tout ça :

Vitesse =5;//Vitesse de défilement du clip
VitesseMax = Vitesse;//Vitesse maximum de défilement
Int =50;//Interval pour le rallentissement/accélération
onEnterFrame = function() { //boucle éxécuter une fois par frame
MonClip._x += Vitesse;//mouvement du clip
if (MonClip._x - MonClip._width / 2 > Stage.width) //si le clip sort du champ de vision de l'animation
MonClip._x = -MonClip._width; //on le replace en début de course
}
Mouvement = function(Sens:Number) { //fonction permettant de ralentir jusqu'a arret du clip ou de le faire repartir
Vitesse += Sens / VitesseMax; //action sur la vitesse (augmentation ou réduction)
if (Sens < 0 && Vitesse < 1) Vitesse = 0; //on assure que la vitesse sera de 0
else if (Sens > 0 && Vitesse > VitesseMax - 1) Vitesse = VitesseMax; //on assure une vitesse maximum
if (Vitesse 0 || Vitesse VitesseMax) clearInterval(Interval); //on efface l'interval si le clip est bien relancé et arreter
}
MonClip.onRollOver = function() { //au passage du curseur sur le clip
clearInterval(Interval); //on efface l'interval par mesure de sécurité
Interval = setInterval(Mouvement,Int,-1); //on demande le ralentissement (d'où le -1)
}
MonClip.onRollOut = function() { //lorsque le curseur sort du clip
clearInterval(Interval); //on efface l'interval par mesure de sécurité
Interval = setInterval(Mouvement,Int,1); //on demande l'accélération (d'où le 1)
}

C'est bcp demandé, mais y aurai-t-il quelqu'un pour m'aider svp...?

5 réponses

Messages postés
1313
Date d'inscription
jeudi 16 juillet 2009
Statut
Membre
Dernière intervention
20 juin 2014
6
Hello,

si tu es débutante de chez débutante et bien tu te lances d'emblée sur du lourd de chez lourd .
Si tu souhaites que tes "boutons" défilent en diagonale du bas à gauche jusqu'au au haut à droite, il va te falloir jouer sur les coordonnées de chaque bouton (rien que ça déjà ça doit faire une bonne tripotée de lignes de code). Ensuite il va te falloir définir un point de référence sur ta scène qui va gérer la vitesse de défilement des boutons, point de défilement qui comme tu le souhaites sera variable en fonction de la position de la souris du fait que tu veux que la vitesse soit gérée par rapport au bouton qui sera le plus à proximité de la souris (encore une tripotée de code ). Par la suite (ou dès le départ, tout dépend), il faudra aussi que tu définisses l'échelle des boutons en fonction de leurs positions sur la scène pour créer l'effet de perspective (toujours et encore du code à gogo). Viendra alors la gestion des rollOver() pour stopper (ou ralentir) le défilement des boutons.

En gros tu as du pain sur la planche en perspective .

Quelques fonctions qui te seront utiles :

- DuplicateMovieClip() // pour dupliquer le clip conteneur si tes boutons contiennent des images stockées en externe.

- _xmouse et _ymouse pour la gestion du positionnement de la souris et les fonctions qui s'y rattachent.

- _xscale et _yscale pour la gestion de l'échelle de tes boutons par rapport à leurs positions sur la scène.

...enfin voilà quoi, personnellement je t'invite à prendre le temps de te renseigner au mieux sur les différentes fonctions qui pourraient te permettre d'arriver à réaliser ton animation. Ce que tu veux faire c'est quand même du costaud, ça s'apparenterait à un carrousel ou un coverflow au niveau de la difficulté, donc comme tu débutes, ne te lance pas tête baissée dans le code, fais des recherches, multiplies les essais en procédant à tâtons, fonction par fonction. Et je dirais même qu'il serait préférable que tu rédiges le code de A à Z (ce qui ne t'empêche pas de t'inspirer d'autres sources), mais à mon avis si tu pars sur un code que tu as du mal à comprendre... et bien tu auras beaucoup de mal à avancer dans ta réalisation.

Bon courage ,

BBFUNK01
//C'est en forgeant qu'on devient forgeron... ;-) ;
Messages postés
3
Date d'inscription
mercredi 9 mai 2007
Statut
Membre
Dernière intervention
1 juin 2010

Merci de ta réponse BBFUNK01 (je vois que tu es très actif en aide sur ce site ! ;-) Me doutais bien que c'était pas simple, malheureusement, je dois finir ce site lundi et ai eu la valid de cette anim hier... donc très peu de tps pour me familiariser avec toutes ces fonctions, je vais tenter de me débrouiller : c'est en forgeant qu'on devient forgeron ;-) !
Messages postés
235
Date d'inscription
lundi 26 février 2007
Statut
Membre
Dernière intervention
26 mai 2013

Regardes tes messages persos....Petit fla en attente avec ce code dedans pour faire avancer ton projet.

th = this;
reset = -1;

//paramètres variables
var xdeb:Number;
var ydeb:Number;
var delai:Number;
var pas_x:Number;
var pas_y:Number;
var longueur:Number;
var divisTaille:Number;
//_______________


tfXdeb.onChanged = function(){
xdeb = Number(this.text);
}

tfYdeb.onChanged = function(){
ydeb = Number(this.text);
}

tfDelai.onChanged = function(){
delai = Number(this.text);
}

tfTaille.onChanged = function(){
divisTaille= Number(this.text);
}

tfPasX.onChanged = function(){
pas_x = Number(this.text);
}

tfPasY.onChanged = function(){
pas_y = Number(this.text);
}

tfLongueur.onChanged = function(){
longueur= Number(this.text);
}


function avancer() {
var fini:Number = longueur+xdeb-pas_x;
if (clip._x>=fini) {
clip._x = xdeb;
clip._y = ydeb;
clip._height=26;
clip._width = 26;
}
clip._x += pas_x;
clip._y += pas_y;
}

bt.onRelease = function() {
reset *= -1;
rapport = pas_y/pas_x;
x_fin = longueur+xdeb;
y_fin = (longueur*rapport)+ydeb;
if (reset == 1) {
mbt="stop";
tempo = setInterval(th, "avancer", delai);
taille = setInterval(th, "grossir_clip", delai);
cible._x = x_fin;
cible._y = y_fin;
} else {
mbt="go";
clearInterval(tempo);
clearInterval(taille);
clip._x = xdeb;
clip._y = ydeb;
cible._x = 1000;
cible._y = 520;
}
};

function grossir_clip(){
clip._xscale*=(100+(pas_x/divisTaille))/100;
clip._yscale*=(100+(pas_x/divisTaille))/100;
}



Pi'ère2
Messages postés
1313
Date d'inscription
jeudi 16 juillet 2009
Statut
Membre
Dernière intervention
20 juin 2014
6
Hello,

jettes un oeil ici :
menu diagonale
c'est un template gratuit qui peut éventuellement te donner une base pour ton projet, ceci dit, attention : le code marche très bien mais il n'est pas de plus propres (pour diverses raisons qu'il serait trop long d'énumérer), je te conseille donc de juste t'en inspirer mais de rédiger toi-même le code (ne pas te contenter de copier-coller), et surtout d'essayer de regrouper le code sur une seule frame.

A plus,

BBFUNK01
//C'est en forgeant qu'on devient forgeron... ;-) ;
Messages postés
3
Date d'inscription
mercredi 9 mai 2007
Statut
Membre
Dernière intervention
1 juin 2010

Oh je suis désolée, je viens juste de voir vos différentes réponses ! Je me suis débrouillée avec les moyens du bords, (qui feraient bondir plus d'un programmeur digne de ce nom...) car j'ai gardé mon code de base et ai "rotationné" les produits (qui sont des boutons et non des clips car sinon le roll over de la frame me pompait le rollover de mes clips) et le clip de façon a les avoir en diagonale... Un vrai travail de sagouin !! Mais qui rend relativement bien, reprend la diagonale, la vitesse, le ralentissement jusqu' à l'arret avec la souris et mes boutons cliquables ! Il me manque juste l'effet de perspective.
Par contre, ayant un peu de tps, je vais travailler et tester vos différent codes qui fonctionneront certainement plus fluidement que le mien ! Dès que j'ai réussi à tous regrouper, je post le résultat !!
Merci bcp !!!

PS : ci-joint le code de base retravaillé avec mes 12 boutons nommés :

Vitesse = 3;
VitesseMax = Vitesse;
Int =50;
onEnterFrame = function() {
btnshamp._x += Vitesse;
if (btnshamp._x - btnshamp._width / 2 > Stage.width)
btnshamp._x = -btnshamp._width;

btndeo._x += Vitesse;
if (btndeo._x - btndeo._width / 2 > Stage.width)
btndeo._x = -btndeo._width;

btnedt._x += Vitesse;
if (btnedt._x - btnedt._width / 2 > Stage.width)
btnedt._x = -btnedt._width;

btnar._x += Vitesse;
if (btnar._x - btnar._width / 2 > Stage.width)
btnar._x = -btnar._width;

btngelras._x += Vitesse;
if (btngelras._x - btngelras._width / 2 > Stage.width)
btngelras._x = -btngelras._width;

btnmousse._x += Vitesse;
if (btnmousse._x - btnmousse._width / 2 > Stage.width)
btnmousse._x = -btnmousse._width;

btngwetlook._x += Vitesse;
if (btngwetlook._x - btngwetlook._width / 2 > Stage.width)
btngwetlook._x = -btngwetlook._width;

btngstyling._x += Vitesse;
if (btngstyling._x - btngstyling._width / 2 > Stage.width)
btngstyling._x = -btngstyling._width;

btngultra._x += Vitesse;
if (btngultra._x - btngultra._width / 2 > Stage.width)
btngultra._x = -btngultra._width;

btngnolimit._x += Vitesse;
if (btngnolimit._x - btngnolimit._width / 2 > Stage.width)
btngnolimit._x = -btngnolimit._width;

btngshining._x += Vitesse;
if (btngshining._x - btngshining._width / 2 > Stage.width)
btngshining._x = -btngshining._width;

btngwater._x += Vitesse;
if (btngwater._x - btngwater._width / 2 > Stage.width)
btngwater._x = -btngwater._width;

}
Mouvement = function(Sens:Number) {
Vitesse += Sens / VitesseMax;
if (Sens < 0 && Vitesse < 1) Vitesse = 0;
else if (Sens > 0 && Vitesse > VitesseMax - 1) Vitesse = VitesseMax;
if (Vitesse 0 || Vitesse VitesseMax) clearInterval(Interval);
}
btnshamp.onRollOver = function() {
clearInterval(Interval);
Interval = setInterval(Mouvement,Int,-1);
}
btnshamp.onRollOut = function() {
clearInterval(Interval);
Interval = setInterval(Mouvement,Int,1);
}

// Bouton deo
btndeo.onRollOver = function() {
clearInterval(Interval);
Interval = setInterval(Mouvement,Int,-1);
}
btndeo.onRollOut = function() {
clearInterval(Interval);
Interval = setInterval(Mouvement,Int,1);
}

// Bouton edt
btnedt.onRollOver = function() {
clearInterval(Interval);
Interval = setInterval(Mouvement,Int,-1);
}
btnedt.onRollOut = function() {
clearInterval(Interval);
Interval = setInterval(Mouvement,Int,1);
}

// Bouton ar
btnar.onRollOver = function() {
clearInterval(Interval);
Interval = setInterval(Mouvement,Int,-1);
}
btnar.onRollOut = function() {
clearInterval(Interval);
Interval = setInterval(Mouvement,Int,1);
}

// Bouton gelras
btngelras.onRollOver = function() {
clearInterval(Interval);
Interval = setInterval(Mouvement,Int,-1);
}
btngelras.onRollOut = function() {
clearInterval(Interval);
Interval = setInterval(Mouvement,Int,1);
}

// Bouton mousse
btnmousse.onRollOver = function() {
clearInterval(Interval);
Interval = setInterval(Mouvement,Int,-1);
}
btnmousse.onRollOut = function() {
clearInterval(Interval);
Interval = setInterval(Mouvement,Int,1);
}

// Bouton gel wetlook
btngwetlook.onRollOver = function() {
clearInterval(Interval);
Interval = setInterval(Mouvement,Int,-1);
}
btngwetlook.onRollOut = function() {
clearInterval(Interval);
Interval = setInterval(Mouvement,Int,1);
}

// Bouton gel styling
btngstyling.onRollOver = function() {
clearInterval(Interval);
Interval = setInterval(Mouvement,Int,-1);
}
btngstyling.onRollOut = function() {
clearInterval(Interval);
Interval = setInterval(Mouvement,Int,1);
}

// Bouton gel ultra
btngultra.onRollOver = function() {
clearInterval(Interval);
Interval = setInterval(Mouvement,Int,-1);
}
btngultra.onRollOut = function() {
clearInterval(Interval);
Interval = setInterval(Mouvement,Int,1);
}

// Bouton gel nolimit
btngnolimit.onRollOver = function() {
clearInterval(Interval);
Interval = setInterval(Mouvement,Int,-1);
}
btngnolimit.onRollOut = function() {
clearInterval(Interval);
Interval = setInterval(Mouvement,Int,1);
}

// Bouton gel shining
btngshining.onRollOver = function() {
clearInterval(Interval);
Interval = setInterval(Mouvement,Int,-1);
}
btngshining.onRollOut = function() {
clearInterval(Interval);
Interval = setInterval(Mouvement,Int,1);
}

// Bouton gel water
btngwater.onRollOver = function() {
clearInterval(Interval);
Interval = setInterval(Mouvement,Int,-1);
}
btngwater.onRollOut = function() {
clearInterval(Interval);
Interval = setInterval(Mouvement,Int,1);
}