CS4 button not staying in down state

[teachmeflash]

Good day, I am extremely new to flash and am attempting (the impossible I think) to teach myself. I am trying to design an interaction for online learning (using AS3.0) where there are 4 characters. You can then click on each character in any order and little thought bubbles pop up with more information. I have managed to get it to work, however when you click the next character, the first character you clicked reverts back to the 'up' state. I used buttons to create this. So what I want to happen is to click on the first 'button', have it change from black (up state) to orange (down state), and when I click on the next 'button', for the first one to stay orange and not revert to black again.

Any help would be much appreciated!

[Gogafem]

We need to see the code in order to be able to help. This way we can't do much.

[teachmeflash]

Sorry about that. Basically I have 5 frames. Frame 1 has my initial page with the 4 buttons. I have the following code on it:

myButton1.addEventListener(MouseEvent.CLICK,button Clicked);

function buttonClicked(event:MouseEvent):void
{
gotoAndStop(2);
}


myButton2.addEventListener(MouseEvent.CLICK,button Clicked2);

function buttonClicked2(event:MouseEvent):void
{
gotoAndStop(3);
}

myButton3.addEventListener(MouseEvent.CLICK,button Clicked3);

function buttonClicked3(event:MouseEvent):void
{
gotoAndStop(4);
}

myButton4.addEventListener(MouseEvent.CLICK,button Clicked4);

function buttonClicked4(event:MouseEvent):void
{
gotoAndStop(5);
}

stop();

Then fram 2-4 has the different pop ups when you click on each relevant button.

Frame 2 script:
myButton10.addEventListener(MouseEvent.CLICK,butto nClicked5);

function buttonClicked5(event:MouseEvent):void
{
gotoAndStop(3);
}


myButton11.addEventListener(MouseEvent.CLICK,butto nClicked6);

function buttonClicked6(event:MouseEvent):void
{
gotoAndStop(4);
}

myButton12.addEventListener(MouseEvent.CLICK,butto nClicked7);

function buttonClicked7(event:MouseEvent):void
{
gotoAndStop(5);
}


stop();

Frame 3 script:

myButton13.addEventListener(MouseEvent.CLICK,butto nClicked8);

function buttonClicked8(event:MouseEvent):void
{
gotoAndStop(2);
}


myButton14.addEventListener(MouseEvent.CLICK,butto nClicked9);

function buttonClicked9(event:MouseEvent):void
{
gotoAndStop(4);
}

myButton15.addEventListener(MouseEvent.CLICK,butto nClicked10);

function buttonClicked10(event:MouseEvent):void
{
gotoAndStop(5);
}


stop();

Frame 4 script:

myButton16.addEventListener(MouseEvent.CLICK,butto nClicked11);

function buttonClicked11(event:MouseEvent):void
{
gotoAndStop(2);
}


myButton17.addEventListener(MouseEvent.CLICK,butto nClicked12);

function buttonClicked12(event:MouseEvent):void
{
gotoAndStop(3);
}

myButton18.addEventListener(MouseEvent.CLICK,butto nClicked13);

function buttonClicked13(event:MouseEvent):void
{
gotoAndStop(5);
}


stop();

Frame 5 script:

myButton20.addEventListener(MouseEvent.CLICK,butto nClicked14);

function buttonClicked14(event:MouseEvent):void
{
gotoAndStop(2);
}


myButton21.addEventListener(MouseEvent.CLICK,butto nClicked15);

function buttonClicked15(event:MouseEvent):void
{
gotoAndStop(3);
}

myButton22.addEventListener(MouseEvent.CLICK,butto nClicked16);

function buttonClicked16(event:MouseEvent):void
{
gotoAndStop(4);
}


stop();

I am sure there must be an easier way...but I am still very new to flash :-(

[Gogafem]

No worries :)...
Yes, there is an easier way. I think you should do this with 1 frame. Make those info bubbles(Which should be MovieClips) invisible/visible when you click on the buttons. Now you could place all of these in an array, but since you are a beginner and there are only 4 items, there isn't much need. Place all of them on the stage at their right locations and give them instance names. Start from scratch with stop(); in the code. Next make a function like this:

function changeBubbles():void
{
    nameOfBubble1.visible = false;
    nameOfBubble2.visible = false;
    nameOfBubble3.visible = false;
    nameOfBubble4.visible = false;
}

What this function does is turn all bubbles invisible.
The next thing you should do is call this function like this:

changeBubbles();

Now if you want a bubble to be visible from the start write this:

nameOfBubble1.visible = true;

This would make bubble1 visible.

Now add mouse click listeners to every button and make the button functions look like this:

function nameOfHandlerForButtonX(event:MouseEvent):void
{
    changeBubbles();
    nameOfBubbleX.visible = true;
}

X should be the number of the button/bubble.
So what this will do is first turn all buttons invisible and then turn the button you want the user to see visible.
This should work, but if you still have any problems, please don't hesitate to ask.

[Gogafem]

Oh and for the down state of the buttons... I don't think you can do that with Button symbols, as they are pre-programmed for you with such properties. When the user releases the mouse they go to up/regular state. This could be solved by writing you own button class, but that requires a lot more Actionscript 3.0 knowledge, as well as OOP.
What I would recommend is that you make your buttons with MovieClip symbols.
Add event listeners for mouse over, mouse out, mouse down and mouse up and then use gotoAndStop() to change the frames. On mouse up you should use: gotoAndStop(frameYouWantItToStayOn). But, when you keep activating more buttons all the previous ones will stay that way, so you will have to use buttonNumberX.gotoAndStop(regularFrame) for every other button.

[teachmeflash]

That is great!! It works like a charm.

For the buttons, I've gone into each button's timeline and put the following script:

stop();

mybutton4.addEventListener(MouseEvent.CLICK,button Clicked);

function buttonClicked(event:MouseEvent):void
{
gotoAndStop(2);
}


So now when you go back to the main timeline and you click on the first button, it changes colour and shows the relevant bubble. When you click on the next one, the first one stays orange and the next one also turns orange and shows the relevant bubble, which is exactly perfect!

My last question (on this scenario) would be how to do the scripting for mouse over so you can see the colour change when you hover over it?

[Gogafem]

Great that it worked ^^...
As for the mouse inside/outside testing...
You could use hitTestPoint(mouseX, mouseY, true) with an if... But for you I would recommend adding MouseEvent.MOUSE_OVER and MouseEvent.MOUSE_OUT listeners. MOUSE_OVER activates when your mouse goes inside the button and MOUSE_OUT activates when it goes outside.

[teachmeflash]

Ok, I think I am being extremely blond, but have looked everywhere and just not finding the solution. I've put the following code:

stop();

mybutton1.addEventListener(MouseEvent.CLICK, myButtonClick);
mybutton1.addEventListener(MouseEvent.ROLL_OVER, myButtonRollover);
mybutton1.addEventListener(MouseEvent.ROLL_OUT, myButtonRollout);


function myButtonClick(ev:MouseEvent):void
{
gotoAndStop(2);
}

function myButtonRollover(ev:MouseEvent):void
{
gotoAndPlay(2)
}

function myButtonRollout(ev:MouseEvent):void
{
gotoAndPlay(1)
}

Now what happens is the rollover works perfectly, and rollout works perfectly, but once I click it it doesn't stay orange anymore :-(

[Gogafem]

Well, that is because when you roll out it will go to frame 1. So you need to make an extra variable. Initialize a variable like so:

var clicked:Boolean = false;

Next make the click function like this:

function myButtonClick(ev:MouseEvent):void
{
    gotoAndStop(2);
    clicked = true;
}

And now for the rollout function:

function myButtonRollout(ev:MouseEvent):void
{
    if (!clicked)
    {
        gotoAndPlay(1);
    }
}

'!' means not, so it's kind of like writing "click == false" there. This should fix the problem.

[Gogafem]

Oh and when you don't want it to stay orange anymore... Just make clicked false again.

[teachmeflash]

Ok, I've done the script exactly as per your instructions, but it still doesn't stay orange after I've clicked it :-( I've added hand cursors though which are very cool :-)

stop();

//Add Handcursor so it behaves like a button
mybutton1.buttonMode = true;
mybutton1.useHandCursor = true; 

var clicked:Boolean = false;

mybutton1.addEventListener(MouseEvent.CLICK,buttonClicked);
mybutton1.addEventListener(MouseEvent.ROLL_OVER,buttonRollover);
mybutton1.addEventListener(MouseEvent.ROLL_OUT,buttonRollout);


function buttonClicked(event:MouseEvent):void
{
    gotoAndStop(2);
    clicked = true;
}

function buttonRollover(event:MouseEvent):void
{
    gotoAndPlay(2)
}

function buttonRollout(event:MouseEvent):void
{
    if(!clicked)
    {
        gotoAndPlay(1);
    }
}

Any thoughts?

[Gogafem]

Oh, it's because you used gotoAndPlay. You should use gotoAndStop, since gotoAndPlay goes to a frame and plays the animation from there on. Sorry, my mistake in my earlier post.

[teachmeflash]

I've changed the scripting to:

function buttonRollout(event:MouseEvent):void
{
    if(!clicked)
    {
        gotoAndStop(1);
    }
}

But it still does the rollover, but doesn't stay orange once you've clicked it :-(

[Gogafem]

Hmm, I'm going to try the code myself later... And when I have a working version I'll post it on here.

[Gogafem]

http://www.mediafire.com/?bnn2dvgjncc12sg Here's my version... Isn't that how you want it to work? PS: It's a CS5.5 file.

[teachmeflash]

Hiya, I tried to download and it gives me 'unexpected file format' error. I only have CS4 :-( Are you able to save in a lower version?

Seriously thank you though for all your help with this!!!!!

[Gogafem]

No prob. Here's a CS4 version:
http://www.mediafire.com/?eiz2t1ttycbaebz

[teachmeflash]

Hiya, yes, that is exactly what I want it to do!! I've compared the scripting and it's exactly the same now. But one your's it works fine, and on mine when you roll over the button with your mouse, it turns orange and stays orange...it doesn't go black when you roll out again :-( I am pulling my hair out! The setup is the same as well, except mine are movieclips with instance names where you don't specify the names.....

[Gogafem]

Well, if you use code in an objects timeline then you shouldn't specify its instance name, since the code you write refers to all instances of that MovieClip. You could use an instance name in your code if for example you have other objects inside that MovieClip or if you want to refer to another object that's not in that MovieClip... Anyway, I am not sure what else could be wrong with your version... If you could upload it so that I can take a look?

[Gogafem]

I've changed the scripting to:

function buttonRollout(event:MouseEvent):void
{
    if(!clicked)
    {
        gotoAndStop(1);
    }
}

But it still does the rollover, but doesn't stay orange once you've clicked it :-(

I think I found the problem! You said you changed that line from gotoAndPlay to gotoAndStop. But, did you change it in the other function?

function buttonRollover(event:MouseEvent):void
{
    gotoAndPlay(2);
}

I saw it like this in your previous post and you didn't say you changed that one, so try changing it to:

function buttonRollover(event:MouseEvent):void
{
    gotoAndStop(2);
}

That should work...