Skip to main content
T
Trevor-twenty5eight
Known Participant
July 20, 2011
Answered

Smooth stage swipe/drag on iPad2

  • July 20, 2011
  • 4 replies
  • 6078 views

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

}

}

This topic has been closed for replies.
Correct answer markc888

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.

4 replies

T
Trevor-twenty5eightAuthor
Known Participant
July 22, 2011

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
markc888
Inspiring
July 22, 2011

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.

M
monkey500
Known Participant
July 22, 2011

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

T
Trevor-twenty5eightAuthor
Known Participant
July 21, 2011

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
markc888Correct answer
Inspiring
July 21, 2011

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.

T
Trevor-twenty5eightAuthor
Known Participant
July 22, 2011

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

T
Trevor-twenty5eightAuthor
Known Participant
July 20, 2011

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

Chris W. Griffith
Community Expert
Chris W. GriffithCommunity Expert
Community Expert
July 20, 2011

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

http://www.theflashblog.com/

Chris

T
Trevor-twenty5eightAuthor
Known Participant
July 20, 2011

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

}

Firefly Community Gallery
Adobe Firefly

Remix with Firefly Community Gallery

Thousands of free creations to fall in love with and remix in Firefly.

Explore now
Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices