7 Replies Latest reply on Feb 18, 2014 11:28 PM by SuhasYogin

    How to make a picture a radio button?

    Megan Louise 96

      I am trying to create a drag and drop game using Adobe Flash, AS3. I have a 'select gender' page where I have both a male a female model. I want users to be able to select either the male or female image but then a next button in order to take to the following page; however the following page varies depending on what gender is selected.

       

      Am I able to do this or would I need to change the images to radio buttons or just remove the next button so the images are buttons?

       

      Please help with my dilema?!

      select gender.png

        • 1. Re: How to make a picture a radio button?
          moccamaximum Level 5

          for your Models to be interactive you have to convert them to Sprites/MovieClips

          //Right-click each to achieve that

          then in the properties window give them names

          //maleModel rsp femaleModel

           

          then make a separate layer on your timeline,

          name it "AS" and write in the Actions Window:

           

          maleModel.addEventListener(MouseEvent.CLICK, maleHandler);

          function maleHandler(e:MouseEvent):void{

               //do male stuff

          }

           

          accordingly with the femaleModel

           

          femaleModel.addEventListener(MouseEvent.CLICK, femaleHandler);

          function femaleHandler(e:MouseEvent):void{

               //do female stuff

          }

          • 2. Re: How to make a picture a radio button?
            Megan Louise 96 Level 1

            Thanks for your response.

             

            I have added the lines of code which you kindly provided; however am unsure how to code the 'next button' so the appropriate page is displayed depending on which gender option is selected.

             

            For example, if the female model is selected followed by the next button, I would like the page containing the female model to be provided.

             

            Are you also able to inform me as to whether I have inserted the code in the correct place?

            megs print screen.png

            Many Thanks

            • 3. Re: How to make a picture a radio button?
              moccamaximum Level 5

              however am unsure how to code the 'next button' so the appropriate page is displayed depending on which gender option is selected

              I am guessing with page you mean another url with another embedded shockwave file?

              use navigateToURL to achive this:

              http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/net/package.html# navigateToURL%28%29

               

              whether I have inserted the code in the correct place

              functions don`t belong inside the constructor, so insert the both handler function after the closing bracket of

              Main(){...}

              //handlers here

              • 4. Re: How to make a picture a radio button?
                Megan Louise 96 Level 1

                Sorry I don't think I have explained myself very well.

                 

                What I am trying to do is enable people to highlight either the male or female model on the 'select gender' page and then click the 'next' button. My pages are movie clip files so when the 'next' button is selected, i wanted it to load the relevant page (e.g. if the femaleFashionModel is highlighted and the 'next' button is selected, I would like the femaleDragAndDropTopsPage to load; but if the maleFashionModel is highlighted followed by the 'next' button being selected, I would like the maleDragAndDropTopsPage to load). I was therefore wondering if this was possible as the page loaded when the 'next' button is selected varies according to which gender has been highlighted.

                 

                I hope this makes more sense.

                 

                Thank you very much for your time

                • 5. Re: How to make a picture a radio button?
                  moccamaximum Level 5

                  in this case:

                   

                  function maleHandler(e:MouseEvent):void{

                       //do male stuff

                      var mPage:MaleDragAndDropTopsPage = new MaleDragAndDropTopsPage();

                      addChild(mPage);

                  }

                   

                  if you absolutely must have a nextButton, you can either go for two different instances of the Button which you call

                  maleButton or femaleButton and attach the handlers to these

                   

                  when clicking on the male/femaleFigure

                  you will somehow have to store their state in a dynamic property or variable (which ever ypu prefer).

                   

                  so at the beginning

                   

                  maleModel.clicked = false;

                  femaleModel.clicked = false;

                   

                  both will need an extra clickHandler that sets their clicked properties.

                   

                  The much easier and imo more userfriendly way would be to use the figures as buttons themselves.

                  • 6. Re: How to make a picture a radio button?
                    Megan Louise 96 Level 1

                    Okay Thank you very much for all your help.

                    • 7. Re: How to make a picture a radio button?
                      SuhasYogin Adobe Employee

                      Moved this thread from Flash Pro FAQ sub-forum to Flash Pro - General sub-forum.