Jump to content
Search Community

Infinite Repeat Problem

Woft test

By Woft
in GSAP (Flash)

Moderator Tag
 Share

Recommended Posts

Woft test

Woft

Posted
Posted

Hello,

 

I am new to greensock and my coding may be a bit of a mess however I have an urgent problem.

 

I created an animation and want it to repeat infinitely, however, after the second loop the animation starts to become problematic. The animations start to fire randomly and don't play like they do the first time.

 

If my explanation is unclear please tell me and i will clarify.

 

I have spent 3 hours trying various different approaches to repeating the code and i cannot find a solution.

 

here is the code.

stop();
//import the GreenSock classes
import com.greensock.*;
import com.greensock.easing.*;
import flash.events.MouseEvent;

var nT:Boolean = new Boolean();
var mO:Boolean = new Boolean();
var debug:Boolean = new Boolean();
var masterTL:TimelineMax = new TimelineMax();


//CREATES TIMELINE
masterTL.addLabel("Start", 0);


//HIDES ALL OF LAYERS BY REDUCING ALPHA TO 0
masterTL.insertMultiple([TweenLite.to(Text_S1_mc, 0, {alpha:0, x:4.75, y:30.3}), 
						 TweenLite.to(chain_mc, 0, {alpha:0, x:265.5, y:-38.05}), 
						 TweenLite.to(takeCon_mc, 0, {alpha:0, x:2.9, y:10.7}),
						 TweenLite.to(logoSm_mc, 0, {alpha:0, x:32.7, y:153.35}),
						 TweenLite.to(todayTxt_mc, 0, {alpha:0, x:57.05, y:62}),
						 TweenLite.to(sheen_mc, 0, {alpha:0, x:-41, y:150.4}),
						 TweenLite.to(forF, 0, {x:600, y:176.6, alpha:0}),
						 TweenLite.to(getYour, 0, {alpha:0, x:-2, y:-5.6}),
						 TweenLite.to(pullHandle_mc, 0, {alpha:0, x:255.25, y:103.9}),
						 TweenLite.to(pfEP, 0, {alpha:0, x:-5, y:84.1})
						
						 
						 
						 ]);

masterTL.insert(TweenLite.delayedCall(1, Sc1St));


/**********************************************************************************************************************************************/
/************************************************************ SCENE 1 START *******************************************************************/
/**********************************************************************************************************************************************/
function Sc1St():void {
	if (debug == true){
		trace("scene 1 begun");
	};
	//TEXT APPEARS
	masterTL.insert(TweenLite.to(Text_S1_mc, 1, {alpha:1}));
	//CHAIN AND HANDLE APPEAR AFTER DELAY
	masterTL.append(TweenLite.to(chain_mc, 0.5, {alpha:1}), 0.5);
	masterTL.append(TweenLite.to(pullHandle_mc, 0.5, {alpha:1}), -0.5);
	//MAKE HANDLE PULL DOWNWARDS
	masterTL.append(TweenMax.to(pullHandle_mc, 0.5, {y:124.9, repeat:1, yoyo:true, ease:Quad.easeOut, delay:1}));
	masterTL.append(TweenMax.to(chain_mc, 0.5, {y:-17.05, repeat:1, yoyo:true, ease:Quad.easeOut, onComplete:rTxt}), -1);
	};
	
			//ROTATE AND MOVE TEXT OFF SCREEN
			 function rTxt():void {
				//SPIN TEXT - LASTS 4.5 SECS
				masterTL.append(TweenMax.to(Text_S1_mc, 0.5, {scaleX:-1, x:239.25, repeat:8, yoyo:true, ease:Quad.easeInOut}));
				//MOVE TEXT, HANDLE AND CHAIN
				masterTL.addLabel("sc2St", 4.1);
														
				if (debug == true){
					trace("scene 1 end");
				};
					/*WHEN FINAL TWEEN COMPLETES CALL SCENE 2*/					
				masterTL.insert(TweenLite.delayedCall(1, Sc2St));
				
		
};

/**********************************************************************************************************************************************/
/************************************************************ SCENE 1 ENDS ********************************************************************/
/**********************************************************************************************************************************************/



/**********************************************************************************************************************************************/
/************************************************************ SCENE 2 START *******************************************************************/
/**********************************************************************************************************************************************/
function Sc2St():void{
	if (debug == true){
		trace("scene 2 begun");
	};
	masterTL.insertMultiple([TweenLite.to(Text_S1_mc, 2, {y:400, alpha:0, ease:Quad.easeOut}), 
							  TweenLite.to(chain_mc, 2, {y:-300, alpha:0, ease:Quad.easeOut}), 
							  TweenLite.to(pullHandle_mc, 2, {y:-294, alpha:0, ease:Quad.easeOut}), 
							  
							  TweenLite.to(logoSm_mc, 2, {alpha:1, delay:0.2}),
							  TweenLite.to(takeCon_mc, 2, {alpha:1, delay:0.2}),
							  TweenLite.to(todayTxt_mc, 2, {alpha:1, delay:0.2})							  
							  ],"sc2St");
	masterTL.append(TweenMax.to(todayTxt_mc, 0.3, {scaleX:1.2, scaleY:1.2, x:38.85, y:55, repeat:1, yoyo:true, ease:Quad.easeInOut}),-1);
	
	if (debug == true){
		trace("scene 2 end NEARLY");
	};
	masterTL.addLabel("sc3St", 10.5);
	masterTL.appendMultiple([
							 TweenLite.to(sheen_mc, 0.5, {alpha:0.6}),
							 TweenLite.to(sheen_mc, 1, {x:255, ease:Quad.easeInOut}),
							 /*WHEN FINAL TWEEN COMPLETES CALL SCENE 3*/
							 TweenLite.delayedCall(2, Sc3St)
							 ]);
	
	
	
	
	
};

/**********************************************************************************************************************************************/
/************************************************************ SCENE 2 ENDS ********************************************************************/
/**********************************************************************************************************************************************/



/**********************************************************************************************************************************************/
/************************************************************ SCENE 3 START *******************************************************************/
/**********************************************************************************************************************************************/


function Sc3St():void{
	
	if (debug == true){
		trace("scene 3 begun");
	};
	
	masterTL.insertMultiple([TweenLite.to(logoSm_mc, 2, {alpha:0}), 
							  TweenLite.to(todayTxt_mc, 2, {alpha:0}),
							  TweenLite.to(takeCon_mc, 2, {alpha:0}),
							  
							  TweenLite.to(forF, 0, {x:24.65, y:176.6, delay:0.5}),
							  TweenLite.to(logoSm_mc, 0, {x:78.5, y:40.4, scaleX:0.66, scaleY:0.66, delay:1}),
							  TweenLite.to(getYour, 2, {alpha:1, delay:1}),
							  TweenLite.to(logoSm_mc, 2, {alpha:1, delay:1}), 
							  TweenLite.to(pfEP, 2, {alpha:1, delay:1}),
							  TweenLite.to(forF, 2, {alpha:1, delay:1}),
							  ],"sc3St");
							
	forF.addEventListener(MouseEvent.ROLL_OVER, overHandler);
	forF.addEventListener(MouseEvent.ROLL_OUT, outHandler);
	forF.addEventListener(MouseEvent.CLICK, clickHandler);

	
	function overHandler(event:MouseEvent):void {
		
		if (forF.alpha == 1 && mO == false){
			masterTL.insert(TweenLite.to(forF, 0, {alpha:0.5}));
			mO = !mO;			
		} else {
			//DO NOTHING
		}
	}
	
	
	
	function outHandler(event:MouseEvent):void {
		if (forF.alpha == 0.5 && mO == true){
		masterTL.insert(TweenLite.to(forF, 0, {alpha:1}));
		mO = !mO
		}else{
			//DO NOTHING
		};
	};
	
	
	
	function clickHandler(event:MouseEvent):void{
		if (debug == true){
			trace('click registered');
		};
		
		
		navigateToURL(new URLRequest("http://www.kegel8.co.uk/articles/pelvic-floor-exercise/how-to-do-kegel-exercises.html"));
	};
	
	if (debug == true){
		trace("scene 3 end");
	};
	masterTL.appendMultiple([
	TweenLite.to(getYour, 0, {alpha:0, delay:5}),
	TweenLite.to(logoSm_mc, 0, {alpha:0, delay:5}),
	TweenLite.to(pfEP, 0, {alpha:0, delay:5}),
	TweenLite.to(forF, 0, {alpha:0, delay:5})]);
	masterTL.append(TweenLite.delayedCall(0, done));
   }
/**********************************************************************************************************************************************/
/************************************************************ SCENE 3 ENDS ********************************************************************/
/**********************************************************************************************************************************************/




//FIRES WHEN ALL ANIMATION IS DONE
function done() {
	if (debug == true){
			trace('im done');
	};

	masterTL.complete();
	TweenLite.delayedCall(0, restartTheTimeline);
	}
	
	
//RESTARTS THE TIMELINE
function restartTheTimeline(){
	
	if (debug == true){
				trace("restart");
	};
	
	masterTL.gotoAndPlay("Start")
	
	
	
	}
Link to comment
Share on other sites
Carl test

Carl

Posted
Posted

Hi and welcome to the forums.

 

I think the problem lies in the fact that you are inserting these delayedCalls into the beginning of the timeline that you are using to call functions that add tweens to your timeline.

masterTL.insert(TweenLite.delayedCall(1, Sc1St));

The main problem with this approach is that every time you restart the timeline these functions get called and more tweens get added to the timeline each time it plays. Chances are new tweens with the exact same targets and tween values are overwriting existing tweens. Plus any time you use masterTl.append() those new tweens are getting added to the end of the timeline and your timeline will progressively get longer and longer each time it plays. In short, this isn't a good way to manage the creation of a timeline.

 

Perhaps there is some reason for this approach that I am not understanding, but from what I can tell, you should just be appending tweens to the master timeline in the order that you want them to run. By using labels, the offset parameter and a mixture of append and insert methods, you have complete control over when each tween starts. 

 

If you want to keep the code for your "scenes" separate, the preferred method is to build each scene into its own timeline and then add each scene's timeline to masterTimeline. This approach makes the code much easier to manage.

 

Here is some simple code to illustrate this concept:

var master = new TimelineLite()

var scene1 = new TimelineLite()
scene1.append(TweenLite.to(mc, 1, {x:200}))
scene1.append(TweenLite.to(mc, 1, {y:200}))
scene1.append(TweenLite.to(mc, 1, {rotation:200}))

var scene2 = new TimelineLite()
scene2.append(TweenLite.to(mc2, 1, {x:200}))
scene2.append(TweenLite.to(mc2, 1, {y:200}))
scene2.append(TweenLite.to(mc2, 1, {rotation:200}))

//add both scenes to master
master.append(scene1)
master.append(scene2)

I would definitely recommend you try to incorporate this approach as I don't think there will be an easier way to fix the code you have.

 

----

Also it appears you are using v11 of the platform. v12 has a lot of new enhancements that make working with timeline's much easier. On your next project I would strongly suggest upgrading.

 

here is some good reading on v12: http://www.greensock.com/v12/

in v12 there is no need for insert() append() appendMultiple, and insertMultiple() on method called add() does it all:

http://api.greensock.com/as/com/greensock/TimelineLite.html#add()

 

or for from() to() fromTo() staggerFrom() staggerFromTo() tweens, the syntax gets even shorter:

http://api.greensock.com/as/com/greensock/TimelineLite.html#to()

 

Although this video uses the JavaScript flavor of v12, it will show you exactly how the timeline features work in the AS3 version (same syntax) http://www.greensock.com/sequence-video/

  • Like 1
Link to comment
Share on other sites
Woft test

Woft

Posted
  • Author
Posted

Ok, i am going to try reorganising and using the method you suggested.

 

I will get back to you shortly with an update.

 

---------------------------------------------------------------------------------------------------------------

 

Carl! Thankyou!

 

works like a charm now. you are indeed a life saver.

the reason my code was so complicated in the beginning was due to not understanding how to nest multiple timelines.

 

but i think i have the jist now.

 

here is the modified code you inspired...if interested?

//import the GreenSock classes
import com.greensock.*;
import com.greensock.easing.*;
import flash.events.MouseEvent;

var nT:Boolean = new Boolean();
var mO:Boolean = new Boolean();
var debug:Boolean = new Boolean(true);
var masterTL:TimelineMax = new TimelineMax({repeat:-1, repeatDelay:-1});








/**********************************************************************************************************************************************/
/************************************************************ SCENE 1 START *******************************************************************/
/**********************************************************************************************************************************************/
if (debug == true){
	trace("scene 1 begun");
};

var scene1:TimelineMax = new TimelineMax();
//HIDES ALL OF LAYERS BY REDUCING ALPHA TO 0
scene1.insertMultiple([TweenLite.to(Text_S1_mc, 0, {alpha:0, x:4.75, y:30.3}), 
						TweenLite.to(chain_mc, 0, {alpha:0, x:265.5, y:-38.05}),
						TweenLite.to(pullHandle_mc, 0, {alpha:0, x:255.25, y:103.9})
						]);
//TEXT APPEARS
scene1.append(TweenLite.to(Text_S1_mc, 1, {alpha:1}));
//CHAIN AND HANDLE APPEAR AFTER DELAY
scene1.append(TweenLite.to(chain_mc, 0.5, {alpha:1}), 0.5);
scene1.append(TweenLite.to(pullHandle_mc, 0.5, {alpha:1}), -0.5);
//MAKE HANDLE PULL DOWNWARDS
scene1.append(TweenMax.to(pullHandle_mc, 0.5, {y:124.9, repeat:1, yoyo:true, ease:Quad.easeOut, delay:1}));
scene1.append(TweenMax.to(chain_mc, 0.5, {y:-17.05, repeat:1, yoyo:true, ease:Quad.easeOut}), -1);
	
	
//ROTATE AND MOVE TEXT OFF SCREEN
//SPIN TEXT - LASTS 4.5 SECS
scene1.append(TweenMax.to(Text_S1_mc, 0.5, {scaleX:-1, x:239.25, repeat:8, yoyo:true, ease:Quad.easeInOut}));
//MOVE TEXT, HANDLE AND CHAIN
scene1.appendMultiple([TweenLite.to(Text_S1_mc, 2, {y:400, alpha:0, ease:Quad.easeOut}), 
						  TweenLite.to(chain_mc, 2, {y:-300, alpha:0, ease:Quad.easeOut}), 
						  TweenLite.to(pullHandle_mc, 2, {y:-294, alpha:0, ease:Quad.easeOut})
						  ],-4.5);
														
if (debug == true){
	trace("scene 1 end");
};
	
/**********************************************************************************************************************************************/
/************************************************************ SCENE 1 ENDS ********************************************************************/
/**********************************************************************************************************************************************/



/**********************************************************************************************************************************************/
/************************************************************ SCENE 2 START *******************************************************************/
/**********************************************************************************************************************************************/
if (debug == true){
	trace("scene 2 begun");
};
var scene2:TimelineMax = new TimelineMax();
scene2.insertMultiple([TweenLite.to(logoSm_mc, 0, {alpha:0, x:32.7, y:153.35}),
						TweenLite.to(todayTxt_mc, 0, {alpha:0, x:57.05, y:62}),
						TweenLite.to(sheen_mc, 0, {alpha:0, x:-41, y:150.4}),
						TweenLite.to(takeCon_mc, 0, {alpha:0, x:2.9, y:10.7})
						]);
scene2.appendMultiple([	  TweenLite.to(logoSm_mc, 2, {alpha:1, delay:0.2}),
						  TweenLite.to(takeCon_mc, 2, {alpha:1, delay:0.2}),
						  TweenLite.to(todayTxt_mc, 2, {alpha:1, delay:0.2})							  
						]);
scene2.append(TweenMax.to(todayTxt_mc, 0.3, {scaleX:1.2, scaleY:1.2, x:38.85, y:55, repeat:1, yoyo:true, ease:Quad.easeInOut}),-1);
	
	
	
scene2.appendMultiple([TweenLite.to(sheen_mc, 0.5, {alpha:0.6}),
						TweenLite.to(sheen_mc, 1, {x:255, ease:Quad.easeInOut}),
						 ]);
scene2.appendMultiple([TweenLite.to(logoSm_mc, 2, {alpha:0}), 
						TweenLite.to(todayTxt_mc, 2, {alpha:0}),
						TweenLite.to(takeCon_mc, 2, {alpha:0})
						]);
	
if (debug == true){
	trace("scene 2 end");
};
	
	
	


/**********************************************************************************************************************************************/
/************************************************************ SCENE 2 ENDS ********************************************************************/
/**********************************************************************************************************************************************/



/**********************************************************************************************************************************************/
/************************************************************ SCENE 3 START *******************************************************************/
/**********************************************************************************************************************************************/
if (debug == true){
	trace("scene 3 begun");
};

var scene3:TimelineMax = new TimelineMax();	
scene3.insertMultiple([ TweenLite.to(forF, 0, {x:600, alpha:0}),
						TweenLite.to(getYour, 0, {alpha:0, x:-2, y:-5.6}),
						TweenLite.to(pfEP, 0, {alpha:0, x:-5, y:84.1}),
						TweenLite.to(logoSm2_mc, 0, {alpha:0, x:77.5, y:42.35})
						]);
						
scene3.appendMultiple([ TweenLite.to(forF, 0, {x:24.65, delay:0.5}),
						TweenLite.to(getYour, 2, {alpha:1, delay:1}),
						TweenLite.to(logoSm2_mc, 2, {alpha:1, delay:1}), 
						TweenLite.to(pfEP, 2, {alpha:1, delay:1}),
						TweenLite.to(forF, 2, {alpha:1, delay:1}),
						]);
scene3.appendMultiple([ TweenLite.to(getYour, 2, {alpha:0, delay:5}),
						TweenLite.to(logoSm2_mc, 2, {alpha:0, delay:5}), 
						TweenLite.to(pfEP, 2, {alpha:0, delay:5}),
						TweenLite.to(forF, 2, {alpha:0, delay:5}),
						]);


if (debug == true){
		trace("scene 3 end");
};
/**********************************************************************************************************************************************/
/************************************************************ SCENE 3 ENDS ********************************************************************/
/**********************************************************************************************************************************************/
masterTL.append(scene1);
masterTL.append(scene2,-4.5);
masterTL.append(scene3,-2);




forF.addEventListener(MouseEvent.ROLL_OVER, overHandler);
forF.addEventListener(MouseEvent.ROLL_OUT, outHandler);
forF.addEventListener(MouseEvent.CLICK, clickHandler);

	
function overHandler(event:MouseEvent):void {
		
	if (forF.alpha == 1 && mO == false){
		TweenLite.to(forF, 0, {alpha:0.5});
		mO = !mO;			
	} else {
		//DO NOTHING
	}
}
	
	
	
function outHandler(event:MouseEvent):void {
	if (forF.alpha == 0.5 && mO == true){
		TweenLite.to(forF, 0, {alpha:1});
		mO = !mO
	}else{
		//DO NOTHING
	};
};
	
	
	
function clickHandler(event:MouseEvent):void{
	if (debug == true){
		trace('click registered');
	};
		navigateToURL(new URLRequest("http://www.kegel8.co.uk/articles/pelvic-floor-exercise/how-to-do-kegel-exercises.html"));
	};
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...