Quick Tutorials

In this tutorial, you will use the basic drawing tools built into Flash MX in order to create a piece of vector-based artwork which will be used as a logo for a website.

Final Design can be seen in Figure 1:

1. Open Flash MX.

2. In order to maximise the screen layout (i.e. work areas) to suit your computer set up, from the menu click Window > Panel Sets.

Next, you should select the size you want your document to be (Flash defaults to 550 x 400 pixels).

3. From the menu click Modify > Document. In the dialogue box that appears, set the width to 250 pixels and the height to 300 pixels. We will not use the background color or frame rate settings in this tutorial – we are focusing only on drawing. Click OK.

In the steps to come, you will use the drawing tools provided in Flash. These can be accessed from the Toolbox Panel (see Figure 2).

4. You will need to use the Zoom and Hand Tools to navigate around the document as you work. Try them out.

5. At this point it would also be useful to familiarize yourself with the Stroke color and Fill color settings in the toolbox panel since these are also essential.

In order to successfully create graphic objects in Flash, the individual elements of the graphic must be suitably well organised. This requires the use of layers (layers were described in the lecture). It is essential that they are appropriately labelled i.e. use meaningful names.

6. In the Timeline panel, double click on the Layer 1 text (i.e. the default layer name) and rename the layer “Background” since this layer will be used to provide the background colour and objects for the logo.

7. Go to the Tools panel, click on the Rectangle tool.

8. In the Color Mixer Panel, click on the Stroke Color setting and access the pull-down swatch to select No Color (i.e. the white square with red diagonal line) using the swatch picker that appears (see Figure 3). This setting means that your shape will not have a visible border.

9. Click on the Fill Color (i.e. paint bucket) setting which is also in the Color Mixer panel. A large colour swatch appears, from which you should select the colour you want to use for the background of the logo (see Figure 4). You are now ready to start drawing on the stage.

10. In the Toolbox Panel, select the Rectangle tool. Draw a rectangle on the stage that covers the entire document thereby creating a background for the logo.

The logo has roughly two sections: the text and the latte cup. You now need to draw a rounded rectangle outline that creates a visual boundary for the latte cup.

11. Select the Rectangle tool in the Toolbox panel.

12. In the lower section of the Toolbox panel, labelled Options, there is a button that allows you to set the radius for the rounded corners of the rectangle (see Figure 5). Click this button and set the corner radius to 15 points.

13. In the Color Mixer select the fill and stroke colours that you want for your rounded rectangle. Also, set the width of the stroke outline (see Figure 6). This can be done in the Properties panel at the bottom of the work area (a suitable value to use would be 6).

14. Now you have established all the necessary settings, draw the rounded rectangle on the page taking up about 66% of the original size, placing it at the top (see Figure 1 for exact details of proportions and positioning).

15. Save your file.

16. Obviously, the latte cup is a more complex object to draw. To make things easier, you should create another layer in the Timeline called Cup using Insert > Layer from the Menu.

17. To prevent any changes being made to the Background layer lock it by clicking on the dot under the padlock icon for that layer in the Timeline.

Creating the latte cup may appear to require a level of artistic ability but the process can be broken down so that combining simple objects allows the creation of a more complex one.

18. In the Color Mixer panel, select a fill color for the latte cup and a stroke value of none.

19. Using the Oval tool in the Toolbox panel, draw a horizontal narrow ellipse just below the middle of the rounded rectangle.

20. Select the Arrow tool, click on the ellipse just drawn and hold down the ALT key whilst clicking and dragging to create a duplicate ellipse above it. Repeat this process again to place another copy below the selected ellipse (see Figure 8).

21. Select the middle ellipse with the Arrow tool and click Modify > Transform > Scale and Rotate.

22. Enter a value of 50% in the Scale field and then click OK.

23. Select all three ellipses using the Arrow tool. From the menu select Modify > Align > Center Vertical (see Figure 9).

The structure of the cup is now in place and the Pen tool can be used to finish it off.

24. It is helpful to use the rulers as a precise guide for your drawing so from the menu select View > Rulers.

25. Now click on the top ruler and drag down onto the drawing to create a guide.
A green line appears – this is a guide that can be used as a rule for measuring and aligning objects. Note, guides are only visible in the work area, they do not appear in the published file.

26. Ensure the guide bisects the middle of the bottom ellipse. Create another guide for the top ellipse (see Figure 10).

27. Select the Pen tool from the Toolbox panel and ensure the stroke color is the same as the one you used to draw the ellipses. Set the fill color to none.

28. Using the Pen tool, click on the top guide, slightly to the left of the top of the cup. Click and drag the mouse down and to the right – you should get a Pen point with handles as seen in Figure 11.

29. Next, click just to the left of the bottom guide, to the left of the bottom ellipse and drag slightly down and to the left, then release the mouse. You should end up with a slightly curved line that resembles the one in Figure 12.

31. Next, select the line using the right hand Arrow tool. This selects the individual pen points. Tweak the top and bottom to ensure they are correctly positioned. Then move the middle point (click and drag) to coincide with the middle ellipse (see Figure 13).

32. You need an exact duplicate of this line to make the right side of the cup but curved in the opposite direction. Select the line using the left hand Arrow tool and copy it (Control C), then paste (Control V) it back into the document. Select the copied line and from the menu choose Modify > Transform > Flip Horizontal.

33. Whilst it is selected, use the Arrow tool to move it into position on the right hand side of the cup.

34. Select the Paint Bucket tool from the Toolbox panel and set the Fill color to match the cup colour. Click inside the hollow areas of the cup to fill it with this colour. Save your file.

35. Create another ellipse using a cream fill colour which will form the head of the cup making it look full of latte (see Figure 14).

36. Select the Oval tool again and set the stroke color to the coffee cup colour and set the fill color to none.

37. Set the stroke value to 10. Draw an oval so that half of it overhangs the cup thus forming a handle. If you do not get the positioning right first time, use the Arrow tool to select it so that it can be moved into the correct position (see Figure 15).

38. Finally, use the Brush tool to draw a few simple curves to illustrate the steam coming off the latte. If you prefer, you can use the Pen tool to create a more precise curve.
39. Save your file.

40. Select the Type tool from the Toolbox panel. In the Properties panel at the bottom of the work area select the Century Gothic Bold font. Enter a type size of 30, select a text fill color (use the same colour that you used for the rounded rectangle stroke) and choose the Center Justify setting (see Figure 17).

41. Click the Type tool in the area underneath the rounded rectangle and type in the text “The Latte House” on a single line.

Now you should have the finished logo all ready to be published for use on a website.

42. You can preview your logo as it would appear in a stand alone Flash file. From the Control menu select Test Movie. Closing the window takes you back into work mode.

43. There are multiple ways to embed a Flash file into an HTML page, here we will look at just one.

Click on the Arrow tool and then in the Properties panel click on the button labelled Flash Player 6 (see figure 18) to bring up a dialogue box with the setting for publishing your work.

44. You can use the default values and just click the Publish button. This creates an HTML file with the logo embedded in it in the same directory as where you saved your .fla file. Load the HTML file in your browser to see how your logo looks.

You have now built an image and published it into a webpage using Macromedia Flash’s vector-based drawing tools. The resulting logo is a resolution-independent graphic that is approximately half the file size of what it would have been if created as a GIF file.

There are lots of things that you can do with the built in tools in Flash MX. Try practicing with the drawing tools, including those not demonstrated here.