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 468x60 (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.
Making an invisible button
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 - 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
- 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.
REMEMBER 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.
NOTE 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.lukamaras.com/tutorials/tutorials.html",
"_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.
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 releaseevent. This is followed by a curly brace { .
REMEMBER 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.
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).
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).
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.
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).
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).
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.
