Apps 3 : Creating Animation

Assalamualaikum dan Good Day Everyone..

In the previous entry, I have explained on how to draw in Flash. Now, we will learn on how to create simple yet interesting animations using Flash. There are four types of animation that we have learned in this class, Motion Tweening, Shape Tweening, Motion Guide, and Frame by Frame.

MOTION TWEENING

The first animation exercise that we have done is how to animate a bouncing ball. Here are the steps in animating a bouncing ball:

Step 1 : Create a new Flash file. Select the Oval Tool and draw a circle. You can choose any colour that you want. For this exercise, I choose pink colour.

Step 2 : Now, we will convert the circle into graphic symbol. Select the circle and go to Modify > Convert to Symbol or alternatively, you can just press F8. A ‘Convert to Symbol’ window will appear and set the properties as below :

Step 3 : Right click at the 10^th frame and click on Insert Keyframe. Select the 10^th frame, and drag the circle to another position. Right click in between first and 10^th keyframe, and select Create Motion Tween. Now, go to Control > Test Movie or alternatively you can press 'Ctrl+Enter' to preview your animation. You can see that your circle have move from initial position to the second position.

Step 4 : Now, you can add more keyframes to make the circle bounce many times. Repeat step 3 by adding 10 frames in each bouncing (10^th, 20^th, 30^th, and so on). Actually, you can choose how many frame per bounce. The more frame length you use, the slower the movement of your circle/ object and the shorter your frame length, the faster your object will move or you can adjust the frame rate under the frame timeline.

Step 4 : You can save your work selecting File > Export > Export Movie and choose your file type. You can save it in .avi format or .gif format.

One more thing, in every keyframe that you inserted, you can modify the object size and colour brightness. To resize your object, select your object and choose Free Transform Tool. For each bouncing, you can change your circle size. As for adjusting the colour brightness, select your object, at the Properties panel, in the Colour section, choose Brightness. You can change the brightness percentage of your object. You may want it to be darker or lighter. And lastly, don’t forget to save your work every time you make changes. ^_^

Here are my animated bouncing ball that I’ve create using Motion Tween.

SHAPE TWEENING

Next animation is how to convert a text into an object. Actually, there are three types of shape tweening that is ‘Object to Object’, ‘Text to Object’, and ‘Image to Image’. In this activity, I will explain on how to convert the ‘FLASH’ word into the ‘STAR SHAPE’. Here are the steps:

Step 1 : Create a new Flash file. Select Text Tool and type ‘FLASH’.

Step 2 : Now, we want to break the text apart so that it can change to object later. Select Modify > Break Apart to break the words into individual letters. Again, we break the individual letters by selecting Modify > Break Apart.

Step 3 : Next, right click on frame 25^th and select Insert Keyframe. Select frame 25^th, delete the text. We will now draw a star shape. Select PolyStar Tool. In the Properties panel, click on the Options button and a Tool Settings window will appear. Change the properties as follow :

You can also change the colour if you want.

Step 4 : Click anywhere between frame 1 and 25, and in the Properties panel, change the ‘Tween’ value into ‘Shape’. Press ‘Enter’ to see your text change into star shape.

Step 5 : Save your file as .avi or animated .gif format.

Here are the Shape Tweening that I’ve done.

MOTION GUIDE

Motion guide animation allows users to move an object on predefined path. In other words, in motion guide, your objects will move according to the path that you have been set. Here are the steps on how to help an ant to find its way out:

Step 1 : Create a Flash file. Draw the path as below picture:

Step 2 : Add a new layer and rename it as ‘semut’ or any other name that you like. Draw an ant or alternatively, you can just import an ant image into the library.

Step 3 : Right click on the 155^th frame and select Insert Keyframe. Since the path is long, I add a longer frame. But you can determined you own frame length considering your path length and how fast your ant will walk along the path.

Step 4 : Right click between the two keyframe and click on Create Motion Tween.

Step 5 : While you a selecting the ‘semut’ layer, click on Add Motion Guide under the layers. We can see that it add a new layer called ‘Guide: semut’ which it will now guide the ‘semut’ layer.

Step 6 : Select the Pencil Tool and select ‘Smooth’ options for drawing. Draw the path that the ant will go through later on. It doesn’t matter if your line drawing is not smooth/clean, because later on, it will not be seen. It is just as a guide for the ant to move.

Step 7 : Click on your 1^st frame of ‘semut’ layer, and point your mouse into the center of the ant. Drag the ant into the initial line that you just draw using Pencil Tool. Make sure that the cross at the center of the ant is exactly in the initial of the guide line. Click the last keyframe of your ‘semut’ layer and placed your ant in the end point of the guide line, also make sure that the cross at the center of the ant is exactly at the end of the guide line, or else, it will not work.

Step 8 : You can preview your animation by selecting Control > Test Movie or alternatively press Ctrl+Enter. You can see that the ant was moving along the guide line. But, you will notice some weird movement of the ant.

Step 9 : To make the ant movement more realistic, select the Free Transform Tool and to rotate your ant according to the path direction. In the Properties panel, tick the ‘Orient to path’ option. You can test your movie by pressing Ctrl+Enter.

Step 10 : Save your work as .avi format or animated .gif format.

For your information, you can also increase/decrease the movement of your objects in flash by changing the Frame Rate at the Document Properties window. Double click on the Frame Rate below the frame timeline and change the frame rate value. Here are the motion guide that I’ve been done :

FRAME BY FRAME

The last type of animation is frame by frame animation. This type of animation allows you to create animation in easiest way. In this activity, I will try to animate the cartoon mouth. Here are the steps :

Step 1 : Create a new Flash file. Draw a cartoon image that you want to animate.