Frames and animations are very closely related. All the animations happen in frames, or frames make the animation happen. Let us understand it like this:
I am sure all of us have watched at-least one cartoon movie. Cartoon movies have been there for like decades. Even before the time when the technological concept for animation was known to us, people have been watching them. Cartoon movies are full of animation, hence they are also called animated movies. But how were they made in those years? Animated movies were made on frames, not the flash frames, but the transparent sheets that we put under the projector machine and view on the screen. The artists use to sketch the cartoon frames on those transparent sheets, which were projected on big screens. All the movements of the cartoon characters were captured in those frames. The projector used to run the bundle of frames so fast, that it looked like a perfect animation.
Flash makes the life easy, as we can easily change any graphic image as we need. Each of these graphics are kept in successive frames, and once the file is run, we see an animation on our computer screens. The clarity of animation depends a lot on the frame rate at which we run it.
What is a Frame?
A frame, in a timeline, is the snapshot or drawing of the currently worked on instructions executed by the flash player. A frame can contain any flash symbol, it can contain action script code, and can even have a label name for the user's convenience.
There is something called
Key frame. A key frame is any drawing that defines smooth transition between 2 points. The main use of key frames comes into picture with tweening effects (as explained in the older posts). If not tweening, then key frames with different pictures/graphics in a single row of a timeline can bring out a good animation.
What shall be the number of frames for a good animation?
To create an illusion of a motion we need to have a transition of the moving object from one point to another. It all depends on the intermediate frames, that how jerky or how smooth the transition happens. Usually, more number of intermediate frames give a smooth transition effect, as even the minute changes of the motion are depicted in each frame picture. This is true when we do not consider the frame rate for our animations (which is explained in the next section of this post).
Frame Rates
The frame rate determines how many frames are played per second. This value is measured in frames per second, commonly referred to as, fps. This is calculated with the formula below:
Frames Per Second = Number of Frames
-----------------------
Time in Seconds
The higher the fps value, faster is the animation played. Low values of fps usually cause slow and jerky animations. The frame rate solely depends on the kind of animation that we make. Keeping a higher frame rate for complex image animations makes the computer to do much work as compared to the work with lower frame rate. High frame rate for simple content doesn't cause any problems usually.
In earlier versions of flash the default fps rate was 12, but in the recent versions it is 24. Means 24 frames are played in every 1 second.
Modifying the fps values with the help of UI and programmatically
The most common way to set our own fps value is by changing the value in the Properties panel and making it global for our entire application. Check the screenshot below:
As already mentioned earlier, the fps value in the latest version of flash have been kept 24, which is quite good to work with.
There may be a case when you might want to change the fps value dynamically or when you application is running. With AS 3.0 programming, we can easily access the frame rate. This is how the fps value is accessed in AS 3.0
stage.frameRate
Stage property can be accessed from anywhere, hence we can change the fps value whenever we want to.
stage.frameRate = 30;
We have a very common flash interview question, which talks about frame rates of our swf files.
The question says, that we have 2 swf files, A and B. A has frame rate of 20 and B has 30. B is loaded into A. How will it affect the frame rate of B.
The answer is very simple and obvious. Since B is loaded into A, A becomes the parent movie clip for B. So the global fps value for A now becomes the fps value for B as well. Hence B will also run at the same rate as A does, which is 20. This means, the file B will run at a slower rate in A, as compared to when running alone. If the fps values are reversed for A and B, and then B is loaded into A, then B would run at a faster rate (30 fps). So it all depends on the frame rate of the parent swf file.
However, it is very well possible to play the movie clip inside the parent movie clip retaining it's own frame rate. This can be achieved programmatically. Take an example, we have a parent movie clip which runs at 24 fps, there is another movie clip, B, which runs at 8 fps. When B is loaded into A, we want that B should run at it's own frame rate. We use a simple logic here. Divide the fps of A by fps of B. We get '3'. So, when A runs 3 frames, B should run 1 frame. Check the following piece of code:
frame_count = 0;
bMovie.stop( );
onEnterFrame = function( )
{
frame_count++;
if (frame_count >= 3 && bMovie._currentframe < bMovie._totalframes)
{
bMovie._currentframe++;
bMovie.gotoAndStop(bMovie._currentframe);
frame_count = 0;
}
}
stop( );
With the encounter of every new frame of the main movie, A, the counter "frame_count" will increment by 1. When the count reaches 3, the next frame of B is played.
