Creating funny, dynamic dialogue balloons in Flash — part 3

Onwards! You will now see how easy it is to make different text appear for each character in your SWF movie when a user rolls her mouse over the invisible buttons.

Adding ActionScript to give life to the speech bubble

46. Lock the buttons layer. Make a new layer and call it actions. You can lock this one too, as this does not prevent you from entering ActionScript code inside it. Click on the first frame of the actions layer to select it for code input.

47. Select Window > Actions (shortcut key: F9) to open the Actions panel.

48. Enter the following code inside it:

var talk:String = new String();
var X:Number = new Number();
var Y:Number = new Number();

These first lines of your code create variables that will be used later. The talk variable will store inside itself the different texts that will be associated with each character. Hence its type — String — because it stores a text value.

The X and Y variables will store the coordinates for the speech bubble, which will be different for each character. They are of the Number type, because coordinates of a movie clip symbol in Flash are numerical values.

All three variables are just created (or defined, in programming jargon), but they have no values assigned to them yet.

49. Add this code right below the one you entered in previous step:

w1_btn.onRollOver = function() {
talk = "\nDream on dude, dream on.";
X = 200;
Y = 200;
talking(talk, X, Y);
};

This code orders Flash what to do when the user moves her mouse over the first button (w1_btn — the woman in the foreground). The first line tells Flash exactly that: for the button's onRollOver event, run a function. I won't delve into detail about that line here — you can find an extensive explanation of what an event, event handler and function are in my tutorial on the use of the if/else conditional statement in Flash.

Let me explain you the contents of the function that will be executed once the user places the cursor over the w1_btn button:

talk = "\nDream on dude, dream on.";
X = 200;
Y = 200;
talking(talk, X, Y);

As you can see, the first line assigns a value to the talk variable. Since this variable is of the String type (remember, it stores text), the value must be put between quotation marks: "this is some text".

Ok, so the first woman will say "Dream on dude, dream on." But what are the first two characters inside quotation marks: \n ? This combination of characters (a backslash followed by the letter n) is in ActionScript called a newline character. It serves to place all the characters that come after it one line below. Why would you want to do that? So that the text looks more centered inside the speech bubble. Look at the comparison below: the example on the left is the same text without the newline character added to it, the one on the right with it.

Next, the X and Y variables have values assigned to them. This will serve to place the speech bubble near the woman's head, as the images above show. How is this done? Let me show you how the coordinate system in Flash works. First, the distances are expressed in pixels. So X = 200 means 200 pixels to the right from the origin point and Y = 200 means 200 pixels below it. The origin point (0, 0) is situated on the top left corner of the stage. The figure below explains this clearly:

So, as I wrote before, a movie clip on stage is positioned in relation to its registration point. So when you want to position the speech bubble near the first woman's head, you must take that exact point into account. Remember when I said that you should position the speech bubble's registration point on its bottom right corner, to make positioning easier? Well, here is a visual representation of whjat happens when you order this movie clip to go to coordinates (200, 200) via ActionScript:

I arrived at the numbers 200, 200 by experimentation — my goal was to have the pointed "tail" of the speech bubble positioned near the woman's head. I tried with a few numbers until I achieved a good result.

Remember the last line inside the function? Here it is:

talking(talk, X, Y);

This is where these values are put to good use: they are sent to another function, via a function call. A function call is what you write when you want to execute a function, and you can pass variables to it, as is the case here. You will define the talking functrion later.

Why should you make Flash call another function? Because this makes possible for your ActionScript code to be more compact and modular. You will make each of the buttons call this function, instead of writing the same code that will be stored inside it for each button.

50. So just add this code after the existing one, to cover the functionality of every button in your movie:

m1_btn.onRollOver = function() {
talk = "Aaargh! How much more do I have to sit like this? I have cramps.";
X = 240;
Y = 180;
talking(talk, X, Y);
};
m2_btn.onRollOver = function() {
talk = "Pass me that bottle you're hiding behind you! I wanna get wasted too.";
X = 420;
Y = 200;
talking(talk, X, Y);
};
w2_btn.onRollOver = function() {
talk = "Nnngh... what a hangover. The bath didn't help!";
X = 330;
Y = 150;
talking(talk, X, Y);
};

As you can see, this is the code for the remaining three buttons (m1_btn, m2_btn and w2_btn). It has the same structure as the code for the first button: the only thing that changes is the text value that will be seen for each of the characters in the picture and the coordinates that will place the speech bubble in the appropriate position. After these values are set, the same function (talking) is being called.

51. Here comes the function that handles the position of the speech balloon and its contents. Place this code below the one you wrote so far:

function talking(talk:String, X:Number, Y:Number):Void {
bubble_mc.speech_txt.text = talk;
bubble_mc._x = X;
bubble_mc._y = Y;
}

In the first line, the variables that are passed to the function when a user moves her mouse over one of the buttons are written again. This has to be done and also, their type is specified. The ActionScript keyword Void signifies that this function does not return a value. It just does some things. Let me show you what these particular things are.

The first line inside the function,

bubble_mc.speech_txt.text = talk;

sets the text that will be displayed inside the bubble. It says that the text of the speech_txt text field, which is situated inside the bubble_mc movie clip should be the one found inside the talk variable. As you have wrote previously in your code, this variable changes value when the mouse is placed over each of the four buttons, to display a different text for different characters.

The remaining two lines set the position of the speech bubble (bubble_mc) via the movie clip's _x and _y properties. These properties define its horizontal and vertical position, respectively. They are set to equal the values of the X and Y variables. Again, these values are different for each button — 200, 200 for the first one, 240 and 180 for the second one and so on.

bubble_mc._x = X;
bubble_mc._y = Y;

52. Test your movie by pressing Ctrl+Enter to see this at work. Roll your mouse over the various characters and see how the position of the speech balloon changes and also the text inside it. Cool :).

But you may have noticed that when you roll your mouse off the buttons, the speech balloon tends to stay on its last position. Why is this happening? Well, because Flash does just what you told it to do — it cannot know by itself what should be done when the mouse is rolled away from the buttons, you have to define that.

53. Add this after the end of your current code:

w1_btn.onRollOut = w2_btn.onRollOut = m1_btn.onRollOut = m2_btn.onRollOut = function() {
removeBubble();
};

This compact piece of code effectively handles the onRollOut event for all the four buttons. The onRollOut event happens when the mouse is rolled out of the button's clickable area. Since you want to make the speech balloon disappear when this happens no matter which button is the user interacting with at that moment, it makes sense to group all these events inside the same chunk of code.

They will all make the same thing: call the removeBubble function. No values are passed to this function, because it will do one thing only: place the bubble outside the stage, away from the user's view.

54. Add the removeBubble function to your ActionScript code:

function removeBubble():Void {
bubble_mc._x = -300;
bubble_mc._y = -300;
}

As is evident in the function, the bubble_mc movie clip's coordinates are set to negative numbers, removing it effectively from view. You could write -500 if you wanted to — the important thing is to place it far enough so that it isn't seen by the user.

55. Test your movie again (Ctrl+Enter) and roll your mouse over and away from the buttons. Everything should function as intended now. That was easy and simple, yet the effect is so fun and can be used in many ways — the only limit is your imagination.

If you liked this tutorial, be sure to check out my other lessons on cool design in Flash!

Download the zipped source FLA file for the speech bubble effect (in Flash MX 2004 format).

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!