Smooth stage swipe/drag on iPad2

[Trevor-twenty5eight]

I've come up with a solution using touch events in an attempt to mimic the iOS stage swipe gestures.

Essentially, the solution I've come up with is to use a large MC called 'tiles' with 4 x (1024x768) panels inside it. It works great on my iPad2

The only problem I'm having with it is that when the app launches, it be dragged right (swipe to the right). I would rather drag it left as that feels more comfortable to me.

If anyone could help with this, I'd really appreciate it, otherwise, I think this is a really neat solution and I've provided the AS3 below.

Mike

Multitouch.inputMode = MultitouchInputMode.TOUCH_POINT;

tiles.addEventListener(TouchEvent.TOUCH_BEGIN, homeTouchBegin);

tiles.addEventListener(TouchEvent.TOUCH_END, homeTouchEnd);

var homeDragBounds:Rectangle = new Rectangle(0, 0, 3072, stage.stageHeight-768);

function homeTouchBegin(event:TouchEvent):void {

event.target.startTouchDrag(event.touchPointID, false, homeDragBounds);

}

function homeTouchEnd(event:TouchEvent):void {

event.target.stopTouchDrag(event.touchPointID);

if (tiles.x < 512) {

TweenLite.to(tiles, .5, {x:0, ease:Strong.easeOut});

}

else if (tiles.x > 512 && tiles.x < 1024){

TweenLite.to(tiles, .5, {x:1024, ease:Strong.easeOut});

}

else if (tiles.x > 1024 && tiles.x < 1536) {

TweenLite.to(tiles, .5, {x:1024, ease:Strong.easeOut});

}

else if (tiles.x > 1536 && tiles.x < 2048) {

TweenLite.to(tiles, .5, {x:2048, ease:Strong.easeOut});

}

else if (tiles.x > 2048 && tiles.x < 2560) {

TweenLite.to(tiles, .5, {x:2048, ease:Strong.easeOut});

}

else if (tiles.x > 2560 && tiles.x < 3072) {

TweenLite.to(tiles, .5, {x:3072, ease:Strong.easeOut});

}

else {

TweenLite.to(tiles, .5, {x:3072, ease:Strong.easeOut});

}

}

[Chris W. Griffith]

Have you looked at the stuff that Lee Brimelow (Adobe) has posted on this topic?

http://www.theflashblog.com/

Chris

[Trevor-twenty5eight]

Hi Chris, I've been playing with a few different solutions recently, one quite similar to Lee's, and I like this one most.

For me, it's almost perfect.... except for the starting direction needing to slide right rather than left...

From my code provided above, I thought it would have to be set somewhere in this section I've pasted below but I just figure it out.

Any suggestions are welcomed with open arms

var homeDragBounds:Rectangle = new Rectangle(0, 0, 3072, stage.stageHeight-768);

function homeTouchBegin(event:TouchEvent):void {

event.target.startTouchDrag(event.touchPointID, false, homeDragBounds);

}

[Trevor-twenty5eight]

Easier solution than I expected... I simply declared the following at the top of the page... problem solved.

tiles.x = 3072;

This is the closest I've managed to get with my limited amount of AS3 knowledge to the native iOS scroll/swipe/drag effect

[Trevor-twenty5eight]

Okay, so I've been using this app quite a bit today and I've noticed a new problem with this code that I'm hoping someone can help me out with.

If you tap the screen, it takes you back to the start (tiles.x = 3072).

I don't want anything to happen when the screen is tapped.

I've tried writing a CLICK and TAP handler but the code I write seems to mess with the code in my original post above.

Any thoughts are much appreciated. I kind of want to say... if tiles are tapped, do nothing

Thanks

[markc888 · Accepted solution]

else {

TweenLite.to(tiles, .5, {x:3072, ease:Strong.easeOut});

}

This might be the culprit.

What your function is saying is that whenever a tap is detected, run through all the if statements, and if none of them match, do this else command.

So try deleting this else block altogether.

[Trevor-twenty5eight]

Hey Markc888, you're spot on. I'd actually sussed it out before leaving work last night but I wasn't sure if the solution was technically correct.

Great to hear you thought the same thing because it solved the problem. I always thought 'if' statements MUST be accompanied by 'else' but by the looks of things, 'else if' suffices. I thought the final 'else' was like the fullstop so to speak.

Thanks again for all your help mate, have really appreciated it as I've been building this app. Here's the result.

http://www.youtube.com/watch?v=E29ZZX_s1a0

[Trevor-twenty5eight]

I've noticed one more problem with this code. To ensure that the menu items move with the large MC while it is being dragged, I've placed the menu items within the large movie clip. For example:

tiles.mainMenu

If I attempted to drag the mainMenu, it would move so I added a remove event listener like so:

tiles.mainMenu.addEventListener(MouseEvent.MOUSE_DOWN, mainMenuDown);

tiles.mainMenu.addEventListener(MouseEvent.MOUSE_UP, mainMenuUp);

function mainMenuDown(event:MouseEvent):void {

trace("Mouse Down triggered");

//remove the event listener so the buttons can't be dragged around the screen

tiles.removeEventListener(TouchEvent.TOUCH_BEGIN, homeTouchBegin);

tiles.removeEventListener(TouchEvent.TOUCH_END, homeTouchEnd);

}

function mainMenuUp(event:MouseEvent):void {

trace("Mouse Up triggered");

//remove the event listener so the buttons can't be dragged around the screen

tiles.addEventListener(TouchEvent.TOUCH_BEGIN, homeTouchBegin);

tiles.addEventListener(TouchEvent.TOUCH_END, homeTouchEnd);

}

This fixed the problem but now when I touch the mainMenu with 2 fingers, the mainMenu is draggable.

I'm wondering how I can disable the mainMenu or any other MCs within the large movie clip called tiles when they are pressed with 2 fingers.

Cheers

Mike

[markc888]

There are a number of possible solutions..

Add an instruction not to use two fingers (just kidding).

How about on menu mousedown adding an enterframe listener that sets the x and y of the menu to a certain location.

Something like (although not tested)

function mainMenuDown(event:MouseEvent):void {
trace("Mouse Down triggered");
tiles.addEventListener(Event.ENTER_FRAME,keepMenuInPlace);

}

function keepMenuInPlace(e:Event):void {

tiles.mainMenu.x = whatever the x is

tiles.mainMenu.y = whatever the y is

}

and remove the event listener on mouse up.

[monkey500]

Hi Mike,

I'm trying out your code, but I'm unsure of how you've laid out your 4 images in the 'tiles' mc.

I have 4 x 1024x768 block colours on one frame on 4 layers, arranged left to right.

So they make up a long strip of 4 colours from left to right.

Is there anything else in your library?

when I add the extra line:   tiles.x = 3072;   it publishes as a white stage, which I imagine is missing the MC..

any ideas would be really appreciated!

Thanks,

Matt

[Trevor-twenty5eight]

Hey Matt, try this:

Draw a rectangle to the size of 1024 x 768 on the stage at x: 0 y: 0

Make it a movieclip (F8)... call it what you want but give it an instance name of tiles

Double click to open the movie clip and add 3 more rectangles to the left. They don't need to be MCs

You should now have one big movie clip on the stage (3072 pixels long)

The reason for declaring tiles.x = 3072; at the start is because I couldn't work out how to scroll left from 0 so I start it at 3072 and then scroll left back to 0.

This puts it's starting position at 3072 rather than the default of 0. It just feels more natural in the hands of the user cause they generally will swipe to the left.

The rest of the code is all in this post... have fun!

If you get stumped let me know but you should be sweet

Mike

[Trevor-twenty5eight]

Markc888, that could be just the ticket... all my files are at work as I'm away for the weekend but I'll give it a go on Monday... will let you know, thanks for all your great suggestions.

I know what I want to tell it do, it's just trying to talk to it in it's language

[Brandon_Johnson3]

The code you wrote is very interesting! And what AS3 script you used to load videos?

[monkey500]

Thanks Mike, I had the rectangles going to the right, rather than left. Works great! You could do a blog tutorial about this, and I'm sure you'll

get loads of hits!

Would it be simple to pan the 4th slide and it loops back to the first? Or maybe I'll try to work it out..

Thanks again,

Matt

[monkey500]

Hi Mike,

I've got it working fine, and made a home button like yours to scroll back to the beginning.

I got greedy though, and tried to add a 5th page. This is the entire code. I have these problems now:

1) the new slide gets stuck when I pan the first slide (which is the extra slide I added to the far left of the MC)

2) When I go back into the MC, I cannot see the 5th slide now, because the stage doesn't scroll any further. So I can't modify it.

Have I made any mistakes here?

quit.addEventListener(MouseEvent.MOUSE_DOWN, quit1);

function quit1(event:MouseEvent):void {
  TweenLite.to(tiles, .5, {x:4096, ease:Strong.easeOut});
}

stop();

Multitouch.inputMode = MultitouchInputMode.TOUCH_POINT;

import com.greensock.*;
import com.greensock.easing.*;

tiles.addEventListener(TouchEvent.TOUCH_BEGIN, homeTouchBegin);

tiles.addEventListener(TouchEvent.TOUCH_END, homeTouchEnd);

tiles.x = 4096;

var homeDragBounds:Rectangle = new Rectangle(0, 0, 4096, stage.stageHeight-768);

function homeTouchBegin(event:TouchEvent):void {

event.target.startTouchDrag(event.touchPointID, false, homeDragBounds);

}

function homeTouchEnd(event:TouchEvent):void {

event.target.stopTouchDrag(event.touchPointID);

if (tiles.x < 512) {

TweenLite.to(tiles, .5, {x:0, ease:Strong.easeOut});

}

else if (tiles.x > 512 && tiles.x < 1024){

TweenLite.to(tiles, .5, {x:1024, ease:Strong.easeOut});

}

else if (tiles.x > 1024 && tiles.x < 1536) {

TweenLite.to(tiles, .5, {x:1024, ease:Strong.easeOut});

}

else if (tiles.x > 1536 && tiles.x < 2048) {

TweenLite.to(tiles, .5, {x:2048, ease:Strong.easeOut});

}

else if (tiles.x > 2048 && tiles.x < 2560) {

TweenLite.to(tiles, .5, {x:2048, ease:Strong.easeOut});

}

else if (tiles.x > 2560 && tiles.x < 3072) {

TweenLite.to(tiles, .5, {x:3072, ease:Strong.easeOut});

}

else if (tiles.x > 3584 && tiles.x < 4096) {

TweenLite.to(tiles, .5, {x:4096, ease:Strong.easeOut});

}

}

I'm also trying to crack this experiment, modifying the Gesture Zoom. Any ideas on this one please?

Thanks,

Matt

http://forums.adobe.com/thread/850317?tstart=0

[monkey500]

Hi folks,

Apart from my question about expanding more pages in Mike's draggable demo, I ran into big problems when I tried to do more.

I thought it would be great to try out a long, draggable background containing interactive vector movieclips. At the moment I'm working on an interactive ebook for kids, and to keep it simple you just touch arrows to go from page to page.

However, when I put a couple of test movieclips inside, this is what happened:

- I was able to initiate button presses to load movie clips using 'TOUCH.TAP', and I was surprised this didn't interfere with the scrolling effect.

- BUG 1: I have a Frog movie clip which is animated on one frame, containing several parts inside the clip. when I drag over this frog, I can pull its parts to pieces!

- BUG 2: Another character can be touched, which fires the button inside it, however, after a few touches it teleports to another panel, and gets stuck

at the top of the screen.

I'm not sure how adaptable Mike's code will be in that case, so maybe best to stick to flat pngs.. or maybe Air 2.7 is causing the bugs?

Anyone else had this problem?

Thanks,

Matt