7 Replies Latest reply: Sep 12, 2009 12:48 PM by Ned Murphy RSS

    alpha fade on mouse over

    k.loy Community Member

      I want to make a button that fades out the "up state" and fades in the "over state" on the mouse over.

      Then when the mouse is taken away, I want it to fade back to the "up state"

      I'm not concerned with the MouseClick state at this point.

       

      Can you do this with a button symbol? I know you can change visual but I haven't figure out how to fade alpha in button mode.

       

      Is there a way to do this in the timeline or simple actionscript?

        • 1. Re: alpha fade on mouse over
          Ned Murphy CommunityMVP

          To do the fade using the timeline you would need to either use a movieclip as a button or use movieclips with the fades for each state of the button.

           

          To do it with actionscript you would use the Tween class (or a third party tweening class such as TweenLite).  I would use this approach over a timeline approach because it allows you to have the over/out transition pick up from where it is rather than starting from one state to end in another... make for cleaner operation when you mouse out before the mouseover completes.

          • 2. Re: alpha fade on mouse over
            k.loy Community Member

            Thanks for you response. I did use the timeline to create the tweens.

            Though I need to get the MOUSE_OVER and MOUSE_OUT to work.

             

             

            I also attached a screen shot of the timeline.

            Basically I created the fade in and fade out tweens and am using frame labels.

            I wrote this code and it doesn't work.

             

            stop();

             

            stage.addEventListener(MouseEvent.MOUSE_OVER, fading);

             

            function fading(event:MouseEvent):void
            {
                gotoAndPlay("over");
            }

             

            stage.addEventListener(MouseEvent.MOUSE_OUT, fading);

             

            function fading(event:MouseEvent):void
            {
                gotoAndPlay("out");
            }

            • 3. Re: alpha fade on mouse over
              k.loy Community Member

              This is the error I get--

               

              Location:

              Scene=Scene 1, layer=actions, frame =1, line 5

               

              Description

              The class or interface 'MouseEvent' could not be loaded.

               

              Source

              function fading(event:MouseEvent)void

              • 4. Re: alpha fade on mouse over
                Ned Murphy CommunityMVP

                Your code has me a little confused.  First, you are applying the event listeners to the stage, where you need them to be applied to the button mc's.  Second, you are duplicating functions... you have two functions named "fading" and that is not allowable... think about it... if you were an event listener, which one would you know to use?  Third, you are commanding the timeline to advance, and not necessarily the button mc's, though if that code you are showing in on that timeline you show in the image, then that might explain some of what's wrong.

                 

                Unless the sole purpose of this swf is to be a button mc, where the stage is the button, what you should do is have that code on the main timeline, not within the movieclip timeline.  Give the button an instance name and assign the event listeners to the button mc rather than the stage.  And the event handlers should tell the button to move along its timeline.

                 

                As far as the error about the MouseEvent goes, chck your publish settings to make sure you are set up for AS3.

                • 5. Re: alpha fade on mouse over
                  k.loy Community Member

                  Actually, the entire swf will be the button, so that's why I used stage.

                  I get what you are saying about the function names.  So I renamed them.

                  But it still doesn't work.  I get the same errors for the function lines.

                   

                  Also tried something different for the function line, but it still doesn't work.

                  Both functions are shown here.

                   

                  --------------------

                  stop();

                   


                  stage.addEventListener(MouseEvent.MOUSE_OVER, fadeOver);

                   

                  function fadeOver(event:MouseEvent):void
                  {
                      gotoAndPlay("over");
                  }

                   

                  stage.addEventListener(MouseEvent.MOUSE_OUT, fadeOut);

                   

                  function fadeOut(event:MouseEvent):void
                  {
                      gotoAndPlay("out")

                   

                  -----------

                  I've also tried doing it this way. Not sure what what the difference is

                  ---------

                  stop();

                   

                  stage.addEventListener(MouseEvent.MOUSE_OVER, fadeOver);

                   

                  function fadeOver(evtObj:MouseEvent){
    gotoAndPlay("over");
}

                   

                  stage.addEventListener(MouseEvent.MOUSE_OUT, fadeOut);

                   

                  function fadeOut(evtObj:MouseEvent){
    gotoAndPlay("out");
}

                  • 6. Re: alpha fade on mouse over
                    k.loy Community Member

                    it's now clear that is has something to do with the function

                    • 7. Re: alpha fade on mouse over
                      Ned Murphy CommunityMVP

                      If you are still getting the MouseEvent error, I still say you probably do not have the Publish Settings properly set.  If you were getting an AS3 error message it would have a number indicating the type of error, but it seems you are not getting that type of message... and if it is not recognizing MouseEvent, that's also a good indicator that you aren't set for using AS3.  Check the Flash section of your publish settings and make sure you are set up to be using AS3.