Actionscript 3 Movieclip and Mouse Events

I have a MovieClip that contains 3 nested movieClips serving as menu items.
I want each nested movieclip item to turn black when ROLLEDOVERr, white when ROLLED OUT and STAY GREEN WHEN CLICKED. I don't understand how to stop the ROLLOUT
//////////////////// MAIN MENU LISTENERS//////////////////
//MAIN MENU MOUSE EVENT LISTNERS
	for each (var item:* in mainMenuContainer) {
		item.addEventListener(MouseEvent.ROLL_OVER, handleMouseOver);
		item.addEventListener(MouseEvent.ROLL_OUT, handleMouseOut);
		item.addEventListener(MouseEvent.CLICK, mainMenuItemHandler);
		
	}
	//////////////MAIN MENU MOUSE FUNCTIONS
	function handleMouseOver(e:MouseEvent):void {
			e.currentTarget.transform.colorTransform=makeGrey;
	}
	function handleMouseOut(e:MouseEvent):void {
			e.currentTarget.transform.colorTransform=makeWhite;
	}
	function mainMenuItemHandler(e:MouseEvent):void {
		for each (var menuItem:* in mainMenuContainer) {
			menuItem.transform.colorTransform=makeWhite;
		}
		
		e.currentTarget.transform.colorTransform = c;
		//turns off all display items
		turnAllOff();
		changeMenuItemColor();
		if (e.currentTarget.name=="home") {
			introCopy.visible=true;
			homeImage.visible=true;
		}
		else if (e.currentTarget.name=="portfolio") {
			portfolioMenuContainer.visible=true;
			
			homeImage.visible=true;
			
			
		}
		else if (e.currentTarget.name=="contact") {
			homeImage.visible=true;
			contact.visible=true
		}
		
	}
	

///////////////////////////////	//////////

Open in new window

WillAyersAsked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
Jakob_EConnect With a Mentor Commented:
Hi Will,

If your menu items are MovieClips (dynamic class) you can add a selected
property to test if an item is selected (gray). Here is an example on how it
could be done - you would want to do most of this in loops ;)



// Color Transform
var ctBlack:ColorTransform=new ColorTransform(1,1,1,1,-255,-255,-255,0);
var ctWhite:ColorTransform=new ColorTransform(1,1,1,1,255,255,255,0);
var ctGray:ColorTransform=new ColorTransform(0,0,0,1,125,125,125,0);

// Create menu Items
// In this case we use a library Movieclip "ButtonMC"  
var item1:MovieClip=new ButtonMC();
var item2:MovieClip=new ButtonMC();
var item3:MovieClip=new ButtonMC();

// Add item namesitem1.name="Home";
item2.name="Portfolio";
item3.name="Contact";

// Position items
item1.x=20
item2.x=100
item3.x=180

// Add selected property
// Note! You can only add custom properties to MovieClips and hombrewn classes      
item1.selected=true;
item2.selected=false;
item3.selected=false;

// Initial color transformitem1.transform.colorTransform=ctGray;
item2.transform.colorTransform=ctWhite;
item3.transform.colorTransform=ctWhite;

// Add listeners
// Note! All color transforms are handled by the same function
item1.addEventListener(MouseEvent.ROLL_OVER,itemColorHandler,false,0,true);
item1.addEventListener(MouseEvent.ROLL_OUT,itemColorHandler,false,0,true);
item1.addEventListener(MouseEvent.CLICK,itemColorHandler,false,0,true);
item1.addEventListener(MouseEvent.CLICK,navigationHandler,false,0,true);

item2.addEventListener(MouseEvent.ROLL_OVER,itemColorHandler,false,0,true);
item2.addEventListener(MouseEvent.ROLL_OUT,itemColorHandler,false,0,true);
item2.addEventListener(MouseEvent.CLICK,itemColorHandler,false,0,true);
item2.addEventListener(MouseEvent.CLICK,navigationHandler,false,0,true);

item3.addEventListener(MouseEvent.ROLL_OVER,itemColorHandler,false,0,true);
item3.addEventListener(MouseEvent.ROLL_OUT,itemColorHandler,false,0,true);
item3.addEventListener(MouseEvent.CLICK,itemColorHandler,false,0,true);
item3.addEventListener(MouseEvent.CLICK,navigationHandler,false,0,true);

// Selected item
// This variable holds the current selected menu item  
var selecetdItem=item1;

// Assembly
//
addChild(item1);
addChild(item2);
addChild(item3);
// Item color handler
function itemColorHandler(e:MouseEvent):void {
    var tgt:MovieClip=e.currentTarget as MovieClip;
    // If correntTarget is selected - do nothing
    if (tgt.selected) { return; }

    // Select currentTraget if clicked
    tgt.selected=(e.type==MouseEvent.CLICK);

    // ColorTransform based on event type
    tgt.transform.colorTransform=(e.type==MouseEvent.ROLL_OVER)? ctBlack : (e.type==MouseEvent.ROLL_OUT) ? ctWhite : ctGray;

    // Deselect and colortransform selectedItem
    // and switch selectedItem to currentTarget
    if (e.type==MouseEvent.CLICK) {
        selecetdItem.selected=false
        selecetdItem.transform.colorTransform=ctWhite;
        selecetdItem=tgt;
    }
}

// Navigation handler - do your page layout here!
function navigationHandler(e:MouseEvent):void {
    var tgt:MovieClip=e.currentTarget as MovieClip;
    turnAllOff();
    switch (tgt.name.toLowerCase()) {
        case "home" :
            introCopy.visible=true;
            homeImage.visible=true;
            break;
        case "portfolio" :
            portfolioMenuContainer.visible=true;
            break;
        case "contact" :
            homeImage.visible=true;
            break;
    }
}




Best,
Jakob E




0
 
blue-genieConnect With a Mentor Commented:
hi there. if i understand correctly, if the item has been clicked you don't want the rollout to happen right?
so what you can do is set a variable  to see which button has been clicked

ie. var curClick:String;

when you do the click event set this variable to the name as per your current listener.

then in your rollOut listener check if the current event target is the same as the current clicked one if not then rollout.

(hope that makes sense)
0
All Courses

From novice to tech pro — start learning today.