swipe gesture is not smooth for frame jumping - actionscript-3

I have made an as3 android app where I have used swipe gesture for going next frame and previous frame. but I want when I jump to next or previous frame it swipes smoothly.I have tried to use tween max but it is not working.I have found that tween plugins always work for movie clips.So how can I make the swipe smooth.Can I make it smooth without tween plugins?here is my code....
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 == 10)
{
stop();
}
else
{
nextFrame();
break;
}
}
}
}

In order for you to be able to smooth swap you need to have both frames on your screen, which is not the case with genuine Flash frames. Smooth transitions are animated via ENTER_FRAME handlers, with a potential hide of actual frame change process. So, in order to do a smooth transition, you need to move a picture of one frame to the left, and for the other frame to move in from the right instead of plain nextFrame(). Let's say you have a 60fpa stage, and try to smooth transition left. You will need two screen-sized objects, one depicting current frame and one the frame to be displayed, ready to be displayed as a single transition. An example:
var transition:Sprite;
var bitmaps:Array;
var leftSide:Bitmap
var rightSide:Bitmap;
// initialization code, best placed in constructor
leftSide=new Bitmap();
rightSide=new Bitmap();
bitmaps=[];
transition=new Sprite();
transition.addChild(leftSide);
transition.addChild(rightSide);
rightSide.x=stage.stageWidth; //left side and right side should be aside each other
This is the declaration of the needed structures. The plan is to show the transition, giving it two Bitmaps that will be linked to two different BitmapData objects that'll hold pictures of new frame and old frame. We will draw our current frame on current frame's bitmapdata, then take a stored next frame bitmap data and the do transition.
function swipeHandler((event:TransformGestureEvent):void {
var doSwitch:Boolean=false;
var targetFrame:int=currentFrame;
switch(event.offsetX) {
// swiped right
case 1: {
if (currentFrame>2) {
// let's say we're not allowed to swipe right from frame 2
targetframe=currentFrame-1;
doSwitch=true;
}
break;
}
// swiped left
case -1: {
if(currentFrame < 10) {
targetFrame=currentFrame+1;
doSwitch=true;
}
break;
}
}
if (!doSwitch) return;
// prepare transition
if (!bitmaps[targetFrame]) bitmaps[targetFrame]=new BitmapData(stage.stageWidth,stage.stageHeight,false,0xffffff);
// ^ make a new bitmap if there's none for target frame
if (!bitmaps[currentFrame]) bitmaps[currentFrame]=new BitmapData(stage.stageWidth,stage.stageHeight,false,0xffffff);
// the same for source frame
bitmaps[currentFrame].fillRect(bitmaps[currentFrame].rect,0xffffff);
bitmaps[currentFrame].draw(stage); // draw current frame on the bitmap
// with this and stored bitmaps, old frame would remain drawn on the cached bitmap
// and able to be used as a transition image
if (targetFrame>currentFrame) {
leftSide.bitmapData=bitmaps[currentFrame];
rightSide.bitmapData=bitmaps[targetFrame];
transition.x=0;
// here is the place to initialize TweenMax tween to move "transition"
// and don't forget to removeChild(transition) at the end of the tween
} else {
rightSide.bitmapData=bitmaps[currentFrame];
leftSide.bitmapData=bitmaps[targetFrame];
transition.x=-1*stage.stageWidth;
// same here for tweening
}
stage.addChild(transition);
gotoAndStop(targetFrame);
}
This places a prepared transition object on screen above all the underlying items, effectively masking the exact frame switch, done by gotoAndStop() call. This object's x coordinate can be tweened afterwards, and the object should be removed from stage once the tween is ofer.
Hope this helps.

Related

Moving A MovieClip to Left/Right Using Touch Events with simultaneous touches

I am Developing a game, AS3 Adobe air targeted for both android and ios, in which you have a movie clip in the center, and two buttons ( left and right ) that should move that movie clip. My goal is to make the shift between the left/right as smooth as possible :
- if the player is touching the left button, the movie clips moves left. if he removes he's finger from the left button, and touches immediately the right button, the movie clip won't move, it's until he re-touches the right button , that the movie clips moves right. I have tried to implement multitouch events, but i seem to have something wrong since this is the behavior i'm getting.
- if the player is touching the left button, the movie clips moves left as expected, if he touches the right button, the movie clip stops as expected, but if he removes his finger from the left button while keeping it on the right button, the movie clip still freezes and don't move, it should move then to the right
This is the code i am using :
leftButtonCreated.addEventListener(TouchEvent.TOUCH_BEGIN,mouseDown);
rightButtonCreated.addEventListener(TouchEvent.TOUCH_BEGIN,mouseDown2);
stage.addChild(leftButtonCreated);
stage.addChild(rightButtonCreated);
function mouseDown(e:TouchEvent):void
{
stage.addEventListener(TouchEvent.TOUCH_END,mouseUp1);
//listen for mouse up on the stage, in case the finger/mouse moved off of the button accidentally when they release.;
addEventListener(Event.ENTER_FRAME,myButtonClick);//while the mouse is down, run the tick function once every frame as per the project frame rate
}
function mouseUp1(e:TouchEvent):void
{
removeEventListener(Event.ENTER_FRAME,myButtonClick);//stop running the tick function every frame now that the mouse is up
stage.removeEventListener(TouchEvent.TOUCH_END,mouseUp1);
}
function mouseDown2(e:TouchEvent):void
{
stage.addEventListener(TouchEvent.TOUCH_END,mouseUp2);
//listen for mouse up on the stage, in case the finger/mouse moved off of the button accidentally when they release.;
addEventListener(Event.ENTER_FRAME,stopDragging);//while the mouse is down, run the tick function once every frame as per the project frame rate
}
function mouseUp2(e:TouchEvent):void
{
removeEventListener(Event.ENTER_FRAME,stopDragging);//stop running the tick function every frame now that the mouse is up
stage.removeEventListener(TouchEvent.TOUCH_END,mouseUp2);
}
function stopDragging(ev2:Event):void
{
if (MC.x <= rightButtonCreated.x)
{
MC.x = MC.x + 10;
}
}
function myButtonClick(ev:Event):void
{
if (MC.x > leftButtonCreated.x)
{
MC.x = MC.x - 10;
}
else
{
}
}
The Code was initially set for mouseEvents, so i tried to shift to touch events so i could fix this problem, and the code above is what i got. Thank you for your time.
EDIT:
And, i use the following code :
var leftButtonCreated:leftB= new leftB();
Your current problem is that both mouseUp1 and mouseUp2 are triggered once you release the left button, as they are both attached to stage. But your actual problem is deeper. You should first move the object left and right if corresponding buttons are pressed, and use TouchEvent.touchPointID to track which touch has been released to understand which button was released.
Also a potential caveat: If you touch both left and right button, then swap fingers while retaining both touches, then release the finger that's over the right button - where should your object move, left or right? I say the correct answer is to the right, as the finger released corresponds to the left button.
leftButtonCreated.addEventListener(TouchEvent.TOUCH_BEGIN,touchDown);
rightButtonCreated.addEventListener(TouchEvent.TOUCH_BEGIN,touchDown);
leftButtonCreated.addEventListener(TouchEvent.TOUCH_END,touchUp);
rightButtonCreated.addEventListener(TouchEvent.TOUCH_END,touchUp);
addEventListener(Event.ENTER_FRAME,moveObject);
function touchDown(e:TouchEvent):void {
var button:DisplayObject=e.currentTarget as DisplayObject;
if (!button) return; // can't fail typecast to DisplayObject in this context, but leave for good measure
if (button==leftButtonCreated) {
leftButtonPressed=true;
leftButtonTouchID=e.touchPointID;
return;
}
if (button==rightButtonCreated) {
rightButtonPressed=true;
rightButtonTouchID=e.touchPointID;
return;
}
}
function touchUp(e:TouchEvent):void {
var button:DisplayObject=e.currentTarget as DisplayObject;
if (!button) return;
var ti:int;
if (button==leftButtonCreated) {
ti=leftButtonTouchID;
if (ti==e.touchPointID) {
leftButtonPressed=false;
}
}
if (button==rightButtonCreated) {
ti=rightButtonTouchID;
if (ti==e.touchPointID) {
rightButtonPressed=false;
}
}
}
function moveObject(e:Event):void {
if (leftButtonPressed) MC.x-=10;
if (rightButtonPressed) MC.x+=10;
if (MC.x<leftButtonCreated.x) MC.x=leftButtonCreated.x;
if (MC.x>rightButtonCreated.x) MC.x=rightButtonCreated.x;
}
EDIT: Apparently SimpleButtons don't allow the events to propagate outside to their parents. Okay, this can still be remedied, but you will have to store the required properties in your Main class.
var leftButtonPressed:Boolean=false;
var rightButtonPressed:Boolean=false;
var leftButtonTouchID:int=0;
var rightButtonTouchID:int=0;
The above code has been updated. Please return to using SimpleButtons directly, as you were using with var leftButtonCreated:leftB= new leftB();.

AS3 parallax effect in Flash banner preventing Movieclip buttons from functioning

I'm building a rich media Flash banner ad. I have 3 to 4 round MovieClip buttons that move around with an AS3 parallax effect. It looks like an EnterFrame loop creates the effect in AS3. But the individual Movieclip buttons won't function when I assign MouseEvent Click events. I want the parallax movement to stop and playhead advance to a specific label on main timeline when the MC's are clicked.
I'm sure this can be done but I lack the expertise. Here is the code:
//add an event listener to trigger every frame
addEventListener(Event.ENTER_FRAME, onFrame);
//set a constant that marks the centre of the stage
//the stage is 600 x 400, so we halve that
const stageCentre:Point=new Point(180,300);
//set an easing constant
const ease:Number=0.2;
function onFrame(e:Event) {
//create a point to store the distances the mouse is from the centre
var mouseOffset:Vector3D=new Vector3D(stageCentre.x-mouseX,stageCentre.y-mouse Y, 0);
//move each background layer by a different percentage of offset
//the easing constant is used here to create smoother results
//foreground moves the most; 75% of the mouse offset
clip1_mc.x+=(stageCentre.x+mouseOffset.x*0.70 - clip1_mc.x)*ease;
clip1_mc.y+=(stageCentre.y+mouseOffset.y*0.50 - clip1_mc.y)*ease;
//mid-ground moves a medium amount; 50% of the mouse offset
clip2_mc.x+=(stageCentre.x+mouseOffset.x*1.00 - clip2_mc.x)*ease;
clip2_mc.y+=(stageCentre.y+mouseOffset.y*1.00 - clip2_mc.y)*ease;
//background moves the least; 25% of mouse offset
clip3_mc.x+=(stageCentre.x+mouseOffset.x*1.75 - clip3_mc.x)*ease;
clip3_mc.y+=(stageCentre.y+mouseOffset.y*1.00 - clip3_mc.y)*ease;
}
//Click on button to go to and Play "kelsey" label (this does NOT work)
clip1_mc.kelsey_btn.addEventListener(MouseEvent.CLICK, fl_MouseClickHandler);
function fl_MouseClickHandler(event:MouseEvent):void
{
MovieClip(root).gotoAndStop("kelsey");
}
Make sure the clip1_mc is on the top most layer, it is probably overlapped by other clips that are catching up the mouse click events.
If you have buttons in all layers you will need to disable mouse events for everything except the buttons. For example, if you have a "button" and a "background" in each movieclip and you want to only keep the buttons clickable, do something like this inside of that movieclip:
background.mouseEnabled = false;
background.mouseChildren = false;
This way the background will not listen for any mouse interactions
add removeEventlistener when the mouse clicks the movieclip
clip1_mc.kelsey_btn.addEventListener(MouseEvent.CLICK, fl_MouseClickHandler);
function fl_MouseClickHandler(event:MouseEvent):void
{
this.removeEventListener(Event.ENTER_FRAME, onFrame);
MovieClip(root).gotoAndStop("kelsey");
}

setchildindex is creating problems

I have made a simple drag and match game for kids.
I used setchildindex for movie clips to be dragged but when I click next button and go to another frame but movie clips are remaining in the same stage. What should i do?
Here is my code I used: (drag_1, this.numChildren0);.
When I reload it's not working.
drag_1.buttonMode = true;
drag_1.addEventListener(MouseEvent.MOUSE_UP, dropMe_1);
drag_1.addEventListener(MouseEvent.MOUSE_DOWN, dragMe_1);
var back_1X:Number = back_1.x;
var back_1Y:Number = back_1.y;
var hit_2X:Number = hit_2.x;
var hit_2Y:Number = hit_2.y;
function dragMe_1(event:MouseEvent)
{
drag_1.startDrag()
setChildIndex(drag_1, this.numChildren-1);
}
function dropMe_1(event:MouseEvent)
{
drag_1.stopDrag();
if(drag_1.hitTestObject(drop_2))
{
TweenMax.to(drag_1, 0.5, {
x:hit_2X,
y:hit_2Y,
ease:Cubic.easeOut
});
drag_1.mouseEnabled = false;
SoundMixer.stopAll();
}
else
{
TweenMax.to(drag_1, 0.5,
{
x:back_1X,
y:back_1Y,
ease:Bounce.easeOut
});
}
}
You need to remove the MovieClips using removeChild().
Now, why do you need to do that here? Well, this is one of those odd problems you get when you mix the timeline with code. When you place a symbol on the timeline keyframe, the Flash Player will instantiate that symbol when it reaches that frame. After that, any frame on the timeline that updates the symbol (tweens, effects, etc) will do just that, and any frame that lacks the symbol will remove it. However, the Flash Player is very picky about identifying that symbol on each frame of the timeline. When you move it using setChildIndex you are basically breaking the timeline link, and the Flash Player no longer identifies it and removes it based on the keyframes. You'll also find that if you revisit a keyframe that had that symbol, the Flash Player will instantiate a second one regardless if the one you moved is still there. As you can see, it can get pretty messy.

Reverse/Playback AS3 Timeline

I'm trying to make a reversed play module in Action Script 3. I have a video, 200 frames long that I imported to Flash as a movie clip. I name the movie clip and inserted some key frames to make the video stop at specific frames, making it a 3 stage animation.
Whenever I swipe/pan to the right (detecting a positive x offset) it gives the command play();, the movie clip will play til it finds a stop.
What I want to achieve is to play it backwards from the current frame til the previous stop when I swipe to the left (detecting a negative offset).
I sorted out the swipe/touch programming and what I'm missing is the backwards bit. I've managed to make it work, going backwards 1 single frame, not the whole bunch that exist prior to hit the previous stop frame. My code for the swipe and play forward is this, with the single prev frame included, which gives me just one frame back instead of the whole set before the previous stop.
Multitouch.inputMode = MultitouchInputMode.GESTURE;
mymovieclip.stop();
mymovieclip.addEventListener(TransformGestureEvent.GESTURE_SWIPE , onSwipe);
function onSwipe (e:TransformGestureEvent):void{
if (e.offsetX == 1) {
//User swiped right
mymovieclip.play();
}
if (e.offsetX == -1) {
//User swiped left
mymovieclip.prevFrame();
}
}
You could try this:
import flash.events.Event;
import flash.display.MovieClip;
//note that this is not hoisted, it must appear before the call
MovieClip.prototype.playBackward = function():void {
if(this.currentFrame > 1) {
this.prevFrame();
this.addEventListener(Event.ENTER_FRAME, playBackwardHandler);
}
}
function playBackwardHandler(e:Event):void {
var mc:MovieClip = e.currentTarget as MovieClip;
if(mc.currentFrame > 1 && (!mc.currentFrameLabel || mc.currentFrameLabel.indexOf("stopFrame") == -1)) { //check whether the clip reached its beginning or the playhead is at a frame with a label that contains the string 'stopFrame'
mc.prevFrame();
}
else {
mc.removeEventListener(Event.ENTER_FRAME, playBackwardHandler);
}
}
var clip:MovieClip = backMc; //some clip on the stage
clip.gotoAndStop(100); //send it to frame 100
clip.playBackward(); //play it backwards
Now you can put 'stopFrame' label to the clip's timeline (stopFrame1, stopFrame2... stopFrameWhatever) and the clip should stop there until playBackward is called again. Note that you should remove the enter frame event listener if the clip hasn't reached a stopFrame or its beginning and you want to call play/stop from the MovieClip API, otherwise it may cause problems.

How to apply action to mulitple flash layers

I have 5 layers with symbols on each: a, b, c, d and e.
I am trying to work out how to apply the action bellow to a, c, d and e when you hover over b.
Also is there another action similar to ' gotoAndStop(0); ' that instead of going immediately to frame 0 it goes back the way it came?
Link to .Fla http://www.fileden.com/files/2012/11/27/3370853/Untitled-2.fla
stop();
stage.addEventListener(MouseEvent.MOUSE_OVER, playMovie); function playMovie(event) { play(); }
stage.addEventListener(MouseEvent.MOUSE_OUT, stopMovie); function stopMovie(event) { gotoAndStop(0); }
stop();
Thanks
EDIT
After looking at your .fla, here is what is missing/misplaced:
Layers in flash don't mean anything other than z-order/depth. You cannot manipulate a layer in code. All your animations are on the same timeline, so they will always play together. If you want an individual item to animate without the others, you'll have to do the animation on it's own timeline (not just it's only layer). You access your symbols own timeline by double clicking it - do your animation in there.
To reference items that are on the stage, you need to give them an instance name. You do that by clicking on the item that's on the stage, then in properties panel, there is field where you can put in an instance name. For the code below to work, you'd need to give them an instance name of "a","b","c","d","e" respectively. This is different than the symbol name in your library (though it can be the same name).
One way you could do this:
var btns:Vector.<MovieClip> = new Vector.<MovieClip>(); //create an array of all your buttons
btns.push(a,b,c,d,e); //add your buttons to the array
for each(var btn:MovieClip in btns){
btn.addEventListener(MouseEvent.MOUSE_OVER, btnMouseOver); // listen for mouse over on each of the buttons
btn.addEventListener(MouseEvent.MOUSE_OUT, btnMouseOut);
}
function btnMouseOver(e:Event):void {
for each(var btn:MovieClip in btns){ //loop through all your buttons
if(btn != e.currentTarget){ //if the current one in the loop isn't the one that was clicked
btn.play();
try{
btn.removeEventListener(Event.ENTER_FRAME,moveBackwards); //this will stop the backwards animation if running. it's in a try block because it will error if not running
}catch(err:Error){};
}
}
}
function btnMouseOut(e:Event):void {
for each(var btn:MovieClip in btns){ //loop through all your buttons
if(btn != e.currentTarget){ //if the current one in the loop isn't the one that was clicked
goBackwards(btn);
}
}
}
There is no nice way to play a timeline backwards, but there are ways to do it. One such way:
//a function you can call and pass in the item/timeline you want played backwards
function goBackwards(item:MovieClip):void {
item.stop(); //make sure the item isn't playing before starting frame handler below
item.addEventListener(Event.ENTER_FRAME, moveBackwards); //add a frame handler that will run the moveBackwards function once every frame
}
//this function will move something one frame back everytime it's called
function moveBackwards(e:Event):void {
var m:MovieClip = e.currentTarget as MovieClip; //get the movie clip that fired the event
if(m.currentFrame > 1){ //check to see if it's already back to the start
m.prevFrame(); //if not move it one frame back
}else{
m.removeEventListener(Event.ENTER_FRAME,moveBackwards); //if it is (at the start), remove the enter frame listener so this function doesn't run anymore
}
}