• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

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

New Here ,
Jul 04, 2011 Jul 04, 2011

Copy link to clipboard

Copied

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

Views

20.5K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Mentor , Jul 05, 2011 Jul 05, 2011

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/

Votes

Translate

Translate
Mentor ,
Jul 04, 2011 Jul 04, 2011

Copy link to clipboard

Copied

Use TweenLite for animations.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jul 04, 2011 Jul 04, 2011

Copy link to clipboard

Copied

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;

}

}

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Mentor ,
Jul 05, 2011 Jul 05, 2011

Copy link to clipboard

Copied

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/

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jul 05, 2011 Jul 05, 2011

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jul 05, 2011 Jul 05, 2011

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Mentor ,
Jul 05, 2011 Jul 05, 2011

Copy link to clipboard

Copied

Let try it on IPhone and IPAD and give me the feedback

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
Jul 05, 2011 Jul 05, 2011

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jul 05, 2011 Jul 05, 2011

Copy link to clipboard

Copied

i know)

i mean the smooth swipe, like on the iOS

and how to use that Tween tool

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jul 05, 2011 Jul 05, 2011

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jul 07, 2011 Jul 07, 2011

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Mentor ,
Jul 07, 2011 Jul 07, 2011

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jul 08, 2011 Jul 08, 2011

Copy link to clipboard

Copied

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?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Mentor ,
Jul 08, 2011 Jul 08, 2011

Copy link to clipboard

Copied

Instead moving the clips to different position, just keep that all on the stage and make the visibility to true and false and change the when swipe left to right move the clip according to the position and vice versa.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
Jul 08, 2011 Jul 08, 2011

Copy link to clipboard

Copied

just make the movieclip dragable .put walls top bottom left right and then go into the stop drag code and write in the starting position of the button so it resets when u drop it. then have an 'invisible' block at the other end of the slide and when it hits that write in your function and if u want a delay use the timer class , if you want further help with that i can help but theres an "easy" way of doing it and an alternative to the walls is to make it only dragable on the x axis

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jul 11, 2011 Jul 11, 2011

Copy link to clipboard

Copied

Hi McBain Games, thanks for your reply and trying to help me out with this.

My app I'm trying to make is pretty simple and I'd love to be able to nail the swipe / drag feature we're talking about (as in my video above).

The smooth swiping is still not really happening for me. If you're able to provide any further help I really appreciate it.

My direct email is mike at twenty5eight dot net if you'd rather PM me.

Thanks again

Mike

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jul 18, 2011 Jul 18, 2011

Copy link to clipboard

Copied

I have also been attempting to replicate the smooth swipe animation for images on the iPad2. I have some class script that worked fine on the iPad 1, but I now get a flicker of the image being replaced as the new image slides in. I can't figure out what's wrong, which is horrible because this worked so well before. I have the AS3 attached below, any help would be VERY appreciated!

package  {

import flash.display.MovieClip;

import flash.events.Event;

import flash.display.DisplayObject;

import flash.geom.Matrix;

import flash.events.TouchEvent;

import flash.ui.Multitouch;

import flash.ui.MultitouchInputMode;

import flash.events.MouseEvent;

import flash.geom.Point;

import fl.transitions.Tween;

import fl.transitions.easing.*;

public class ImageFlicker extends MovieClip {

private var _index:int = 0;

public function get currentIndex():int { return _index; }

public function set currentIndex(val:int) {

var previousIndex = _index;

if(val < 0) val = this.numChildren - 1;

if(val == this.numChildren) val = 0;

_index = val;

this.update(previousIndex);

}

public function get currentImage():DisplayObject { return getChildAt(currentIndex); }

public function get previousImage():DisplayObject {

return getChildAt((currentIndex == 0) ? this.numChildren - 1 : currentIndex - 1);

}

public function get nextImage():DisplayObject {

return getChildAt((currentIndex == this.numChildren - 1) ? 0 : currentIndex + 1);

}

public function next():void {

currentIndex++;

}

public function prev():void {

currentIndex--;

}

public function ImageFlicker() {

// constructor code

if(stage) addEventListener(Event.ADDED_TO_STAGE, init); else init();

}

private function init(e:Event = null):void {

if(e) removeEventListener(Event.ADDED_TO_STAGE, init);

Multitouch.inputMode = MultitouchInputMode.TOUCH_POINT;

// Events

this.stage.addEventListener(MouseEvent.MOUSE_DOWN, beginTouch);

this.stage.addEventListener(MouseEvent.MOUSE_MOVE, moveTouch);

this.stage.addEventListener(MouseEvent.MOUSE_UP, endTouch);

for(var i = 0; i < this.numChildren; i++) {

var child:DisplayObject = this.getChildAt(i);

child.visible = false;

child.cacheAsBitmap = true;

child.cacheAsBitmapMatrix = new Matrix();

child.x=0;

child.y=0;

child.width = stage.stageWidth;

child.scaleY = child.scaleX;

}

currentImage.visible = true;

}

private var startPoint:Point;

private var t1:Tween;

private var t2:Tween;

private var t3:Tween;

private function update(lastIndex:int) {

t1 = new Tween(currentImage, "x", Regular.easeOut, currentImage.x, 0, 0.5, true);

t2 = new Tween(nextImage, "x", Regular.easeOut, nextImage.x, currentImage.width, 0.5, true);

t3 = new Tween(previousImage, "x", Regular.easeOut, previousImage.x, -previousImage.width, 0.5, true);

currentImage.visible = true;

currentImage.x = 0;

}

private function beginTouch(e:MouseEvent):void {

if(t1) t1.stop();

if(t2) t2.stop();

if(t3) t3.stop();

this.startPoint = new Point(e.stageX, e.stageY);

}

private function moveTouch(e:MouseEvent):void {

if(this.startPoint == null) return;

var xOffset = -this.startPoint.subtract(new Point(e.stageX, e.stageY)).x;

currentImage.x = xOffset;

if(xOffset < 0) {

nextImage.visible = true;

previousImage.visible = false;

} else {

previousImage.visible = true;

nextImage.visible = false;

}

nextImage.x = currentImage.width + xOffset;

previousImage.x = currentImage.x - previousImage.width;

}

private function endTouch(e:MouseEvent):void {

var xOffset = -this.startPoint.subtract(new Point(e.stageX, e.stageY)).x;

if(xOffset > (this.stage.stageWidth / 2)) {

this.prev();

} else if(xOffset < -(this.stage.stageWidth / 2)) {

this.next();

} else {

update(0);

}

this.startPoint = null;

}

}

}

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jul 19, 2011 Jul 19, 2011

Copy link to clipboard

Copied

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

}

}

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Aug 02, 2011 Aug 02, 2011

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Aug 02, 2011 Aug 02, 2011

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Oct 22, 2012 Oct 22, 2012

Copy link to clipboard

Copied

LATEST

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines