8 Replies Latest reply: Jan 1, 2013 3:22 PM by Ned Murphy RSS

    Back Button on Photo Slideshow not working properly?

    Freckles Community Member

      Hey y'all,

       

      I am currently working in Flash Professional CS6 using an AS3 sheet thing. . . I'm incredibly new to flash, and I've encountered a problem google could not solve.

      Here is my project (not in its proper dimensions on the screen, so please ignore the pixelated pictures): http://myfirstphp.hostzi.com/slideshow2.swf

       

      So, the goal was to tween transparancy each photo which would loop continuously. I also wanted to add next, back, pause, and play buttons that would appear when hovering over the stage. Well, I got everything to work except the back button.

      For some reason unbeknownst to me, whenever you hit the back button a few times (more than twice or you hit the next button then the back button), it doesn't go back. It's like the button doesn't reload to the proper frame. Strange to me.

       

      The next button seems to be working perfectly, however. So why just the back button? I don't know!

       

      I have my flash project set up as the following (this may not be the most efficient way, but I could not find another way to do it; hopefully this makes sense):

      Each picture is in its own layer. Each layer is transparency tweened. The layers are staggered in order to fade into each other.

      I have two action layers.

      The first action layer has my play, pause and alpha channels. This keyframe encompasses the entire slideshow. Below is the code:

       

      pause_btn.alpha=0;
      play_btn.alpha=0;
      forward_btn.alpha=0;
      back_btn.alpha=0;
      rectangle_btn.alpha=0;
      
      
      stage.addEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler);
      stage.addEventListener(MouseEvent.MOUSE_OUT, mouseOutHandler);
      
      
      function mouseOverHandler(e:MouseEvent):void
      {
                pause_btn.alpha=1;
      play_btn.alpha=1;
      forward_btn.alpha=1;
      back_btn.alpha=1;
      rectangle_btn.alpha=0.5;
      }
      
      
      function mouseOutHandler(e:MouseEvent):void
      {
                pause_btn.alpha=0;
      play_btn.alpha=0;
      forward_btn.alpha=0;
      back_btn.alpha=0; 
      rectangle_btn.alpha=0;
      }
      
      
      
      
      play_btn.addEventListener(MouseEvent.CLICK, fl_MouseClickHandler);
      
      
      function fl_MouseClickHandler(event:MouseEvent):void
      {
                // Start your custom code
                // This example code displays the words "Mouse clicked" in the Output panel.
                play();
                // End your custom code
      }
      
      
      
      
      pause_btn.addEventListener(MouseEvent.CLICK, fl_MouseClickHandler_2);
      
      
      function fl_MouseClickHandler_2(event:MouseEvent):void
      {
                stop();
      }
      

       

      My second action layer has my next and back buttons in them. I have a new action keyframe on the start of each tweened picture. Below is the code for one of the keyframes (note: the only thing that changes are the numbers in each keyframe):

       

      forward_btn.addEventListener(MouseEvent.CLICK, click1);
      
      
      function click1(event:MouseEvent):void
      {
                gotoAndPlay(21);
      }
      
      
      back_btn.addEventListener(MouseEvent.CLICK, click0);
      
      
      function click0(event:MouseEvent):void
      {
                gotoAndPlay(229);
      }
      
      

       

      I'm not sure what else y'all need to help me solve my problem, so I guess I'll just check back in the morning Thanks so much in advance!

        • 1. Re: Back Button on Photo Slideshow not working properly?
          Ned Murphy CommunityMVP

          Based on you showing specific frame values I assume you assign new listeners at different points along the timeline.  If you are not removing older listeners then chances are they are still assigned and at work when you try to use the button which is likely to be the problem.

           

          You should take a different approach and just have one set of listeners working for your buttons.  Make use of a variable whose value you change as you move along the timeline instead of assigning new lsiteners at each point.

           

          For example, in frame 1 (or the first frame where your back button starts)....

           

          var backReference:Number = 1;  // 1 is for frame 1 since you can't go back further than 1

           

          back_btn.addEventListener(MouseEvent.CLICK, clickBack);

           

          function clickBack(event:MouseEvent):void

          {

                    gotoAndPlay(backReference);

          }

           

          Then, for each subsequent frame where you have a new image starting you only need to assign a new value to the backReference variable relative to the image before it.

           

          Doing it this way you only need to ever have one event listener assigned to the button and one event handler function as well.  You only change the value of the variable that the function uses. 

          • 2. Re: Back Button on Photo Slideshow not working properly?
            Freckles Community Member

            So, when I tried it this way (only changing the number and not the variable) I got this error:

            Scene 1, Layer 'Next/Back', Frame 21, Line 11151: A conflict exists with definition nextReference in namespace internal.
            Scene 1, Layer 'Next/Back', Frame 21, Line 21151: A conflict exists with definition backReference in namespace internal.

             

            Frame 1

            var nextReference:Number = 21

            var backReference:Number = 229

            forward_btn.addEventListener(MouseEvent.CLICK, click1);

             

             

            function click1(event:MouseEvent):void

            {

                      gotoAndPlay(nextReference);

            }

             

             

            back_btn.addEventListener(MouseEvent.CLICK, click0);

             

             

            function click0(event:MouseEvent):void

            {

                      gotoAndPlay(backReference);

            }

             

             

             

            Frame 21

            var nextReference:Number = 46

            var backReference:Number = 253

            forward_btn.addEventListener(MouseEvent.CLICK, click3);

             

             

            function click3(event:MouseEvent):void

            {

                      gotoAndPlay(nextReference);

            }

             

             

            back_btn.addEventListener(MouseEvent.CLICK, click2);

             

             

            function click2(event:MouseEvent):void

            {

                      gotoAndPlay(backReference);

            }


             

             

             

            I then tried to name each of the nextReference/backReference variables on each subsequent picture change, and the error went away. However, it's doing the same thing as before.

            http://myfirstphp.hostzi.com/slideshow2.swf

             

             

            Frame 46 (for example)

            var nextReference2:Number = 70

            var backReference2:Number = 21

            forward_btn.addEventListener(MouseEvent.CLICK, click5);

             

             

            function click5(event:MouseEvent):void

            {

                      gotoAndPlay(nextReference2);

            }

             

             

            back_btn.addEventListener(MouseEvent.CLICK, click4);

             

             

            function click4(event:MouseEvent):void

            {

                      gotoAndPlay(backReference2);

            }


            • 3. Re: Back Button on Photo Slideshow not working properly?
              Freckles Community Member

              So, I tried something else, but it still doesn't work. I now have each picture change set up as a variable. However, it's skipping around (if you go forward three from the flag picture then back three, you never get to the flag picture). And, on occasion, it freezes on a picture and won't go back or forward.

               

              http://myfirstphp.hostzi.com/slideshow.swf

               

              Here's my first frame of code which sets the variables.

               

              var flagpic:Number = 253

              var caerphillypic:Number = 21

              var kidspic:Number = 46

              var gatewaypic:Number =70

              var countrypic:Number = 94

              var girlspic: Number = 117

              var lighthousepic:Number = 134

              var castlepic:Number = 158

              var insidepic:Number = 181

              var workpic:Number = 205

              var greenvillepic:Number = 229

               

              forward_btn.addEventListener(MouseEvent.CLICK, click1);

               

               

              function click1(event:MouseEvent):void

              {

                        gotoAndPlay(caerphillypic);

              }

               

               

              back_btn.addEventListener(MouseEvent.CLICK, click0);

               

               

              function click0(event:MouseEvent):void

              {

                        gotoAndPlay(greenvillepic);

              }

               

               

              I've double and triple checked to make sure that each button goes to the proper location.

              • 4. Re: Back Button on Photo Slideshow not working properly?
                Ned Murphy CommunityMVP

                You can only declare a variable once.  Any other time you just use it...

                 

                frame 1:       var backReference = 1;  // declared

                 

                frame elsewhere:   backReference = ...    // just assign its new value

                • 5. Re: Back Button on Photo Slideshow not working properly?
                  Freckles Community Member

                  It's doing this:

                  http://myfirstphp.hostzi.com/slideshow2.swf

                   

                  Frame 1

                  var nextReference:Number = 21

                  var backReference:Number = 229

                  forward_btn.addEventListener(MouseEvent.CLICK, click1);

                   

                   

                  function click1(event:MouseEvent):void

                  {

                            gotoAndPlay(nextReference);

                  }

                   

                   

                  back_btn.addEventListener(MouseEvent.CLICK, click0);

                   

                   

                  function click0(event:MouseEvent):void

                  {

                            gotoAndPlay(backReference);

                  }

                   

                   

                  Other Frames:

                  nextReference = 46

                  backReference = 253

                  forward_btn.addEventListener(MouseEvent.CLICK, click3);

                   

                   

                  function click3(event:MouseEvent):void

                  {

                            gotoAndPlay(nextReference);

                  }

                   

                   

                  back_btn.addEventListener(MouseEvent.CLICK, click2);

                   

                   

                  function click2(event:MouseEvent):void

                  {

                            gotoAndPlay(backReference);

                  }

                  • 6. Re: Back Button on Photo Slideshow not working properly?
                    Ned Murphy CommunityMVP

                    You are doing the same thing you were originally... creating multiple listeners for the button.  You only need to have the functions defined once in the first frame where the button(s) starts.  That actions layer needs to extend the full length of the timeline so that the variables and functions are available throughout.

                     

                    The single button instances can extend the full length of the timeline without having to have more than one keyframe for them.

                     

                    Frame 1

                     

                    var nextReference:Number = 21;

                    var backReference:Number = 229;

                     

                    forward_btn.addEventListener(MouseEvent.CLICK, clickNext);

                     

                    function clickNext(event:MouseEvent):void

                    {

                              gotoAndPlay(nextReference);

                    }

                     

                    back_btn.addEventListener(MouseEvent.CLICK, clickBack);

                     

                    function clickBack(event:MouseEvent):void

                    {

                              gotoAndPlay(backReference);

                    }

                     

                     

                    Other Frames:

                     

                    nextReference = 46;

                    backReference = 253;