13 Replies Latest reply on Oct 28, 2017 9:12 AM by kglad

    Swipe more than one movie clip

    jerseydudek

      Hi,

       

      is it possible to have the swipe function work on more than one movie clip?

       

      I have got it working no problem on a single movie clip using the code snippet provided.

       

      But I would like to have two movie clips which I can swipe independently.

       

      Both movie clips are positioned off-screen above the stage and are called individually - so that only one movie clip is visible at any point in time. I've got that part sorted no problem.

       

      It's just being able to swipe each of those movie clips independently so one doesn't affect the other.

       

      I've attached an image of the layout I am trying to achieve:

       

       

      Layout Diagram.jpg

       

       

      =========================   This is where I've got to with the code based on the swipe code snippet provide    ===================================

      /* Swipe to Go to Next/Previous Frame and Stop

      Swiping the stage moves the playhead to the next/previous frame and stops the movie.

      */

       

       

      Multitouch.inputMode = MultitouchInputMode.GESTURE;

       

       

      var currentGalleryItem:Number = 1;

      var totalGalleryItems:Number = 17;

       

       

      stage.addEventListener (TransformGestureEvent.GESTURE_SWIPE, fl_SwipeToGoToNextPreviousFrame);

       

       

      function fl_SwipeToGoToNextPreviousFrame(event:TransformGestureEvent):void

      {

      if(event.offsetX == 1)

      {

      if(currentGalleryItem > 1){

      currentGalleryItem--;

      slideRight();

      }

      }

      else if(event.offsetX == -1)

      {

      if(currentGalleryItem < totalGalleryItems){

      currentGalleryItem++;

      slideLeft();

      }

      }

      }

      var slideCounter:Number = 0;

      function slideLeft(){

      segpanel1.addEventListener("enterFrame", moveGalleryLeft);

      }

      function slideRight(){

      segpanel1.addEventListener("enterFrame", moveGalleryRight);

      }

       

       

      function moveGalleryLeft(evt:Event){

      segpanel1.x -= 48;

      slideCounter++;

      if(slideCounter == 10){

      segpanel1.removeEventListener("enterFrame", moveGalleryLeft);

      slideCounter = 0;

      }

      }

      function moveGalleryRight(evt:Event){

      segpanel1.x += 48;

      slideCounter++;

      if(slideCounter == 10){

      segpanel1.removeEventListener("enterFrame", moveGalleryRight);

      slideCounter = 0;

      }

      }

      /* Seg panel 2*/

      var slideCounter2:Number = 0;

      function slideLeft2(){

      segpanel2.addEventListener("enterFrame", moveGalleryLeft2);

      }

      function slideRight2(){

      segpanel2.addEventListener("enterFrame", moveGalleryRight2);

      }

       

       

      function moveGalleryLeft2(evt:Event){

      segpanel2.x -= 48;

      slideCounter++;

      if(slideCounter == 10){

      segpanel2.removeEventListener("enterFrame", moveGalleryLeft2);

      slideCounter = 0;

      }

      }

      function moveGalleryRight2(evt:Event){

      segpanel2.x += 48;

      slideCounter++;

      if(slideCounter == 10){

      segpanel2.removeEventListener("enterFrame", moveGalleryRight2);

      slideCounter = 0;

      }

      }

       

      stop();

       

      =========================   End of code    ===================================

       

       

      I know I've tied myself in knots and I'm hoping the answer is quite straight-forward.

       

      Be grateful for any advice.

       


      Thanks

        • 1. Re: Swipe more than one movie clip
          kglad Adobe Community Professional & MVP

          use a hittestpoint to determine when movieclip is undergoing a swipe and 'move' that one.

          • 2. Re: Swipe more than one movie clip
            jerseydudek Level 1

            Thanks kglad

             

            I'm just looking at how to set up a hit point test.

             

            Thanks.

            • 3. Re: Swipe more than one movie clip
              kglad Adobe Community Professional & MVP

              you're welcome:

               

              var gallery:MovieClip;

              gallery1.currentGalleryItem = 1;

              gallery1.totalGalleryItems = 17;

              gallery1.slideCounter = 0;

               

              gallery2.currentGalleryItem = 1;

              gallery2.totalGalleryItems = 27;  // or whatever

              gallery2.slideCounter = 0;

               

              function fl_SwipeToGoToNextPreviousFrame(event:TransformGestureEvent):void

              {

              if(gallery1.hitTestPoint(mouseX,mouseY)){

              gallery = gallery1;

              } else if(gallery2.hitTestPoint(mouseX,mouseY)){

              gallery = gallery2;

              }

               

              if(event.offsetX == 1)

              {

              if(currentGalleryItem > 1){

              currentGalleryItem--;

              slideRight();

              }

              }

              else if(event.offsetX == -1)

              {

              if(currentGalleryItem < totalGalleryItems){

              currentGalleryItem++;

              slideLeft();

              }

              }

              }

               

              // now change your code to update gallery instead of segpanel1 and segpanel2

              • 4. Re: Swipe more than one movie clip
                jerseydudek Level 1

                Thanks again, this looks exactly what I've been trying to do.

                 

                Easy when you know how eh!!

                 

                I will try and implement this later (I'm committed to another project at the mo) but if not I'll get on to it tomorrow.

                • 5. Re: Swipe more than one movie clip
                  kglad Adobe Community Professional & MVP

                  you're welcome.

                   

                  p.s. if you have a lot of galleries using an array would simplify and make your code easier to debug and expand.

                  • 6. Re: Swipe more than one movie clip
                    jerseydudek Level 1

                    Hi,

                     

                    I've just finally got a chance to try this and I know I'm doing something daft but I'm getting the following error messages:

                     

                     

                    Scene 1, Layer 'Actswipe', Frame 1, Line 48, Column 4 1120: Access of undefined property currentGalleryItem.

                    Scene 1, Layer 'Actswipe', Frame 1, Line 50, Column 1 1120: Access of undefined property currentGalleryItem.

                    Scene 1, Layer 'Actswipe', Frame 1, Line 52, Column 1 1180: Call to a possibly undefined method slideRight.

                    Scene 1, Layer 'Actswipe', Frame 1, Line 62, Column 4 1120: Access of undefined property currentGalleryItem.

                    Scene 1, Layer 'Actswipe', Frame 1, Line 62, Column 25 1120: Access of undefined property totalGalleryItems.

                    Scene 1, Layer 'Actswipe', Frame 1, Line 64, Column 1 1120: Access of undefined property currentGalleryItem.

                    Scene 1, Layer 'Actswipe', Frame 1, Line 66, Column 1 1180: Call to a possibly undefined method slideLeft.

                     

                     

                    I've changed the code so that the movie clips Im trying to swipe are called gallery1 and gallery2 as you advised but nothing's happening.

                     

                    This is the exact code I'm using:

                     

                    Multitouch.inputMode = MultitouchInputMode.GESTURE;

                     

                    stage.addEventListener (TransformGestureEvent.GESTURE_SWIPE, fl_SwipeToGoToNextPreviousFrame);

                     

                    var gallery:MovieClip;

                    gallery1.currentGalleryItem = 1;

                    gallery1.totalGalleryItems = 17;

                    gallery1.slideCounter = 0;

                     

                    gallery2.currentGalleryItem = 1;

                    gallery2.totalGalleryItems = 27;  // or whatever

                    gallery2.slideCounter = 0;

                     

                    function fl_SwipeToGoToNextPreviousFrame(event:TransformGestureEvent):void

                    {

                    if(gallery1.hitTestPoint(mouseX,mouseY)){

                    gallery = gallery1;

                    } else if(gallery2.hitTestPoint(mouseX,mouseY)){

                    gallery = gallery2;

                    }

                     

                     

                    if(event.offsetX == 1)

                    {

                    if(currentGalleryItem > 1){

                    currentGalleryItem--;

                    slideRight();

                    }

                    }

                     

                    else if(event.offsetX == -1)

                    {

                    if(currentGalleryItem < totalGalleryItems){

                    currentGalleryItem++;

                    slideLeft();

                    }

                    }

                    }

                     

                     

                    I'm sure it's going to be something obvious but I've tried copying various bits from my previous code but that obviously throughs up further errors.

                     


                    Any advice appreciated.

                    • 7. Re: Swipe more than one movie clip
                      kglad Adobe Community Professional & MVP

                      you still need your slideRight and slideLeft functions.  also:

                       

                      var gallery:MovieClip;

                      gallery1.currentGalleryItem = 1;

                      gallery1.totalGalleryItems = 17;

                      gallery1.slideCounter = 0;

                       

                      gallery2.currentGalleryItem = 1;

                      gallery2.totalGalleryItems = 27;  // or whatever

                      gallery2.slideCounter = 0;

                       

                      function fl_SwipeToGoToNextPreviousFrame(event:TransformGestureEvent):void

                      {

                      if(gallery1.hitTestPoint(mouseX,mouseY)){

                      gallery = gallery1;

                      } else if(gallery2.hitTestPoint(mouseX,mouseY)){

                      gallery = gallery2;

                      }

                       

                      if(event.offsetX == 1)

                      {

                      if(gallery.currentGalleryItem > 1){

                      gallery.currentGalleryItem--;

                      slideRight();

                      }

                      }

                      else if(event.offsetX == -1)

                      {

                      if(gallery.currentGalleryItem < gallery.totalGalleryItems){

                      gallery.currentGalleryItem++;

                      slideLeft();

                      }

                      }

                      }

                      1 person found this helpful
                      • 8. Re: Swipe more than one movie clip
                        jerseydudek Level 1

                        Hi,

                         

                        I've tried all sorts with this and I can't get it to work. I've added the slideRight slideLeft functions as you pointed out like this:

                         

                        function slideLeft(){

                        gallery1,gallery2.addEventListener("enterFrame", moveGalleryLeft);

                        }

                        function slideRight(){

                        gallery1,gallery2.addEventListener("enterFrame", moveGalleryRight);

                        }

                         

                        But that just makes the whole thing go crazy - the gallery just flying off the screen without stopping. So my whole code is looking like this:

                        /* Swipe to Go to Next/Previous Frame and Stop

                        Swiping the stage moves the playhead to the next/previous frame and stops the movie.

                        */

                         

                         

                        Multitouch.inputMode = MultitouchInputMode.GESTURE;

                         

                         

                        var currentGalleryItem:Number = 1;

                        var totalGalleryItems:Number = 6;

                         

                         

                        stage.addEventListener (TransformGestureEvent.GESTURE_SWIPE, fl_SwipeToGoToNextPreviousFrame);

                         

                         

                        var slideCounter:Number = 0;

                         

                         

                        function slideLeft(){

                        gallery1,gallery2.addEventListener("enterFrame", moveGalleryLeft);

                        }

                        function slideRight(){

                        gallery1,gallery2.addEventListener("enterFrame", moveGalleryRight);

                        }

                         

                         

                         

                         

                        function moveGalleryLeft(evt:Event){

                        gallery1,gallery2.x -= 48;

                        slideCounter++;

                        if(slideCounter == 10){

                        gallery1.removeEventListener("enterFrame", moveGalleryLeft);

                        slideCounter = 0;

                        }

                        }

                        function moveGalleryRight(evt:Event){

                        gallery1,gallery2.x += 48;

                        slideCounter++;

                        if(slideCounter == 10){

                        gallery1.removeEventListener("enterFrame", moveGalleryRight);

                        slideCounter = 0;

                        }

                        }

                         

                         

                         

                         

                        var gallery:MovieClip;

                        gallery1.currentGalleryItem = 1;

                        gallery1.totalGalleryItems = 6;

                        gallery1.slideCounter = 0;

                         

                        gallery2.currentGalleryItem = 1;

                        gallery2.totalGalleryItems = 6; 

                        gallery2.slideCounter = 0;

                         

                        function fl_SwipeToGoToNextPreviousFrame(event:TransformGestureEvent):void

                        {

                        if(gallery1.hitTestPoint(mouseX,mouseY)){

                        gallery = gallery1;

                        } else if(gallery2.hitTestPoint(mouseX,mouseY)){

                        gallery = gallery2;

                        }

                         

                        if(event.offsetX == 1)

                        {

                        if(gallery.currentGalleryItem > 1){

                        gallery.currentGalleryItem--;

                        slideRight();

                        }

                        }

                        else if(event.offsetX == -1)

                        {

                        if(gallery.currentGalleryItem < gallery.totalGalleryItems){

                        gallery.currentGalleryItem++;

                        slideLeft();

                         

                         

                        }

                        }

                        }

                         

                         

                         

                        A mess I know but hopefully I'll learn something from this . . .

                        • 9. Re: Swipe more than one movie clip
                          kglad Adobe Community Professional & MVP

                          it doesn't make any sense to move 48 px in an enterframe loop because that's probably the width of your gallery items.

                           

                          anyway, that should be:

                           

                          function slideLeft(){

                          if(gallery.slideCounter>0){

                          gallery.addEventListener("enterFrame", moveGalleryLeft);

                          }

                          }

                          function slideRight(){

                          if(gallery.slideCounter<gallery.totalGalleryItems){

                          gallery.addEventListener("enterFrame", moveGalleryRight);

                          }

                          }

                           

                          function moveGalleryLeft(evt:Event){

                          gallery.x -= 48;  // if you moved less than a gallery item width, you could animate the movement

                          gallery.slideCounter++;

                          gallery.removeEventListener("enterFrame", moveGalleryLeft);

                          }

                          function moveGalleryRight(evt:Event){

                          gallery.x += 48;  // if you moved less than a gallery item width, you could animate the movement

                          gallery.slideCounter--;

                          gallery.removeEventListener("enterFrame", moveGalleryRight);

                          }

                          1 person found this helpful
                          • 10. Re: Swipe more than one movie clip
                            jerseydudek Level 1

                            I'm really struggling with this. But I am making some progress in that at least I've got both clips responding independently which is a big step in the right direction.

                            But what's not working is the following:

                             

                            1) The movie clip only swipes right.

                             

                            2) The swipe animation is instant - no smooth slide.

                             

                            So I can't swipe backwards and forwards.

                             

                            This is how I've butchered your code:

                             

                            /* Swipe to Go to Next/Previous Frame and Stop

                            Swiping the stage moves the playhead to the next/previous frame and stops the movie.

                            */

                             

                            Multitouch.inputMode = MultitouchInputMode.GESTURE;

                            stage.addEventListener (TransformGestureEvent.GESTURE_SWIPE, fl_SwipeToGoToNextPreviousFrame);

                             

                            var gallery:MovieClip;

                            gallery1.currentGalleryItem = 1;

                            gallery1.totalGalleryItems = 6;

                            gallery1.slideCounter = 0;

                             

                            gallery2.currentGalleryItem = 1;

                            gallery2.totalGalleryItems = 6;  // or whatever

                            gallery2.slideCounter = 0;

                             

                            function fl_SwipeToGoToNextPreviousFrame(event:TransformGestureEvent):void

                            {

                            if(gallery1.hitTestPoint(mouseX,mouseY)){

                            gallery = gallery1;

                            } else if(gallery2.hitTestPoint(mouseX,mouseY)){

                            gallery = gallery2;

                            }

                             

                            if(event.offsetX == 1)

                            {

                            if(gallery.currentGalleryItem > 1){

                            gallery.currentGalleryItem--;

                            slideRight();

                            }

                            }

                            else if(event.offsetX == -1)

                            {

                            if(gallery.currentGalleryItem < gallery.totalGalleryItems){

                            gallery.currentGalleryItem++;

                            slideLeft();

                            }

                            }

                             

                             

                            }

                            function slideLeft(){

                            if(gallery.slideCounter>0){

                            gallery.addEventListener("enterFrame", moveGalleryLeft);

                            }

                            }

                            function slideRight(){

                            if(gallery.slideCounter<gallery.totalGalleryItems){

                            gallery.addEventListener("enterFrame", moveGalleryRight);

                            }

                            }

                             

                            function moveGalleryLeft(evt:Event){

                            gallery.x -= 480;  // if you moved less than a gallery item width, you could animate the movement

                            gallery.slideCounter++;

                            gallery.removeEventListener("enterFrame", moveGalleryLeft);

                            }

                            function moveGalleryRight(evt:Event){

                            gallery.x += 480;  // if you moved less than a gallery item width, you could animate the movement

                            gallery.slideCounter--;

                            gallery.removeEventListener("enterFrame", moveGalleryRight);

                            }

                             

                             

                            I'm trying my best but this is a pretty steep learning curve.

                             

                            Thanks for any advice.

                            • 11. Re: Swipe more than one movie clip
                              kglad Adobe Community Professional & MVP

                              1. check event.offsetX to see if it's anything other than 1 or -1

                              2. i mentioned that in the comments

                              • 12. Re: Swipe more than one movie clip
                                jerseydudek Level 1

                                Finally got it figured out.

                                 

                                The crucial part is (as you pointed out right at the top KGLAD) setting up the hit point for the movie clip . .. . not the stage.

                                 

                                That worked for me once I got my head around it :-)

                                 

                                This is a really great and informative video on this subject:

                                 

                                https://www.youtube.com/watch?v=_erNkPDtaDI&t=116s

                                 

                                Thanks for your input.

                                • 13. Re: Swipe more than one movie clip
                                  kglad Adobe Community Professional & MVP

                                  you're welcome.