How to Make Flash Banners

This article will show you how to create a simple flash banner in Adobe Flash. A viewer can click on the banner to be transported to your website. Banners can be used to market your website as a banner ad on another website.

Instructions

Difficulty: Easy

Things You’ll Need:

• Adobe Flash or Adobe Flash Professional
• Basic knowledge of a computer and windows.

1. Step 1 - Create a new Banner Run Adobe Flash. In the File Menu click on New and then select "Flash Document" and click OK. This will bring you to a screen that looks like this. In the center is your new banner with a white background. This is where you will create your new banner.
2. Step 2 - Set the size and Background Color Let's start with changing the size to a typical horizontal banner size. Right click on the white background and select "Document Properties". Set the Width to 600, and the height to 150. Set the background color to "#990000".
   This is a good start. Some web sites you may want to display your banner on will have specific size requirements. Make sure you are aware of these requirements and you can adjust the size as needed.
3. Step 3 - Create some simple Text Let's make some text!
   
   On the right side of the screen is the Tool Palette. Click the icon with an "A". This is the Text tool. Click inside your banner and type "Click HERE!". Hightlight the text and in the properties window below the banner click the Text color box and select a yellow color. To the right set the Font Size to 50.
   Right click the text and select "Convert to Symbol". Select Movie Clip, Name it "Txt 1" and click OK. As you can see it added a Movie Clip to our "Library" on the right side of the screen. The Library is a list of all the items in our flash banner.
   You can now click the Selection Tool in the tool palette and click and move the text. In the properties window below the banner set the X to 160 and the Y to 45.
4. Look above the Banner and you will see the Layer and timeline window. Currently there is one layer named "Layer 1". Double-click this and set the name to "Txt 1". This layer contains the text we just created.
   Now click the New Layer icon below the layers list. Name the new layer "Static Text".
   Click the text tool again and create some new text to read "Click here for the greatest How-To Articles on the Net!". Set the color to white and Font size to 20. Using the selection tool, center it near the bottom of the screen.
5. Lets Animate!
   
   Click on Layer "Txt 1" to make it active again. Look to the right of the layers and you will see our Timeline. This has a long series of boxes which represent frames in our animation. As you can see they are numbered across the top. The timeline is where you make the animation happen. At Frame 1 is a shaded box with a black circle in it. This is a keyframe of the text you created.
   Click on the same line, but at Frame 12 (1 second of animation time), and then right-click and select "Insert Keyframe". This will allow us to change the text to create our animation within these 12 frames.
   Now re-click on the text. At the bottom properties tab set the W to 780, H to 150, X to -75 and Y to 0. Click the "Color" drop down list and select "Alpha". Set the percentage to 0%. This makes the text larger and hidden.
   There is now a shaded bar in between Frames 1 and 12. Right-click inside the bar and select "Create Motion Tween". This sets a transition from frames 1 to 12 which will create the animation effect. Drag the Time Slider (The pink box above the frames) back and forth to see the effect we just created.
   
   How easy was that?!
6. Let's create three more just like this to make a multiple animation effect with different colors. In the Library Right-Click our Txt 1 movie clip and select "Duplicate". Name it Txt 2. Do this 2 more times naming them "Txt 3" and "Txt 4". Create three new layers and name them "Txt 2", "Txt 3" and "Txt 4". We will now repeat the animation process for each new Txt object. Click on the "Txt 2" layer to make it active. Click frame 12 and insert a new KeyFrame. Then drag the "Txt 2" movie clip from the library onto the banner. Select it and set the X to 160 and Y to 45. Repeat step 5 for "Txt 2" but use Frames 12-24 instead of 1-12. This will create the same effect for "Txt 2" but it will happen in succession behind "Txt 1".
   Do this two more times for Txt 3 and 4 using frames 24-36 and frames 36-48 respectively. You should now have a timeline ranging from frame 0 to frame 48 and when you drag the time slider they all take turns growing and fading.
7. OK, the animation is set!
   
   The last steps are to change the color of each txt and add a button for linking.
   Click on layer "Txt 2". Double Click the "Txt 2" text in the banner. This takes you to the Txt 2 timeline. You can see above the timeline it says "Txt 2" to the right of the words "Scene 1". Now click the text again and in the Properties window set the text color to Blue.
   Click the Blue left arrow next to the word "Scene 1" in the timeline window.
   Repeat this for Txt 3 and 4 with the colors Green and Fuschia respectively.
8. You may have noticed that as you move the time slider back and forth the static text disappears. To fix this, click on frame 48 of the "Static Text" layer. Right click that frame and select "Insert Frame". There should now be a shaded bar across the entire animation on the Static Text layer. Try the time slider again and it should be fixed.
9. Step 9 - Preview your animation In the Control menu click "Test Movie" or press Ctrl+Enter. This will bring up a preview window and play the animation.
   
   Now we will add a quick button to the entire banner so when someone clicks the banner it will direct them to your web site.
   The first step is to add a new layer for the button. Add a new layer above the "Txt 4" layer. Name this layer "Button" and click on Frame 1 for that layer. You will see it has an empty circle in frame 1.
10. In the tool palette bar click the rectangle tool. Under the Colors section below the rectangle tool click the box next to the pencil icon. This is the Stroke color, or the border color of the rectangle. Select the White box with the line through it in the upper right corner to select no border.
    Draw the rectangle onto your banner. Don't worry about the size as we can manually enter it after.
    Once you have drawn in the rectangle, select it and under the properties tab set the X and Y values to 0, the W to 600 and H to 150. This will make it cover the entire banner.
    In the same properties tab click the box next to the paint bucket icon. This sets the color. In the color selection window change the alpha percentage to 0%. This makes it invisible.
11. Now right-click the rectangle and select "Convert to Symbol". We will make it a button. Select "Button" and change the name to "Banner Button". Now we will set the Actions to turn the button into a link.
    Right Click the button and select "Actions". This brings up the Actions window. In the text window enter the following ActionScript.
    
    on(release){
    getURL("http://www.eHow.com");
    }
    
    Actionscript is a Flash programming language used to make all sorts of neat animation and graphics you see all over the internet. This is simply the command to link a button to a webpage.
12. Thats it! Your banner is now done. You can test it again with Ctrl+Enter and click it to read more great eHow articles. Don't forget to save your flash document (FLA file) to the folder of your choice. To create your flash animation file click the File menu and select "Publish". This will save your SWF file which you can upload to the site of your choice.

Tips & Warnings

• Feel free to read the Flash help files for more information on the topics discussed in this article. They are a great resource for full details on every aspect of Adobe Flash.
• Play around with the different properties of objects in keyframes and create motion tweens. There are all sorts of neat ways to animate something in this simple manner.
• I also recommend the Adobe forums at http://www.adobe.com/cfusion/webforums/forum/index.cfm?forumid=15 . There you can find great information about Flash and Actionscript, get ideas and ask questions if you find yourself stuck on a particular problem.
• Please also feel free to e-mail me with any questions or comments.