Please support lukamaras.com website:
All my tutorials are free, while hosting costs money.
The most viewed tutorials in April:
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):
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.
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.
Once you have finished making these, proceed to the third page of this tutorial where I will show you how to script your Movie to make the speech bubble come to life. No need to rush, I am waiting for you there! ;-)
