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

[alex298]

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

[Felixz]

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

[johnlouis]

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

[RebuiltJorge]

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;

}

[alex298]

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

[tpspoons]

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

[alex298]

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

[Alex Lexcuk]

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

[Felixz]

www.TweenMax.com and sequencing

[tpspoons]

^ 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.

[Felixz]

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

[alex298]

Hi all,

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

Best regards

Alex

[tpspoons]

Thanks Felixz hadn't noticed that feature.

[Alex Lexcuk]

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

[alex298]

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

[greensock]

By default, TweenLite overwrites previous tweens of the same object unless you set overwrite:false. The default behavior is meant to avoid conflicts where two tweens are competing for control of the same object. Anyway, simply set overwrite:false in your second tween, like so:


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

Have fun.

[alex298]

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

[greensock]

Could you post your code that's not working? Keep in mind that the MovieClip.stop() only prevents the playhead from proceeding inside a MoveiClip, but it won't stop any ActionScript-driven tweens (just timeline ones). To stop TweenLite tweens on a particular MovieClip, call TweenLite.killTweensOf(myMovieClip); You can also store your TweenLite instances and kill each individually using removeTween(), but that's probably not what you need.

Good luck!

[alex298]

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,clickButto n);


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