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

Smooth swipe gestures on iPad using Air for iOS in Flash CS 5.5

  • July 5, 2011
  • 5 replies
  • 21395 views

I'm using Flash CS5.5 and have got swipe gestures responding on my iPad.

The only problem is that they don't animate and I'm wondering if anyone has had any luck in replicating the smooth iOS swipes using Actionscript 3.0.

I found a solution using ENTER FRAME but it was really slow and jerky.

Any help would be much appreciated.

Thanks

    This topic has been closed for replies.
    Correct answer relaxatraja

    You can test the sample code with the transitions here and apply it to the space where you want in as3:

    http://www.greensock.com/tweenlite/

    5 replies

    G
    GreenSock
    Participant
    August 2, 2011

    I just noticed this thread - sorry for chiming in late, but in case it helps, you might want to check out http://www.greensock.com/throwprops/ because there's an example towards the bottom of that screen that demonstrates panel-based flick scrolling that doesn't even require the ThrowPropsPlugin. The source code is downloadable. And of course the plugin might be useful for you too. There are several interactive examples and a video there, so hopfully it'll be relatively self-explanitory. Oh, and if you run into any trouble changing the code from mouse-based to touch-based events, see http://forums.greensock.com/viewtopic.php?f=1&t=5731

    T
    Trevor-twenty5eightAuthor
    Known Participant
    August 3, 2011

    Hey Greensock

    I actually came up with my own solution using your Tweenlite plugin and a bunch of if else statements that responded to draggable MCs...

    Although having just checked out your ThrowPropsPlugin I'm speechless... looks really awesome so we just bought a Shockingly Green membership to take advantage of this plugin.

    I'm going to rewrite my app using your plugin... Keep up the great work mate

    Mike

    R
    Rasmy2012
    Participating Frequently
    October 22, 2012

    Hey

    I am new in flash and making an image related application using adobe airn, but my image are place on different frames one by one. how can i put same effects in swipe.

    Plz reply

    Thanks In Advance

    Rachita

    T
    Trevor-twenty5eightAuthor
    Known Participant
    July 20, 2011

    Using McBains suggestions above of making the MC draggable, I've come up with a solution using touch events to drag a large movie clip on stage that is working a treat on my iPad.

    The only problem I'm having with it is that it must be dragged in the wrong direction. It must be dragged right but I want to drag it left.

    If anyone could help with this, I'd really appreciate it, otherwise, I think this is a really neat solution.

    Mike

    Multitouch.inputMode = MultitouchInputMode.TOUCH_POINT;

    stage.addEventListener(TouchEvent.TOUCH_BEGIN, homeTouchBegin);

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

    }

    }

    T
    Trevor-twenty5eightAuthor
    Known Participant
    July 8, 2011

    I've been going round in circles trying to find out a way to reproduce the swipe like the native iOS swipes you see on most apps. It seems to use touch points to drag the stage and then also the ability to flick it...

    if anyone knows how this is done, I'd love some direction as I think users have come to expect this functionality.

    I think the way I've done it could be streamlined as it seems a bit bulky but here is a video of my result using 4 movie clips at stage size (1024 x 768) all lined up next to each other and then tweening the x values of all the movieclips at one when the user swipes left or right. I used Greensock's Tweenlite for the tweens as suggested above by Relaxatraja. Published via AIR for iOS (2.7 CPU)

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

    As you can see, if I let each screen settle before swiping the next one it looks okay, but as you can see when I speed up my swipes, the screens struggle and it doesn't work properly.

    Anyway, just thought I'd share this as I'm really appreciative of everyone's help on this forum and wanted to share my progress so far.

    Would really love to work out how to reproduce the native iOS swipes and scrolls with AS3 though. That would be great.

    Mike

    relaxatraja
    relaxatraja
    Inspiring
    July 8, 2011

    I'm not able to see the video, but you should also consider the performance when goes to 1024*768, what you have on 4 movieclips? high resolution images? The rendering method should also consider. somewhat the level of optimization should be there.

    T
    Trevor-twenty5eightAuthor
    Known Participant
    July 8, 2011

    Hi, you should be able to see the video now.

    Yes I have 4 separate movie clips (1024x768) with good quality images in them (1024 x 768 72dpi). They're placed at x values of 0, 1024, 2048, 3072

    Was using PNG lossless from properties in Flash but have made them 60% JPG now in Flash. I'm not happy with the quality now and would like to push it a bit higher...

    What do you think?

    McbainGames11
    McbainGames11
    Participating Frequently
    July 5, 2011

    buy adobe flash cs5.5 and it have all of the code snippets for every possible mobile interaction you may want

    heres one:


    Multitouch.inputMode = MultitouchInputMode.GESTURE;

    stage.addEventListener (TransformGestureEvent.GESTURE_SWIPE, fl_SwipeToGoToNextPreviousFrame);

    function fl_SwipeToGoToNextPreviousFrame(event:TransformGestureEvent):void
    {
        if(event.offsetX == 1)

    //right swipe i think
        {
             //execute you code here when you swipe..
        }

    }

    if you want to swipe the other way you need to replace  the if statement line with this:

      if(event.offsetX == -1)

    flash cs5.5 helps tons with this sorta sstuff so get it!!!

    enjoy

    Z
    zhertlsh
    Participant
    July 5, 2011

    i know)

    i mean the smooth swipe, like on the iOS

    and how to use that Tween tool

    T
    Trevor-twenty5eightAuthor
    Known Participant
    July 5, 2011

    zhertish, forums are about helping people but you also have to help yourself as well. Most of the code you'll need for this effect is written in this thread. Flash CS5.5 also has a stack of code snippets available for you to use and tweak. Piece it together yourself and let us know how you go. As soon as I give it a go I'll do the same.

    relaxatraja
    relaxatraja
    Inspiring
    July 5, 2011

    Use TweenLite for animations.

    T
    Trevor-twenty5eightAuthor
    Known Participant
    July 5, 2011

    Hi Relexatraja, thanks for responding. I have used Tweenlite before but is there any chance you could possibly show me some AS3 code I may need to use?


    Here's what I've got so far and it works a charm as far as moving through the next or previous frames. It's the smooth animation I'd like to get from screen to screen like you get on the iPhone and iPad. I've just grabbed this code from code snippets and manipulated it a little to suit my project.

    Thanks in advance

    Multitouch.inputMode = MultitouchInputMode.GESTURE;

    stage.addEventListener (TransformGestureEvent.GESTURE_SWIPE, SwipeHandler);

    function SwipeHandler(event:TransformGestureEvent):void

    {

    switch(event.offsetX)

    {

    // swiped right

    case 1:

    {

    prevFrame();

    break;

    }

    // swiped left

    case -1:

    {

    if(currentFrame == 4) {

    stop();

    }

    else

    nextFrame();

    break;

    }

    }

    Z
    zhertlsh
    Participant
    July 5, 2011

    Sorry, I jumped the gun in responding to you.

    I just did a quick test in Flash using a basic tween such as and the idea works a treat.

    TweenLite.to(tiles, 1, {x:-1024});

    Won't be able to try it on the iPad till tomorrow but I think it might be the next best thing to the effect I'm looking for.

    Ideally, what I love about the iPad and iPhone apps I've used is that you can hold the screen and swipe slowly and the screen moves with your finger... but I guess that is much harder and more complex.

    Anyway, I think Tweenlite might be the answer for the time being.

    Thanks


    good staff, i was lookin for such possibility to

    but im really noob in code, so, pls, tell me. how, and where should i put this to get those nice swipe animation from one frame to next

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