Flash Banner Dimensions

There are several standard advertising dimensions for a Flash file and this lesson will focus on the most popular of those standards, the 468x60 pixel graphical banner (468 pixels wide and 60 pixels tall). Start a new Flash project and right click on the stage to change the dimensions to the following:

Press OK

Choosing a Background Color

A background color is very important in a Flash banner because all frames of animation will be seen on top of this base color. In this lesson we have chosen the simple, yet commonly chosen absence of color, white. We find that it goes with almost any color combination you can think of.

Adding Sound Effects

Adding sound to your banner will draw attention to the banner and probably annoy the visitor. If you do include sound on your Flash file, be sure that you follow these two rules. 1. Never have any sounds play until the user either mouses over your flash banner or they click on it. Without user interaction there is no reason sounds should be playing. 2. Always include a mute sound button for those that do not wish to hear the music or sound effects you have included with the flash file. You may think it sounds really cool, but someone hearing it for the tenth time might not feel the same way!

Creating a Basic Animation

In this lesson we will be using both types of tweening you have learned in previous lessons: shape tweening and motion tweening. People are often confused by the difference between the two. The most important thing to distinguish them is that a shape tween uses shapes, while an animation tween uses symbols. If you create an Oval and convert it to a symbol, then you can no longer use shape tween because it is no longer a "shape".

Motion Tween
We will actually be creating two types of motion tweens in this lesson. Before we begin, rename the default layer "Layer 1" that is in the Timeline window to "Potential".

Choose the Text Tool from the Tools menu and choose the following settings for your text from the Properties window: Static Text, Font: Verdana, Fill Color: Black, Font Size: 15

Left click on the stage and type "Unlock Your Potential" and center this text the best you can.

Now insert three keyframes at frames 57, 60 and 135. We will be using these frames soon. We are now going to add "Tizag Tutorials" to our flash banner. Create a new layer and rename the layer "Tizag Title".

Insert KeyFrames at 55, 60 and 135. Select frame 55 and choose the Text Tool from the Tools window. Set the following properties: Fill Color #FF6600 (orangey), Static Text, Font: Verdana, Font Size: 28

With your mouse just above the viewable Stage area Left-Click to create a new Static Text field and type "Tizag Tutorials" and center it.

Select the 60th KeyFrame in the Timeline window for layer "Potential" and select the text field which contains "Unlock Your Potential". We are going to squash this text down to about half of its original height. In the Properties window, enter 10 into the Height (marked with H:) text field and press enter. Then drag your text down a bit, as we have done.

Select the Tizag Title Layer, while still in frame 60, drag the text field "Tizag Tutorials" so that it rests right on top of "Unlock Your Potential".

Right click on frame 58 and select Create Motion Tween for both the Tizag Title and Potential layers.

Shape Tween
Let's move on to our shape tween. Add a new layer to the Timeline window and name it Bubbles.

Select the Oval tool from the Tools window and create to small blue circles (by holding the shift key when you create the shape). Place one circle in the top left.

Use the arrow tool to select that circle and then copy and paste an identical circle. Place this copy in the top right section of the banner. Insert KeyFrames at frame 60, 110 and 135 in the Timeline window for the Bubbles layer. In the Timeline window for the Bubbles layer select frame 60. We are now going to manipulate our shapes. With the Selection Tool from the Tools window select the left circle and drag it so it is just a bit to the left of "Tizag Tutorials". Next, select the right circle and drag it so that it is equally far away on the right side of "Tizag Tutorials".

Select the left circle and press Ctrl+T to bring up the Transform window, if it is not already displayed. Check the constrain checkbox, enter in 300% for the new size

Press enter. Your left circle should now look like this:

Do the same to the right circle.

Left-click on any from frame 2-59 in the Timeline window for the Bubbles layer. Within the Properties layer is a Tween drop down selector, choose Shape from this selector to create a Shape Tween from frame 1-60 for the Bubbles layer. Left-click anywhere between frame 61 and 134 and choose the Shape tween from the Properties window.

Test It Out!
Now that you have completed this long and arduous tutorial, go ahead and choose Control < Test Movie from the menu and check out your flash animation! Hopefully you followed all the directions right, but if it doesn't look like ours you can download our tizagBanner.fla and see what's the matter.