ROLL_OVER and ROLL_OUT

[chefkeifer]

Hey, I am having an issue of if the user moves the mouse too fast over the buttons the content shows up but does not go away...is it because its taking too long for the function to complete. is there a way around this to have a smooth transistion.

 

here is some snippet of code

function over(event:MouseEvent):void{
        switch(event.currentTarget.name){
    	  case"btn_welcome":
		content1 = new welcome();
			addChild(content1);
		content1.alpha = 0;

			var over1:TimelineMax = new TimelineMax();
				over1.insert(TweenMax.to(content1, .1, {scaleX:0, scaleY:0}));
				over1.append(TweenMax.to(content1, .5, {scaleX:1, scaleY:1, alpha:1}));
		setChildIndex(menu,numChildren - 1);
         break;

	  case"btn_dragStrip":
   		content2 = new dragStrip();
			addChild(content2);
		content2.alpha = 0;

			var over2:TimelineMax = new TimelineMax();
				over2.insert(TweenMax.to(content2, .1, {scaleX:0, scaleY:0}));
				over2.append(TweenMax.to(content2, .5, {scaleX:1, scaleY:1, alpha:1}));
		setChildIndex(menu,numChildren - 1);
   	  break;
//*****====================================================*****
function out(event:MouseEvent):void{
        switch(event.currentTarget.name){
    	  case"btn_welcome":
   		TweenMax.to(content1,  1, {alpha:0, onComplete:onFinish1});
       			function onFinish1():void{
					removeChild(content1);
			}
   	  break;
	  case"btn_dragStrip":
   		TweenMax.to(content2,  1, {alpha:0, onComplete:onFinish2});
       			function onFinish2():void{
					removeChild(content2);
			}
   	  break;

here is a link to the swf so you can see what i am talking about.

 

http://

http://www.carolinaadventureworld.net/homePage.swf

[GreenSock]

You're using nested functions - don't do that. They cause all sorts of confusion and problems. A nested function is deleted as soon as its parent function finishes, so by the time your tween finishes, it's trying to call a function that doesn't exist anymore. Don't nest those functions and you'll be fine.

[chefkeifer]

how do i not nest them..nesting is new term to me..

[GreenSock]

BAD:

function myFunction1():void {
   TweenMax.to(mc, 1, {x:100, onComplete:myFunction2});
   function myFunction2():void {
       //code here...
   }
}

 

GOOD:

function myFunction1():void {
   TweenMax.to(mc, 1, {x:100, onComplete:myFunction2});
}
function myFunction2():void {
   //code here...
}

 

See what I mean by "nested" now?

[chefkeifer]

so for instance i have 15 buttons (which i do)...and i have the out switch statement that tween Fades (alpha)content out...i would then need to make 15 separate functions to removeChild?

[GreenSock]

Nope. You could use the onCompleteParams like this:

 

function myFunction1():void {
   TweenMax.to(mc, 1, {x:100, onComplete:myFunction2, onCompleteParams:[mc]});
}
function myFunction2(clip:DisplayObject):void {
   clip.parent.removeChild(clip);
}

 

That way you can use the same function for them all, just change the parameter you're feeding in.

[chefkeifer]

so something like this

 

function onFinish(clip:DisplayObject):void {
   clip.parent.removeChild(clip);
}
//*****====================================================*****

function out(event:MouseEvent):void{
        switch(event.currentTarget.name){
    	  case"btn_welcome":
   		TweenMax.to(content1,  1, {alpha:0, onComplete:onFinish,onCompleteParams:[welcome]});
         break;

and make sure all the case break statements reflect the same parameter...

[chefkeifer]

I am getting this error now.

TypeError: Error #1034: Type Coercion failed: cannot convert oval_dirtTrack$ to flash.display.DisplayObject.

 

i change all the code to reflect that one function when removeChild.

 

what am i doing wrong...

 

function onFinish(clip:DisplayObject):void {
   clip.parent.removeChild(clip);
}
//*****====================================================*****
function out(event:MouseEvent):void{
        switch(event.currentTarget.name){
    	  case"btn_welcome":
   		TweenMax.to(content1,  .5, {alpha:0, onComplete:onFinish,onCompleteParams:[welcome]});
         break;
	  case"btn_dragStrip":
   		TweenMax.to(content2,  1, {alpha:0, onComplete:onFinish,onCompleteParams:[dragStrip]});
   	  break;
	  case"btn_motocross":
   		TweenMax.to(content3,  .5, {alpha:0, onComplete:onFinish,onCompleteParams:[motocross]});
   	  break;
	  case"btn_rvCamping":
   		TweenMax.to(content4,  .5, {alpha:0, onComplete:onFinish,onCompleteParams:[rvCamping]});
   	  break;

[GreenSock]

Sounds like one of these isn't a DisplayObject: welcome, dragStrip, motocross, rvCamping

 

Flash won't let you removeChild() an object that's not a DisplayObject.

[chefkeifer]

They are movieclips coming from the library.

 

var content1:welcome;
var content2:dragStrip;
//-------------------------------------------------------
function over(event:MouseEvent):void{
        switch(event.currentTarget.name){
    	  case"btn_welcome":
		content1 = new welcome();
			addChild(content1);
		content1.alpha = 0;

			var over1:TimelineMax = new TimelineMax();
				over1.insert(TweenMax.to(content1, .1, {scaleX:0, scaleY:0}));
				over1.append(TweenMax.to(content1, .5, {scaleX:1, scaleY:1, alpha:1}));
		setChildIndex(menu,numChildren - 1);
         break;

	  case"btn_dragStrip":
   		content2 = new dragStrip();
			addChild(content2);
		content2.alpha = 0;

			var over2:TimelineMax = new TimelineMax();
				over2.insert(TweenMax.to(content2, .1, {scaleX:0, scaleY:0}));
				over2.append(TweenMax.to(content2, .5, {scaleX:1, scaleY:1, alpha:1}));
		setChildIndex(menu,numChildren - 1);
   	  break;

[GreenSock]

Based on this code:

 

var content1:welcome;
var content2:dragStrip;

 

It looks like they're classes, not DisplayObjects. They're probably classes that extend a DisplayObject, but you cannot removeChild() a class - it must be an actual DisplayObject instance.

[chefkeifer]

so do I need to just do another variable like this

 

var welcome:MovieClip;

and do that for movieclip i addChild to the stage?

[GreenSock]

I don't know exactly what you're trying to do, but if you have assets in the library that you're exporting for ActionScript and you've associated them with certain classes (like "welcome" and "dragStrip", etc.), you can just create new instances and add them to the stage like this:

 

var myWelcomeInstance:welcome = new welcome(); 
var myDragStripInstance:dragStrip = new dragStrip();
addChild(myWelcomeInstance);
addChild(myDragStripInstance); 

 

But if you have instances already on the stage, just make sure they're named something and you could do something like:

 

var myWelcomeInstance:welcome = this.getChildByName("myWelcomeName") as welcome;
var myDragStripInstance:dragStrip = this.getChildByName("myDragStripName") as dragStrip;

 

And FYI, it's considered a best practice to always name classes with a capital first letter ("Welcome" instead of "welcome").

[chefkeifer]

as far as what i am trying to do.

here is the link of what i am doing

http://

http://www.carolinaadventureworld.net/homePage.swf

 

when the user rolls over certain parts of the aerial map content will appear(which are movieclips exported for Actionscript) and when the user rolls the content is to fade away and remove from the stage. you will noticed if you go the link if you mouse over too fast the content does not go away. I am stumped here...I understand AS when i look at the code but as far writing it, well thats a different story.

 

here is the code i have for the 15 buttons..its rather lengthy but maybe you could see something that i could change or simpler.

I appreciate your patience

import com.greensock.*; 
import com.greensock.plugins.*;
import com.greensock.easing.*;
//*****====================================================*****
import com.google.analytics.AnalyticsTracker; 
import com.google.analytics.GATracker; 
//*****====================================================*****
var tracker:AnalyticsTracker = new GATracker( this, "UA-11181582-1", "AS3", false );
//*****====================================================*****
menu.btn_welcome.buttonMode = true;
menu.btn_welcome.addEventListener(MouseEvent.ROLL_OVER, over);	
menu.btn_welcome.addEventListener(MouseEvent.ROLL_OUT, out);
//-----------------------------------------------
menu.btn_dragStrip.buttonMode = true;
menu.btn_dragStrip.addEventListener(MouseEvent.ROLL_OVER, over);	
menu.btn_dragStrip.addEventListener(MouseEvent.ROLL_OUT, out);
//-----------------------------------------------
menu.btn_motocross.buttonMode = true;
menu.btn_motocross.addEventListener(MouseEvent.ROLL_OVER, over);	
menu.btn_motocross.addEventListener(MouseEvent.ROLL_OUT, out);
//-----------------------------------------------
menu.btn_rvCamping.buttonMode = true;
menu.btn_rvCamping.addEventListener(MouseEvent.ROLL_OVER, over);	
menu.btn_rvCamping.addEventListener(MouseEvent.ROLL_OUT, out);
//-----------------------------------------------
menu.btn_tentCamping.buttonMode = true;
menu.btn_tentCamping.addEventListener(MouseEvent.ROLL_OVER, over);	
menu.btn_tentCamping.addEventListener(MouseEvent.ROLL_OUT, out);
//-----------------------------------------------
menu.btn_mudOval.buttonMode = true;
menu.btn_mudOval.addEventListener(MouseEvent.ROLL_OVER, over);	
menu.btn_mudOval.addEventListener(MouseEvent.ROLL_OUT, out);
//-----------------------------------------------
menu.btn_oval_dirtTrack.buttonMode = true;
menu.btn_oval_dirtTrack.addEventListener(MouseEvent.ROLL_OVER, over);	
menu.btn_oval_dirtTrack.addEventListener(MouseEvent.ROLL_OUT, out);
//-----------------------------------------------
menu.btn_zipLine.buttonMode = true;
menu.btn_zipLine.addEventListener(MouseEvent.ROLL_OVER, over);	
menu.btn_zipLine.addEventListener(MouseEvent.ROLL_OUT, out);
//-----------------------------------------------
menu.btn_topWorld.buttonMode = true;
menu.btn_topWorld.addEventListener(MouseEvent.ROLL_OVER, over);	
menu.btn_topWorld.addEventListener(MouseEvent.ROLL_OUT, out);
//-----------------------------------------------
menu.btn_bathHouse.buttonMode = true;
menu.btn_bathHouse.addEventListener(MouseEvent.ROLL_OVER, over);	
menu.btn_bathHouse.addEventListener(MouseEvent.ROLL_OUT, out);
//-----------------------------------------------
menu.btn_ticketBooth.buttonMode = true;
menu.btn_ticketBooth.addEventListener(MouseEvent.ROLL_OVER, over);	
menu.btn_ticketBooth.addEventListener(MouseEvent.ROLL_OUT, out);
//-----------------------------------------------
menu.btn_mudBog.buttonMode = true;
menu.btn_mudBog.addEventListener(MouseEvent.ROLL_OVER, over);	
menu.btn_mudBog.addEventListener(MouseEvent.ROLL_OUT, out);
//-----------------------------------------------
menu.btn_pavilion.buttonMode = true;
menu.btn_pavilion.addEventListener(MouseEvent.ROLL_OVER, over);	
menu.btn_pavilion.addEventListener(MouseEvent.ROLL_OUT, out);
//-----------------------------------------------
menu.btn_jrMotocross.buttonMode = true;
menu.btn_jrMotocross.addEventListener(MouseEvent.ROLL_OVER, over);	
menu.btn_jrMotocross.addEventListener(MouseEvent.ROLL_OUT, out);
//-----------------------------------------------
menu.btn_washArea.buttonMode = true;
menu.btn_washArea.addEventListener(MouseEvent.ROLL_OVER, over);	
menu.btn_washArea.addEventListener(MouseEvent.ROLL_OUT, out);
//-----------------------------------------------
//*****====================================================*****

//*****====================================================*****
var content1:welcome;
var content2:dragStrip;
var content3:motocross;
var content4:rvCamping;
var content5:tentCamping;
var content6:mudOval;
var content7:oval_dirtTrack;
var content8:zipLine;
var content9:topWorld;
var content10:bathHouse;
var content11:ticketBooth;
var content12:mudBog;
var content13:pavilion;
var content14:jrMotocross;
var content15:washArea;
//*****====================================================*****
function over(event:MouseEvent):void{
        switch(event.currentTarget.name){
    	  case"btn_welcome":
		content1 = new welcome();
			addChild(content1);
		content1.alpha = 0;
			var over1:TimelineMax = new TimelineMax();
				over1.insert(TweenMax.to(content1, .1, {scaleX:0, scaleY:0}));
				over1.append(TweenMax.to(content1, .5, {scaleX:1, scaleY:1, alpha:1}));
		setChildIndex(menu,numChildren - 1);
         break;

	  case"btn_dragStrip":
   		content2 = new dragStrip();
			addChild(content2);
		content2.alpha = 0;
			var over2:TimelineMax = new TimelineMax();
				over2.insert(TweenMax.to(content2, .1, {scaleX:0, scaleY:0}));
				over2.append(TweenMax.to(content2, .5, {scaleX:1, scaleY:1, alpha:1}));
		setChildIndex(menu,numChildren - 1);
   	  break;

	  case"btn_motocross":
   		content3 = new motocross();
			addChild(content3);
		content3.alpha = 0;
			var over3:TimelineMax = new TimelineMax();
				over3.insert(TweenMax.to(content3, .1, {scaleX:0, scaleY:0}));
				over3.append(TweenMax.to(content3, .5, {scaleX:1, scaleY:1, alpha:1}));
		setChildIndex(menu,numChildren - 1);
   	  break;

	  case"btn_rvCamping":
   		content4 = new rvCamping();
			addChild(content4);
		content4.alpha = 0;
			var over4:TimelineMax = new TimelineMax();
				over4.insert(TweenMax.to(content4, .1, {scaleX:0, scaleY:0}));
				over4.append(TweenMax.to(content4, .5, {scaleX:1, scaleY:1, alpha:1}));
		setChildIndex(menu,numChildren - 1);
   	  break;

	  case"btn_tentCamping":
   		content5 = new tentCamping();
			addChild(content5);
		content5.alpha = 0;
			var over5:TimelineMax = new TimelineMax();
				over5.insert(TweenMax.to(content5, .1, {scaleX:0, scaleY:0}));
				over5.append(TweenMax.to(content5, .5, {scaleX:1, scaleY:1, alpha:1}));
		setChildIndex(menu,numChildren - 1);
   	  break;

	  case"btn_mudOval":
   		content6 = new mudOval();
			addChild(content6);
		content6.alpha = 0;
			var over6:TimelineMax = new TimelineMax();
				over6.insert(TweenMax.to(content6, .1, {scaleX:0, scaleY:0}));
				over6.append(TweenMax.to(content6, .5, {scaleX:1, scaleY:1, alpha:1}));
		setChildIndex(menu,numChildren - 1);
   	  break;

	  case"btn_oval_dirtTrack":
   		content7 = new oval_dirtTrack();
			addChild(content7);
		content7.alpha = 0;
			var over7:TimelineMax = new TimelineMax();
				over7.insert(TweenMax.to(content7, .1, {scaleX:0, scaleY:0}));
				over7.append(TweenMax.to(content7, .5, {scaleX:1, scaleY:1, alpha:1}));
		setChildIndex(menu,numChildren - 1);
   	  break;

	  case"btn_zipLine":
   		content8 = new zipLine();
			addChild(content8);
		content8.alpha = 0;
			var over8:TimelineMax = new TimelineMax();
				over8.insert(TweenMax.to(content8, .1, {scaleX:0, scaleY:0}));
				over8.append(TweenMax.to(content8, .5, {scaleX:1, scaleY:1, alpha:1}));
		setChildIndex(menu,numChildren - 1);
   	  break;

	  case"btn_topWorld":
   		content9 = new topWorld();
			addChild(content9);
		content9.alpha = 0;
			var over9:TimelineMax = new TimelineMax();
				over9.insert(TweenMax.to(content9, .1, {scaleX:0, scaleY:0}));
				over9.append(TweenMax.to(content9, .5, {scaleX:1, scaleY:1, alpha:1}));
		setChildIndex(menu,numChildren - 1);
   	  break;

	  case"btn_bathHouse":
   		content10 = new bathHouse();
			addChild(content10);
		content10.alpha = 0;
			var over10:TimelineMax = new TimelineMax();
				over10.insert(TweenMax.to(content10, .1, {scaleX:0, scaleY:0}));
				over10.append(TweenMax.to(content10, .5, {scaleX:1, scaleY:1, alpha:1}));
		setChildIndex(menu,numChildren - 1);
   	  break;

	  case"btn_ticketBooth":
   		content11 = new ticketBooth();
			addChild(content11);
		content11.alpha = 0;
			var over11:TimelineMax = new TimelineMax();
				over11.insert(TweenMax.to(content11, .1, {scaleX:0, scaleY:0}));
				over11.append(TweenMax.to(content11, .5, {scaleX:1, scaleY:1, alpha:1}));
		setChildIndex(menu,numChildren - 1);
   	  break;

	  case"btn_mudBog":
   		content12 = new mudBog();
			addChild(content12);
		content12.alpha = 0;
			var over12:TimelineMax = new TimelineMax();
				over12.insert(TweenMax.to(content12, .1, {scaleX:0, scaleY:0}));
				over12.append(TweenMax.to(content12, .5, {scaleX:1, scaleY:1, alpha:1}));
		setChildIndex(menu,numChildren - 1);
   	  break;

	  case"btn_pavilion":
   		content13 = new pavilion();
			addChild(content13);
		content13.alpha = 0;
			var over13:TimelineMax = new TimelineMax();
				over13.insert(TweenMax.to(content13, .1, {scaleX:0, scaleY:0}));
				over13.append(TweenMax.to(content13, .5, {scaleX:1, scaleY:1, alpha:1}));
		setChildIndex(menu,numChildren - 1);
   	  break;

	  case"btn_jrMotocross":
   		content14 = new jrMotocross();
			addChild(content14);
		content14.alpha = 0;
			var over14:TimelineMax = new TimelineMax();
				over14.insert(TweenMax.to(content14, .1, {scaleX:0, scaleY:0}));
				over14.append(TweenMax.to(content14, .5, {scaleX:1, scaleY:1, alpha:1}));
		setChildIndex(menu,numChildren - 1);
   	  break;

	  case"btn_washArea":
   		content15 = new washArea();
			addChild(content15);
		content15.alpha = 0;
			var over15:TimelineMax = new TimelineMax();
				over15.insert(TweenMax.to(content15, .1, {scaleX:0, scaleY:0}));
				over15.append(TweenMax.to(content15, .5, {scaleX:1, scaleY:1, alpha:1}));
		setChildIndex(menu,numChildren - 1);
   	  break;
}
}
//*****====================================================*****
function onFinish(clip:DisplayObject):void {
   clip.parent.removeChild(clip);
}
//*****====================================================*****
function out(event:MouseEvent):void{
        switch(event.currentTarget.name){
    	  case"btn_welcome":
   		TweenMax.to(content1,  .5, {alpha:0, onComplete:onFinish,onCompleteParams:[welcome]});
         break;
	  case"btn_dragStrip":
   		TweenMax.to(content2,  1, {alpha:0, onComplete:onFinish,onCompleteParams:[dragStrip]});
   	  break;
	  case"btn_motocross":
   		TweenMax.to(content3,  .5, {alpha:0, onComplete:onFinish,onCompleteParams:[motocross]});
   	  break;
	  case"btn_rvCamping":
   		TweenMax.to(content4,  .5, {alpha:0, onComplete:onFinish,onCompleteParams:[rvCamping]});
   	  break;
	  case"btn_tentCamping":
   		TweenMax.to(content5,  .5, {alpha:0, onComplete:onFinish,onCompleteParams:[tentCamping]});
   	  break;
	  case"btn_mudOval":
   		TweenMax.to(content6,  .5, {alpha:0, onComplete:onFinish,onCompleteParams:[mudOval]});
   	  break;
	  case"btn_oval_dirtTrack":
   		TweenMax.to(content7,  .5, {alpha:0, onComplete:onFinish,onCompleteParams:[oval_dirtTrack]});
   	  break;
	  case"btn_zipLine":
   		TweenMax.to(content8,  .5, {alpha:0, onComplete:onFinish,onCompleteParams:[zipLine]});
   	  break;
	  case"btn_topWorld":
   		TweenMax.to(content9,  .5, {alpha:0, onComplete:onFinish,onCompleteParams:[topWorld]});
   	  break;
	  case"btn_bathHouse":
   		TweenMax.to(content10,  .5, {alpha:0, onComplete:onFinish,onCompleteParams:[bathHouse]});
   	  break;
	  case"btn_ticketBooth":
   		TweenMax.to(content11,  .5, {alpha:0, onComplete:onFinish,onCompleteParams:[ticketBooth]});
   	  break;
	  case"btn_mudBog":
   		TweenMax.to(content12,  .5, {alpha:0, onComplete:onFinish,onCompleteParams:[mudBog]});
   	  break;
	  case"btn_pavilion":
   		TweenMax.to(content13,  .5, {alpha:0, onComplete:onFinish,onCompleteParams:[pavilion]});
   	  break;
	  case"btn_jrMotocross":
   		TweenMax.to(content14,  .5, {alpha:0, onComplete:onFinish,onCompleteParams:[jrMotocross]});
   	  break;
	  case"btn_washArea":
   		TweenMax.to(content15,  .5, {alpha:0, onComplete:onFinish,onCompleteParams:[washArea]});
  	   	  break;

}
}

[GreenSock]

Sorry, unfortunately I don't have time to personally look through all this. Maybe someone else will, though (I hope so).

 

One piece of advice: when I'm trying to figure something out, I'll always try to isolate it as much as possible. So try creating a separate FLA that only has the absolute bare essentials to recreate the problem. Strip out every conceivable thing and start building it up until it breaks. Then you can backtrack and see exactly what's causing the problem.

 

Good luck!

[chefkeifer]

Thanks Jack...