[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2971
  • Last Modified:

AS3: TweenLite onComplete fires at begining instead of at the end of the tween...

I have several mc's wrapped into one mc.  on MOUSE_OVER they animate out, and on MOUSE_OUT they animate back in.  This works fine.  What I need to add now is a tween at the end of the MOUSE_OVER.  Refer to my code...

I dont want the following:
TweenLite.to(ants_mc, .8, {alpha:1, delay:.5, ease:Strong.easeOut});
to begin until the :
TweenLite.to(crosshair_mc.bottomLeft_mc, .5, {y:-41.6, x:41, ease:Back.easeIn});
      TweenLite.to(crosshair_mc.bottomRight_mc, .5, {y:-41.6, x:-41.6, ease:Back.easeIn});
      TweenLite.to(crosshair_mc.topLeft_mc, .5, {y:41.6, x:41.6, ease:Back.easeIn});
      TweenLite.to(crosshair_mc.topRight_mc, .5, {y:41.6, x:-41.6, ease:Back.easeIn, onComplete:});
have all completed...

I have added in an onComplete in several different fashions, but all are firing at the beginning of the tween, yet I need it to wait until the other tweens have completed.  I have also tried adding in an onComplete add function but I am having the same problems...

Please take a look and throw out any suggestions that come to mind...

Thanks...
crosshair_mc.buttonMode = true;
ants_mc.alpha = 0;
crosshair_mc.addEventListener(MouseEvent.MOUSE_OVER, RollOver);
function RollOver(event:MouseEvent):void {
	TweenLite.to(crosshair_mc.bottomLeft_mc, .5, {y:-41.6, x:41, ease:Back.easeIn});
	TweenLite.to(crosshair_mc.bottomRight_mc, .5, {y:-41.6, x:-41.6, ease:Back.easeIn});
	TweenLite.to(crosshair_mc.topLeft_mc, .5, {y:41.6, x:41.6, ease:Back.easeIn});
	TweenLite.to(crosshair_mc.topRight_mc, .5, {y:41.6, x:-41.6, ease:Back.easeIn, onComplete:});
	TweenLite.to(ants_mc, .8, {alpha:1, delay:.5, ease:Strong.easeOut});
}
 
crosshair_mc.addEventListener(MouseEvent.MOUSE_OUT, RollOut);
function RollOut(event:MouseEvent):void {
 
	TweenLite.to(crosshair_mc.bottomLeft_mc, .7, {y:0, x:0, ease:Back.easeInOut});
	TweenLite.to(crosshair_mc.bottomRight_mc, .7, {y:0, x:0, ease:Back.easeInOut});
	TweenLite.to(crosshair_mc.topLeft_mc, .7, {y:0, x:0, ease:Back.easeInOut});
	TweenLite.to(crosshair_mc.topRight_mc, .7, {y:0, x:0, ease:Back.easeInOut});
	TweenLite.to(ants_mc, .2, {alpha:0, ease:Strong.easeOut});
}

Open in new window

0
cubical38
Asked:
cubical38
1 Solution
 
H01Commented:
Hi cubical38

May be you can try to delay the execution of the code using enterFrame and timer, for example if the four line of code takes 3 second to complete then set a timer for 3 second the fire the last line of code.

See the code snipper hope it can help you out.

function RollOver(event:MouseEvent):void {
	TweenLite.to(crosshair_mc.bottomLeft_mc, .5, {y:-41.6, x:41, ease:Back.easeIn});
	TweenLite.to(crosshair_mc.bottomRight_mc, .5, {y:-41.6, x:-41.6, ease:Back.easeIn});
	TweenLite.to(crosshair_mc.topLeft_mc, .5, {y:41.6, x:41.6, ease:Back.easeIn});
	TweenLite.to(crosshair_mc.topRight_mc, .5, {y:41.6, x:-41.6, ease:Back.easeIn, onComplete:});
 
	var MyTimer = getTimer() + 3000 
	ants_mc.addEventListener(Event.ENTER_FRAME,WaitForExecute)
	
	function WaitForExecute(){
		if(MyTimer < getTimer()){
			ants_mc.removeEventListener(Event.ENTER_FRAME,WaitForExecute)
			TweenLite.to(ants_mc, .8, {alpha:1, delay:.5, ease:Strong.easeOut});
		}		
	}
}

Open in new window

0
 
cubical38Author Commented:
I actually got it to work by putting a conditional statement:

[code]function marchingAnts2(event:MouseEvent=null):void {
      if (crosshair2_mc.bottomLeft_mc.x >= 30) {
            TweenGroup.allTo([ants2_mc, txtBox2_mc], .5, {alpha:1, ease:Strong.easeOut});
      } else {
            trace("didnt make it 2");
      }
} [/code]

Thanks for the input, points awarded...
0

Featured Post

[Webinar] Cloud and Mobile-First Strategy

Maybe you’ve fully adopted the cloud since the beginning. Or maybe you started with on-prem resources but are pursuing a “cloud and mobile first” strategy. Getting to that end state has its challenges. Discover how to build out a 100% cloud and mobile IT strategy in this webinar.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now