Flash Explained

Learn Flash easily.

Creating a Flash ad banner from start to finish

October 7th, 2008 | Author: Luka | Category: Banners

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.

Naming the layer.

Making an invisible button

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

Drawing a rectangle on stage.

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.

Using the Align panel in Flash.

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 – 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.

Moving the keyframe between button states.

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 – 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 – 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 – 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 – the banner won’t function. Once everything is in place, let’s begin writing ActionScript lines.

Optimizing your flash movie for previous versions of Flash Player

But! But, but, but. There is always a but. One very important thing: the banners you’ll make for your clients will have to reach a wide audience. So you’ll have to adjust your Flash banners for lower versions of the Flash player. You CANNOT go on by just supposing “well, probably everyone by now has the newest Flash player 8 installed. It is so cool and powerful, so why would anyone have an older version?”. That kind of thinking is WRONG, yes, because users DO NOT think like us, web-savvy people (web designers, developers, programmers, etc). Installing a new version of Flash player is not as easy for the average user. Why? The main reason is laziness. People who surf the web are lazy (lazy during surfing, that is). If there isn’t a big interest or value in a site, AND the sites requires the installation of a plug-in, lots of people will close that page and go surf elsewhere.

There a lot of sites on the Internet similar to yours or your client’s. Keep your user base AND expand it by being nice to them. That means BE USER FRIENDLY. This is true, whether your site is a Flash one or HTML one.

The second reason is that the client or the site your client puts hers/his Flash banner on, will REQUIRE of you to make the ad in an older format. There are almost no exceptions to that rule. You will have to comply to their request, otherwise, they will certainly return that Flash banner ad you made if they discover you haven’t followed their guidelines. OK, we sorted that out. But how to make this? Easy.

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.

It doesn’t matter if you save your document in the Flash 8, Flash MX 2004 or Flash MX format (depending on whichever version you have installed on your computer). The final SWF file will be published for the Flash Player version you specified in the Publish Settings dialog.

Creating a hyperlink with ActionScript

With the Properties panel still showing that the button is selected, click inside the Actions panel – inside the area the code is written in. Type the following code:

on (release) {
getURL("http://www.flashexplained.com//", "_blank");

You will notice that as soon as you type the first word, followed by a parenthesis:

on (

Flash will pop-up a menu. This menu shows you the various events to which the button can react.

The events menu for buttons in ActionScript panel.

Choose release. Now, I shall explain what do the different parts of this code mean. The first line,

on (release) {

contains the keyword on, followed by the release event. This is followed by a curly brace { .

An EVENT is something that happens in a Flash movie, be it a mouse click, the mouse moving, the timeline reaching a certain frame, a sound starting, a key being pressed or released. The code on our button is called an EVENT HANDLER. It means that it handles what will happen next after an event is invoked (in this case, when our button is clicked with a mouse). It literally says (translated from code to human language): when the user clicks and releases the mouse button, execute the code which is written between the curly braces. Nearly every program has events and event handlers. What do you think happens when you double-click an icon in Windows or Mac OSX, or move your mouse in a game, or click on a menu in Word, Dreamweaver, Flash? Some event handler executes some code. It opens a menu, starts a program etc. Therefore, events are like “triggers” which start a reaction, if there is one defined in the code.

Pay attention to the event you choose. The description of mouse events follows:

– the release event means that the code between the curly braces {} will be executed when the user has clicked AND released the left mouse button. That is a “normal”, “standard” click. Few users click the mouse and hold on to it, unless they are dragging something,

– if you chose the press event, it means the code will be executed the instant the user clicks the mouse button, before he released it. This may shock some users, because they are used to “normal”, that is, “release” clicking. The press event is excellent for Flash games, when something needs to happen immediately – like a spaceship firing a round, or a character jumping, etc,

– the releaseOutside event happens when the user presses (clicks) the mouse over the button, drags it outside the button area, and releases it,

– the rollOver event happens when the mouse is rolled over the button (can’t be simpler :),

– the rollOut event happens when the mouse is moved over the button and withdrawn from the button area,

– the dragOver event happens when the user clicks the mouse when over the button, drags it outside the button area and returns back over the button,

– the dragOut event happens when the user clicks the mouse over the button, and drags the cursor outside it.

The second line of our ActionScript code,

getURL("http://www.flashexplained.com/", "_blank");

contains the getURL command, which makes adding hyperlinks possible. The chunks of code between parenthesis are called parameters. They have to be written between quotation marks and be separated by a comma. The first one is the URL (Uniform Resource Locator, if you’ve always wandered what the acronym means), or the place on the web your banner is pointing to (it can be an e-mail address, also). I have put in my tutorials main page URL, you can put whatever you want. The second one tells where the link will open: in our case, _blank indicates that it will open in a new browser window. The other options serve if you have frames on your pages (personally, I NEVER use frames), they are _self if you want the link to open in the same frame your Flash banner is, _parent for opening in the parent frame and _top opens over all frames, and the frameset disappears. There is a third parameter that can be used, for sending data, but that is beyond the scope of this tutorial.

Press CTRL+ENTER to test your movie. Click on the button, it should take you to the URL you specified.

Before continuing, save your movie, and lock the “button” layer so that you can work more at ease, when we add new layers. Click on the dot beneath the image of the lock to lock it (see image below).

Locking the layer.

Creating content

Now, we need to put some content in. For the purpose of this tutorial, we’ll make something generic. If you want to know how to create some more sophisticated Flash banners, go to the Flash banners main page and you’ll find lots of tutorials to choose from and learn. Before proceeding to the next step, save your Flash document.

10 Create a new layer. Do this by choosing Insert > Timeline > Layer or clicking the Insert Layer icon left of the timeline (see image below).

The Insert Layer icon.

Double-click on the layer name and call it “image”. Click and drag it below the “button” layer. Remember, the layer with the button must be on top of every other layer if you want your ad banner to be clickable.

Now, we need an image. The important thing to remember is to optimize your image in Photoshop before importing it to Flash. Why? Because the site your client or you will be putting the banner on, CERTAINLY has a limit on the filesize of banners. Usually, this is a maximum of 15 KB for 468 x 60 banners. So make sure you optimize you image. And, if you are using a JPEG image, DO NOT make it a progressive type of JPEG. Because Flash cannot handle these types of JPEGs. Make it an ordinary JPEG. If you don’t have an image at hand, take this one below.

Earth seen from the Moon.

11 Import the image to your Flash document by pressing CTRL+R or choosing File > Import > Import to Stage. The Import dialog will appear. Find your image and click OK. The image will appear on the stage and will automatically be stored in the library. Now, you can’t design properly because of the button layer. Hide the button layer by clicking on the dot below the eye (see image below).

Hiding the button layer.

12 Select the image, center it on the stage by clicking the “Align horizontal center” button and “Align vertical center” button in the Align panel.

13 With the image still selected take a look at the Properties panel. Look at the horizontal (X) and vertical (Y) coordinates of your image (see image below).

Properties for the image.

Notice that in my case, the X coordinate is not a round value. If you want your image to look sharp, you should always have round values. So click in the X field and type 71. How to round the value? I follow this guideline: if it’s below 0.5, i round it to the lesser value, and if it’s above or equal to 0.5 to the greater value. Use these same guidelines for your text in Flash. Now, this may not be apparent in our case, but if you imported a GIF image with, say, a 1-pixel line or something alike in it, you’d see the difference immediately.

14 Lock the layer “image” and make a new layer. Call this new layer background and position it at the bottom of all layers.

15 Draw a black borderless rectangle on this new layer and make it the same size and position as our stage, by following the technique outlined in step no.4 of this tutorial. Lock the layer. Now we have a black background.

After this, you can add any animation you like. I’ve put another layer with animation in it, you can see it below. If you’re not sure how to make this, check the Animation tutorials main page.

One last thing: you will have to make an animated GIF or just plain JPEG replacement for your Flash banner ad. Why is that? Because some people don't have Flash player installed at all. And the site the banner will be displayed on will certainly require of you to make a GIF or JPEG and send it to them along with the Flash banner, and sometimes even the source FLA file. Now, using the file manager on your computer, go to the folder where you saved your FLA file and look at the SWF. Look at its filesize and make sure that it doesn't surpass the requirements set out by your client.

That's it! I hope you enjoyed this tutorial as much as I enjoyed writing it. Below, you can download the zipped source FLA file for this tutorial.

Download the zipped source FLA file.

Be Sociable, Share!


Submit a comment

  • Westsider Dec 8, 2009 at 2:46 am

    I tried the Tutorial in CS4 and consistent with other users, it does not work. I will try your advice and change the Actionscript set to 2.0.

    Flash Actionscript is already confusing, for CHRIST SAKE, why do they have to revamped Action 3.0, and not support the previous EVENT Handling system.


  • Jason Dec 9, 2009 at 10:56 am

    Fantastic tutorial! Very easy to follow and covered everything needed to make a successful banner!

    Thank you very much!

  • Waqas Jan 1, 2010 at 1:34 pm

    Thank you so much it helps me a lot 🙂

  • jason Jan 16, 2010 at 9:49 pm

    great tutorial but i have a problem, how can i upload it to my website? thanks in advance for any help

  • Lloyd Jan 21, 2010 at 9:09 am

    Excellent – thank you. Very clear instructions, worked first time without any hitches, assumptions or confusion – and that takes effort and attention to detail from you which is most appreciated.
    I now have a means of creating a linked animated flash by adding the transparent clickable button as described above.

  • Mladen Feb 9, 2010 at 2:11 am

    Thank you a lot!
    Tutorial was easy to understand and effective.

  • mltknight Feb 10, 2010 at 5:46 pm

    so nobody is capable to tell me how can i upload it to my website?

  • troubled Feb 19, 2010 at 3:11 am

    Awesome tutorial, only one thing though, when I publish as animated gif it will not publish the link….i can publish in any other format and the link works. Please advise……troubled

  • Mark Mar 2, 2010 at 2:55 pm

    Had the same problem as others making the button a working link (and this is using Macromedia Flash MX, 2002 version).

    I think if you add the ActionScript hyperlink to the button BEFORE Step 7 (making it invisible), then it works, otherwise you get the “current selection cannot have actions applied to it” error.

    Worked for me. Cheers!

  • webeno Mar 7, 2010 at 1:09 pm

    Awesome tutorial, thank you very much!

  • Rocky Butani Mar 17, 2010 at 5:01 pm

    Excellent tutorial, and very well written. Thank you very much for posting this.

  • mantolama Apr 9, 2010 at 6:49 am

    That was an excellent tutoral, I made my first ever banner ad.
    Question how do i add it to signature in my emails and when i post on forums, If some1 could tell me how this is done i would be most grateful, cause i’m not to good with these computers

  • Ivonna Apr 12, 2010 at 5:36 pm

    Hey Luka,

    Can you do a tutorial video of this in CS4? I kinda need to visually see you do this.


  • Luka Apr 12, 2010 at 6:46 pm

    Hi Ivonna,

    I was planning on doing a tutorial like this for Flash CS4, but I am not sure if it will be in video format.

  • John May 1, 2010 at 6:05 pm

    Hey thanks for this! nice to see a tutorial in plain English….nice and easy to understand!


  • Anuj Kumar Yadav May 10, 2010 at 3:10 am

    I am find that a good flash banner because I am completed your own website.

  • manny May 20, 2010 at 4:25 am

    Thanks for that, just what i was looking for, very well written also 🙂

  • DougC May 28, 2010 at 2:54 am

    Thanks for being here. You have no idea how many blogs, forums and tutorials I had to look at with partial information, variations, etc., before finding yours. I’m very very new to Flash (8), and need baby steps to simply make my entire swf banner a link. Others told it right, but it wasn’t clear and didn’t work for me. Yours? First try.

  • Flo Jun 15, 2010 at 1:50 pm

    Wonderful Tutorial. Thanks!

  • JoAnn Jul 4, 2010 at 6:41 pm

    I did your toutorial and created my first banner ad. When I test it out, it works. However, when I publish it to my website, the hyperlink doesn’t work. Any suggestions?

  • Amy Jul 29, 2010 at 8:17 pm

    Hey-using CS4 having the same prob as above users…tried Action script 2, tried not using template, tried doing action script before making invisible….HELP!

  • Luka Jul 30, 2010 at 12:37 pm

    @ Amy There is a new version, made for Flash CS4 users: How to make banners in Flash CS4. Please always check the appropriate section – you will always find updated stuff there (Banners, ActionScript, etc)

  • Christian Aug 15, 2010 at 12:06 am

    Thanks! very straightforward and helpful.


  • Ady B Aug 25, 2010 at 1:59 pm

    Great tutorial and this was exactly what I needed. Thank you very much!

  • naijawebdesigner Nov 22, 2010 at 11:50 am

    am new to flash and i find your tutorial very interesting, thanks a million

  • nemilos Dec 21, 2010 at 11:43 pm

    thanks very much i`m just beginner with flash and this help me so

  • asad Jan 5, 2011 at 12:22 pm

    very nice………………………………….thanks.

  • Jenny Feb 7, 2011 at 6:02 pm

    This was great- thanks very much!

  • Rose Feb 9, 2011 at 6:46 pm

    Thanks so much! I’ve been tearing my hair out over the changes in CS4 and your tutorial helped a great deal!!

  • john Mar 6, 2011 at 4:42 am

    Thank You!!! In a sea of worthless online tutorials, I somehow found this great site and solved my problem 1st try. Thanks for explaining everything step by step for those of us who are trying to learn! I have bookmarked this site and will return often. Thanks again!

  • DEE Mar 11, 2011 at 2:48 pm

    I’m stuck on step 6. I’m using MX Pro 2004 and I can’t find the UP, OVER, DOWN, and HIT when I double click the button so I can’t make it invisible. Please help. Thank you.

  • trzyGieGRX Apr 1, 2011 at 7:53 pm

    Great tut! Every step is simple with this tutorial. Thanks. Thumb up!

  • Rewithman85 Jun 17, 2011 at 4:30 am

    I love that the steps are easy to follow. Great!

  • i liked this tutorial very much thank you for this remarkable effort

  • Henk Serra Aug 10, 2011 at 4:05 pm

    Thanks to your great tutotial I finally got the flash-banner on my index page working! Very well explained, thanks a lot!!

  • Leah Leidner Aug 23, 2011 at 2:29 am

    stuck on step 8. Can’t select the button.

  • Sylvia Sep 5, 2011 at 12:36 pm

    Demande d’information. J’ai un camion publicitaire qui diffuse des joutes de hochey en direct. Le camion circule dans les villes et les gens peuvent voir la joute et les scores.
    Ma question: Durant l’émission de TV sur mes écrans je voudrais ajouter un bandeau publicitaire au bas qui embarquerait par dessus l’émission, j’afficherait mon logo et site web.
    J’ai créer un bandeau en SWF FLV et il m’est impossible de l’embarquer sur les écrans.
    Comment faire?

  • Luka Sep 8, 2011 at 1:42 pm

    Je n’ai jamais tenté de faire ca. Comment sais-tu que je parle francais? 🙂

  • […] Make a flash banner […]

  • dsfsdaf Mar 12, 2012 at 3:40 pm

    this is wonderful thanks alot

  • […] 44 Friends visit this link and read about your question. How to make a banner ad in Flash from scratch | Flash Explained […]

  • vinu Apr 21, 2012 at 6:45 am

    Thanks for your Detailed Explanation

  • cn games Jun 15, 2012 at 1:17 am

    thank you for the tutorial, was helpful

  • Noa Ross Aug 4, 2012 at 7:06 pm

    You are the best. You have no idea how much time I spent trying to figure out how to do this thing and only with your explanation I got it right, the first time. You are a Teaching genius. Thanks!

  • […] Creating a Flash ad banner from start to finish […]

  • Mike Oct 6, 2013 at 12:14 am

    nice tutorial on banner adds very easy to follow even for a newbie, but quick question, is it true we can’t put banner adds in the main site title tags as google can’t read them ?

  • Brian Lonsdale Jan 16, 2014 at 4:20 pm

    Great stuff. Exactly what I needed!

    I hope to see more of this in the future!

    Brilliant work.


  • abraham Feb 22, 2014 at 2:13 pm

    Please, can you provide for PDF files downloads?.

You must log in to post a comment.