Flash Explained

I will show you how to make a beautiful Valentine’s Day ad banner with this tutorial.

This banner is different each time the page it is situated on loads and also each time the user rolls over and out of it with his mouse. Try it! Roll over the banner beneath this text, then move your mouse out of it.

As you can see, the hearts on this banner are arranged in a completely different manner each time. Also, the hearts disappear differently each time!

To see the image and the message below the hearts, the user must wait for them to clear out. This is a nice effect, creating a small expectation and surprise as the user waits to see what lurks below.

All right, start making it!

Creating the design

1 Select File > New > Templates > Advertising 336x280 (Rectangle) and click OK. Save your work now, so that you can just press CTRL+S (Command+S on a Mac) later.

2 Open the Document Properties dialog (Modify > Document) and put the frame rate to 30 fps.

As this is a banner and you want as many people to see it as possible, make it backwards compatible. Go to File > Publish Settings and click on the Flash tab. Put the Version to Flash Player 6 and ActionScript version to 1.0.

3 Call the first layer image. It is here that you will place an image, or animation, that will show up when the user rolls over the banner with her mouse. What you'll put here is entirely left to your imagination and creativity.

For the purpose of this tutorial, you can download the image below. Put it somewhere you will find it quickly and easily.

4 Import this image on the stage. Select File > Import > Import to Stage, find your image, select it and click Open.

5 Align the image on the stage horizontally and vertically. Do this with the aid of the Align panel (CTRL+K). Turn on the Align/Distribute to Stage button (1 on the image below) and then click Align horizontal center (2) and Align vertical center (3).

Lock this layer.

6 Create a new layer and call it button.

7 Draw a borderless rectangle on stage (press R for Rectangle tool). The color doesn't matter because you will make an invisible button in a few steps.

Make the rectangle's dimensions equal those of the stage. Do this again by using the Align panel - press the third button from the left in the bottom row. Then align it with stage like you did with the image before.

8 With the rectangle still selected, choose Modify > Convert to Symbol. Select Button as type. Call it invisible button.

9 Double-click on the newly created button to enter its timeline.

10 Click on the Up keyframe and drag it to the Hit keyframe.

You have just created an invisible button. How?

Well, the Up keyframe (or state) is what the user sees when the movie loads and there hasn't been any interaction with the button on the user's part.

The over state is shown when the user rolls over the button with the mouse, and the Down state is seen when the user clicks on the button.

The Hit state defines the clickable area of the button. This area can be bigger or smaller than the visual parts of the button.

So, when there is just some drawing (like the rectangle here) in the Hit state, the button is clickable, whether there are some graphics in the previous keyframes or not.

11 Click on the Scene 1 link above the timeline or just double-click anywhere on the stage (but outside the button) to return to the main timeline.

12 Click once on the button and go to the Properties panel. On its left side, enter the Instance name for the button: call it bannerButton. You'll need this to assign actions to this button later, from the main timeline.

Lock this (button) layer.

Top of page

Designing the heart movie clips

13 Select Insert > New Symbol. Be sure to select Movie clip as type, because Button stayed from the last time. Name it filled heart 1. Click OK.

You are now working inside the movie clip's timeline.

14 Call the first layer white square.

15 Select the Rectangle tool (R) and block the outline color by clicking on the small pencil icon in the Colors part of the Tools panel, and then clicking the middle icon (the rectangle with the red diagonal line) in this same part of the panel.

Choose white as fill color.

16 Draw any rectangle on stage. You will define its size and placement in a moment.

17 By using the Selection tool (V) select the rectangle by clicking once on it. In the properties panel, set its width to 24 pixels and its height to 23 pixels.

18 Align the square's top left edge with the movie clip's registration point. Again, use the align panel with the Align/Distribute to Stage button turned on. Then click on the first and the fourth button from the left in the panel's top row (the Align row).

All this positioning and setting of exact sizes is important, so that the hearts will fill the banner area from one edge to another, without any empty space or creaks left between.

Lock this layer.

19 Create a new layer (still inside the movie clip, yes) and call it coloured square.

Draw a borderless square, with the fill color set to #FF99CC.

In the Properties panel, set its dimensions to 22 pixels by 21 pixels and its position to 1 pixel on the X axis and 1 pixel on the Y axis.

Lock this layer.

20 Create a new layer and call it heart.

21 Select the Pen tool (P). Choose black as outline color. Click once anywhere on stage, but DON'T click and drag now (1). Click up and left from this first point and drag your mouse so that the control handles of this point look like the ones in the image below (2).

Click and drag to create the third point. Try to place this third point in the line with the first one.

22 Choose the Subselection tool (A). Click on the curve you just created. Click on the second (middle) point - it's represented by a little square. The control handles will appear.

Click and drag on them (the handles' end points), and on those of the top point also (after clicking on it). Play with them until you get the shape similar to the one on the image below.

23 Choose the Selection tool (V) and select this curve. Copy the curve (CTRL+C on a PC, Command+C on a Mac) and paste it in place. Do this by selecting Edit > Paste in Place.

Now, don't click anywhere! Because if you do, the exact copy of the curve which is now on top of its original will disappear.

Select Modify > Transform > Flip Horizontal.

24 Again, do not click anywhere. Using the right arrow key on your keyboard while holding SHIFT, move the mirrored curve to the right.

25 Still using the Selection tool (V), check that the Snap to Objects option is selected in the Options portion of the Tool panel. This is the little magnet icon.

Click on the (still selected!) right curve's bottom point and drag it to the left curve's bottom point until it snaps into place.

26 Unselect the curve by clicking anywhere outside it. Bring your cursor near the heart's inside right point.

Click and drag this point to the left until it clicks into place with it's left counterpart. Then click on this middle point and drag it a little bit to the right until you get a symmetrical heart shape.

27 Select the Paint Bucket tool (K) and fill the heart with a nice vivid red color, the code being #990000.

Double-click on the edge of the heart and delete it.

28 Select the heart, and give it the following dimensions and position in the Properties panel: width and height 18 pixels, X and Y coordinates 3.0.

There! The design of the filled heart 1 movie clip is finally completed! Ain't that a nice heart? 🙂

Top of page

Duplicating the movie clips and preparing them for use by ActionScript

29 Return to the main scene. Open the Library (CTRL+L). Right-click on the filled heart 1 movie clip and select Linkage from the menu.

Select the Export for ActionScript case. The Export in first frame case will be turned on by default. In the Identifier field, write the name heartClip1. Click OK.

The Identifier name makes it possible to call the movie clip from the library with ActionScript, at runtime (that is, while the movie is playing).

30 Right-click on this same movie clip again and choose Duplicate. Call this new copy filled heart 2.

Right-click on this newly created movie clip and choose Linkage. Repeat the previous step - click on the Export for ActionScript case and give it the Identifier name heartClip2.

Double-click on this (filled heart 2) movie clip to enter its timeline. Make the heart's color the same as the pink square's below it and vice-versa.

31 Repeat the previous step twice. You should have four movie clips in the library, namely filled heart 1, filled heart 2, filled heart 3 and filled heart 4. Don't forget to give them different Identifier names, too!

Change the design of the last two movie clips so that you have white hearts on colored background.

Aren't they cute? Let's move on!

Top of page

Writing the ActionScript that powers the banner

32 Return to the main scene. Make a new layer and call it actions. Select its first keyframe and press F9 to open the Actions panel. Put in the following code:

yRow = 0;
xRow = 0;
heartClipStorage = new Array();
function placeHearts() {
for (i=0; i<168; i++) {
clipNumber = Math.ceil(Math.random()*4);
clipName = ["heartClip"+clipNumber];
_root.attachMovie(clipName, "heart"+i, i);
newHeart = _root["heart"+i];
if ((i%14) == 0 && i != 0) {
yRow += 1;
}
if (xRow>12) {
xRow = 0;
} else if (i == 0) {
xRow = 0;
} else {
xRow += 1;
}
newHeart._x = (xRow*24);
newHeart._y = (yRow*23)+2;
heartClipStorage.push(newHeart);
}
}
placeHearts();
bannerButton.onRollOver = function() {
_root.onEnterFrame = function() {
numberOfClips = heartClipStorage.length;
randomClip = Math.round(Math.random()*numberOfClips);
clipToRemove = heartClipStorage[randomClip];
removeMovieClip(clipToRemove);
heartClipStorage.splice(randomClip, 1);
if (heartClipStorage.length == 0) {
delete _root.onEnterFrame;
}
};
};
bannerButton.onRollOut = function() {
heartClipStorage.splice(0);
delete _root.onEnterFrame;
xRow = 0;
yRow = 0;
placeHearts();
};
bannerButton.onRelease = function() {
getURL("http://www.flashexplained.com/", "_blank");
};

Test your movie. Roll over the banner. You should see the effect. Roll out and over again and you'll see the hearts appear and disappear randomly each time. Slick!

Top of page

The ActionScript code explained

Let me explain you how the code actually functions. First, you define the variables and an array that you will use later.

yRow = 0;
xRow = 0;
heartClipStorage = new Array();

Next comes the main function that places the hearts on the banner.

function placeHearts() {

The main loop is set to repeat itself 168 times. This is the number of hearts that have to be placed on the stage so that the banner is nicely filled. This isn't some random number, but the exact one that I calculated so that everything looks good.

If you plan to do this effect with some other banner size, like the 468 x 60 banner for example, you will have to calculate everything from the start and maybe even change the size of the heart movie clips.

for (i=0; i<168; i++) {

The clipNumber variable stores a random number from 1 to 4 (1 and 4 included). This is done with the Math.random() function, the result of which is rounded to the higher value with the Math.ceil() function. This number is used to randomly pull one of the four heart movie clips from the library.

clipNumber = Math.ceil(Math.random()*4);

Next, this number is concatenated (concatenation means adding text together in ActionScript) with the text "heartClip". The result is a random Identifier name that you gave all your movie clips before - heartClip1, heartClip2, etc.

clipName = ["heartClip"+clipNumber];

Then you tell Flash to attach one of these movie clips to the stage. Remember, this is done 168 times because of the loop.

The attachMovie() function (or method, as the functions are called in programmers' jargon) has three parameters. The first one, clipName, is the variable which holds the Identifier name by which the movie clip is found in the library (see explanation above).

The second one gives the movie clip a new Instance name (not Identifier!). This name will be used soon to manipulate the movie clip. This is again concatenation. The text "heart" is put together with i, which is in turn a number - the current loop iteration (the current turn of the loop). In this way, each movie clip will have a unique Instance name, which is a must.

The third one is the depth of the movie clip. Again, here you have the variable i, which is a number - different with each iteration of the loop. The depth has to be different. If you gave two movie clips the same depth, the latter one would overwrite the previous one. In other words, it would take its place.

_root.attachMovie(clipName, "heart"+i, i);

To make coding easier and to save space, the Instance name of the newly attached movie clip is stored in a variable called newHeart.

newHeart = _root["heart"+i];

The new if statement checks if the number of hearts (movie clips) in a row has reached 14, and if the current row is not the first row. This is done by using the modulo operator.

If these two conditions are met, then the variable yRow defined at the beginning of the code is increased by one. Later, this will make possible that the next 14 hearts are placed in a subsequent row.

if ((i%14) == 0 && i != 0) {
yRow += 1;
}

The following if/else if/else statement does a similar thing. It also checks if the current row has been filled with hearts, and if it has, the xRow variable is reset to zero, so that the subsequent row begins on the left as intended.

if (xRow>12) {
xRow = 0;
} else if (i == 0) {
xRow = 0;
} else {
xRow += 1;
}

The two lines that follow are setting the current movie clip's coordinates, with the aid of the xRow and yRow variables. The numbers 24 and 23 are there to move each movie clip by these distances so that it doesn't overlap with the next one.

newHeart._x = (xRow*24);
newHeart._y = (yRow*23)+2;

Now comes the array defined at the beginning of the ActionScript code. An array is a big variable that can store many values.

The method push() inserts a new value into an array. Here, it inserts the movie clip's name. This is necessary so that you can use this array later to randomly remove the movie clips when the user rolls out the mouse away from the banner.

The two curly braces close the big if loop and the placeHearts() function, respectively.

heartClipStorage.push(newHeart);
}
}

The function is written, but it is just lying there doing nothing if you don't call it. So here comes the function call. Once this function is executed, it will fill the banner with hearts.

placeHearts();

Remember that you gave the banner's button an Instance name at the beginning of this tutorial? Well, this is done in order to have all code in one place.

If you had put the code on the button directly, you'd have to select the button and open the Actions panel each time a change in code had to be done, or if something didn't function and you had to correct it.

This way, you have all your code conveniently placed on the main timeline.

So, you define what happens when the user rolls the mouse over the banner with the following function:

bannerButton.onRollOver = function() {

Inside this function, you call an onEnterFrame event. The code inside it will be executed as many times per second as your frame rate is set to. In this case, the fps equals 30. So, 30 times per second.

_root.onEnterFrame = function() {

This line stores the number of values in the heartClipStorage array in the numberOfClips variable.

numberOfClips = heartClipStorage.length;

The randomClip variable stores a random number from the variable mentioned just earlier.

randomClip = Math.round(Math.random()*numberOfClips);

This number is next used to pick a random movie clip name from the array.

clipToRemove = heartClipStorage[randomClip];

Next, the removeMovieClip() command removes this randomly picked movie clip from the banner.

removeMovieClip(clipToRemove);

The removed movie clip's name is deleted from the array, by using the splice() command.

heartClipStorage.splice(randomClip, 1);

The subsequent if statement checks if the array is completely empty. If this turns out to be true (it does once all the movie clips are removed), the onEnterFrame event is deleted.

if (heartClipStorage.length == 0) {
delete _root.onEnterFrame;
}
};
};

The rollOut event is defined - what happens when the user has pulled the cursor outside the banner.

bannerButton.onRollOut = function() {

Next, the array containing the movie clip names is emptied. Why, if this happened earlier? Well, the user might have rolled the mouse out of the banner before all the clips have been removed.

heartClipStorage.splice(0);

The onEnterFrame event is deleted and the xRow and yRow variables are put back to zero.

delete _root.onEnterFrame;
xRow = 0;
yRow = 0;

The placeHearts() function is called again to fill the banner with hearts again.

placeHearts();
};

Now comes the final event for the button. The onRelease event happens when the user clicks the banner. You can say that this is the most important funcion of the banner because it makes possible an important task: taking the user to the ad's intended site.

Inside is a classic getURL function. Replace the address with the one I put in here and you're done!

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

Top of page

Conclusion

See how a nice banner is made? The ActionScript code makes possible what would be almost completely impossible to do with animation only. And, it also leaves a lot of file size to be used for an image or an animation that is appearing beneath the hearts.

You can replace the hearts with flowers, colored squares, stars, or whatever you think looks good with a St. Valentine's Day ad banner. The effect will be different each time because of the random functions you just made. You can even animate the little heart movie clips to make the banner even more beautiful and appealing!

Download the zipped source FLA file for this banner.

Comments

Submit a comment