Flash Explained

In this easy lesson made for Flash MX, Flash MX 2004 and Flash 8 I will show you how to create a Flash banner ad that fits specific needs of the website it will be displayed on. The unique behaviour of this banner is that it will perform a random display of colored stripes for 9 seconds, after which it will come to a standstill.

Some websites have rules for advertisers who want to show their banner ads, specifying the duration of the animation in a banner. This is made so that the users don’t get bugged and visually distracted while they are reading the page which contains the banner. A user will see the animation, judge by herself if she will click the banner or not anyway. After that, stopping the animation makes the website containing it more user friendly.

Have a look at the example banner below: eoll your mouse over it to see what happens. If you missed the random color stripes effect, just hit the Refresh button on your browser and you’ll see it.

There are quite a few websites (especially portals) which will place the aforementioned requirements upon the advertiser, who will in turn pass these specifics to you, the Flash designer. I will show you:

• How to create an invisible button,
• How to create an empty holder movie clip,
• How to give Identifier names to movie clips in the Library,
• How to dynamically pull movie clips out of the Library at runtime,
• How to measure the passage of time in Flash,
• How to pick random movie clips,
• How to make your Flash ad banner backwards-compatible and more.

Importing the image for the ad banner and converting it into a movie clip symbol

1 In Flash, select File > New. The New Document dialog window will open. Click on the Templates tab. Click on Advertising in the left column and then click on 468x60 (Banner) in the right column. Click OK.

Select Modify > Document and change the Frame rate to 24 fps. Click OK.

2 Call the first layer image.

3 Right-click on the image below and select Save image as... and save it on your computer in a place where you'll quickly find it.

4 Select File > Import > Import to Stage, find the image you just saved (bannerpic.jpg), select it and click Open. It will appear on the stage of your Flash document.

5 Click on the image with the Selection tool (V) to select it. Go to the Property inspector below the scene and find the X and Y fields on its left side. Enter 0.0 in both fields.

This will center the image on the stage, both horizontally and vertically. I have made the dimensions of the image equal those of the stage on purpose, so that the ad banner looks as best as it can.

6 While the imported bitmap is still selected, select Modify > Convert to Symbol. In the dialog that appears, choose Movie clip as type, call it image and click OK.

7 Right-click on frame 2 on the timeline and select Insert Keyframe from the menu that appears. Your timeline will now look like this:

8 Right-click on frame 6 and select Insert Frame. This will prolong the duration of the second keyframe and the timeline of the image layer will now look like this:

9 Go back to the first keyframe by clicking on it.

10 Click on the image movie clip on the stage once to select it. In the Property inspector, find the Color menu on its right side, select the Alpha option and turn it down to 0 (zero).

Now, why was all of this done? First, because the image will be loaded before the random colored stripes begin their animation, so it must not be visible — you want the stripes to appear first, so that is way you lowered its Alpha property (transparency) to zero. And second, you have added keyframes and frames to the timeline of the image layer because you will make the banner check the elapsed time to see when the nine seconds have passed. Once this turns out to be true, the banner will stop the playhead from going forward and the animation will stop.

Top of page

Creating an empty movie clip

11 Lock the image layer. Create a new layer and call it colors. This new layer will automatically have the same duration (in the timeline) as the previous layer, which is fine, because you need it to be so.

12 Select Insert > New Symbol. The Create New Symbol dialog will appear. Just be sure to select Movie clip as type, call it empty movie clip and click OK. Take a look above the layers: Flash informs you that you are now working inside the new empty movie clip movie clip symbol you have just created.

13 Click on the Scene 1 link to return to the main timeline.

By doing this, you are effectively creating an empty movie clip, because you haven't drawn anything inside it. This is precisely what you need - an empty movie clip, which will serve as the container for the colored stripes that will be loaded into it from the Library at runtime (at runtime means while your movie — the ad banner is running).

14 Select Window > Library to open the Library panel. You will find here all the symbols that you have created so far, image and empty movie clip, along with the imported JPG image, bannerpic.jpg.

15 Click and drag an instance of empty movie clip onto the stage. Since this is a movie clip with no contents (it is empty), it is represented by its registration point.

16 While the movie clip is still selected, go to the Property inspector and give it an Instance name: call it container (see 1 in the image below). Then make its coordinates on the stage (X and Y) equal zero.

This will place the movie clip in your document's upper left corner, which is a convenient position because this will make the placing of loaded color stripes much easier than if you were to place it in an arbitrary position.

The Instance name is a must if you want to order the empty movie clip to load other symbols from the Library, which you will do later.

Top of page

Creating the main ad message

17 Lock the colors layer. Create a new layer above the existing ones and call it message.

18 Select the Text tool (T). In the Property inspector, make the following selections (see screenshot below):

1. Select Static Text for your text field.
2. Pick a font you like.
3. Choose a big font size — after all, this is a banner ad! The message must be clearly visible!
4. Choose black as color so that you can more easily see the text as you type it. You will change that later.
5. If you are working in Flash 8, select Anti-alias for animation as the rendering option. This is a must, since you will later export your SWF movie for previous versions of Flash player.
6. Be sure that the Selectable option is turned off. Selectable text on a Flash ad banner would look lame and possibly the banner would malfunction.

19 Click on the stage and type the message for your ad banner. When doing an ad banner for a client, this message will most likely be handed down to you from their marketing department, but sometimes they will hire you to make the full banner, including the message and the idea. For the purpose of this tutorial, you can just type "Catch the colors of summer" or anything you like.

Press Esc to exit the text field typing mode. A blue border will show up around your text. Place the text field in the center of your ad banner by moving it around with the arrow keys on your keyboard until it is well positioned.

The blue border comes in handy when the color of the text must be changed to match the background color: your text field is still visible. So do precisely that now:

20 Go to the Property inspector and change the text's color to white. This is done because you will place various color stripes below this field later, via ActionScript, so the message will look good on that kind of background. Black just wouldn't do it, especially for a colorful banner like this one.

21 Your text field should still be selected. Now select Modify > Convert to Symbol (shortcut key: F8). Select Movie clip as type, call it ad message and click OK.

22 Assign an Instance name to the new movie clip: go to the Peoperty inspector and type adMessage in the Instance name input field.

Top of page

Creating the invisible linking button

23 Lock the current layer, create a new one and call it button.

24 Select the Rectangle tool (R). Click and start dragging your mouse until you have drawn a rectangle that is slightly bigger than the stage. You can use any colors you like.

25 Select the rectangle using the Selection tool (V). Make sure that you have selected both the outline and the fill.

26 Press F8 (or select Modify > Convert to Symbol) to create a symbol out of this rectangle. This time, select Button as symbol type, call it button and click OK.

27 Double-click the newly made button symbol on the stage to enter inside it. Flash, just like before, keeps you informed about your current whereabouts: you are working inside the button symbol now.

28 Click on the keyframe in the Up state and drag it over to the Hit state.

Cool! You have just made an invisible button 🙂 ! Let me explain you how. Since the button's three visible states (Up, Over and Down) are empty (no keyframes there) and there is actually some content in the Hit state (the rectangle shape), this is a perfectly functional button. It is just not visible to the eye, which is fine, because the user doesn't need to see it — you just make possible for her to click it.

29 Click on the Scene 1 link to return to the main timeline.

30 Click on the button to select it, then go over to the Property inspector and give the button the Instance name invisibleButton.

Just like any movie clip, the button needs to have an Instance name associated with it to be able to receive commands via ActionScript.

Top of page

Creating the color stripes

31 Lock the current layer (button) and create a new layer above all the others and call it actions.

You will now proceed to create the color stripes, convert them to movie clip symbols and then erase them. You will delete them from the scene because once you create a movie clip, it is stored inside the Library. And these color stripe movie clips will be pulled out of the Library dynamically (via ActionScript), so there is absolutely no need for them to be on the scene.

32 Select the Rectangle tool (R). Go to the Color Mixer panel. It is usually open by default (look at the top right part of the Flash interface). If it is not, open it by selecting Window > Color Mixer.

Click on the little pencil icon (see 1 below). Then click on the little colored square next to it and choose the No color option — the white square with the red line found in the top right corner of the palette that will show up.

Click on the little paint bucket icon (2). In the Type menu (3), choose Linear as type of fill.

Click on the small color square below the color gradient strip (4). Then input the hex code for its color in the appropriate field (5). Type in #61BB35, which will give you a nice green hue.

Now click on the little square found at the opposite side of the color gradient strip to select it, and type its color code in the same box you did a moment before: #04572C. This is a darker shade of green. Together with the first one, you will have a nice green gradient fill.

33 Click and drag your mouse over any part of the stage and draw a rectangle of any size.

34 Select the Gradient Transform tool (F). Click on the rectangle to select it. Bring your cursor near the little white circle in rectangle's corner. Click and hold your mouse button and start rotating clockwise. When you have reached a 90-degree turn (see second image in the sequence below), release your mouse.

Next, bring your cursor over the little square with an arrow inside it, click and start moving your mouse downwards, until the gradient stretches so that it spans the rectangle top to bottom. There! Your rectangle is now nicely filled.

35 If you have unselected the rectangle like I did, select it again with the Selection tool (V). Go to the Property inspector and enter the dimensions for the rectangle in the W and H fields: 15 pixels for width and 60 pixels for height.

36 Select Modify > Convert to Symbol. Be sure to select Movie clip as type (as the selection has stayed on the Button type from before), call it stripe green and click OK.

37 Press Delete to erase this movie clip from the stage.

38 Go to the Library (Window > Library) and you'll find the stripe green movie clip there. Right-click on it and select Duplicate from the menu.

The Duplicate Symbol dialog will appear. Leave the type on Movie clip, call the new copy stripe orange and click OK.

39 Double-click on the newly made stripe orange movie clip's icon in the Library to enter inside it.

40 Once again, you can see that you are inside this movie clip if you take a look above the timeline.

41 When you enter inisde a symbol, its contents are automatically selected, unless the layer containing those contents is locked. So the rectangle shape inside the stripe orange movie clip should be selected if you have followed every step up to this point precisely as I have laid it out.

Go to the Color Mixer panel, click on the left little square and change its color code to #FBAD01. Change the other little square's color code to #DD3E02.

Your rectangle shape inside the stripe orange movie clip will have a new gradient fill now. Nice and easy! Flash rules!

Don't go back to the main scene (yet), because there is no need to do so right now.

42 Instead, go back to the Library and right-click on the stripe green or stripe orange movie clip (either one will do) and select Duplicate. Call the new symbol stripe blue and click OK.

43 Double-click on the newly made stripe blue movie clip to access its timeline. The vector rectangle shape will be selected by default. In the color mixer panel, change the values of the two little squares to #40BAF4 (left) and #055095 (right).

44 Repeat the previous two steps: duplicate one of the existing movie clips, call the new one stripe yellow and once inside it, change the values of the gradient that fills the rectangle shape to #FDE201 and #F88E01.

Ok, now you have four different gradient-filled rectangle stripe movie clips, but there is still one thing to do before you start coding. Read the next step to see what.

45 Right-click on the stripe green movie clip inside the Library and select Linkage from the menu. The Linkage Properties dialog will appear.

First, check the Export for ActionScript checkbox. The Export in first frame checkbox will automatically be turned on. Second, type in the identifier for this movie clip in the Identifier input field: call it green. Click OK.

What's all this, you may ask? Well, the option you just checked allows you to prepare this particular movie clip for dynamic manipulation. In other words, thanks to this, Flash will be able to extract this movie clip from the Library while the SWF movie is running. The Identifier gives you the possibility to pull out this movie clip from the Library with a few simple ActionScript commands.

The Export in first frame option sets the following: This movie clip will be loaded before any other content of your movie does, which is good, because this means that you can call this movie clip dynamically without having to worry whether it will be completely loaded or not. Because it will be fully loaded.

46 Repeat the previous step with the three remaining movie clips: stripe blue, stripe orange and stripe yellow. Give them the Identifiers blue, orange and yellow, respectively.

You're ready to finalize this banner ad by giving it life with some ActionScript code. But, before that...

47 Return to the main scene by clicking on the Scene 1 link, no matter what movie clip you are inside right now.

Fiiiine! You're ready to begin scripting your movie now.

Top of page

Adding the ActionScript code to the banner ad

48 Click on the first keyframe of the actions layer to select it for code input.

49 Select Window > Actions to open the Actions panel. Insert the following ActionScript code in the panel:

fscommand("showmenu", "false");
time1 = getTimer();
colors = new Array("green", "blue", "orange", "yellow");
invisibleButton.onRelease = function() {
getURL("http://www.google.com", "_top");
}
invisibleButton.onRollOver = function() {
container._visible = false;
adMessage._visible = false;
}
invisibleButton.onRollOut = function() {
container._visible = true;
adMessage._visible = true;
}

Your banner ad isn't ready to be tested or deployed yet. There is still some code to be added to different keyframes, but first let me explain you what the above code does.

The first line,

fscommand("showmenu", "false");

Stops the Flash Player from displaying the contextual menu. This is the menu that shows up when a user right-clicks on a Flash movie. With this menu, the user is able to control the playback of your movie — stop it, rewind it, play it, zoom it in and out etc. Why allow this? You must set the degree of control a user has over your Flash creations. Hence the above line. But, this line alone isn't enough. I will tell you later how to fully protect your movie, now let's continue with the explanation of the code.

The second line of ActionScript code,

time1 = getTimer();

creates a variable called time1. This variable will hold in itself the value of time that has elapsed since your Flash movie began playing, up to the moment when you called the getTimer command. This value is expressed in milliseconds (1 second equals 1000 milliseconds).

So basically, since this line of code is among the first ones, Flash will read it almost immediately after the SWF movie started playing and this value will be very close to zero. You will use this information later to see how much time has elapsed in your animation, to be able to stop your banner from playing once 9 seconds have elapsed. Remember, at the beginning of this tutorial, I said that this is a banner which must not show any animations after that particular period of time, to satisfy the demands of your client and the website it will be displayed on.

The third line creates an array, called colors:

colors = new Array("green", "blue", "orange", "yellow");

An array is basically a variable which can store multiple values. Think of it as a filing cabinet. Each drawer in the cabinet stores inside itself a unique value. As you can see above, there are four values in the colors array. These four values correspond to the Identifier names you gave your colored stripes movie clips earlier. And the values of the array will be used later to pull out the aforementioned movie clips from the Library at random.

Now comes the functionality of the invisible button. The first portion of code related to the button defines what happens when an onRelease event is detected. This event comes to pass when a user has clicked and released her mouse button over the ad banner's invisible button.

invisibleButton.onRelease = function() {
getURL("http://www.google.com", "_blank");
}

What it does is that it executes the getURL method (a command is called a method in programming languages). This method enables you to make a link out of your button. The first parameter inside the parentheses is the URL of the website you want your banner to point to — I have placed Google's URL here, of course, you will put here the address provided to you by your client. The second parameter tells Flash in what window this URL should be opened. The value "_blank" will open the URL in a new window. This is the requirement of most websites which display ads on their pages.

Next comes the code which tells Flash what to do when a user has rolled her mouse over the invisible button (the onRollOver event):

invisibleButton.onRollOver = function() {
container._visible = false;
adMessage._visible = false;
}

Once a user pushes her mouse over the banner (I say over the banner because the invisible button is covering all of its area, so rolling the mouse over the banner equals rolling the mouse over the invisible button), the container and adMessage movie clips will be made invisible. This is achieved by setting their _visible property to false.

This makes sense, since your goal is to show the JPG image that you imported into the movie at the beginning of this tutorial. By hiding the two movie clips, you hide the big ad message (contained in the adMessage movie clip) and the color stripes (contained in the container movie clip).

Once the user has rolled her mouse outside the banner, these two movie clips are displayed again and therefore, the image is hidden by them. This is achieved through the functionality of the onRollOut button event:

invisibleButton.onRollOut = function() {
container._visible = true;
adMessage._visible = true;
}

This time, the movie clips' _visible property are set to true.

These were the preliminary steps taken with ActionScript code, to hide the contextual menu, retrieve the elapsed time since the beginning of the movie, create the array which stores the color stripe movie clips' Identifier names and handle the functionality of the invisible button.

Let's see now how to pull out these colored stripes from the Library while your Flash movie is running.

50 Right-click on frame 2 of the actions layer and select Insert Keyframe from the menu.

51 Place the following ActionScript code in this keyframe:

function placeColors() {
for (i=1; i<33; i++) {
container.attachMovie(colors[random(4)], "color"+i, 100+i);
container["color"+i]._x = 15*(i-1);
container["color"+i]._y = 30;
}
}
placeColors();
time2 = getTimer();
if ((time2-time1)>=9000) {
stop();
}

The first part of this keyframe's code defines a function that I chose to call placeColors.

function placeColors() {
for (i=1; i<33; i++) {
container.attachMovie(colors[random(4)], "color"+i, 100+i);
container["color"+i]._x = 15*(i-1);
container["color"+i]._y = 30;
}
}

The main code contained inside the function (inside its curly braces: { and }) is a for loop. This loop is initiated by a variable which is traditionally in programming called i (you can call it myNumber if you wish so). The value of i is set to 1 at the beginning of the loop.

Next comes the condition (i<33). The loop continues to go on and on as long as this condition evaluates as true. Once i becomes equal to or bigger than 33, the loop will break and any subsequent code following it will be executed.

After the condition comes the small piece of code which tells the loop how the initial value (i=1) should be incremented: i++ means that at each iteration (turn) of the loop, the value of i will be incremented by one. This means that this particular loop will make 32 iterations (it will repeat itself 32 times) before it stops. Let me show you now what will be done 32 times:

container.attachMovie(colors[random(4)], "color"+i, 100+i);
container["color"+i]._x = 15*(i-1);
container["color"+i]._y = 30;

The ActionScript construct container.attachMovie serves to attach a movie clip from the Library to the container movie clip (remember it is the empty one that you have placed on the stage). This is the method (command) that pulls out a movie clip from the Library and places it inside the container movie clip.

The parameters inside the parenthesis tell this method:

Which movie clip to attach: colors[random(4)]. This piece of code creates a random number from 0 to 3 (random(4)), and then this number is used to retrieve a name from the colors array. Why 0 to 3 and not 1 to 4? Because that's how the random method works: the number between the parenthesis serves to pick a random number from 0 to its value minus one. For example, random(7) would pick a random number between 0 and 6.

This suits you perfectly, since an array has values inside it placed at numbered positions, starting from zero. Look at the image below to better understand what I mean:

The numbers in the picture above indicate the position of each element within the array. As you can see, the first position has the value of zero. So the random method will pick one of these four values from the array. Flash will find this movie clip in the Library, because you gave those identifiers to the four color stripe movie clips earlier.

Next, the attachMovie method must know the Instance name of the newly attached movie clip: "color"+i. Without an Instance name, you wouldn't be able to do nothing at all with the attached movie clip. This Instance name is created dynamically, by joining together the word "color" and the current value of i.

Remember, this value increases at each iteration of the loop: 1, 2, 3 and so on, until 32. So the Instance name of each movie clip that is attached from the Library will be different, which is a must anyway! Every movie clip in Flash must have a unique Instance name. These instance names will be color1, color2, color3, etc.

The last parameter in the attachMovie method is the depth of the new movie clip. Think of this as a third dimension. You can place objects in Flash horizontally and vertically (the X and Y position of a movie clip), but also in this imaginary third dimension. The depth is necessary, because without it, each new movie clip would replace the previous one. By assigning a new depth to each movie clip, they are all placed on separate, unique, imaginary layers.

I have used the expression 100+i to create a new depth placement for each movie clip. This means that the first color stripe movie clip that is pulled dynamically from the Library will have a depth of 101, the next one 102 and so on. I could have written just i, but I wanted to show you how you can pick different depths in different ways.

Ok, so this means that 32 color stripe movie clips will be pulled out of the Library from the four available ones, at random. This means that all these 32 movie clips will be placed one above the other inside the container movie clip. This is not good! Something must be done to correct that, otherwise the whole thing makes no sense. And here's where the next line of code comes into action:

container["color"+i]._x = 15*(i-1);

The construct container["color"+i] refers to the movie clip you have just attached — remember, this is how the new Instance name of the newly attached movie clip was created just a moment before. In the first iteration of the loop, container["color"+i] means container.color1, in the second, container.color2 etc.

What comes after this reference to each movie clip is the _x property, which indicates its horizontal position inside the container movie clip. The container movie clip has its own coordinate system like any other movie clip, with the origin placed at its registration point. Remember, when you created this movie clip, you have placed it in the banner's top left corner. So this is where its registration point/origin lies:

And so, the _x property is defined as 15*(i-1). In the first iteration, this will equal 0:

15*(i-1) = 15*(1-1) = 15*0 = 0

In the second iteration of the loop, this will equal 15. In the third 30, and so on. This will result in each attached movie clip being adjacent to the previous one, and since they are 32 and each one of them is 15 pixels wide, they will effectively cover the whole area of the banner, like this:

Nifty, huh? I *love* ActionScript! 🙂

But you may have noticed that the first stripe in the screenshot above, the green one, is only half as wide as the rest are. This is because the attached movie clip takes position inside the container movie clip based on its own registration point. When you are converting a shape into a movie clip, in the Convert to Symbol dialog window, Flash offers you to choose where the new symbol's registration point will be:

I chose the middle one. And that's why the first stripe in the image above is only partially visible: its registration point coincides with that of the container movie clip. And this brings you to the next line of code:

container["color"+i]._y = 30;

The vertical placement of each movie clip, defined ny the _y property. This property is the same for each of the color stripe movie clips: 30. This one doesn't change, because all the color stripes should occupy the same vertical position. Why 30 and not 0? Again, because of the registration point which is in each movie clip's absolute center. Each movie clip is 60 pixels high, hence the value of 30 here. If you have created your movie clip with the registration point on its top, then your _y value should be put to 0 and not 30.

And don't be puzzled by the areas with the same color in the image above. See the big blue area? This is normal, because you have made Flash pick these movie clips at random. With random numbers anything is possible, even your banner having the same color all over it, although the probability of this happening is very low, maybe once in a million times or even lower.

After the function containing the loop comes the function call:

placeColors();

You must call a function in ActionScript so that it can execute. Otherwise, it will just sit there idly, doing nothing at all.

After that, the getTimer method is called again and its value is stored in the variable time2. To explain this again, this method will get the amount of time that has elapsed since your Flash movie began playing.

time2 = getTimer();

And now comes a conditional if statement:

if ((time2-time1)>=9000) {
stop();
}

The condition that is being evaluated looks up the difference of values of variables time2 and time1, checks if it is greater than or equal to 9000, and if this turns out to be true, the movie (the ad banner) will stop playing. Let's say for example that 4 seconds (this means 4000 milliseconds) have elapsed since the SWF movie began to play. The condition would be evaluated like this:

(time2 - time1) >= 9000
(4000 - 0) >= 9000
4000 >= 9000
false! 4000 is lesser than 9000!

The value of the variable time1 was set at the beginning of the movie, so you can assume that it equals 0. And this check will go on and on until the condition turns out to be true, and then, the stop() command is executed and everything comes to a halt. How come? Follow the next step to see why.

52 Right-click on frame 6 of the actions layer and choose Insert Keyframe from the menu.

53 Insert the following ActionScript code in this keyframe:

gotoAndPlay(2);

This will make the playhead jump back to frame 2, skipping the first frame and avoiding the resetting of the time1 variable. Thanks to this, its value will always remain the same, near zero.

What's more important, when the playhead jumps back to frame 2, the ActionScript code placed on it is executed anew. The loop is performed again, and 32 color stripe movie clips will be pulled from the Library, replacing the old ones, with the same exact names and positions.

But! Thanks to the random method, movie clips with different colors will be loaded from the Library and there you have the effect of random color stripes dancing around your banner! Ain't that great? A few simple lines of ActionScript code can make a huge difference and add to your creativity a lot. Learn ActionScript! 🙂

54 Test your movie by selecting Control > Test Movie. Try rolling your mouse over and out of the banner. The stripes will dissapear and then show up again. After approximately 9 seconds, they will come to a halt. But the rollover event will still function, showing the ad image.

There remain two more things to be done. First, you must make your movie compatible with previous versions of Flash Player. There are a lot of sites which require that, to cover the widest possible audience — meaning also the people who haven't upgraded their Flash Player for some time already.

55 Select File > Publish Settings. Click the Flash tab at the top of the Publish Settings window. Now, in the Version menu, select Flash Player 6. In the Actionscript version menu, select ActionScript 1.0.

56 The second thing to do is protecting your movie from unwanted user control. Still in this same window, click on the HTML tab. Uncheck the Display menu option. Click OK.

And that's it — you have just learned to make a great Flash ad banner! I hope that you enjoyed learning from this tutorial as much as I was enjoying creating it. Want to learn more? Check out my other Flash banners tutorials.

Download the .fla source file

Comments

Submit a comment