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?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

blue-genieCommented:
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
Jakob_ECommented:
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Adobe Flash

From novice to tech pro — start learning today.