11 Replies Latest reply: Mar 21, 2012 10:50 AM by kglad RSS

    Tween the icon you are over to its normal state

    nikolaig Community Member

      I have this snippet of code I've been running successfuly on my image buttons grouped into one MC.

      It applies changes to the buttons I am not rolling over, i.e. if I were to roll over a button the rest of the buttons in the group would dim and blur and etc, but not the button I am over.

      All worked fine until I decided to group buttons one more time.

      With my limited knowledge of AS3 I was able to put all the actions to the buttons except into making the button I am over to stay the way it is.

      In my understanding the problem is in the line:

       

      //  target = tween the icon you are over to its normal state

        TweenMax.to(e.target, .5, {alpha: 1, blurFilter:{blurX:0, blurY:0}, colorMatrixFilter:{colorize:0x000000, amount:0, brightness:1.25, saturation:1}, ease:Sine.easeOut});

      }

       

      particularly in properly specifiying e.target

      I tried a few variations but nothing seemed to work.

       

      What would be a proper code to go two levels deep into an MC?

       

      Below is my full code:

       

      IMGS_COLLAGE.buttonMode=true;

      IMGS_COLLAGE.useHandCursor = true;

      IMGS_COLLAGE.imgORIGINAL_collage.addEventListener(MouseEvent.MOUSE_OVER, navOver);

      IMGS_COLLAGE.imgORIGINAL_collage.addEventListener(MouseEvent.MOUSE_OUT, navOut);

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

       

      function navOver(e:MouseEvent):void

      {

                //loop through all icons

                for (var i in IMGS_COLLAGE.imgORIGINAL_collage)

                          {

                          //tween out all icons

                          TweenMax.to(IMGS_COLLAGE.imgORIGINAL_collage[i], .2, {alpha:.85, blurFilter:{blurX:11, blurY:11}, colorMatrixFilter:{colorize:0x000000, amount:0.25, brightness:0.65, saturation:0.7}, ease:Sine.easeOut});

                          }

                          //                                target = tween the icon you are over to its normal state

                          TweenMax.to(e.target, .5, {alpha: 1, blurFilter:{blurX:0, blurY:0}, colorMatrixFilter:{colorize:0x000000, amount:0, brightness:1.25, saturation:1}, ease:Sine.easeOut});

      }

       

       

       

       

      function navOut(e:MouseEvent):void

      {

                for (var i in IMGS_COLLAGE.imgORIGINAL_collage)

                          {

                          //tween out all icons to a normal state

                          TweenMax.to(IMGS_COLLAGE.imgORIGINAL_collage[i], .5, {alpha: 1, blurFilter:{blurX:0, blurY:0}, colorMatrixFilter:{colorize:0x000000, amount:0, brightness:1, saturation:1}, ease:Sine.easeOut});

                          }

      }

        • 1. Re: Tween the icon you are over to its normal state
          kglad CommunityMVP

          you must have listeners on each icon or use a hittestobject when a parent listener function executes.

          • 2. Re: Tween the icon you are over to its normal state
            nikolaig Community Member

            If I understand you correctly by adding event listeners to each individual button I will have to extend the coding task by manifold, as each individual button will need to be coded?

            Is it possible to fix my problem and keep the code to the original few lines or there is something inherently erroneous in its?

             

            I tried a google search for "hittestobject when a parent listener function executes"  but it did not seem to return with results applicable to my problem...

             

            Is it possible for you to provide a code sample of how it should work in my case?

            • 3. Re: Tween the icon you are over to its normal state
              kglad CommunityMVP

              what are the objects you want to tween?

               

              currently, in your code you're tweening objects in IMGS_COLLAGE.imgORIGINAL_collage which is a variable of unknown (to me) type and contents.

              • 4. Re: Tween the icon you are over to its normal state
                nikolaig Community Member

                the objects inside the IMGS_COLLAGE.imgORIGINAL_collage are jpeg based MCs which act like buttons once clicked. They also have TweenMax animation assigned to them.

                • 5. Re: Tween the icon you are over to its normal state
                  kglad CommunityMVP

                  if those mc's are the objects you want to blur in and out, use:

                   

                   

                   

                  function navOver(e:MouseEvent):void

                  {

                            //loop through all icons

                            for (var i in IMGS_COLLAGE.imgORIGINAL_collage)

                                      {

                                    if(IMGS_COLLAGE.imgORIGINAL_collage[i].hitTestPoint(mouseX,mouseY)){

                     TweenMax.to(IMGS_COLLAGE.imgORIGINAL_collage[i], .2, {alpha:.1, blurFilter:{blurX:0, blurY:0}, colorMatrixFilter:{colorize:0x000000, amount:0, brightness:1.25, saturation:1}, ease:Sine.easeOut});

                  } else {

                                      TweenMax.to(IMGS_COLLAGE.imgORIGINAL_collage[i], .2, {alpha:.85, blurFilter:{blurX:11, blurY:11}, colorMatrixFilter:{colorize:0x000000, amount:0.25, brightness:0.65, saturation:0.7}, ease:Sine.easeOut});

                  }

                                      }

                                  

                   

                  }

                  • 6. Re: Tween the icon you are over to its normal state
                    nikolaig Community Member

                    Thanks a lot, it works perfectly!

                    • 7. Re: Tween the icon you are over to its normal state
                      kglad CommunityMVP

                      you're welcome.

                      • 8. Re: Tween the icon you are over to its normal state
                        nikolaig Community Member

                        P.S.

                        While further working on the project I realised that sinse there are two img collages with the same navOver and navOut setting I should use one line of code.

                        Both of those images collages are located inside the IMGS_COLLAGE so I thought of deleting imgORIGINAL_collage out of IMGS_COLLAGE.imgORIGINAL_collage but it did not work.

                        So now I have two identical blocks of code for two image collages. Is there a way to unify them since both of them are located in IMGS_COLLAGE mc?

                        Here is how the code looks now:

                         

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

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

                        IMGS_COLLAGE.buttonMode=true;

                        IMGS_COLLAGE.useHandCursor = true;

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

                         

                         

                        IMGS_COLLAGE.imgORIGINAL_collage.addEventListener(MouseEvent.MOUSE_OVER, navOver_ORIGINAL);

                        IMGS_COLLAGE.imgORIGINAL_collage.addEventListener(MouseEvent.MOUSE_OUT, navOut_ORIGINAL);

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

                         

                         

                        //set up a vars object to hold all the properties of the icons in normal state

                        //since we use these properties twice it makes sense to define them only once

                        var normalVarsIMGS_COLLAGE_ORIGINAL:Object = new Object();

                        normalVarsIMGS_COLLAGE_ORIGINAL={colorMatrixFilter:{colorize:0x000000, amount:0, brightness:1, saturation:1}, ease:Sine.easeOut};

                         

                         

                         

                         

                        function navOver_ORIGINAL(e:MouseEvent):void

                        {

                                  //loop through all icons

                                  for (var i in IMGS_COLLAGE.imgORIGINAL_collage)

                                            {

                                            if(IMGS_COLLAGE.imgORIGINAL_collage[i].hitTestPoint(mouseX, mouseY)){

                                            //target = tween the icon you are over to its normal state

                                            TweenMax.to(IMGS_COLLAGE.imgORIGINAL_collage[i], .5, normalVarsIMGS_COLLAGE_ORIGINAL);

                                            }else{

                                            TweenMax.to(IMGS_COLLAGE.imgORIGINAL_collage[i], .2, {colorMatrixFilter:{colorize:0x000000, amount:.15, brightness:0.85, saturation:0.45}, ease:Sine.easeOut});

                                                      }

                                            }

                        }

                         

                         

                        function navOut_ORIGINAL(e:MouseEvent):void

                        {

                                  for (var i in IMGS_COLLAGE.imgORIGINAL_collage)

                                            {

                                            //tween out all icons to a normal state

                                            TweenMax.to(IMGS_COLLAGE.imgORIGINAL_collage[i], .5, normalVarsIMGS_COLLAGE_ORIGINAL);

                                            }

                        }

                         

                         

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

                         

                         

                        IMGS_COLLAGE.imgPNP_collage.addEventListener(MouseEvent.MOUSE_OVER, navOver_PNP);

                        IMGS_COLLAGE.imgPNP_collage.addEventListener(MouseEvent.MOUSE_OUT, navOut_PNP);

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

                         

                         

                        //set up a vars object to hold all the properties of the icons in normal state

                        //since we use these properties twice it makes sense to define them only once

                        var normalVarsIMGS_COLLAGE_PNP:Object = new Object();

                        normalVarsIMGS_COLLAGE_PNP={colorMatrixFilter:{colorize:0x000000, amount:0, brightness:1, saturation:1}, ease:Sine.easeOut};

                         

                         

                         

                         

                        function navOver_PNP(e:MouseEvent):void

                        {

                                  //loop through all icons

                                  for (var i in IMGS_COLLAGE.imgPNP_collage)

                                            {

                                            if(IMGS_COLLAGE.imgPNP_collage[i].hitTestPoint(mouseX, mouseY)){

                                            //target = tween the icon you are over to its normal state

                                            TweenMax.to(IMGS_COLLAGE.imgPNP_collage[i], .5, normalVarsIMGS_COLLAGE_PNP);

                                            }else{

                                            TweenMax.to(IMGS_COLLAGE.imgPNP_collage[i], .2, {colorMatrixFilter:{colorize:0x000000, amount:.15, brightness:0.85, saturation:0.45}, ease:Sine.easeOut});

                                                      }

                                            }

                        }

                         

                         

                        function navOut_PNP(e:MouseEvent):void

                        {

                                  for (var i in IMGS_COLLAGE.imgPNP_collage)

                                            {

                                            //tween out all icons to a normal state

                                            TweenMax.to(IMGS_COLLAGE.imgPNP_collage[i], .5, normalVarsIMGS_COLLAGE_PNP);

                                            }

                        }

                        • 9. Re: Tween the icon you are over to its normal state
                          kglad CommunityMVP

                          what class type is IMGS_COLLAGE.imgORIGINAL_collage?

                          • 10. Re: Tween the icon you are over to its normal state
                            nikolaig Community Member

                            they are all MCs.

                            grouped into other MCs for easier code referencing.

                            • 11. Re: Tween the icon you are over to its normal state
                              kglad CommunityMVP

                              then use:

                               

                               

                               

                              function navOver(e:MouseEvent):void

                              {

                              var mc:MovieClip = MovieClip(e.currentTarget);

                                        //loop through all icons

                                        for (var i:int=0;i<mc.numChildren;i++)

                                                  {

                               

                               

                                                if(mc.getChildAt(i).hitTestPoint(mouseX,mouseY)){

                                 TweenMax.to(mc.getChildAt(i), .2, {alpha:.1, blurFilter:{blurX:0, blurY:0}, colorMatrixFilter:{colorize:0x000000, amount:0, brightness:1.25, saturation:1}, ease:Sine.easeOut});

                              } else {

                                                  TweenMax.to(mc.getChildAt(i), .2, {alpha:.85, blurFilter:{blurX:11, blurY:11}, colorMatrixFilter:{colorize:0x000000, amount:0.25, brightness:0.65, saturation:0.7}, ease:Sine.easeOut});

                              }

                                                  }

                                              

                               

                              }