Skip to main content
Inspiring
October 1, 2017
Answered

Swipe more than one movie clip

  • October 1, 2017
  • 2 replies
  • 754 views

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:

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

This topic has been closed for replies.
Correct answer kglad

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

2 replies

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

kglad
Community Expert
Community Expert
October 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();

}

}

}

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

kglad
Community Expert
Community Expert
October 1, 2017

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

Inspiring
October 2, 2017

Thanks kglad

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

Thanks.

kglad
Community Expert
kgladCommunity ExpertCorrect answer
Community Expert
October 2, 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