4 Replies Latest reply on Mar 1, 2011 4:46 PM by Declan.

    Need help finishing off slideshow

    Declan.

      Hey guys,

       

      I have nearly nearly finished my slideshow. I have been having some major problems, but after some very unwanted/unnecessary hours spent hacking away, i have come close to what i want to happen.

       

      Scenario:

      I have a button, when the mouse rolls over the button, an image fades in (in .6 of a second). A timer is started for 3 seconds, at the 3 second mark, an image fades over the top, with the original image dissapearing. When the mouse rolls off the button, all images dissapear.

       

      Problems:

      Now, the problem i am having, is that when I roll the mouse off the button, before the second image kicks in.. both images come up and fade away suddenly.. i only want the 1st image to disappear because it is the only one that is visible.

       

      When I roll my mouse off after the second image has kicked in, everything works perfectly.

       

      My last problem, is that there is a bit of a flash when my second image fades in. I think it is because somewhere i am telling the second image to come in too fast, or i am telling my first image to disappear before my second one has come in. I have worked on this for a long block now and it is starting to wear me down.

       

      If anyone can please go over my code and maybe fix it up so the errors above do not occur.

      *Note : This is a client job, no other company in the town i live in was willing to do this job so i snapped it up. Im trying to make the final copy fool proof so it is User Friendly but i am having some problems.

       

      Any help would be greatly appreciated.

       

      image2.visible = false;
      image2from2.visible = false;

       

      import fl.transitions.*;
      import fl.transitions.Tween;
      import fl.transitions.easing.*;
      import flash.utils.Timer;
      import flash.events.TimerEvent;
      import flash.events.Event;

       

      var myTweenAlpha:Tween = null; // global scope

       

      testbtn.addEventListener(MouseEvent.ROLL_OVER, showimage2);
      //testbtn.addEventListener(MouseEvent.ROLL_OUT, hideimage2);
      //testbtn.addEventListener(MouseEvent.ROLL_OUT, hideimage2from2);
      testbtn.addEventListener(MouseEvent.ROLL_OUT, stopTimer);

       

      if (image2from2.visible = false) {
          function stopTimer(evt:MouseEvent):void {
              TransitionManager.start(image2, {type:Fade, direction:Transition.OUT, duration:.3, easing:Strong.easeOut});
              TransitionManager.start(image2from2, {type:Fade, direction:Transition.OUT, duration:.6, easing:Strong.easeOut});
              myTimer.reset();
          }
      }

       

      /*"This stops the timer if the mouse rolls off the button so it does not mess up future roll over timing"
      if (image2from2.visible = false){
              function stopTimer (evt:MouseEvent):void {
              //image2from2.visible = false;
              myTimer.reset();
                  trace("Timer Reset Because Mouse Rolled Off Button")
              TransitionManager.start(image2, {type:Fade, direction:Transition.OUT, duration:.6, easing:Strong.easeOut});
                  trace("b")
          }
      }
      else if (image2from2.visible = true) {
          function stopTimer2 (evt:MouseEvent):void {
              //image2.visible = false;
              TransitionManager.start(image2from2, {type:Fade, direction:Transition.OUT, duration:.6, easing:Strong.easeOut});
          }
      }
      */
                                                               
      var myTimer:Timer = new Timer(3000);
      myTimer.addEventListener(TimerEvent.TIMER, timerListener);

       

      do {function showimage2(evt:MouseEvent):void {
              trace(image2.x + " X-Axis")
              trace(image2.y + " Y-Axis")
          myTweenAlpha = new Tween(image2, "alpha", Strong.easeOut, 0, 1, 1, true);
          image2.visible = true;
          myTimer.start();
              trace("Timer Started")
          }

       

      function timerListener (evt:TimerEvent):void {
          if (image2.visible == true) {
                  trace("Image2from2 Should Appear")
              myTweenAlpha = new Tween(image2from2, "alpha", Strong.easeOut, 0, 1, 2, true);
              image2from2.visible = true;
                  trace("Image2from2 Now Visible")
              TransitionManager.start(image2, {type:Fade, direction:Transition.OUT, duration: .3, easing:Strong.easeOut});
              //image2.visible = false;   
                  trace("Image2 Invisible")
              myTimer.stop();
                  trace("Timer Stopped")
              myTimer.reset();
                  trace("Timer Reset, Waiting For Next Command")
              }
          }
      }
      while (MouseEvent.ROLL_OVER == true);

       

      /*
      if (image2.visible == true) {
          function hideimage2 (evt:MouseEvent):void {
              TransitionManager.start(image2, {type:Fade, direction:Transition.OUT, duration:.3, easing:Strong.easeOut});
                  trace("a")
          }
      }
      else (image2.visible = false);

       

      if (image2from2.visible == true) {
          function hideimage2from2 (evt:MouseEvent):void {
              TransitionManager.start(image2from2, {type:Fade, direction:Transition.OUT, duration:.6, easing:Strong.easeOut});
              trace("c")
          }
      }
      else (image2from2.visible = false);
      */

       

      *Note: I commented out certain parts of code because i was trying different things, nothing seemed to work. If some one could please re-create my situation by copying and pasting this code into a new AS file and helping me i will be forever greatful.

       

      Thanks,

      Declan

        • 1. Re: Need help finishing off slideshow
          moccamaximum Level 5

          you obviously have a logical error where you write

           

          if (image2from2.visible = false)

           

          it should be

           

          if (image2from2.visible == false)

           

          if you only use a single equation mark you cast the variable to the specified value, so it will always be false in the example

           

          This error appears multiple times in your code

          • 2. Re: Need help finishing off slideshow
            Declan. Level 1

            Thanks for that, i did what you said but it prevented the image from coming up all together. However, i managed to fix that problem.

             

            Now my problem is trying to get only the visible image to fade out when the mouse rolls off the button. Currently the both pop up and fade out and it looks ugly.

            • 3. Re: Need help finishing off slideshow
              moccamaximum Level 5


              I think you`re making matters too complicated.

               


              1.Instead of having multiple functions that principally do the same

               

              you should have one function, Example:

               


              function stopTimer (evt:MouseEvent):void {
                      //image2from2.visible = false;
                      myTimer.reset();
                          trace("Timer Reset Because Mouse Rolled Off Button")
                      TransitionManager.start(evt.currentTarget, {type:Fade, direction:Transition.OUT, duration:.6, easing:Strong.easeOut});
                          trace("b")
                  }

               


              2.you have contradictory Naming of your functions, in the stopTimer Function the Timer gets reset not stopped

               


              3.you are packing functions inside an if-clause, so they are only visible to the outside world when the condition is met, what you wnat to do is

               


              function doSth(e:MouseEvent):void{

               

                     if(condition){

               

                        //doSth

               

                    }

               

              }

               


              img.addEventListener(MouseEvent.ROLL_OVER, doSth);

               


              4. Instead of using to different Timermodels (the normal Timerclass, and the Timerclass built in the Tweens), you should abandon the normal Timers. It gets in the way of your tweens. Have a look at the TweenMax classes : http://www.greensock.com/tweenmax/

               

              they do everything what Flashs built in Tween class does, but better and easier to understand.

              • 4. Re: Need help finishing off slideshow
                Declan. Level 1

                Hi thanks for that. I tried what you said, but it kept coming up with error #1118 or something.

                 

                I am trying to avoid things like TweenMax etc because i want to actually learn the AS. I am just trying to get my head around a few things though. Only problem is my deadline is coming close to when the client needs the project active.

                 

                I have fixed all my problems except for the last transition... The first image to show (image2) will pop up and fade away when i roll off the button, which is not what i want. I cant figure out in the code where i have done that, i have more then likely really messy.. over complicated code.. but i cant seem to pin point why this is happening..

                 

                // I set my images to visible = false;

                image2.visible = false;

                image2from2.visible = false;

                 

                //Imported Classes
                import fl.transitions.*;
                import fl.transitions.Tween;
                import fl.transitions.easing.*;
                import flash.utils.Timer;
                import flash.events.TimerEvent;
                import flash.events.Event;

                 

                testbtn.addEventListener(MouseEvent.ROLL_OVER, showimage2);

                testbtn.addEventListener(MouseEvent.ROLL_OUT, stopTimer);

                 

                "This stops the timer if the mouse rolls off the button so it does not mess up future roll over timing"
                        function stopTimer (evt:MouseEvent):void {
                        //image2from2.visible = false;
                        myTimer.reset();
                            trace("Timer Reset Because Mouse Rolled Off Button")
                        TransitionManager.start(image2, {type:Fade, direction:Transition.OUT, duration:.6, easing:Strong.easeOut});
                            trace("b")
                    }

                 

                // I suspect this is where i am having the most trouble.                                                   
                var myTimer:Timer = new Timer(3000);
                myTimer.addEventListener(TimerEvent.TIMER, timerListener);

                do {function showimage2(evt:MouseEvent):void {
                        trace(image2.x + " X-Axis")
                        trace(image2.y + " Y-Axis")
                    myTweenAlpha = new Tween(image2, "alpha", Strong.easeOut, 0, 1, 1, true);
                    image2.visible = true;
                    myTimer.start();
                        trace("Timer Started")
                    }

                function timerListener (evt:TimerEvent):void {
                    if (image2.visible = true) {
                            trace("Image2from2 Should Appear")
                        myTweenAlpha = new Tween(image2from2, "alpha", Strong.easeOut, 0, 1, 2, true);
                        image2from2.visible = true;
                            trace("Image2from2 Now Visible")
                        TransitionManager.start(image2, {type:Fade, direction:Transition.OUT, duration: 3, easing:Strong.easeOut});
                            trace("Image2 Invisible")
                        myTimer.stop();
                            trace("Timer Stopped")
                        myTimer.reset();
                            trace("Timer Reset, Waiting For Next Command")
                        }
                    }
                }
                while (MouseEvent.ROLL_OVER == true);

                 

                 

                The above is what i have right now, I think i am making it play a tween somewhere where i shouldnt be, but i cant see where i have told it to do so.

                 

                If someone can please look over this and help me find where i am going wrong and modify this code so i can get it out to a client i will be forever greatful.

                 

                Declan