Bouton rejouer animationRésolu

Question

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;
}
}

cs_inaden · Accepted Answer

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

Ariranha · Answer

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.

cs_inaden · Answer

Alors il n'y a plus qu'à... 
Bon courage

Tout vient à qui sait attendre

Bouton rejouer animation

3 réponses

Votre réponse

Discussions similaires