9 Replies Latest reply: May 1, 2010 1:59 PM by RamezAbiad RSS

    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!

        • 1. Re: AS3 Putting Buttons Inside Movie Clip
          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");

                }

          }

          • 2. Re: AS3 Putting Buttons Inside Movie Clip
            adobechr Community Member

            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!.

            • 3. Re: AS3 Putting Buttons Inside Movie Clip
              RamezAbiad Community Member

              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.

              • 4. Re: AS3 Putting Buttons Inside Movie Clip
                adobechr Community Member

                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");

                }

                 

                • 5. Re: AS3 Putting Buttons Inside Movie Clip
                  RamezAbiad Community Member

                  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

                   

                  }

                  • 6. Re: AS3 Putting Buttons Inside Movie Clip
                    adobechr Community Member

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

                    • 7. Re: AS3 Putting Buttons Inside Movie Clip
                      RamezAbiad Community Member

                      your most welcome and you

                       

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

                      • 8. Re: AS3 Putting Buttons Inside Movie Clip
                        adobechr Community Member

                        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;

                        }

                        • 9. Re: AS3 Putting Buttons Inside Movie Clip
                          RamezAbiad Community Member

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