Flash Explained

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.

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.

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.

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.

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

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

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.

Download the zipped source FLA file.

Comments

Submit a comment