2 Replies Latest reply: Dec 2, 2011 1:13 PM by iFlashAppsToo RSS

    Streamlining the code for the button group with individual links and rollover imgs

    nikolaig Community Member

      I am looking for a solution to streamline the code for the array of 20+  buttons located inside the scroll pane.

      I know I can make an array if all the buttons would have a unified code executable change, i.e. they would become larger and brighter.

      My problem is that each button represents an product image in the lights off stage, then of rollover it is a lights on stage so I have to import two images in the on and off stage and play around with the opacity.

      Additional problem is that each button has to ling to a different label.

       

      My question is: is it possible to unify the code if buttons have that much individuality or I have to make each one of them as in the example below.

       

       

      // makes a hand cursor appear over a mc acting as a button for all the buttons inside the scrollpnaeBckgrnd_mc.scrollpaneBckgrnd_btns_mc.

      MovieClip(mc_pane2.content).scrollpaneBckgrnd_mc.scrollpaneBckgrnd_btns_mc.buttonMode = true;

      MovieClip(mc_pane2.content).scrollpaneBckgrnd_mc.scrollpaneBckgrnd_btns_mc.useHandCursor = true;

       

       

      ///////////////INDIVIDUAL BUTTONS

       

       

       

       

                MovieClip(mc_pane2.content).scrollpaneBckgrnd_mc.scrollpaneBckgrnd_btns_mc.FloraLyte _btn.FloraLyte_ON.alpha = 0;

                          var  FloraLyte_btn_Tween:TweenLite = TweenLite.to(MovieClip(mc_pane2.content).scrollpaneBckgrnd_mc.scrollpaneBckgrnd_btns_mc.F loraLyte_btn.FloraLyte_ON, .5, {alpha:1, paused:true});

              

                          MovieClip(mc_pane2.content).scrollpaneBckgrnd_mc.scrollpaneBckgrnd_btns_mc.Flor aLyte_btn.addEventListener(MouseEvent.ROLL_OVER, overHandler_FloraLyte_btn);

                          MovieClip(mc_pane2.content).scrollpaneBckgrnd_mc.scrollpaneBckgrnd_btns_mc.Flor aLyte_btn.addEventListener(MouseEvent.ROLL_OUT, outHandler_FloraLyte_btn);

       

              MovieClip(mc_pane2.content).scrollpaneBckgrnd_mc.scrollpaneBckgrnd_btns_mc.FloraLyte_btn. addEventListener(MouseEvent.CLICK, onClick_floralytePopUp);

       

                        function onClick_floralytePopUp(event:MouseEvent) :void {

                                              gotoAndPlay("floralytepp");

       

                           }

       

       

              

           

      function overHandler_FloraLyte_btn(e:MouseEvent):void{

               FloraLyte_btn_Tween.play();

               trace("you rolled over me");

               }

              

      function outHandler_FloraLyte_btn(e:MouseEvent):void{

               FloraLyte_btn_Tween.reverse();

               trace("you rolled off me");

               }

       

       

       

       

      //////////////////////////

       

       

       

       

      MovieClip(mc_pane2.content).scrollpaneBckgrnd_mc.scrollpaneBckgrnd_btns_mc.FloraLytell_btn .FloraLytell_ON.alpha = 0;

                          var  myTween:TweenLite = TweenLite.to(MovieClip(mc_pane2.content).scrollpaneBckgrnd_mc.scrollpaneBckgrnd_btns_mc.F loraLytell_btn.FloraLytell_ON, .5, {alpha:1, paused:true});

              

                          MovieClip(mc_pane2.content).scrollpaneBckgrnd_mc.scrollpaneBckgrnd_btns_mc.Flor aLytell_btn.addEventListener(MouseEvent.ROLL_OVER, overHandler);

                          MovieClip(mc_pane2.content).scrollpaneBckgrnd_mc.scrollpaneBckgrnd_btns_mc.Flor aLytell_btn.addEventListener(MouseEvent.ROLL_OUT, outHandler);

       

              MovieClip(mc_pane2.content).scrollpaneBckgrnd_mc.scrollpaneBckgrnd_btns_mc.FloraLytell_bt n.addEventListener(MouseEvent.CLICK, onClick_floralytellPopUp);

       

                        function onClick_floralytellPopUp(event:MouseEvent) :void {

                                              gotoAndPlay("floralyte2pp");

       

                           }

                          

                          

                function overHandler(e:MouseEvent):void{

               myTween.play();

               trace("you rolled over me");

               }

              

                function outHandler(e:MouseEvent):void{

               myTween.reverse();

               trace("you rolled off me");

               }

       

       

      ////////////////////////////////////////////////////////////////////////////////////////// /////////////////////

        • 1. Re: Streamlining the code for the button group with individual links and rollover imgs
          Ned Murphy CommunityMVP

          If you are creating button symbols (meaning these are SimpleButton class objects) then there are limitations to what you can do with them since they are not dynamic objects like MovieClip symbols.  If you make your buttons as MovieClip symbols then you can assign different properties to them to help make it more possible to streamline your code.  In any case, anything that is unique to a given object has to be dealt into that object in som form of unique way, whether it is by using code to dynamically define it or by manually manipulating the object.

           

          Based on seeing some measure of repetition in your code, it is likely you can do some things using generic functions for event handlers.  Just as an example, if you were to name your buttons the same as the link they go to, you could share the same onClick event handler function for all the buttons as long as they all call a gotoAndPlay() function.

           

          So if you want to streamline your code, you need to think of ways in which to make the code generic as much as possible, and where specific data is needed to differentiate each one, then you need to have some provision to define/extract that unique data.

          • 2. Re: Streamlining the code for the button group with individual links and rollover imgs
            iFlashAppsToo Community Member

            as ned suggested, plan your flow and code into it. here is one example:

             

            //---

             

            var buttonArray = [someButton, someOtherButton, aDifferentButton];

             

            for(var i = 0; i < buttonArray.length; i++){

             

                 //get reference to county movieclip

                 var mc = buttonArray[i];

             

                 //then add listeners

                 mc.addEventListener(MouseEvent.ROLL_OVER, overMe);

             

            }

             

            //

             

            function overMe(e:MouseEvent){

             

                 var mc = e.target;

             

                 switch(mc){

                      case: someButton:

                               someOtherButton:   doThis();

                                                             break;

                      case: aDifferentButton:     doThat();

                                                             break;

                      default:                            //do nothing;

                                                             break;

                 }

             

            }

             

            function doThis(){

                 trace("do this")

            }

             

            function doThat(){

                 trace("do that")

            }