Frame by frame animation in flash
In this tutorial, we will be looking at how Keyframes work in Flash layers, and how to use them to create flash animation (for beginners). The animation we will make is a simple counter. It goes from 1 to 3 and continues in a loop.
The Flash timeline consists of layers, frames and keyframes. In all the layers in flash, you can add frames or keyframes. Keyframes have a black circle inside them, while regular frames do not. A keyframe represents change. When adding a new keyframe, you can change the contents on that layer from that frame and any regular frame after it. Regular frames after a keyframe will have the same content as the keyframe before them.
To understand better, we will go step-by-step in making the 1-3 counter easy Flash animation.
Step 1) Start by drawing a square on the stage with the rectangle tool. Hint: Hold down shift to make the square perfect.
Optional: Remove the outlines of the square by double clicking on one of them and pressing backspace / delete.
Step 2) Give the square a blue color
Step 3) With the Text tool, write down 1 inside the square.
Step 4) Go back to the selection tool, select the text and choose the black color, then reposition the text in the middle.
Step 5) Select the whole drawing with the select tool, or press Control + A. Tip: You can also enlarge the text’s font size like shown in this picture.
Right Click – Convert to Symbol.
Give it a name, I chose mcClip1 and I will refer to this MovieClip with this name in this tutorial.
Set the Registration point to middle.
Step 6) On frame 11 – Right Click – Insert Keyframe.
We will change the image on this frame, so that it appears as an animation.
You will notice that the frames before the Keyframe(from 2 to 10) are regular frames, so they will have the image from the first frame.
Step 7) Right click on the “1” symbol on the 11th frame and click Duplicate Symbol. This will create a separate symbol in the library same as the one we have now. We will give it another name: mcClip2. We will also change its color to Yellow and change the number to 2.
Step 8) Repeat the same process, but add a keyframe on frame 21. Duplicate the “2” symbol and give it the name mcClip3. We will make this one green with the number 3.
Step 9) Add a regular frame on frame 30. Right Click – Insert Frame.
Step 10) Test it out! Either press Enter (Play in the Command menu) or Control / Command + Enter.
Now for adding this into 1 MovieClip… Most of the work is already done now, so we won’t repeat most of the process. Make a new Flash file and follow these steps:
Step 1) Copy the first symbol on the stage(mcClip1).
Step 2) Convert the whole symbol to another symbol and name it mcAnimation.
Double click on this new symbol to Edit it. Inside it, you will see that it has its own independent timeline.
Now we will repeat these 3 steps from Part 1 here…
Step 3) Insert a keyframe on Frame 11, like before and then copy mcClip2 from the previous project and add it on the stage.
Hint: If you used Center for the registration point of the symbols as I mentioned earlier, you can set the position of the new symbol manually at 0, 0.
Step 4) Like before, instert a keyframe on Frame 21 and copy mcClip3 on the stage at the same position as the previous 2 symbols.
And again, like before, add a regular frame on frame 30.
Step 5) Test the SWF file.