Exit
  • Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
  • 한국 커뮤니티
0

Swipe more than one movie clip

Explorer ,
Oct 01, 2017 Oct 01, 2017

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

644
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Community Expert , Oct 02, 2017 Oct 02, 2017

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){

currentGallery

...
Translate
Community Expert ,
Oct 01, 2017 Oct 01, 2017

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

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Oct 02, 2017 Oct 02, 2017

Thanks kglad

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

Thanks.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Oct 02, 2017 Oct 02, 2017

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

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Oct 02, 2017 Oct 02, 2017

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.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Oct 02, 2017 Oct 02, 2017

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.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Oct 13, 2017 Oct 13, 2017

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.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Oct 13, 2017 Oct 13, 2017

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();

}

}

}

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Oct 17, 2017 Oct 17, 2017

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 . . .

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Oct 17, 2017 Oct 17, 2017

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);

}

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Oct 25, 2017 Oct 25, 2017

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.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Oct 25, 2017 Oct 25, 2017

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

2. i mentioned that in the comments

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Oct 28, 2017 Oct 28, 2017

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.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Oct 28, 2017 Oct 28, 2017
LATEST

you're welcome.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines