Bouton rejouer animation [Résolu]

Messages postés
81
Date d'inscription
mercredi 1 août 2007
Statut
Membre
Dernière intervention
27 juillet 2011
- - Dernière réponse : cs_inaden
Messages postés
619
Date d'inscription
mercredi 4 avril 2007
Statut
Membre
Dernière intervention
27 août 2010
- 1 févr. 2010 à 15:45
Bonjour,

Je suis actuellement sur une animation basique (des tweens) en as3, dans laquelle il y a une function init dans laquelle je mets toutes les valeurs de base (placement des objets sur la scène, valeur des alpha, etc.). Et j'ai un btn rejouer l'animation qui appelle init or par moment cela ne fonctionne pas vraiment. Je vous laisse le soin de regarder l'animation :
http://davidpage.eu/David/lbi

Si quelqu'un pouvait me donner une piste je lui en serait vraiment reconnaissant.

Bonne journée.

import com.greensock.*;
import com.greensock.easing.*;

var positionUsine:Number = 0;

//BTN_REJOUER
btnRejouer.addEventListener(MouseEvent.MOUSE_OVER, btnRejouerOver);
btnRejouer.addEventListener(MouseEvent.MOUSE_OUT, btnRejouerOut);
btnRejouer.addEventListener(MouseEvent.CLICK, btnRejouerClick);

btnRejouer.buttonMode = true;

function btnRejouerOver(evt:MouseEvent){
btnRejouer.gotoAndStop(2);
}
function btnRejouerOut(evt:MouseEvent){
btnRejouer.gotoAndStop(1);
}
function btnRejouerClick(evt:MouseEvent){
init();
}

init();

function init() {
if (loaderInfo.parameters.lng=="en") {
usines.u1.gotoAndStop(2);
usines.u2.gotoAndStop(2);
usines.u3.gotoAndStop(2);
usines.u4.gotoAndStop(2);
usines.u5.gotoAndStop(2);
usines.u6.gotoAndStop(2);
usines.u7.gotoAndStop(2);

baseLine.rectangleVert.r1.gotoAndStop(2);
baseLine.rectangleVert.r2.gotoAndStop(2);
baseLine.rectangleVert.r3.gotoAndStop(2);
baseLine.rectangleVert.r4.gotoAndStop(2);
baseLine.rectangleVert.r5.gotoAndStop(2);
baseLine.rectangleVert.r6.gotoAndStop(2);
baseLine.rectangleVert.r7.gotoAndStop(2);

d1.gotoAndStop(2);
d2.gotoAndStop(2);
d3.gotoAndStop(2);

tableau.gotoAndStop(2);
} else {

}

usines.u1.alpha = 1;
usines.u2.alpha = 1;
usines.u3.alpha = 0;
usines.u4.alpha = 0;
usines.u5.alpha = 0;
usines.u6.alpha = 0;
usines.u7.alpha = 0;

baseLine.rectangleVert.r1.alpha = 0;
baseLine.rectangleVert.r2.alpha = 0;
baseLine.rectangleVert.r3.alpha = 0;
baseLine.rectangleVert.r4.alpha = 0;
baseLine.rectangleVert.r5.alpha = 0;
baseLine.rectangleVert.r6.alpha = 0;
baseLine.rectangleVert.r7.alpha = 0;

baseLine.rectangleVert.r1.y = 0;
baseLine.rectangleVert.r2.y = 0;
baseLine.rectangleVert.r3.y = 0;
baseLine.rectangleVert.r4.y = 0;
baseLine.rectangleVert.r5.y = 0;
baseLine.rectangleVert.r6.y = 0;
baseLine.rectangleVert.r7.y = 0;

d1.alpha = 0;
d2.alpha = 0;
d3.alpha = 0;

camion.x = -59.20;
usines.x = 190.45;

baseLine.masqueBarreVerte.width = 13;	

baseLine.barreVerte.mask=baseLine.masqueBarreVerte;
camion.mask=masqueCamion;
usines.mask=masqueUsine;

m1.alpha = 0;
m1.txtM1.alpha = 0;
m1.txtM1.y = -9;

m2.alpha = 0;
m2.txtM2.alpha = 0;
m2.txtM2.y = -9;

m3.alpha = 0;
m3.txtM3.alpha = 0;
m3.txtM3.y = -9;

m4.alpha = 0;
m4.txtM4.alpha = 0;
m4.txtM4.y = -9;

m5.alpha = 0;
m5.txtM5.alpha = 0;
m5.txtM5.y = -9;

m6.alpha = 0;

m7.alpha = 0;

positionUsine = 0;

tableau.alpha = 0;

deplacementCamion();
}

function deplacementCamion(){
TweenLite.to(camion, 1.4, {x:90.8, ease:Cubic.easeOut, onComplete:etape1});
TweenLite.to(baseLine.masqueBarreVerte, 1.4, {width: 38.8, ease:Cubic.easeOut});
}

function etape1(){
TweenLite.to(m1, 0.4, {alpha:1, ease:Cubic.easeOut, onComplete:etape1_1});
}
function etape1_1(){
TweenLite.to(m1.txtM1, 0.3, {y:-16, alpha:1, ease:Cubic.easeOut, onComplete:etape1_2});
}
function etape1_2(){
TweenLite.to(m1.txtM1, 1.4, {alpha:1, ease:Cubic.easeOut, onComplete:etape1_3});
}
function etape1_3(){
TweenLite.to(m1.txtM1, 0.3, {y:-20, alpha:0, ease:Cubic.easeOut, onComplete:etape1_4});
}
function etape1_4(){
TweenLite.to(m1, 0.3, {alpha:0, ease:Cubic.easeOut});
TweenLite.to(camion, 0.9, {x:194, onComplete:etape1_5});
TweenLite.to(baseLine.masqueBarreVerte, 0.9, {width: 61.65, ease:Cubic.easeOut});
TweenLite.to(baseLine.rectangleVert.r1, 0.8, {y:32, alpha:1, ease:Cubic.easeOut});
}
function etape1_5(){
var waitTimer:Timer = new Timer(2000, 1);
waitTimer.addEventListener(TimerEvent.TIMER, etape2);
waitTimer.start();
}

function etape2(evt:TimerEvent){
TweenLite.to(camion, 0.9, {x:291, onComplete:etape2_1});
TweenLite.to(baseLine.masqueBarreVerte, 0.9, {width: 86.15, ease:Cubic.easeOut});
}
function etape2_1(){
TweenLite.to(m2, 0.4, {alpha:1, ease:Cubic.easeOut, onComplete:etape2_2});
TweenLite.to(d1, 0.2, {alpha:1});	
}
function etape2_2(){
TweenLite.to(m2.txtM2, 0.3, {y:-16, alpha:1, ease:Cubic.easeOut, onComplete:etape2_3});
}
function etape2_3(){
TweenLite.to(m2.txtM2, 1.4, {alpha:1, ease:Cubic.easeOut, onComplete:etape2_4});
}
function etape2_4(){
TweenLite.to(m2.txtM2, 0.3, {y:-20, alpha:0, ease:Cubic.easeOut, onComplete:etape2_5});
}
function etape2_5(){
TweenLite.to(m2, 0.3, {alpha:0, ease:Cubic.easeOut});
TweenLite.to(camion, 0.9, {x:392, onComplete:etape2_6});
TweenLite.to(d1, 0.2, {alpha:0});	
TweenLite.to(baseLine.masqueBarreVerte, 0.9, {width: 138.2, ease:Cubic.easeOut});
TweenLite.to(baseLine.rectangleVert.r2, 0.8, {y:32, alpha:1, ease:Cubic.easeOut});
}
function etape2_6(){
var waitTimer:Timer = new Timer(2000, 1);
waitTimer.addEventListener(TimerEvent.TIMER, etape3);
waitTimer.start();
}

function etape3(evt:TimerEvent){
deplacementUsines();
TweenLite.to(camion, 0.9, {x:291, onComplete:etape3_1});
TweenLite.to(baseLine.masqueBarreVerte, 0.9, {width: 164.65, ease:Cubic.easeOut});
}
function etape3_1(){
TweenLite.to(m3, 0.4, {alpha:1, ease:Cubic.easeOut, onComplete:etape3_2});
TweenLite.to(d2, 0.2, {alpha:1});	
}
function etape3_2(){
TweenLite.to(m3.txtM3, 0.3, {y:-16, alpha:1, ease:Cubic.easeOut, onComplete:etape3_3});
}
function etape3_3(){
TweenLite.to(m3.txtM3, 1.4, {alpha:1, ease:Cubic.easeOut, onComplete:etape3_4});
}
function etape3_4(){
TweenLite.to(m3.txtM3, 0.3, {y:-20, alpha:0, ease:Cubic.easeOut, onComplete:etape3_5});
}
function etape3_5(){
TweenLite.to(m3, 0.3, {alpha:0, ease:Cubic.easeOut});
TweenLite.to(camion, 0.9, {x:392, onComplete:etape3_6});
TweenLite.to(d2, 0.2, {alpha:0});	
TweenLite.to(baseLine.masqueBarreVerte, 0.9, {width: 213.9, ease:Cubic.easeOut});
TweenLite.to(baseLine.rectangleVert.r3, 0.8, {y:32, alpha:1, ease:Cubic.easeOut});
}
function etape3_6(){
var waitTimer:Timer = new Timer(2000, 1);
waitTimer.addEventListener(TimerEvent.TIMER, etape4);
waitTimer.start();
}

function etape4(evt:TimerEvent){
deplacementUsines();
TweenLite.to(camion, 0.9, {x:291, onComplete:etape4_1});	
TweenLite.to(baseLine.masqueBarreVerte, 0.9, {width: 240.15, ease:Cubic.easeOut});
}
function etape4_1(){
TweenLite.to(m4, 0.4, {alpha:1, ease:Cubic.easeOut, onComplete:etape4_2});
TweenLite.to(d3, 0.2, {alpha:1});
}
function etape4_2(){
TweenLite.to(m4.txtM4, 0.3, {y:-16, alpha:1, ease:Cubic.easeOut, onComplete:etape4_3});
}
function etape4_3(){
TweenLite.to(m4.txtM4, 1.4, {alpha:1, ease:Cubic.easeOut, onComplete:etape4_4});
}
function etape4_4(){
TweenLite.to(m4.txtM4, 0.3, {y:-20, alpha:0, ease:Cubic.easeOut, onComplete:etape4_5});
}
function etape4_5(){
TweenLite.to(m4, 0.3, {alpha:0, ease:Cubic.easeOut});
TweenLite.to(camion, 0.9, {x:392, onComplete:etape4_6});
TweenLite.to(d3, 0.2, {alpha:0});
TweenLite.to(baseLine.masqueBarreVerte, 0.9, {width: 290.45, ease:Cubic.easeOut});
TweenLite.to(baseLine.rectangleVert.r4, 0.8, {y:32, alpha:1, ease:Cubic.easeOut});
}
function etape4_6(){
var waitTimer:Timer = new Timer(2000, 1);
waitTimer.addEventListener(TimerEvent.TIMER, etape5);
waitTimer.start();
}

function etape5(evt:TimerEvent){
deplacementUsines();
TweenLite.to(camion, 0.9, {x:291, onComplete:etape5_1});
TweenLite.to(baseLine.masqueBarreVerte, 0.9, {width: 315.65, ease:Cubic.easeOut});
}
function etape5_1(){
TweenLite.to(m5, 0.4, {alpha:1, ease:Cubic.easeOut, onComplete:etape5_2});
}
function etape5_2(){
TweenLite.to(m5.txtM5, 0.3, {y:-16, alpha:1, ease:Cubic.easeOut, onComplete:etape5_3});
}
function etape5_3(){
TweenLite.to(m5.txtM5, 1.4, {alpha:1, ease:Cubic.easeOut, onComplete:etape5_4});
}
function etape5_4(){
TweenLite.to(m5.txtM5, 0.3, {y:-20, alpha:0, ease:Cubic.easeOut, onComplete:etape5_5});
}
function etape5_5(){
TweenLite.to(m5, 0.3, {alpha:0, ease:Cubic.easeOut});
TweenLite.to(camion, 0.9, {x:392, onComplete:etape5_6});
TweenLite.to(baseLine.masqueBarreVerte, 0.9, {width: 366.85, ease:Cubic.easeOut});
TweenLite.to(baseLine.rectangleVert.r5, 0.8, {y:32, alpha:1, ease:Cubic.easeOut});
}
function etape5_6(){
var waitTimer:Timer = new Timer(2000, 1);
waitTimer.addEventListener(TimerEvent.TIMER, etape6);
waitTimer.start();
}

function etape6(evt:TimerEvent){
deplacementUsines();
TweenLite.to(camion, 0.9, {x:291, onComplete:etape6_1});
TweenLite.to(baseLine.masqueBarreVerte, 0.9, {width: 393.6, ease:Cubic.easeOut});
}
function etape6_1(){
TweenLite.to(m6, 0.4, {alpha:1, ease:Cubic.easeOut, onComplete:etape6_2});
}
function etape6_2(){
TweenLite.to(m6, 1.5, {alpha:1, ease:Cubic.easeOut, onComplete:etape6_3});
}
function etape6_3(){
TweenLite.to(m6, 0.3, {alpha:0, ease:Cubic.easeOut});
TweenLite.to(camion, 0.9, {x:392, onComplete:etape6_4});
TweenLite.to(baseLine.masqueBarreVerte, 0.9, {width: 442.65, ease:Cubic.easeOut});
TweenLite.to(baseLine.rectangleVert.r6, 0.8, {y:32, alpha:1, ease:Cubic.easeOut});
}
function etape6_4(){
var waitTimer:Timer = new Timer(2000, 1);
waitTimer.addEventListener(TimerEvent.TIMER, etape7);
waitTimer.start();
}

function etape7(evt:TimerEvent){
deplacementUsines();
TweenLite.to(camion, 0.9, {x:291, onComplete:etape7_1});
TweenLite.to(baseLine.masqueBarreVerte, 0.9, {width: 470.1, ease:Cubic.easeOut});
}
function etape7_1(){
TweenLite.to(m7, 0.4, {alpha:1, ease:Cubic.easeOut, onComplete:etape7_2});
}
function etape7_2(){
TweenLite.to(m7, 1.5, {alpha:1, ease:Cubic.easeOut, onComplete:etape7_3});
}
function etape7_3(){
TweenLite.to(m7, 0.3, {alpha:0, ease:Cubic.easeOut});
TweenLite.to(camion, 0.9, {x:390, onComplete:etape7_4});
TweenLite.to(baseLine.masqueBarreVerte, 0.9, {width: 546, ease:Cubic.easeOut});
TweenLite.to(baseLine.rectangleVert.r7, 0.8, {y:32, alpha:1, ease:Cubic.easeOut});
}
function etape7_4(){
var waitTimer:Timer = new Timer(2000, 1);
waitTimer.addEventListener(TimerEvent.TIMER, etape8);
waitTimer.start();
}

function etape8(evt:TimerEvent){
TweenLite.to(camion, 1.8, {x:631, onComplete:etapeMasqueBlanc});
}

function etapeMasqueBlanc(){
masquageBlanc.play();
var waitTimer:Timer = new Timer(1200, 1);
waitTimer.addEventListener(TimerEvent.TIMER, affichageTableau);
waitTimer.start();
}

function affichageTableau(evt:TimerEvent){
TweenLite.to(tableau, 0.4, {alpha:1, onComplete:pauseTableau});
}

function pauseTableau(){
var waitTimer:Timer = new Timer(3000, 1);
waitTimer.addEventListener(TimerEvent.TIMER, desaparitionTableau);
waitTimer.start();
}

function desaparitionTableau(evt:TimerEvent){
masquageBlanc.play();
TweenLite.to(tableau, 0.5, {alpha:0});
init();
}


function deplacementUsines(){
positionUsine += 1;

if(positionUsine <= 5){
TweenLite.to(usines, 0.9, {x:usines.x-199}); 
}

switch (positionUsine){
case 1:
TweenLite.to(usines.u1, 0.9, {alpha:0});
TweenLite.to(usines.u3, 0.9, {alpha:1});
break;
case 2:
TweenLite.to(usines.u2, 0.9, {alpha:0});
TweenLite.to(usines.u4, 0.9, {alpha:1});
break;
case 3:
TweenLite.to(usines.u3, 0.9, {alpha:0});
TweenLite.to(usines.u5, 0.9, {alpha:1});
break;
case 4:
TweenLite.to(usines.u4, 0.9, {alpha:0});
TweenLite.to(usines.u6, 0.9, {alpha:1});
break;
case 5:
TweenLite.to(usines.u5, 0.9, {alpha:0});
TweenLite.to(usines.u7, 0.9, {alpha:1});
break;
}
}
Afficher la suite 

3 réponses

Meilleure réponse
Messages postés
619
Date d'inscription
mercredi 4 avril 2007
Statut
Membre
Dernière intervention
27 août 2010
2
3
Merci
Sans analyser tout ton code en profondeur, juste en regardant l'animation :
si l'animation n'est pas finie, et que l'on clic sur "rejouer", ça se passe mal, surement parce que ce qui est en cours n'est pas "stopper".
Il faudrait "éteindre" les écouteur en cours, notamment tous les écouteur de timer, sinon, l'écouteur reste actif et l'ordre fini par être lancé.
Ton bouton pour relancer devrait vérifier que l'animation est finie. Si elle ne l'est pas, arrêter ton les écouteurs actifs, puis appeler ta fonction init..., enfin, un truc comme ça.
Pour savoir ou tu est, tu pourrais créer une variable var etape : int = 0 (par exemple) et à chaque étape l'incrémenter de 1 (etape++).
Pour vérifier ou tu est quand tu cliques sur rejouer, tu vérifies la valeur de ta variable et tu désactives les écouteurs correspondant à l'étape.
N'oublie pas dans init de remettre ta variable à 0.
Peut-être que je te dis une connerie, mais je pense qu'il est préférable de désactiver tes écouteurs une fois qu'ils ont joué leur rôle.
Voilà.
Tiens nous au courant.


Tout vient à qui sait attendre

Dire « Merci » 3

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

Codes Sources 196 internautes nous ont dit merci ce mois-ci

Commenter la réponse de cs_inaden
Messages postés
81
Date d'inscription
mercredi 1 août 2007
Statut
Membre
Dernière intervention
27 juillet 2011
0
Merci
Merci,

Ce que tu dis me parait bien cohérent... Car si l'animation finie d'elle même elle reboucle sans problème en passant par init.
Commenter la réponse de Ariranha
Messages postés
619
Date d'inscription
mercredi 4 avril 2007
Statut
Membre
Dernière intervention
27 août 2010
2
0
Merci
Alors il n'y a plus qu'à...
Bon courage

Tout vient à qui sait attendre
Commenter la réponse de cs_inaden