In this in-depth tutorial, you will learn how to make a typical 468 x 60 Flash banner ad, from start to finish, with every step thoroughly explained. You will learn how to:

• make an invisible button that acts as a link
• optimize your banner for previous versions of the Flash Player
• learn the basics about events and event handlers in Flash
• what kinds of requirements you can expect from your client

1. Open a new 468 x 60 banner ad template in Flash: choose File > New, then click on Templates tab and select Advertising, then 468¡Á60 (Banner) and click OK. Now, the first thing we¡¯ll do is make a button so that people interested in this banner can click on it, to take them to intended site.

2 Double-click on the layer named content (Flash automatically gives it this name) and type in button, then press ENTER.

3.Using the Rectangle Tool (R) draw a borderless rectangle on the stage, the dimensions and color are unimportant

4.Open the Align panel by pressing CTRL+K or choosing Window > Align. Select the rectangle on the stage by clicking on it with the Selection Tool (V). Now, in the Align panel, turn on the ¡°To stage¡± option (see ¡°1¡å in the image below). Now click the ¡°Match width and height¡± button (see ¡°2¡å in the image below). This will make the dimensions of the rectangle same as the dimensions of the stage, i.e. the dimensions of our Flash banner ad. Next, click the ¡°Align horizontal center¡± button (see ¡°3¡å in the image below). This will center our rectangle horizontally on stage. After that, align the rectangle vertically by clicking the ¡°Align vertical center¡± button (see ¡°4¡å in the image below). That was easy and fun. The Align panel in Flash really helps cut down the work we¡¯d otherwise have to do manually. We got our rectangle the same size as the stage, and exactly overlapping the stage. So when users click, they can¡¯t miss it at all. Let¡¯s make a button symbol of it now.

5.With the rectangle still selected, press F8 or choose Modify > Convert to Symbol. This will bring up the Convert to Symbol dialog. As Type, choose Button. Name it ad button or whatever you like. Click OK. Our newly created button can be found in the library (CTRL+L or F11). So that users can click the button, it needs to be on top of every other content in our banner. Also, because of this, it needs to be invisible, so that the content is visible beneath it. Let¡¯s do it.

6 Double-click on the button on stage. We are now inside the button symbol. You can see that it has its own special timeline consisting of four frames: Up, Over, Down and Hit. These for frames correspond to the four button states:

- the Up state is when the button just stands there, without any interaction on user¡¯s part (no hovering with mouse over it and clicking),
- the Over state is what happens when the user places his mouse over the button,
- the Down happens when the users clicks the button and
- the Hit state defines the clickable area of the button. (it can be greater or smaller than the visible area pof the button).

7. To have an invisible button, all we have to do is drag the Up state keyframe to the Hit state and leave it there. That¡¯s it! If you have problems doing that ¨C if you are clicking but just selecting as you drag your mouse, you need to do the following: click the Up keyframe and let go the mouse, don¡¯t drag at this time. Now click on it again and drag the keyframe to the Hit state. We¡¯ve got an invisible button now.

Click on the ¡°Scene 1¡å link just above the timeline or double-click anywhere outside the button to return to the stage. You will notice that our button is colored in cyan now. That is how Flash marks the invisible buttons on the stage. If you press CTRL+ENTER or Control > Test Movie now, you will see an empty movie. But if you roll your mouse over the the button (invisible), you will notice that the cursor will change from arrow to hand. Now we need to myake our button clickable ¨C put a link on it.

By the way, if you haven¡¯t saved your document yet, do it now. Acquire this habit, so that you save yourself a lot of work and nerves if the power goes out or your system crashes.

8 If your button isn¡¯t selected, select it now. To make sure, check the Properties panel below the stage ¨C it should show the button icon in its upper left corner and ¡°Button¡± should be written next to it. Now, click F9 or click Window > Actions. The Actions panel will open up.

Make sure there is ¡°Actions ¨C button¡± written in the top left corner of the Actions panel. If not, it means you didn¡¯t select the button and your ActionScript will finish on the main timeline, instead on the button! And that will cause problems ¨C the banner won¡¯t function. Once everything is in place, let¡¯s begin writing ActionScript lines.

9. Go to File > Publish Settings or press CTRL+SHIFT+F12 and the Publish Settings dialog will appear. Select the Flash tab and in the Version drop-down menu, choose Flash Player 6 (or whichever is required by the site your Flash banner will be on, it was Flash Player 5 for me for a loooong time, believe it or not). In the ActionScript version drop-down menu choose ActionScript 1.0. That’s it. Press OK and go back to the Actions panel.