Time based animation instead of FPS based

Lets create a time based animation.
If you think your movie is playing at the speed of your FPS setting, then think twice. FPS setting sets the maximum speed of your movie. We can not say that our movie will play on that speed every time. Because Flash movies are rendered through processor powers, so if our processor is busy doing something else then our movie is bound to get slower if we rely on FPS. But FPS settings are important to set the maximum possible speed of our movie.
Well, then how to animate a certain thing in certain time interval? The trick is "setInterval".this is a method which calls a function at a regualr time interval. Lets put this into practice.
1.Create a movie with 2 layers, one is "Gfx" and the other is "Actions".
2. Make a movieclip and name it myClip (on library) .
3. make 2 instances of "myclip" on stage by dragging the movieclip to stage for 2 times. Now name the 2 instances on stage as

box_1_mc
box_2_mc

4.Fine. Lets write some code to animate them in x axis. For this we will write a function which takes a parameter. Because we are going to call that function and pass the parameter as movieclip.So the code will look like

function moveX(clip:MovieClip){
clip._x++;
updateAfterEvent();
}

Whats the function is doing ? Its actually taking a parameter "clip" which is of type "MovieClip". Then the function adds 1 to the clips x-position. we can write this by

clip._x++;

or

clip._x = clip._x+1;

Both are the same thing.

Finally the function calles "updateAfterEvent()" method which updates the stage as soon as the function is called.
If you test movie now, you can see nothing is happening !! Why ?! Because we have just created a function, we have not called it yet. So next we are going to call the "setInterval" method and call our function from that.

5. the syntax for setInterval is

setInterval(functionName,TimeInterval,parametersToPassToTheFunction);

6.To call uour function and pass our movieclips we will write as

setInterval(moveX,100,box_1_mc);

So first we are calling our "moveX" function then saying that this function will be called at every 100milliseconds and the parameter the function should take is "box_1_mc".

The final code will look like

function moveX(clip:MovieClip){
clip._x++;
updateAfterEvent();
}
setInterval(moveX,100,box_1_mc);

Now test the movie, you can see your movieclip is animated in x-axis smoothly. similarly if we want to animate the other clip then we just pass the other clip as a parameter and we also want the other clip to move at different speed so we will call our function at different intervals too. Well the finished script will look as

function moveX(clip:MovieClip){
clip._x++;
updateAfterEvent();
}
setInterval(moveX,100,box_1_mc);
setInterval(moveX,50,box_2_mc);

Now test you movie, we can see our sencond box is moving faster than the first one, because we are calling it in every 50 milliseconds, where the move function of first clip is called every 100 milliseconds.

Happy animating.

Advertisements

4 thoughts on “Time based animation instead of FPS based

  1. Your site is about the only thing I’ve been able to find to offer guidance on this subject. Thank you for creating the web site. I hope you can help direct me toward additional information and/or places where I can find more of this info.

  2. Hi Vic,
    thanks for your kind words.
    Keep an eye on the side bar of main page, there is a section called “my favourite places”.Those were links to some of the places I usually go for stuffs.

  3. hi i’ll gonna ask you some help …
    Ii’m actually trying to update a site and i’ve got several problems in doing so since i’m really
    not skiled with action scripts…

    Can you help me…??
    plz.?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s