Copy link to clipboard
Copied
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
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
...Copy link to clipboard
Copied
use a hittestpoint to determine when movieclip is undergoing a swipe and 'move' that one.
Copy link to clipboard
Copied
Thanks kglad
I'm just looking at how to set up a hit point test.
Thanks.
Copy link to clipboard
Copied
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
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
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();
}
}
}
Copy link to clipboard
Copied
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 . . .
Copy link to clipboard
Copied
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);
}
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
1. check event.offsetX to see if it's anything other than 1 or -1
2. i mentioned that in the comments
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
you're welcome.