movie clip buttons losing buttonmode?

[idlehands]

Hi everyone,

Great forum! Excellent information and amazingly generous people full of knowledge. I'm another web designer who's dipping the toes into the land of AS3 and struggling a bit. I'm having an issue using movieclips as buttons and I hope you fine people may be able to help.

Basically I have an up and active state, and when the visitor clicks on a button and navigates that section of the site, I want the button to remain highlighted. In the AS2 days I would use gotoAndStop to jump to a frame labeled that area of the site. It worked fine, but using the same technique in AS3 causes an issue with buttons no longer activating as buttons.

Below is a brief example of my simple code. When the gotoAndStop jumps to the new section, I do replace the the up movie clip (such as people_mc in the example below) with another movie clip (such as peopleACTIVE_mc).

In this case if I had four buttons and clicked on the second button, the gotoAndStop would run as expected but the first button would no longer be an active button. If I hit the third button, then the first and second button are no longer active. And so on. What's odd is every button above the button being hit, such as button four, would still be recognized as a button.

I hope this makes sense. Sadly, above is my brief explanation. Should have seen the other one. Thanks in advance for any help!


stop();
people_mc.addEventListener(MouseEvent.CLICK, onClick_people);
places_mc.addEventListener(MouseEvent.CLICK, onClick_places);

function onClick_people(event:MouseEvent):void
{
gotoAndStop("people");

}

function onClick_places(event:MouseEvent):void
{
gotoAndStop("places");

}

people_mc.buttonMode = true;
places_mc.buttonMode = true;

[henke37]

Check that they are the same instance before and after jumping.

[caseyctg]

I made two buttons. Each going to a different frame on the main timeline using frame labels. Then, inside the Movie Clip of the button, I made a Up and Over frame label, each on a different frame within that clip.

stop();
people_mc.addEventListener(MouseEvent.CLICK, onClick_people);
places_mc.addEventListener(MouseEvent.CLICK, onClick_places);
people_mc.addEventListener(MouseEvent.MOUSE_OVER, onOver_people);
places_mc.addEventListener(MouseEvent.MOUSE_OVER, onOver_places);

places_mc.addEventListener(MouseEvent.MOUSE_OUT, onOut_places);

people_mc.buttonMode = true;
places_mc.buttonMode = true;

var PlacesTrue:Boolean = false;
var PeopleTrue:Boolean = true;
people_mc.gotoAndStop("Over");

function onClick_people(event:MouseEvent):void
{
    people_mc.removeEventListener(MouseEvent.MOUSE_OUT, onOut_people);
    places_mc.addEventListener(MouseEvent.MOUSE_OUT, onOut_places);

    gotoAndStop("people");
    places_mc.buttonMode = false;
    people_mc.gotoAndStop("Over");
    PeopleTrue = true;
    PlacesTrue = false;

    if(PeopleTrue==true){
        people_mc.gotoAndStop("Over");
    }else
    {
        people_mc.gotoAndStop("Up");
    }
    
    places_mc.gotoAndStop("Up");
}

function onClick_places(event:MouseEvent):void
{
    
    places_mc.removeEventListener(MouseEvent.MOUSE_OUT, onOut_places);
    people_mc.addEventListener(MouseEvent.MOUSE_OUT, onOut_people);

    gotoAndStop("places");
    people_mc.buttonMode = false;
    places_mc.gotoAndStop("Over");
    PeopleTrue = false;
    PlacesTrue = true;

    if(PlacesTrue==true){
        places_mc.gotoAndStop("Over");
    }else
    {
        places_mc.gotoAndStop("Up");
    }
    
    people_mc.gotoAndStop("Up");

}

function onOver_people(event:MouseEvent):void
{
    people_mc.gotoAndStop("Over");
    people_mc.addEventListener(MouseEvent.MOUSE_OUT, onOut_people);
}

function onOver_places(event:MouseEvent):void
{

    places_mc.addEventListener(MouseEvent.MOUSE_OUT, onOut_places);
    places_mc.gotoAndStop("Over");

}


function onOut_people(event:MouseEvent):void
{
        people_mc.gotoAndStop("Up");
        
        if(PeopleTrue==true)
        {
            people_mc.gotoAndStop("Over");
        }
}

function onOut_places(event:MouseEvent):void
{
        places_mc.gotoAndStop("Up");
        
        if(PlacesTrue==true)
        {
            places_mc.gotoAndStop("Over");
        }
}

I realize, there is probably a simpler way using a switch statement probably for each button. But hey, this works, and I think you will understand it. I added Boolean (True or False) values to set the state when clicking the button. Then added some over and out event Listeners. Depending on what button you clicked, it sets it true or false. Now you could create one function too to turn all buttons on the Up state.

[idlehands]

Thanks Casey,

This will probably work, but a bit scarey that there needs to be this much code for two buttons. The site I'm working on has eight. This was as simple as two lines of code in AS2. Kinda makes one go nutty something so simple and common seems to be so complicated.

[runtime]

Originally Posted by idlehands

Thanks Casey,

This was as simple as two lines of code in AS2.

You can still do a button just as little code as AS2 in AS3. Agreed AS3 has far more methods to get used to but that just means their are more options to play with

[caseyctg]

I agree. I am sure there is a simpler way. I was hoping a guru would come along and show me up.

I am sure using a switch statement would probably make things easier.

switch (ButtonLanding){

case "People":
gotoAndStop("people")
break;

case "Places":
gotoAndStop("places")
break;

case "Contact":
gotoAndStop("contact")
break;

}

[el_bob]

as a default, if you use "_up" and "_over" and "_down" as frame names and put a "stop();" on the first frame for the movieclips you want to use as buttons, the flash player will set them to automatically work like buttons so you don't have to set your own MOUSE_OVER and MOUSE_OUT listeners on a parent timeline (for basic on/off/down, for other functionality you need to add those listeners). generally i put

stop();
this.buttonMode = true;

with _up and _over frame names, and i never get an issue with buttonMode screwing up.

you can also set a variable on the button timeline 1st frame and use that.

so the button looks like

stop();
this.buttonMode = true;
var toGoTo = 'people'

(assuming this is the people_mc, places_mc would define its own instance of toGoTo as 'places', and on and on)

and the main timeline looks like

stop();
people_mc.addEventListener(MouseEvent.CLICK, clickHandler);
places_mc.addEventListener(MouseEvent.CLICK, clickHandler);

function clickHandler(e:MouseEvent):void {
	this.gotoAndStop(e.target.toGoTo);
}

not a ton of code.