In the last article we touched the surface of the world of Flash Animation. In this issue we are going to do some hands on work using Flash CS3. I'm sure you have seen the web site headers or banner ads where the name of the web site or the site URL is displayed in a side bar or in the header. In this session we will start the work on creating a simple flash banner ad for your site.

First open up Flash CS3. And then chose the first option in the Create New list, i.e. Flash File (Action Script 3.0). The screen you get is described in the last article.

Now let us just forget this screen on the monitor and try to do some thinking. If you have ever done any creation work or any software production you should know that every work should have a plan. And that is exactly what we are going to do right now. Always plan what you are going to create. Don't start with the computer. Start with a paper and a pencil. Let your imagination do the work.

An advertisement banner can be of any size. But for this lesson I'm going to create a horizontal strip. Its going to be a 500 pixel wide banner with a 80 pixel height. Its going to have a white background. I'm going to use the text "Come see my site!!!" as the object in the animation. Its pretty straight foreward. Use whatever you like as the text. The URL is a good candidate. The text is going to enter the area from the left side and move to the center. Then it is going to stop and then it will do a fancy flashing thing. It will stay for a while there and then become bigger and fade out to white at the same time.

This is a general idea of what I'm going to make. Always have a general idea of the creation before you get down to the actual work. Trust me, you can't build an animation as you go along.

Okay. Lets start with the actual work. First of all you will notice that the stage size is not the size we want. Stage size is the size of the animation window. So the first thing we should do is resize the stage. You can do this in several ways. But for now let us follow the formal way.

Select the stage (go to the stage and click once on it). Then in the properties pane below click on the button in front of Size(figure 1). You will get the Document Properties window. In that window enter 500 as the width and 80 as the height in front of Dimensions(figure 2).

Figure 1

Figure 2

Now that you have got this window let us look at few other options you can change here.

• Background Color
  • This is the background color of the stage. If you have already tried using the Paint Bucket tool to change the stage background color an failed this is the way. The stage background color is not animated, so if you are planning on animating the background color use a rectangle and change its color.
• Frame rate
  • Frame rate is in fps, i.e. Frames Per Second. As the name implies it says how many frames the animation will play in one second. By default it is set to 12. You can change this to whatever the value you need. If you increase the frame rate of an existing animation it will play faster since more frames are played in one second. On the other hand if you decrease it the animation will be played in a slower speed. But be careful when you change the frame rate. 12 is a reasonable value. It can be handled by any processor. What I usually use is a frame rate of 20. It will not put more work on a processor and the advantage is in the calculations (how many seconds etc).

I'm going to change the Frame rate to 20 and then click Ok and close the window. We have set our stage up. Now its time to call the actors.

Lets go ahead and create a Text in the stage. From the tool box select the Text tool (T) and click once on the stage. Then type the text you are hoping to animate. In my case it is going to be "Come see my site!!!". After typing in you can change the font type, font size and the font color from the controls in the bottom properties panel (figure 3). If the controls are not there on the properties panel select the Selection tool (V) from the tool box and select the text from the stage and the controls will appear.

Figure 3

We have our text on the stage now. It is the time to start the animation. This text is going to enter the stage from the left side. I can do that part of the animation in two methods. Either I can use frame by frame animation or use tweening on the text. If you read the previous article you will understand why I will not use frame by frame animation here. Instead I'm going to use tweening. I'm going to define the starting point of the animation which is when the text is out of the stage and the ending point of the animation which is when th text is at the center of the stage. And then I'm going to let Flash create the animation in between.

In Flash you have two tweens, motion tweens and shape tweens. What we are going to apply here is a motion tween. We can't apply a motion tween to a text. Motion tweens can be only applied to symbols. There are three types of symbols in Flash. Movie clips, Buttons and Graphics. We will learn what they are as we proceed through the lesson.

So what we need to do here is to convert this text to a symbol. Select the text using the selection tool and then press F8. You will get a dialog box (figure 4) called Convert to symbol. Type in a name for the symbol and then select Graphic from the list. Click Ok. Now the text is a graphic symbol. Go to your Library (Window -> Library) and you will see that the symbol you just made is there (figure 5). Library is the place where all symbols are stored. What you have on the stage now is an instance of the symbol. If you want you can drag more instances to the stage.

Figure 4

Figure 5

Note: From this point onwards always make sure you are in Scene 1 timeline. To do this check the left side of the tool bar that is immediately above the stage area. If there is anything after Scene1 click on Scene1 and come back to Scene1 (figure 6).

Figure 6

Now let us define the first frame. If you look at the timeline you can see that there is already a frame there (figure 7). It is a small gray rectangle with a small black dot. This is a key frame. A key frame means that there is something on the stage. Now drag your text symbol on the stage to the left side of the stage. Drag it out so that no portion of it is in the stage any more (figure 8). Then go to the time line, click on the 40th frame and press F6. What you just did was to insert another key frame at the 40th frame. It is the end point of the animation. Then drag the text back to the stage and center it. You can use the Align panel (Window -> Align)to center the object in the stage. Now your timeline shold look like figure 8. Now right click somewhere in the middle of the 1st frame and the 40th frame and select Create Motion Tween from the menu (figure 9). Now the frames between 1 and 40 should be blue and there should be an arrow appearing (figure 10). If a dashed line appears instead of an arrow open a new flash file and repeat the steps again.

Figure 7

Figure 8

Figure 9

Figure 10

Figure 11

Its time to save our work. Go to file menu and click save. Select Flash CS3 from the file type box, enter a name for the file and save it. Now press CTRL+Enter to see what you did this far.

After viewing the animation go to the place where you saved the file. There are two files there. One is the .fla file you saved and the other one is the .swf file. This is the animation you made and the .fla file is the source file. It is anologous to a photoshop .psd file and the jpeg .jpg file you make out of it.

Now we brought the text to the stage. It should stay there for a while before disappearing. To keep the object on the stage for sometime we need to add more frames to the timeline. The question is whether to add (just) frames or key frames. Key frames are inserted when you make a change to an object that was there till the key frame. On the other hand during a frame no changes can be made to an object.

Since we are not changing any property of the text symbol during the time it is on the stage we need only frames here. I want to keep the text on the stage for 3 second before disappearing. So I'm going to insert frames from the 40th frame to the 100th frame. Go to the 100th frame, click on it and press F5 (figure 11).

From the 100th frame I'm going to make the text symbol bigger and less opaque for 2 seconds until it disappears. Motion tween can be used here also. Since there is a change in the 100th frame click on it and press F6. And then go to the 140th frame, click on it and press F6.

Make sure you have selected the 140th frame on the timeline and then select the text symbol on the stage. Select the Free Transform tool from the tool box. Resize handlers will appear around the text symbol. Increase the size of the symbol using those handlers. Press Shift key while resizing to increase in a uniform manner. Then select the Selection tool from the tool box again and select the text symbol on the stage. In the properties panel you will have a selection box called Color. From the drop down list select Alpha and then decrease the value on the right from 100% to 0% (figure 12).

Now just like before right click somewhere in between the 100th frame and the 140th frame and select Create Motion Tween from the menu. Make sure there is an arrow and the frames between 100 and 140 are blue. Ctrl+enter and see what your results are.

Figure 12

We have finished a flash banner with some basic animation. It will not look attractive certainly. But use your creativity and plan and create a nice animation. During this lesson you learned about motion tweening, symbols and document properties. You also used some tools from the tool box.

Motion tweening can be used for simple motions of symbols, resizing of symbols, and change the Color (NOT as in red color) property of the symbols. The only condition in using the motion tweening is that the object should be a symbol. You created a graphic symbol in this lesson. A graphic symbol is a static symbol. It does not animate by it self and no user actions (like clicking) can be performed on them. You will use symbols that animate by them self when you use Movie clip symbols. Button symbols are used to let the user submit action.

Experiment with what you learned here. Create new animations. Try to use shortcuts always. Using shortcuts may greatly reduce the time spent. Get familiar with the different types of frames and what they are used for.

In the next lesson we will use Shape Tweening to create an animation.