13 Replies Latest reply on Dec 30, 2015 1:31 AM by nezarov

    Interactive Graphic - Trying to use rollovers in Flash

    SarahCreative Level 1

      Hi All,

       

      I am working on an interactive graphic for a client.  She wants a pie chart with 8 slices and options 1-10 for each piece.  The user will click 1-10 for each slice and it will stay highlighted.  This is a kind of "Wheel of Life" self help tool. 

       

      PieExample.jpg

       

      I started in Edge and now have moved to Flash so I could easily import my pie slices in from Illustrator.  I have each piece set up as buttons and have the rollover states in place.  My problem is that they do not stay on the clicked state after clicking them.  Is there a way to keep the click state active?  Should I be making a piece a movie clip perhaps and using EventListeners instead?  I am rusty on Flash and any help or advice would be greatly appreciated, thank you!

        • 1. Re: Interactive Graphic - Trying to use rollovers in Flash
          nezarov Level 4

          Yes you have to use movie clips instead of buttons, then you can create the highlight key frame and stop on it. As you'll need to disable the clicked mc use: mcName.enabled = false; mcName.mouseEnabled = false;

           

          for example let's say the frame 1 is the movie clip up state and frame 2 is the highlight state:

          // put all the btns in array:

          var btnsArray: Array = [mc1, mc2, mc3, mc4, mc5, mc6, mc7, mc8, mc9, mc10];

          // Add the event listeners:

          for(var i:int = 0; i< btnsArray.length; i++)

          {

          btnsArray[i].gotoAndStop(1);

          btnsArray[i].buttonMode = true;

          btnsArray[i].addEventListener(MouseEvent.MOUSE_OVER, onOver);

          btnsArray[i].addEventListener(MouseEvent.MOUSE_OUT, onOut);

          btnsArray[i].addEventListener(MouseEvent.CLICK, onClick);

          }

           

          function onOver(e:MouseEvent):void

          {

          e.target.gotoAndStop(2);

          }

           

          function onOut(e:MouseEvent):void

          {

          e.target.gotoAndStop(1);

          }

           

          function onClick(e:MouseEvent):void

          {

          // reset all the buttons to up state:

          for(var i:int = 0; i< btnsArray.length; i++)

          {

          btnsArray[i].enabled = btnsArray[i].mouseEnabled = btnsArray[i].buttonMode = true;

          btnsArray[i].gotoAndStop(1);

          }

          // disable and highlight the clicked button:

          e.target.enabled = e.target.mouseEnabled  = e.target.buttonMode = false;

          e.target.gotoAndStop(2);

          }

          • 2. Re: Interactive Graphic - Trying to use rollovers in Flash
            SarahCreative Level 1

            Thanks so much, I will try this. 

            • 3. Re: Interactive Graphic - Trying to use rollovers in Flash
              nezarov Level 4

              you can use the following click function:

               

              function onClick(e:MouseEvent):void

              {

              for(var i:int = 0; i< btnsArray.length; i++)

                  {

                      btnsArray[i].selected = false;

                      e.currentTarget.selected = true

                     

                      if(btnsArray[i].selected ==true)

                      {

                          btnsArray[i].removeEventListener(MouseEvent.MOUSE_OUT, onOut);

                          btnsArray[i].enabled = btnsArray[i].mouseEnabled = btnsArray[i].buttonMode = false;

                          //btnsArray[i].gotoAndStop(2);

                      }

                      else

                      {

                          btnsArray[i].addEventListener(MouseEvent.MOUSE_OUT, onOut);

                          btnsArray[i].gotoAndStop(1);

                          btnsArray[i].enabled = btnsArray[i].mouseEnabled = btnsArray[i].buttonMode = true;

                      }

                  }

              }

              • 4. Re: Interactive Graphic - Trying to use rollovers in Flash
                SarahCreative Level 1

                Oh my goodness, this is so good.  I can't thank you enough.  It's working great. 

                • 5. Re: Interactive Graphic - Trying to use rollovers in Flash
                  SarahCreative Level 1

                  My problem now is the mouseout and click states competing with each other. 

                   

                  I have uploaded what I have so far - only the wedge pieces 9 and 10 on the far left are active.  http://womtestfile.businesscatalyst.com/index.html

                   

                  After the user clicks the piece it does not stay active because of the mouseout.  I am thinking I could use the numbers and make separate action scripts just for them for the rollovers.  Any suggestions?  Would the second piece of code provided above solve that?  I played around with it, but wasn't as successful as with the first suggestion.

                   

                  Thanks so much.  I've been scouring the web and trying this and that, so don't want anyone to think I'm looking for the easy way out by asking for help.

                  • 6. Re: Interactive Graphic - Trying to use rollovers in Flash
                    nezarov Level 4

                    Thank you too and you're welcome.

                    • 7. Re: Interactive Graphic - Trying to use rollovers in Flash
                      nezarov Level 4

                      Sorry I didn't see your last reply..

                      You can remove the MOUSE_OUT event listener as I suggested in the third reply:

                       

                      function onClick(e:MouseEvent):void

                      {

                      for(var i:int = 0; i< btnsArray.length; i++)

                          {

                              btnsArray[i].selected = false;

                              e.currentTarget.selected = true

                             

                              if(btnsArray[i].selected ==true)

                              {

                                  btnsArray[i].removeEventListener(MouseEvent.MOUSE_OUT, onOut);

                                  btnsArray[i].enabled = btnsArray[i].mouseEnabled = btnsArray[i].buttonMode = false;

                                  //btnsArray[i].gotoAndStop(2);

                              }

                              else

                              {

                                  btnsArray[i].addEventListener(MouseEvent.MOUSE_OUT, onOut);

                                  btnsArray[i].gotoAndStop(1);

                                  btnsArray[i].enabled = btnsArray[i].mouseEnabled = btnsArray[i].buttonMode = true;

                              }

                          }

                      }

                      • 8. Re: Interactive Graphic - Trying to use rollovers in Flash
                        SarahCreative Level 1

                        Apologies!  I didn't realize your reply #3 was already foreseeing this problem.  I will give it a shot.  Thanks so much for your time. I will let you know.

                        • 9. Re: Interactive Graphic - Trying to use rollovers in Flash
                          SarahCreative Level 1

                          Thank you.  This worked.  My double click no longer works though.  I have tried a few things but nothing is working.  This is what I have so far.  I would like the double click to go back to Frame 1.  Is there a limit here on how many times to ask for help?  I don't want to take up your time.  I've been trying since yesterday and nothing is working.  Thanks!

                           

                           

                          var btnsArray: Array = [p110,p109,p108,p107,p106,p105,p104,p103,p102,p101];

                           

                           

                          for(var i:int = 0; i< btnsArray.length; i++)

                          {

                          btnsArray[i].gotoAndStop(1);

                          btnsArray[i].buttonMode = true;

                          btnsArray[i].doubleClickEnabled=true;

                          btnsArray[i].addEventListener(MouseEvent.MOUSE_OVER, onOver);

                          btnsArray[i].addEventListener(MouseEvent.MOUSE_OUT, onOut);

                          btnsArray[i].addEventListener(MouseEvent.CLICK, onClick);

                          btnsArray[i].addEventListener(MouseEvent.DOUBLE_CLICK, doubleClick);

                          }

                           

                          function onOver(e:MouseEvent):void

                          {

                          e.target.gotoAndStop(2);

                          }

                           

                          function onOut(e:MouseEvent):void

                          {

                          e.target.gotoAndStop(1);

                          }

                           

                           

                          function onClick(e:MouseEvent):void

                          {

                          e.target.gotoAndStop(3);

                           

                          {

                           

                          for(var i:int = 0; i< btnsArray.length; i++)

                           

                              {

                           

                                  btnsArray[i].selected = false;

                                  e.currentTarget.selected = true

                           

                           

                                  if(btnsArray[i].selected ==true)

                           

                                  {

                           

                                      btnsArray[i].removeEventListener(MouseEvent.MOUSE_OUT, onOut);

                                      btnsArray[i].enabled = btnsArray[i].mouseEnabled = btnsArray[i].buttonMode = false;

                                      //btnsArray[i].gotoAndStop(2);

                           

                                  }

                           

                                  else

                           

                                  {

                           

                                      btnsArray[i].addEventListener(MouseEvent.MOUSE_OUT, onOut);

                                      btnsArray[i].gotoAndStop(1);

                                      btnsArray[i].enabled = btnsArray[i].mouseEnabled = btnsArray[i].buttonMode = true;

                           

                                  }

                              }

                          }

                          }

                           

                          function doubleClick(e:MouseEvent):void

                          {

                          e.target.gotoAndStop(1);

                          }

                          • 10. Re: Interactive Graphic - Trying to use rollovers in Flash
                            nezarov Level 4

                            Remove the double click event listener and use the following click function:

                             

                            function onClick(e: MouseEvent): void {

                                if (e.target.selected == true) {

                                    e.target.selected = false;

                                    e.target.addEventListener(MouseEvent.MOUSE_OUT, onOut);

                                    e.target.gotoAndStop(1);

                                } else {

                                    for (var i: int = 0; i < btnsArray.length; i++) {

                                        btnsArray[i].selected = false;

                                        e.target.selected = true;

                             

                                        if (btnsArray[i].selected == true) {

                                            btnsArray[i].removeEventListener(MouseEvent.MOUSE_OUT, onOut);

                                            //btnsArray[i].enabled = btnsArray[i].mouseEnabled = btnsArray[i].buttonMode = false;

                                            btnsArray[i].gotoAndStop(2);

                                        } else {

                                            btnsArray[i].addEventListener(MouseEvent.MOUSE_OUT, onOut);

                                            btnsArray[i].gotoAndStop(1);

                                            //btnsArray[i].selected = false;

                                            //btnsArray[i].enabled = btnsArray[i].mouseEnabled = btnsArray[i].buttonMode = true;

                                        }

                                    }

                                }

                            }

                            • 11. Re: Interactive Graphic - Trying to use rollovers in Flash
                              SarahCreative Level 1

                              Very good, I will try this!  Thank you!

                              • 12. Re: Interactive Graphic - Trying to use rollovers in Flash
                                SarahCreative Level 1

                                I did not try it until today and I had to change one command to go to Frame 2 and it is working great!  Thank you! Thank you!