How to move an object slowly and smoothly from location 1 to location 2?

programming flash
1

Hi,

I am new to ActionScript. I wish to use ActionScript to move an object slowly and smoothly from location 1 to location 2.

I learned that I can use the following to move an object to location 2 (x2, y2):

mThisObject.x = x2;
mThisObject.y = y2;

However the object just “swift” from location 1 to location 2, not moving slowly and smoothly from location 1 to location 2.

Could some experts here provide a guideline for me?

Thanks and best regards

Alex

2

Use Tween class which is builtIn or www.TweenLite.com, ewentually Tweener

3 

import fl.transitions.Tween;
import fl.transitions.easing.*;
var x2:Number = 100;
var y2:Number = 100;
var tweenX:Tween = new Tween(mThisObject, "x", Regular.easeOut, mThisObject.x, x2, 3, true);
var tweenY:Tween = new Tween(mThisObject, "y", Regular.easeOut, mThisObject.y, y2, 3, true);
4

try this,

var easing:Number = .5;
var targetX:Number = stage.stageWidth/2

addEventListener(Event.ENTER_FRAME,moveStuff);

function moveStuff(evt:Event){
    ball.x += (targetX-ball.x) * easing;
   
    }
5

Hi all,

Thanks so much. It works.

I have one more question:

import fl.transitions.;
import fl.transitions.easing.;

// apply Wipe Transition
TransitionManager.start(mImage1, {type:Wipe, direction:Transition.IN, duration:2, easing:None.easeNone, startPoint:1});

// apply Tween Animation
var myTween:Tween = new Tween(mImage2, “x”, Elastic.easeOut, 0, 300, 3, true);

The above wipe transition and Tween Animation are executed at the same time. I need the Wipe Transition execute first, wait 2 seconds, then execute the Tween Animation. How can I do that? I searched for the “wait” Methods, but no luck.

Thanks and best regards

Alex

6

Most tweening engines have a delay parameter, like TweenLite or Tweener (mentioned). If your using the Adobe one, then I’m not sure it has that feature.

But you can use the Timer class:

import fl.transitions.*;
import fl.transitions.easing.*;
import flash.events.TimerEvent;
import flash.utils.Timer;

// apply Wipe Transition
TransitionManager.start(mImage1, {type:Wipe, direction:Transition.IN, duration:2, easing:None.easeNone, startPoint:1});

// apply Tween Animation
var timer:Timer = new Timer (2000, 1);
timer.addEventListener (TimerEvent.TIMER_COMPLETE, timed);
timer.start ();

function timed (evt:TimerEvent) : void {
	var myTween:Tween = new Tween(mImage2, "x", Elastic.easeOut, 0, 300, 3, true);
}
7

Hi,

Thanks for your help. I just tested with the following:

import fl.transitions.;
import fl.transitions.easing.;

import flash.utils.Timer;
import flash.events.TimerEvent;

var timer:Timer = new Timer(3000, 1);
timer.addEventListener(TimerEvent.TIMER, doNextTween);

timer.start();

// apply wipe transition
TransitionManager.start(mImage1, {type:Wipe, direction:Transition.IN, duration:2, easing:None.easeNone, startPoint:1});

function doNextTween(e:TimerEvent):void{
// apply Tween
var myTween:Tween = new Tween(mImage2, “x”, Elastic.easeOut, 0, 300, 3, true);
timer.removeEventListener(TimerEvent.TIMER, doNextTween);
}

I have another question:

If I want to do more animation one by one with different time intervals. Is it true that I need to create another Timer, do animation, remove the Timer… create another Timer, do animation, remove the Timer again…

I think it should have a better Method.

Thanks and best regards

Alex

8 

import fl.transitions.*;
import fl.transitions.easing.*;
// apply Wipe Transition
TransitionManager.start(mImage1, {type:Wipe, direction:Transition.IN, duration:2, easing:None.easeNone, startPoint:1});
var j:int=0;
var ID:Number=0;
// apply Tween Animation

function rain_creator():void {
 j++;
             trace(j);
 if (j==10)  var myTween:Tween = new Tween(mImage2, "x", Elastic.easeOut, 0, 300, 3, true); 
 if (j==20)   var myTween1:Tween = new  Tween(mImage2, "alpha", Elastic.easeOut, 0, 1, 10, true);  
 if (j==30)   var myTween2:Tween = new  Tween(mImage2, "rotation", None.easeOut, 0, 360, 1, true);   
 if (j==40)   {var myTween3:Tween = new  Tween(mImage2, "y", Regular.easeOut, 100, 1, 1, true);    
 myTween3.looping=true;
 }
 
}
ID=setInterval(rain_creator,350);
9

www.TweenMax.com and sequencing

10

^ Yup heres a quick example for you, using TweenLite:

import fl.transitions.*;
import fl.transitions.easing.*;
import gs.TweenLite;

// apply wipe transition
TransitionManager.start(mImage1, {type:Wipe, direction:Transition.IN, duration:2, easing:None.easeNone, startPoint:1});

//myImage2.x = 0; // If it wasn't 0 already
//// apply Tween
TweenLite.to (myImage2, 3, { x:300, ease:Elastic.easeOut, delay:3 } );
TweenLite.to (myImage3, 3, { x:500, ease:Elastic.easeOut, delay:5 } ); // simply increase the delay value to create a sequence of tweens

I havn’t tested it but it should work.

11 
TweenMax.sequence(target:Object, tweenObjects:Array):Array

Description: Provides an easy way to sequence a set of tweens, one after the other. It’s essentially the same thing as making a bunch of individual TweenMax.to() calls on the object with overwrite set to false, and the delays stacked.
Parameters:
target : Object - The object whose properties to tween.
tweenObjects : Array - An array of tween objects. IMPORTANT: each object must contain a “time” property defining the duration of that tween. Example: TweenMax.sequence(mc, [{time:1, x:“200”}, {time:2, autoAlpha:0, onComplete:myFunction}]);

12

Hi all,

Thanks so much. Wow… A lot to learn! I don’t want to sleep to-night:)

Best regards

Alex

13

Thanks Felixz hadn’t noticed that feature.

14 

import fl.transitions.*;
import fl.transitions.easing.*;
//import fl.transitions.TweenEvent;


var myTween:Tween = new Tween(mImage2, "x", Elastic.easeOut, 0, 300, 3, true); 
var myTween1:Tween;
var myTween2:Tween;
var myTween3:Tween;
var myTween4:Tween;


myTween.addEventListener(TweenEvent.MOTION_FINISH, function(TweenEvent){
myTween1 = new  Tween(mImage2, "alpha", Elastic.easeOut, 0, 1, 2, true); 	
t_finish_func();
});


function t_finish_func()
{
myTween1.addEventListener(TweenEvent.MOTION_FINISH, function(TweenEvent){
myTween2 = new  Tween(mImage2, "rotation", None.easeOut, 0, 360, 1, true); 		
t_2_func();
});
}

function t_2_func()
{
myTween2.addEventListener(TweenEvent.MOTION_FINISH, function(TweenEvent){
myTween3 = new  Tween(mImage2, "rotation", None.easeOut, 360, 0, 2, true); 		
myTween4 = new  Tween(mImage2, "alpha", None.easeOut, 1, 0, 1, true); 
myTween4.looping=true;
t_3_func();
});
}

function t_3_func()
{
myTween3.addEventListener(TweenEvent.MOTION_FINISH, function(TweenEvent){
myTween3.start();
});
}
15

Hi all,

I tried all methods one by one. This is wonderful:)

However I noted that the following TweenLite did not work:

import fl.transitions.;
import fl.transitions.easing.;
import gs.TweenLite;

// Goto Loc 1
TweenLite.to (mImage, 3, { x:520, y:265, delay:2 } );

// Goto Loc 2
TweenLite.to (mImage, 3, { x:440, y:350, delay:12 } );

I found out that only the last animation will be executed. How to solve this problem?

Thanks and best regards

Alex

16

Hi,

It works. TweenLite is really easy to use and fun:)

import fl.transitions.;
import fl.transitions.easing.;
import gs.TweenLite;

// Goto Loc 1
TweenLite.to (mImage, 3, { x:520, y:265, delay:2 } );

// Goto Loc 2
TweenLite.to (mImage, 3, { x:440, y:350, delay:12, overwrite:false } );

However I have a problem in using buttons with “Stop”, “Continue Play”, “Back”, etc… to control the playing of movie. The stop(); and mImage.stop(); are not working.

How can I do that?

Thanks and best regards

Alex

17

Hi,

Thanks~~ It works for the “Stop” button:) Here’s all the codes:

import fl.transitions.;
import fl.transitions.easing.;
import gs.TweenLite;

// Goto Loc 1
TweenLite.to (mImage, 3, { x:520, y:265, delay:2 } );

// Goto Loc 2 after go to Loc 1
TweenLite.to (mImage, 3, { x:440, y:350, delay:12, overwrite:false } );

// function to pause animation of mImage
function clickButton(evt:Event):void{
TweenLite.killTweensOf(mImage);
}

// Use button “bStop” to pause the animation
bStop.addEventListener(MouseEvent.CLICK,clickButton);

Could you please provide some guidelines how to “Continue the Play”, “Rewind” and “Forward”? Using all Actionscript to do animation is really new to me.

Thanks and best regards

Alex