6 Replies Latest reply on Jan 12, 2011 8:14 PM by Declan.

    Fade in Fade out code.

    Declan.

      Hey guys,

       

      I made an earlier post which has been answered and everything works perfectly, but now i need a hand getting my images to fade in and fade out via code. I have 12 different images on 1 layer (bad thing i know but i dont know how to fix this).

       

      My images pop up when they go over the respective button.

       

      How can i get the image to fade from 0 opacity to 100 in about 1.5 - 2 seconds? and then fade out again upon moving the mouse off of the button?

       

      I have had a look at alot of different tutorials but none have helped me with the code, they have all been with keyframes. i cant use keyframes due to everything being on the one layer. also i think the code will be a bit easier for me to understand.

       

      Any help would be greatly appreciated. Thanks.

        • 1. Re: Fade in Fade out code.
          kglad Adobe Community Professional & MVP

          you can use the Tween() class to fade displayobjects.  check that class for your version of actionscript.

          1 person found this helpful
          • 2. Re: Fade in Fade out code.
            Declan. Level 1

            Hey,

             

            Thanks for that, i got everything working perfectly. I have text that pops up when i click on the button and as soon as the mouse rolls off the button, both the image and the text go away.

             

            Now i am experiencing a problem that for the first time on all of my buttons that i roll over them, the image gets stuck about .2 seconds into its fade and about 20% opacity. if i roll off and roll back on again it works perfectly. i have tried to fix this but i cannot find the source of the problem, it is not major, i would just like to give the client a bug free Flash application

            • 3. Re: Fade in Fade out code.
              KitClairvoyance

              Are you creating your tween object within a function? If so, the garbage collector will snap it up at some arbitrary point after the function has completed, halting the tween. (:

              1 person found this helpful
              • 4. Re: Fade in Fade out code.
                Declan. Level 1

                yes, this is my code.

                 

                image1.visible = false;
                image2.visible = false;
                image3.visible = false;
                image4.visible = false;
                image5.visible = false;
                image6.visible = false;
                image7.visible = false;
                image8.visible = false;
                image9.visible = false;
                image10.visible = false;
                image11.visible = false;
                text1.visible = false;
                text2.visible = false;
                //text3.visible = false;
                //text4.visible = false;
                //text5.visible = false;
                //text6.visible = false;
                //text7.visible = false;
                //text8.visible = false;
                //text9.visible = false;
                //text10.visible = false;
                //text11.visible = false;

                 

                import fl.transitions.Tween;
                import fl.transitions.easing.*;

                 

                //ADMIN BUILDING
                btn1.addEventListener(MouseEvent.ROLL_OVER, showimage1); btn1.addEventListener(MouseEvent.ROLL_OUT, hideimage1); btn1.addEventListener(MouseEvent.ROLL_OUT, hidetext1); btn1.addEventListener(MouseEvent.CLICK, showtext1);

                function showimage1(evt:MouseEvent):void {
                     var myTweenAlpha:Tween = new Tween(image1, "alpha", Strong.easeOut, 0, 1, 1, true);
                     image1.visible = true;
                }

                 

                function showtext1(event:MouseEvent) :void{
                    text1.visible = true;
                }

                function hideimage1(evt:MouseEvent):void {
                     image1.visible = false;
                }

                 

                function hidetext1(event:MouseEvent) :void {
                    text1.visible = false;
                }

                 

                //DBLOCK
                btn2.addEventListener(MouseEvent.ROLL_OVER, showimage2); btn2.addEventListener(MouseEvent.ROLL_OUT, hideimage2); btn2.addEventListener(MouseEvent.ROLL_OUT, hidetext2); btn2.addEventListener(MouseEvent.CLICK, showtext2);

                function showimage2(evt:MouseEvent):void {
                    var myTweenAlpha:Tween = new Tween(image2, "alpha", Strong.easeOut, 0, 1, 1, true);
                     image2.visible = true;
                }

                function hideimage2(evt:MouseEvent):void {
                     image2.visible = false;
                }

                 

                function showtext2(event:MouseEvent) :void{
                    text2.visible = true;
                }

                 

                function hidetext2(event:MouseEvent) :void {
                    text2.visible = false;
                }

                 

                //EATING AREA
                btn3.addEventListener(MouseEvent.ROLL_OVER, showimage3); btn3.addEventListener(MouseEvent.ROLL_OUT, hideimage3); //btn3.addEventListener(MouseEvent.ROLL_OUT, hidetext3); btn3.addEventListener(MouseEvent.CLICK, showtext3);

                function showimage3(evt:MouseEvent):void {
                    var myTweenAlpha:Tween = new Tween(image3, "alpha", Strong.easeOut, 0, 1, 1, true);
                     image3.visible = true;
                }

                function hideimage3(evt:MouseEvent):void {
                     image3.visible = false;
                }

                 

                /*function showtext3(event:MouseEvent) :void{
                    text3.visible = true;
                }

                 

                function hidetext3(event:MouseEvent) :void {
                    text3.visible = false;
                }*/

                 

                //ENVIRO AREA
                btn4.addEventListener(MouseEvent.ROLL_OVER, showimage4); btn4.addEventListener(MouseEvent.ROLL_OUT, hideimage4); //btn4.addEventListener(MouseEvent.ROLL_OUT, hidetext4); btn4.addEventListener(MouseEvent.CLICK, showtext4);

                function showimage4(evt:MouseEvent):void {
                    var myTweenAlpha:Tween = new Tween(image4, "alpha", Strong.easeOut, 0, 1, 1, true);
                     image4.visible = true;
                }

                function hideimage4(evt:MouseEvent):void {
                     image4.visible = false;
                }

                 

                /*function showtext4(event:MouseEvent) :void{
                    text4.visible = true;
                }

                 

                function hidetext4(event:MouseEvent) :void {
                    text4.visible = false;
                }*/

                 

                //GBLOCK
                btn5.addEventListener(MouseEvent.ROLL_OVER, showimage5); btn5.addEventListener(MouseEvent.ROLL_OUT, hideimage5); //btn5.addEventListener(MouseEvent.ROLL_OUT, hidetext5); btn5.addEventListener(MouseEvent.CLICK, showtext5);

                function showimage5(evt:MouseEvent):void {
                    var myTweenAlpha:Tween = new Tween(image5, "alpha", Strong.easeOut, 0, 1, 1, true);
                     image5.visible = true;
                }

                function hideimage5(evt:MouseEvent):void {
                     image5.visible = false;
                }

                 

                /*function showtext5(event:MouseEvent) :void{
                    text5.visible = true;
                }

                 

                function hidetext5(event:MouseEvent) :void {
                    text5.visible = false;
                }*/

                 

                //GROTTO
                btn6.addEventListener(MouseEvent.ROLL_OVER, showimage6); btn6.addEventListener(MouseEvent.ROLL_OUT, hideimage6); //btn6.addEventListener(MouseEvent.ROLL_OUT, hidetext6); btn6.addEventListener(MouseEvent.CLICK, showtext6);

                function showimage6(evt:MouseEvent):void {
                    var myTweenAlpha:Tween = new Tween(image6, "alpha", Strong.easeOut, 0, 1, 1, true);
                     image6.visible = true;
                }

                function hideimage6(evt:MouseEvent):void {
                     image6.visible = false;
                }

                 

                /*function showtext6(event:MouseEvent) :void{
                    text6.visible = true;
                }

                 

                function hidetext6(event:MouseEvent) :void {
                    text6.visible = false;
                }*/

                 

                //LIBRARY
                btn7.addEventListener(MouseEvent.ROLL_OVER, showimage7); btn7.addEventListener(MouseEvent.ROLL_OUT, hideimage7); //btn7.addEventListener(MouseEvent.ROLL_OUT, hidetext7); btn7.addEventListener(MouseEvent.CLICK, showtext7);

                function showimage7(evt:MouseEvent):void {
                    var myTweenAlpha:Tween = new Tween(image7, "alpha", Strong.easeOut, 0, 1, 1, true);
                     image7.visible = true;
                }

                function hideimage7(evt:MouseEvent):void {
                     image7.visible = false;
                }

                 

                /*function showtext7(event:MouseEvent) :void{
                    text7.visible = true;
                }

                 

                function hidetext7(event:MouseEvent) :void {
                    text7.visible = false;
                }*/

                 

                //OVAL
                btn8.addEventListener(MouseEvent.ROLL_OVER, showimage8); btn8.addEventListener(MouseEvent.ROLL_OUT, hideimage8); //btn8.addEventListener(MouseEvent.ROLL_OUT, hidetext8); btn8.addEventListener(MouseEvent.CLICK, showtext8);

                function showimage8(evt:MouseEvent):void {
                    var myTweenAlpha:Tween = new Tween(image8, "alpha", Strong.easeOut, 0, 1, 1, true);
                     image8.visible = true;
                }

                function hideimage8(evt:MouseEvent):void {
                     image8.visible = false;
                }

                 

                /*function showtext8(event:MouseEvent) :void{
                    text8.visible = true;
                }

                 

                function hidetext8(event:MouseEvent) :void {
                    text8.visible = false;
                }*/

                 

                //PREP
                btn9.addEventListener(MouseEvent.ROLL_OVER, showimage9); btn9.addEventListener(MouseEvent.ROLL_OUT, hideimage9); //btn9.addEventListener(MouseEvent.ROLL_OUT, hidetext9); btn9.addEventListener(MouseEvent.CLICK, showtext9);

                function showimage9(evt:MouseEvent):void {
                    var myTweenAlpha:Tween = new Tween(image9, "alpha", Strong.easeOut, 0, 1, 1, true);
                     image9.visible = true;
                }

                function hideimage9(evt:MouseEvent):void {
                     image9.visible = false;
                }

                 

                /*function showtext9(event:MouseEvent) :void{
                    text9.visible = true;
                }

                 

                function hidetext9(event:MouseEvent) :void {
                    tex92.visible = false;
                }*/

                 

                //TUCKSHOP
                btn10.addEventListener(MouseEvent.ROLL_OVER, showimage10); btn10.addEventListener(MouseEvent.ROLL_OUT, hideimage10); //btn10.addEventListener(MouseEvent.ROLL_OUT, hidetext10); btn10.addEventListener(MouseEvent.CLICK, showtext10);

                function showimage10(evt:MouseEvent):void {
                    var myTweenAlpha:Tween = new Tween(image10, "alpha", Strong.easeOut, 0, 1, 1, true);
                     image10.visible = true;
                }

                function hideimage10(evt:MouseEvent):void {
                     image10.visible = false;
                }

                 

                /*function showtext10(event:MouseEvent) :void{
                    text10.visible = true;
                }

                 

                function hidetext10(event:MouseEvent) :void {
                    text10.visible = false;
                }*/

                 

                //UNDERCOVER
                btn11.addEventListener(MouseEvent.ROLL_OVER, showimage11); btn11.addEventListener(MouseEvent.ROLL_OUT, hideimage11); //btn11.addEventListener(MouseEvent.ROLL_OUT, hidetext11); btn11.addEventListener(MouseEvent.CLICK, showtext11);

                function showimage11(evt:MouseEvent):void {
                    var myTweenAlpha:Tween = new Tween(image11, "alpha", Strong.easeOut, 0, 1, 1, true);
                     image11.visible = true;
                }

                function hideimage11(evt:MouseEvent):void {
                     image11.visible = false;
                }

                 

                /*function showtext11(event:MouseEvent) :void{
                    text11.visible = true;
                }

                 

                function hidetext11(event:MouseEvent) :void {
                    text11.visible = false;
                }*/

                 


                The comment parts being parts being things i am yet to put in.

                 

                How can i change it so that it does not stop at a random point?

                • 5. Re: Fade in Fade out code.
                  KitClairvoyance Level 1

                  The easy way is to place the tween var on the global scope, thus instead of:

                   

                  function showimage1(evt:MouseEvent):void {

                       var myTweenAlpha:Tween = new Tween(image1, "alpha", Strong.easeOut, 0, 1, 1, true);

                       image1.visible = true;

                  }

                   

                  you could have something along the lines of:

                   

                  var myTweenAlpha:Tween = null; // global scope

                   

                  function showimage1(evt:MouseEvent):void

                  {

                       myTweenAlpha = new Tween(image1, "alpha", Strong.easeOut, 0, 1, 1, true);

                       image1.visible = true;

                  }

                   

                  Just be careful to have separate tween variables at the global scope if you want to have two tweens running concurrently. The idea is to always have a handle to the tween as long as the tween is running. That stops the garbage collector from snapping it up. (:

                  • 6. Re: Fade in Fade out code.
                    Declan. Level 1

                    Thankyou

                     

                    Well it works perfectly for one image, but i have 12, how will i set up a global variable that is different so that all my other images and texts work?

                     

                    would it be:

                     

                     

                     

                     

                    var myTweenAlpha:Tween = null; // global scope

                     

                     

                     

                    function showimage1(evt:MouseEvent):void {

                     

                         myTweenAlpha = new Tween(image1, "alpha", Strong.easeOut, 0, 1, 1, true);

                     

                         image1.visible = true;

                     

                    }

                     

                     

                     

                    var myTweenAlpha:Tween = 1; // global scope

                     

                     

                     

                    function showimage2(evt:MouseEvent):void {

                     

                         myTweenAlpha = new Tween(image2, "alpha", Strong.easeOut, 0, 1, 1, true);

                     

                         image2.visible = true;

                     

                    }

                     

                     

                    im not sure if this works but i will try it. The thing is i dont know much about flash at all, i have worked with it for a total of 3 days over about a week or so, so im still very very new o.O

                     

                    EDIT: its ok i have figured it out, thankyou very very much for that!

                     

                    Enjoy your day!!