Please support lukamaras.com website:
All my tutorials are free, while hosting costs money.
The most viewed tutorials in April:
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:
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.
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. To see how this is done, continue to the next page of this lesson.
