AS3 Putting Buttons Inside Movie Clip

[adobechr]

I am practicing AS3 (after years of AS2) and am having trouble having a button inside a movie clip talk to another movie clip on the main timeline. Here is the code:

OneButton.addEventListener(MouseEvent.CLICK, OneButtonClicked);

function OneButtonClicked(event:MouseEvent):void

{

MovieTarget.gotoAndStop(1);

MovieDescription.gotoAndStop("One");

}

TwoButton.addEventListener(MouseEvent.CLICK, TwoButtonClicked);

function TwoButtonClicked(event:MouseEvent):void

{

MovieTarget.gotoAndStop(2);

MovieDescription.gotoAndStop("Two");

}

The code above works, but if I put OneButton and TwoButton inside a movie clip, I know longer can target MovieTarget and MovieDescription. The reason I want to put OneButton and TwoButton inside it's own MC is so I can dim each button after it is clicked by toggling the playhead inside that MC. Help? Thanks!

[RamezAbiad]

Hi,

You have to target first the movieclip you put the 2 buttons in for example master_mc.oneButton.addEventListener.... master_mc.twoButton.addEventListener....

you can use one function for both buttons for example :

master_mc.OneButton.addEventListener(MouseEvent.CLICK, buttonClicked);

master_mc.OneButton.addEventListener(MouseEvent.CLICK, buttonClicked);

function buttonClicked(event:MouseEvent):void

{

     if ( event.target.name == "master_mc.oneButton")

     {

         MovieTarget.gotoAndStop(1);

         MovieDescription.gotoAndStop("One");

      }

if ( event.target.name == "master_mc.twoButton")

     {

        MovieTarget.gotoAndStop(2);

        MovieDescription.gotoAndStop("Two");

      }

}

[adobechr]

Thanks, Ramaz.

Going one step at a time, I got the buttons at least working inside of a MC:

AllButtons.OneButton.addEventListener(MouseEvent.CLICK, OneButtonClicked);

function OneButtonClicked(event:MouseEvent):void

{

MovieTarget.gotoAndStop(1);

MovieDescription.gotoAndStop("One");

}

AllButtons.TwoButton.addEventListener(MouseEvent.CLICK, TwoButtonClicked);

function TwoButtonClicked(event:MouseEvent):void

{

MovieTarget.gotoAndStop(2);

MovieDescription.gotoAndStop("Two");

}

Now I would like to toggle the OneButton and TwoButton back and forth (i.e. the OneButton would be grayed out when clicked and TwoButton active and ready to click / and visa versa). This was the reason I wanted those buttons to be inside a MC so I could control that. In AS2, I would make two different frames with one button clickable, the other a graphic (grayed out) and toggle it back and forth with a frame label. There a more elegant way in AS3? Thanks!.

[RamezAbiad]

Hi,

you can start of by making your button in a movieClip called button for instance.  You design it the way you want ( I would make two different frames with one button clickable, the other a  graphic (grayed out) and toggle it back and forth with a frame label) and then you drag it twice to stage and give it instance names.  Like that those 2 buttons inherited all the designs and functionality of the parent which is button.  Like that you dont have to put them in a movieClip to control both; you just control the parent one and the instances will inherit those properties and functionality.

[adobechr]

OK. Looks like I have the addressing right for a button inside a movie clip controlling a movie clip on the main timeline. The next step is to toggle the clickability of those buttons inside of my movie clip "AllButtons". Trouble is, in the first frame of that movie clip, I only have one button clickable "TwoButton", and I made what was "OneButton" a non-button graphic and grayed out.

I did the reverse of this on frame 2 of the "AllButton" movie clip. When I run the movie, I get a "#1009: Cannot access a property or method of a null object reference" error. Obviously Flash doesn't like an eventlistener to something that isn't there on frame 1? How do I fix?

Here is the current code:

AllButtons.OneButton.addEventListener(MouseEvent.CLICK, OneButtonClicked);

function OneButtonClicked(event:MouseEvent):void

{

MovieTarget.gotoAndStop(1);

MovieDescription.gotoAndStop("One");

}

AllButtons.TwoButton.addEventListener(MouseEvent.CLICK, TwoButtonClicked);

function TwoButtonClicked(event:MouseEvent):void

{

MovieTarget.gotoAndStop(2);

MovieDescription.gotoAndStop("Two");

}

[RamezAbiad · Accepted solution]

Start over from the begining

press  f8 and chose movieClip then draw your untoggled button call the movie button then create another movie and create your toggled button or greyed out button and call it greyedButton.  Go to main stage add 2 button instances and 2 greyedButton instances( just drag from library).  you have 4 instances on stage.  give call instance names and place one them on top of each other so u can only see 2 buttons on stage.  put the greyed button under the button.

now with action script

button1.addEventListener(MouseEvent.CLICK, OneButtonClicked);

function OneButtonClicked(event:MouseEvent):void

{

MovieTarget.gotoAndStop(1);

MovieDescription.gotoAndStop("One");

button1.visible = false; //  here the greyed button will show

}

button2.addEventListener(MouseEvent.CLICK, TwoButtonClicked);

function TwoButtonClicked(event:MouseEvent):void

{

MovieTarget.gotoAndStop(2);

MovieDescription.gotoAndStop("Two");

button1.visible = true; // here button1 will go back to its orignal state

button2.visible = false // here the greyed button will show

}

[adobechr]

Works like a charm, my friend. Thanks, Ramez!

[RamezAbiad]

your most welcome and you

ps : if you want the hand curser to show use  button1.buttonMode = true;

[adobechr]

If I wanted the hand cursor to appear over the invisible button?

Secondly, all this code works perfectly. But you mentioned before I can consolodate some of this code (sharing functions?). Is that worth it? I have heard over and over how AS3 is "less" coding than AS2. I just coded the way I would in AS2 using the AS3. Is there a more elegant / powerful way to do this same thing?

Code:

//Code for the 1 Button:

OneButton.addEventListener(MouseEvent.CLICK, OneButtonClicked);

function OneButtonClicked(event:MouseEvent):void

{

MovieTarget.gotoAndStop("OneClicked");

OneButton.visible=false;

TwoButton.visible=true;

Close.visible=true;

}

//Code for the 2 Button:

TwoButton.addEventListener(MouseEvent.CLICK, TwoButtonClicked);

function TwoButtonClicked(event:MouseEvent):void

{

MovieTarget.gotoAndStop("TwoClicked");

OneButton.visible=true;

TwoButton.visible=false;

Close.visible=true;

}

//Code for the Close Button:

Close.visible=false

Close.addEventListener(MouseEvent.CLICK, CloseClicked);

function CloseClicked(event:MouseEvent):void

{

MovieTarget.gotoAndStop("NoneClicked");

OneButton.visible=true;

TwoButton.visible=true;

Close.visible=false;

}

[RamezAbiad]

where ever you want I was just telling that there is this property for movieClips/