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
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/
Copy link to clipboard
Copied
Use TweenLite for animations.
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;
}
}
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/
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
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
Copy link to clipboard
Copied
Let try it on IPhone and IPAD and give me the feedback
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
Copy link to clipboard
Copied
i know)
i mean the smooth swipe, like on the iOS
and how to use that Tween tool
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.
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
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.
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?
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.
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
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
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;
}
}
}
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});
}
}
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
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
Copy link to clipboard
Copied
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