Flash Explained

In this easy lesson made for Flash MX 2004 and Flash 8, I will show you how to give custom speech bubbles to characters featured in a classical painting. Have a look at the Flash example below — roll your mouse over the women and men in the picture to get a clear idea of what you’re going to learn to make in this tutorial. Specifically, you will see:

• How to make a speech bubble in no time,
• How to create custom invisible buttons very quickly,
• How to write ActionScript code that will make the speech bubble appear and disappear,
• How to script a single function that will handle all buttons’ rollover events,
• How to use the coordinate system in Flash and more.

Preliminary steps

1 Open a new Flash document. Choose Modify > Document (shortcut key: Ctrl+J). Go to the Dimensions option and make sure that width is set to 550 px and height to 435 px. Click OK.

2 Right-click on the image below and choose "Save Picture as..." if you are using Internet Explorer or "Save Image as..." in FireFox. Save the image somewhere on your hard disk where you'll quickly find it.

Note: the image below has the full dimensions needed for this tutorial, I have resized it with HTML code just to save some page real estate :). By the way, the painting in question is The Luncheon on the Grass by Edouard Manet.

3 Back in Flash, choose File > Import > Import to Stage (Shortcut key: Ctrl+R). Find the image you saved in previous step (Manet-dejeuner.jpg), select it and click Open. The image will appear on your document's stage.

4 When an image is imported into Flash, it is selected by default. Now take a look below the stage (the left portion of Property inspector panel) and check if both of the image's coordinates equal zero (the X and Y values). If they don't match zero, make them so - type it in manually. This also means that a value should not be 0.5 for example, but 0.0.

There are two reasons for this: first, since you have made your document's dimensions match those of the image, it makes sense to position the image to 0,0 because your movie will look as it should, without any white space showing around the picture. Second, images that aren't placed on round coordinates (like X that is set to 05 or Y to 100.3 for example) don't render that good in your final SWF. They might turn out blurry in some cases.

5 Lock this layer (the only one so far) and call it image.

6 Make a new layer and call it bubble.

Top of page

Making the speech bubble

7 Select the Oval tool (O). Go to the Property inspector and make sure that the type of line is set to hairline. Select white as fill color. As for the stroke color, select a hue that is highly visible and in good contrast with the fill of the bubble: I chose red.

8 Click somewhere outside the stage and start dragging until you get an oval shape like this one:

The one I drew is 130 pixels wide and 80 pixels high.

9 Select the Line tool (N). Press and hold down Shift, then click and start dragging your mouse diagonally — you should get a 45-degree line. Draw it somewhere below the oval shape and make sure that it is running from upper left to bottom right, like the one seen in the image below.

10 Select the Selection tool (V). Bring your cursor near the middle of the line. You will see a small curve appear below your cursor, showing you that the line is ready to be manipulated with.

Click and start dragging to the left. The curve will begin to appear. Make a small curvatore (like above) and release your mouse.

11 Bring your cursor now near the curve's upper end. A right angle will show up below your cursor — this means that you can manipulate the curve's ending point. Click and start dragging left and below to make the curve less concave.

12 Still using the Selection tool, click on the curve to select it (see image on the left below).

Now press Ctrl+C to copy it. Press Ctrl+Shift+V (or choose Edite > Paste in Place). The curve has just been pasted into place, meaning on the precisely same position as the original one, only over it. Now don't click anywhere because if you do that you will unselect the newly made curve and it will merge with the original one.

Just press and hold Shift and hit the Right arrow key on your keyboard a few times to move the new curve away from the original (see image on the right below).

13 Click on an empty part of the stage to unselect the new curve.

14 Use the Selection tool (V) in the same way that you did in step 11 to modify the new curve. It should be a little more straight than the first one, seen right next to it in both images below.

15 Click on the new curve to select it. Make sure that the Snap to Object option (View > Snapping > Snap to Objects ) is turned on.

Bring your cursor near the curve's bottom end. An arrowed cross will appear. Click and drag the curve over to the original one. Aim for the bottom point of the other curve. Once the curve is ready to snap into place, a bold black circle will appear. Release your mouse. Voila'! The two curves are now joined together.

16 Double-click on either curve now to select them both. This should happen, because you merged them into one single line shape in the previous step.

17 Using the arrow keys on your keyboard move the curved shape up until you reach the oval balloon shape. Place the curves so that they both overlap with the oval a little bit, near their top, like this:

18 Click anywhere on stage to unselect the curves.

19 Click once on the small part of the curve that is inside the oval shape to select it. Hit Backspace or Delete to erase it.

20 Erase the other curve's part that sticks out and also the part of the oval between the two curves' top points. Your final result will look like this:

21 Select the Paint Bucket tool (K) and click on the small part between the two curves to fill it up with color (which should be white).

22 Double-click on any part of the speech bubble's outline to select it. All of it should be selected, because all curves are joined together. Press Delete to erase it. Your speech bubble should look like the one shown in the image below (the one on the right).

Great! You will now convert this speech bubble into a movie clip symbol and add a dynamic text field to it to enable the display of speech inside it.

Top of page

Enabling the speech bubble to display text

23 Click on the speech bubble shape with the Selection tool (V) to select it.

24 Select Modify > Convert to Symbol. In the window that appears, select Movie clip as type. Call it speech bubble. Now comes an important option: the Registration point of your new movie clip. Make sure that you have selected the lower right square in the Registration point grid (see image below). Click OK.

This is important because selecting this particular point will make it easier for you to position the speech bubble via ActionScript later. In Flash, the registration point of a symbol (be it a button or a movie clip) is used in ActionScript to retrieve and set its position inside your SWF movie.

You may see this registration point if you look at your new movie clip on the stage (marked with red in the following image):

25 Double-click the speech bubble movie clip on the stage to enter inside it. Flash notifies you that you are working inside a movie clip symbol by displaying this information above the stage.

26 Call the only layer inside the movie clip bubble and lock it. Make a new layer above it and call it text.

27 Select the Text tool (T). In the Property inspector, select the following options (the numbers in the image below follow those in the list, in clockwise direction):

1. Select Dynamic text in the menu on the left.
2. Select the _sans font.
3. Put the font's size to 16.
4. Choose black as colour.
5. Select centered alignment.
6. Select Use device fonts from the rendering options menu. This, in conjunction with the _sans font type you selected will make the text look similar on Windows, Mac and Linux operating systems. And also you won't have to embed any font information in your SWF movie, which will make it lighter.
7. Make sure the border around the text is turned off.
8. The Selectable option should be left switched off too.
9. Select the Multiline option for your text field.

28 Click over the bubble and drag your mouse, creating a text field. Hit Esc on your keyboard to exit the text field. It should cover most of the speech bubble, like this:

If your text field is not positioned as the one in the image, just move it around with arrow keys until you get it right.

29 With the text field still selected, go back to the Property inspector. A new field has appeared after you have created the text field: the Instance name option. Click inside it, type speech_txt and hit Enter to confirm.

The Instance name enables you to issue commands to the text field via ActionScript. Without it, it is as good as dead.

30 Lock the text layer and click the Scene 1 link to return to the main timeline.

31 Click on the speech bubble movie clip once to select it. Go to Property inspector to give it an instance name: call it bubble_mc. You may also call it dotcombubble_mc if you wish so :).

Fine! You wil now proceed to create the buttons for the characters in the painting. This is really easy, quick and fun to do! Before you continue, I just want to tell you why the speech bubble was created outside the stage. This is simple: once the movie loads, the user must not see the speech bubble. It should only appear once she moves her mouse over one of the buttons. This also adds to the element of surprise — before seeing the speech bubbles, the scene looks only like a simple representation of the painting.

Top of page

Creating the invisible buttons

32 Lock the bubble layer and create a new one and call it buttons.

33 Select the Pencil tool (Y). Just like you did for the outline (stroke) of the Oval tool, make sure that the type of line is set to hairline (see Property inspector). And do choose a highly visible colour which will make your work much easier. Go for red, it has the best contrast in relation to the colours used in the painting.

In the Tools panel, make sure to select the Ink option for the pencil. This will enable you to draw as naturally as possible, without having Flash straighten out your lines and curves. Also, leave the Object drawing option turned off — the little blue orb inside a square found at the left side of the pencil drawing options.

34 Click and start dragging your mouse to make the outline around the woman that you see in the foreground. It doesn't have to be perfect, but try to stick to body contours.

35 Draw the whole contour and try making sure that it is made of one continuous line. If there is gap of a pixel or two, it doesn't matter much — you'll see soon why.

36 Select the Paint bucket tool (K). Choose any colour that you like for the fill. Go to the bottom of the Tools panel (the Options area) and click on the Gap size button. A menu will open — select the Close Large Gaps option. With this option selected, even if you have gaps in the outline, they will be closed by the fill.

37 Click somewhere inside the red body outline and it will fill up.

38 Using the Selection tool (V) select the whole shape (the outline and the fill).

39 Select Modify > Convert to Symbol (shortcut key: F8). This time, select Button as type, call it woman 1 and click OK. The registration point is unimportant here: you may leave it on the previous position or choose another one, it's up to you.

40 Double-click on the woman 1 button on the stage to enter inside it. You'll see now how easy it is to make an invisible button — it's done in a snap!

41 Click on the keyframe in the Up state and drag it over to the Hit state. Release the mouse button. And that's it! You have just made an invisible button! The sequence below shows this simple operation.

Now, you may ask, how is this an invisible button? Simply because the first three states (Up, Over and Down) correspond with the user interacting with a button (no interaction, rollover state, clicked state, respectively). The last one, Hit, serves only to define the clickable area of a button symbol. So when this state is the only one with a keyframe inside it, the button is clickable but invisible. Nothing easier than that!

42 Click on the Scene 1 link above the button timeline to return to the main stage.

43 Select the invisible button you just made by clicking once on it. You have certainly noticed a change: invisible buttons are represented inside Flash workspace as indigo-tinted shapes.

44 Go to the Property inspector an give an Instance name to this button: call it w1_btn.

45 You should now repeat steps 34 through 44 (including) to create three more invisible buttons, for each of the three remaining characters in the picture.

Don't be confused by the blue rectangle that delimits the invisible button you have made. You can draw freely the other ones, without worrying that they will overlap: Just deselect the current button and draw the other ones. The blue rectangles surrounding your button symbols don't matter now. What's important is that the outlines and their respective fills do not overlap.

The three button symbols that remain to be created should be called man 1, woman 2 and man 2. Their respective Instance names should be m1_btn, w2_btn and m2_btn. Here's the image that explains it all:

If you want to see how the Hit area for each button looks like, here they are, more visible:

Note that I have reduced the colours in the image above just to reduce its file size.

You will now see how to script your Movie to make the speech bubble come to life.

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.

Top of page

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 Flash design lessons! If you are into ActionScript 3.0 and want to see the bubble follow your cursor, check out the Dynamic speech bubble snippet.

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

Comments

Submit a comment