Create a Flash ad banner with random color stripes effect and time-limited animation — part 3

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

If you have found this tutorial useful, please consider donating to support lukamaras.com.

Got any comments or questions? Want to add something but don't know how? Discuss it in the forum!